@charset "utf-8";
/* CSS Document */

/*--------------------
基本設定
---------------------*/


/*--------------------
メインイメージ
---------------------*/

#main_image {
	width:100%;
	height:100vh;
	box-sizing: border-box;
	padding:80px 0 0 0;
	display:flex;
}
@media screen and (max-height: 800px) and (min-width: 1000px) {
  #main_image {
	  padding:60px 0 0 0;
  }
}
@media screen and (max-width: 1210px) {
  #main_image {
	  padding:60px 0 0 0;
  }
}
@media screen and (max-width: 1000px) {
  #main_image {
	  flex-direction: column;
	  height:100vh;
	  box-sizing: border-box;
  }
}
@media screen and (max-width: 640px) {
  #main_image {
	  display: block;
	  height:100%;
	  box-sizing: border-box;
	  padding:0px 0 0 0;
	  margin-bottom:0px;
  }
}

#main_image .main_photo {
	width:50%;
	position: relative;
	animation  : textFade1 1s;
}
@media screen and (max-width: 1000px) {
  #main_image .main_photo {
	  width:100%;
	  height: 60vh;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_photo {
	  width:100%;
	  height: 60vh;
	  box-sizing: border-box;
	  padding-top:50px;
  }
}
@media screen and (max-width: 380px) {
  #main_image .main_photo {
	  height: 55vh;
  }
}


#main_image .main_photo .photo_box {
	position: absolute;
	top:3%;
	left:8%;
	width:92%;
	height:94%;
	background-size: cover;
	background-position: center center;
}
@media screen and (min-width: 1800px) {
  #main_image .main_photo .photo_box {
	  width:800px;
	  left:auto;
	  right:0;
  }
}
@media screen and (max-height: 800px) and (min-width: 1000px) {
  #main_image .main_photo .photo_box {
		top:1%;
		left:10%;
		height:98%;
		width:86%;
  }
}
@media screen and (max-width: 1000px) {
  #main_image .main_photo .photo_box {
		top:0%;
		left:0;
		right:auto;
		width:92%;
		height:100%;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_photo .photo_box {
		width:90%;
		top:50px;
		height:90%;
  }
}

#main_image .main_photo .text_en {
	position: absolute;
	bottom:8px;
	left:8px;
	writing-mode: vertical-rl;
	font-size:12px;
	letter-spacing: 1px;
	animation  : textFade4 7.5s;
}
@media screen and (max-width: 1000px) {
  #main_image .main_photo .text_en {
	  top:4px;
	  bottom:auto;
	  left:auto;
	  right:2px;
	  font-size:10px;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_photo .text_en {
	  top:56px;
  }
}

#main_image .main_text {
	width:50%;
	position: relative;
}
@media screen and (min-width: 1800px) {
  #main_image .main_text {
	  width:800px;
  }
}
@media screen and (max-width: 1000px) {
  #main_image .main_text {
	  width:100%;
	  height: 40vh;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_text {
	  width:100%;
	  height: 40vh;
  }
}
@media screen and (max-width: 380px) {
  #main_image .main_text {
	  height: 45vh;
  }
}


#main_image .main_text .text_box {
	display: inline-block;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	max-width:360px;
	max-height:220px;
	z-index:3;
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .text_box {
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_text .text_box {
	  padding:0 40px 40px 40px;
	  max-height:180px;
	  max-height: fit-content;
	  block-size: fit-content;
  }
}

#main_image .main_text .text_box h2 {
	font-size:24px;
	font-weight:bold;
	margin:0 0 30px 0;
	animation  : textFade2 3.5s;
}
@media screen and (max-width: 640px) {
  #main_image .main_text .text_box h2 {
	  font-size:20px;
	  margin:0px 0 10px 0;
  }
}

/*文字の後ろにカーソルを追加*/
#main_image .main_text .text_box h2::after {
  content: "|";
  color: #222;
  animation: blink 1s infinite; /*カーソル点滅アニメーション*/
}

.main_image_stop .main_text .text_box h2::after {
	display: none;
}

/*カーソル点滅アニメーションの定義*/
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }    
}

@keyframes textFade1 {
   0% { opacity: 0; }
  60% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes textFade2 {
   0% { opacity: 0; }
  99% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes textFade3 {
   0% { opacity: 0;  }
  80% { opacity: 0;  }
  100% { opacity: 1; }
}

@keyframes textFade4 {
   0% { opacity: 0; transform: translate(0,10px); }
  80% { opacity: 0; }
  90% { opacity: 0; transform: translate(0,10px); }
  100% { opacity: 1; transform: translate(0,0px); }
}


#main_image .main_text .text_box p {
	animation  : textFade4 6.5s;
}
@media screen and (max-width: 640px) {
  #main_image .main_text .text_box p {
	  font-size:13px;
	  line-height:1.6em;
  }
}


@media screen and (max-width: 640px) {
  #main_image .main_text .text_box p br {
	  display: none;
  }
}

#main_image .main_text .small_photo1 , #main_image .main_text .small_photo2 , #main_image .main_text .small_photo3 {
	position: absolute;
	z-index:2;
}

#main_image .main_text .small_photo1 .photo , #main_image .main_text .small_photo2 .photo , #main_image .main_text .small_photo3 .photo {
	background-size: cover;
	background-position: center center;
}
@media screen and (max-width: 640px) {
  #main_image .main_text .small_photo1 .photo , #main_image .main_text .small_photo2 .photo , #main_image .main_text .small_photo3 .photo {
  }
}

#main_image .main_text .small_photo1 {
	width:37%;
	top:9%;
	left:9%;
	animation  : textFade1 2s;
}
@media screen and (min-width: 1800px) {
  #main_image .main_text .small_photo1 {
	  width:320px;
  }
}
@media screen and (max-height: 1000px) and (min-width: 1000px) {
  #main_image .main_text .small_photo1 {
	  width:32%;
	  top:6%;
  }
}
@media screen and (max-height: 900px) and (min-width: 1000px) {
  #main_image .main_text .small_photo1 {
	  width:26%;
	  top:4%;
  }
}
@media screen and (max-height: 700px) and (min-width: 1000px) {
  #main_image .main_text .small_photo1 {
	  width:22%;
	  top:4%;
  }
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .small_photo1 {
	  width:30%;
	  top:-30%;
	  left:auto;
	  right:10px;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_text .small_photo1 {
	  width:38%;
	  top:-30%;
	  left:auto;
	  right:10px;
  }
}
@media screen and (max-height: 500px) and (min-width: 1000px) {
  #main_image .main_text .small_photo1 {
	  display: none;
  }
}

#main_image .main_text .small_photo1 .photo {
	padding-top:73%;
	/*
	animation: small_photo1_anime 30s ease-in-out infinite;
	animation-fill-mode: forwards; 
	 animation-delay: 10s;
	 */
}

/*
@keyframes small_photo1_anime {
  0% {
    background-image: url(../images/main_image_s1_1.jpg);
  }
  30% {
    background-image: url(../images/main_image_s1_2.jpg);
  }
  60% {
    background-image: url(../images/main_image_s1_3.jpg);
  }
  100% {
    background-image: url(../images/main_image_s1_3.jpg);
  }
}
*/

#main_image .main_text .small_photo2 {
	width:20%;
	bottom:24%;
	left:14%;
	animation  : textFade1 3s;
}
@media screen and (min-width: 1800px) {
  #main_image .main_text .small_photo2 {
	  width:180px;
  }
}
@media screen and (max-height: 600px) {
  #main_image .main_text .small_photo2 {
	  width:12%;
	  bottom:14%;
	  left:8%;
  }
}
@media screen and (max-height: 1000px) and (min-width: 1000px) {
  #main_image .main_text .small_photo2 {
	  width:18%;
	  bottom:18%;
  }
}
@media screen and (max-height: 900px) and (min-width: 1000px) {
  #main_image .main_text .small_photo2 {
	  width:18%;
	  bottom:8%;
	  left:8%;
  }
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .small_photo2 {
	  width:20%;
	  bottom:20px;
	  left:20px;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_text .small_photo2 {
	  width:26%;
	  bottom:auto;
	  top:-12%;
	  left:6%;
  }
}
@media screen and (max-height: 500px) and (min-width: 1000px) {
  #main_image .main_text .small_photo2 {
	  display: none;
  }
}

#main_image .main_text .small_photo2 .photo {
	padding-top:67%;
}

#main_image .main_text .small_photo3 {
	width:24%;
	bottom:9%;
	right:6%;
	animation  : textFade1 4s;
}
@media screen and (min-width: 1800px) {
  #main_image .main_text .small_photo3 {
	  width:220px;
  }
}
@media screen and (max-height: 600px) {
  #main_image .main_text .small_photo3 {
	  width:16%;
	  bottom:4%;
	  right:6%;
  }
}
@media screen and (max-height: 900px) and (min-width: 1000px) {
  #main_image .main_text .small_photo3 {
	  width:20%;
	  bottom:6%;
	  right:6%;
  }
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .small_photo3 {
	  width:14%;
	  bottom:12%;
	  right:8%;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_text .small_photo3 {
	  width:16%;
	  bottom:14%;
	  right:4%;
  }
}
@media screen and (max-height: 500px) and (min-width: 1000px) {
  #main_image .main_text .small_photo3 {
	  display: none;
  }
}

#main_image .main_text .small_photo3 .photo {
	padding-top:87.5%;
}

#main_image .main_text .text_en {
	position: absolute;
	top:12px;
	right:8px;
	writing-mode: vertical-rl;
	font-size:12px;
	letter-spacing: 1px;
	animation  : textFade4 7.5s;
}
@media screen and (min-width: 1800px) {
  #main_image .main_text .text_en {
	  display: none;
  }
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .text_en {
	  top:auto;
	  bottom:4px;
	  left:2px;
	  right:auto;
	  font-size:10px;
	  display: none;
  }
}

#main_image .main_text .text_bg {
	color:#eee;
	position: absolute;
	top:10%;
	left:56%;
	writing-mode: vertical-rl;
	font-size:3.4vw;
	font-size:50px;
	line-height:1.4em;
	letter-spacing: 1px;
	font-weight:bold;
	height:95vh;
	z-index:1;
	white-space: nowrap;
	animation  : textFade4 7.5s;
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .text_bg {
		font-size:24px;
		font-weight:bold !important;
		height:80vh;
		top:14%;
		left:56%;
  }
}
@media screen and (max-width: 640px) {
  #main_image .main_text .text_bg {
		font-size:5vw;
		font-weight:bold !important;
		height:60vh;
		top:8%;
		left:48%;
  }
}

#main_image .main_text .text_bg::selection , #main_image .main_text .text_bg span::selection {
	background-color: transparent;
}

#main_image .main_text .text_bg span {
	margin-top:26%;
}
@media screen and (max-width: 1000px) {
  #main_image .main_text .text_bg span {
		margin-top:10%;
		font-weight:bold !important;
  }
}

/*--------------------
事例
---------------------*/

#top_works ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
@media screen and (max-width: 1000px) {
  #top_works ul {
	  grid-template-columns: repeat(2, 1fr);
	  grid-template-rows: repeat(4, 1fr); 
  }
}
@media screen and (max-width: 640px) {
  #top_works ul {
	  display: block;
  }
}

#top_works ul .grid1 {
	grid-area: 1 / 1 / 3 / 3;
	padding:0 20px 0px 0px;
	transform: translateX(-40px); 
	-webkit-transform: translateX(-40px);
	transition: 0.8s 1.0s ease-in-out;
	-webkit-transition: 0.8s 1.0s ease-in-out;
}
@media screen and (max-width: 1000px) {
  #top_works ul .grid1 {
	  grid-area: 1 / 1 / 2 / 3;
	  padding:0 0px 40px 0px;
  }
}
@media screen and (max-width: 640px) {
  #top_works ul .grid1 {
	  padding:0 0px 60px 0px;
	  margin-left:-4%;
	  transform: translateX(10px); 
	  -webkit-transform: translateX(10px);
	  transition: 0.8s 1.0s ease-in-out;
	  -webkit-transition: 0.8s 1.0s ease-in-out;
  }
}

#top_works ul .grid2 {
	grid-area: 1 / 3 / 2 / 4;
	padding:0 10px 0px 10px;
	transform: translateX(40px); 
	-webkit-transform: translateX(40px);
	transition: 0.8s 1.4s ease-in-out;
	-webkit-transition: 0.8s 1.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  #top_works ul .grid2 {
	  grid-area: 2 / 1 / 3 / 2;
	  padding:0 10px 40px 0px;
  }
}
@media screen and (max-width: 640px) {
  #top_works ul .grid2 {
	  padding:0 0px 60px 0px;
	  margin-right:-4%;
	  transform: translateX(-10px); 
	  -webkit-transform: translateX(-10px);
	  transition: 0.8s 1.0s ease-in-out;
	  -webkit-transition: 0.8s 1.0s ease-in-out;
  }
}

#top_works ul .grid3 {
	grid-area: 2 / 4 / 3 / 5;
	margin-top:-30%;
	padding:0 0px 0px 20px;
	transform: translateX(40px); 
	-webkit-transform: translateX(40px);
	transition: 0.8s 1.6s ease-in-out;
	-webkit-transition: 0.8s 1.6s ease-in-out;
}
@media screen and (max-width: 1000px) {
  #top_works ul .grid3 {
	   grid-area: 2 / 2 / 3 / 3;
	   margin-top:30%;
	   padding:0 0px 0px 10px;
  }
}
@media screen and (max-width: 640px) {
  #top_works ul .grid3 {
	  grid-area: 1 / 1 / 1 / 1;
	  padding:0 0px 60px 0px;
	  margin-top:0%;
	  margin-left:-4%;
	  transform: translateX(10px); 
	  -webkit-transform: translateX(10px);
	  transition: 0.8s 1.0s ease-in-out;
	  -webkit-transition: 0.8s 1.0s ease-in-out;
  }
}

#top_works ul .grid4 {
	grid-area: 3 / 3 / 5 / 5;
	padding:0 0px 0px 20px;
	transform: translateX(40px); 
	-webkit-transform: translateX(40px);
	transition: 0.8s 1.0s ease-in-out;
	-webkit-transition: 0.8s 1.0s ease-in-out;
}
@media screen and (max-width: 1000px) {
  #top_works ul .grid4 {
	  grid-area: 3 / 1 / 4 / 3;
	  padding:0 0px 40px 0px;
  }
}
@media screen and (max-width: 640px) {
  #top_works ul .grid4 {
	  grid-area: 1 / 1 / 1 / 1;
	  padding:0 0px 60px 0px;
	  margin-right:-4%;
	  transform: translateX(-10px); 
	  -webkit-transform: translateX(-10px);
	  transition: 0.8s 1.0s ease-in-out;
	  -webkit-transition: 0.8s 1.0s ease-in-out;
  }
}

#top_works ul .grid5 {
	grid-area: 3 / 2 / 4 / 3;
	padding:0 10px 0px 10px;
	transform: translateX(-40px); 
	-webkit-transform: translateX(-40px);
	transition: 0.8s 1.4s ease-in-out;
	-webkit-transition: 0.8s 1.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  #top_works ul .grid5 {
	  grid-area: 4 / 1 / 5 / 2;
	  padding:0 10px 40px 0px;
  }
}
@media screen and (max-width: 640px) {
  #top_works ul .grid5 {
	  grid-area: 1 / 1 / 1 / 1;
	  padding:0 0px 60px 0px;
	  margin-left:-4%;
	  transform: translateX(10px); 
	  -webkit-transform: translateX(10px);
	  transition: 0.8s 1.0s ease-in-out;
	  -webkit-transition: 0.8s 1.0s ease-in-out;
  }
}

#top_works ul .grid6 {
	grid-area: 4 / 1 / 5 / 2;
	margin-top:-30%;
	padding:0 20px 0px 0px;
	transform: translateX(-40px); 
	-webkit-transform: translateX(-40px);
	transition: 0.8s 1.6s ease-in-out;
	-webkit-transition: 0.8s 1.6s ease-in-out;
} 
@media screen and (max-width: 1000px) {
  #top_works ul .grid6 {
	  grid-area: 4 / 2 / 5 / 3;
	  padding:0 0px 0px 10px;
	  margin-top:30%;
  }
}
@media screen and (max-width: 640px) {
  #top_works ul .grid6{
	  grid-area: 1 / 1 / 1 / 1;
	  padding:0 0px 60px 0px;
	  margin-top:0%;
	  margin-right:-4%;
	  transform: translateX(-10px); 
	  -webkit-transform: translateX(-10px);
	  transition: 0.8s 1.0s ease-in-out;
	  -webkit-transition: 0.8s 1.0s ease-in-out;
  }
}


#top_works ul  li {
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  #top_works ul  li {
	  display: block;
  }
}

#top_works ul  li a {
	display: block;
	text-decoration: none;
}

#top_works ul  li  a .photo {
	margin:0 0 20px 0;
	padding-top:83%;
	background-position: center center;
	background-size: cover;
	position: relative;
}

#top_works ul  li  a .photo img {
	width:100%;
	height:100%;
	object-fit: cover;
}

#top_works ul  li  a .photo div {
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	  transition: 0.2s 0s ease-in-out;
	  -webkit-transition: 0.2s 0s ease-in-out;
}

#top_works ul li a .photo .photo_img1 {
	opacity: 1;
}

#top_works ul li a .photo .photo_img2 {
	opacity: 0;
}

#top_works ul  li  a:hover .photo_img2 {
	opacity: 1;
}

#top_works ul  li  a h3 {
	font-size:15px;
	font-weight:bold;
	margin:0 0 15px 0;
	  transition: 0.2s 0s ease-in-out;
	  -webkit-transition: 0.2s 0s ease-in-out;
}
@media screen and (max-width: 640px) {
  #top_works ul  li  a h3 {
	  width:90%;
	  margin:0 auto 15px auto;
  }
}

#top_works ul  li  a h4 {
	font-size:14px;
	font-weight:normal;
	  transition: 0.2s 0s ease-in-out;
	  -webkit-transition: 0.2s 0s ease-in-out;
}
@media screen and (max-width: 640px) {
  #top_works ul  li  a h4 {
	  width:90%;
	  margin:0 auto 0px auto;
  }
}

#top_works ul  li  a:hover h3 , #top_works ul  li  a:hover h4 {
	opacity: 0.8;
}

/*--------------------
サービス
---------------------*/

#service_section {
	padding-top:0;
}

#service_section .contents {
	position: relative;
}

#service_section .page_subtitle {
	margin:0 0 80px 0;
	position: absolute;
	top:-24px;
	left:0;
}

.top_service {
	font-size:0;
	padding:140px 0 40px 0;
}
@media screen and (max-width: 640px) {
  .top_service {
		padding:100px 0 40px 0;
  }
}

.top_service .service1 {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
	box-sizing: border-box;
	width:100%;
	padding:0 16% 0 0;
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 1.0s ease-in-out;
	-webkit-transition: 0.8s 1.0s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .top_service .service1 {
	  	display: block;
		padding:0 0% 0 0;
		transform: translateX(10px); 
		-webkit-transform: translateX(10px);
  }
}
@media screen and (max-width: 640px) {
  .top_service .service1 {
	  	display: block;
		padding:0 0 40px 0;
		width:96%;
		margin:0 auto;
  }
}

.top_service .service2 {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
	box-sizing: border-box;
	padding:0% 0% 0 10%;
	margin-top:-5%;
	margin-bottom:5%;
	vertical-align: top;
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 1.8s ease-in-out;
	-webkit-transition: 0.8s 1.8s ease-in-out;
}
@media screen and (max-width: 1200px) {
  .top_service .service2 {
		margin-top:0px;
		margin-bottom:0;
  }
}
@media screen and (max-width: 1000px) {
  .top_service .service2 {
	  	display: block;
		padding:0% 0% 0 0%;
		transform: translateX(-10px); 
		-webkit-transform: translateX(-10px);
  }
}
@media screen and (max-width: 640px) {
  .top_service .service2 {
	  	display: block;
		padding:0 0 0 0;
		width:96%;
		margin:0 auto;
  }
}

.top_service .photo {
}
@media screen and (max-width: 1000px) {
  .top_service .photo {
  }
}
@media screen and (max-width: 640px) {
  .top_service .photo {
  }
}

.top_service .service1 .photo {
	width:50%;
	margin-left:-4%;
}
@media screen and (max-width: 1000px) {
  .top_service .service1 .photo {
	  width:60%;
	  margin:0 0 40px -5%;
  }
}
@media screen and (max-width: 640px) {
  .top_service .service1 .photo {
	  width:90%;
	  margin:0 0 20px -5%;
  }
}

@media screen and (max-width: 640px) {
  .top_service .service1 .photo img {
	  max-width:100%;
  }
}


.top_service .service2 .photo {
	width:60%;
	margin-right:-4%;
}
@media screen and (max-width: 1000px) {
  .top_service .service2 .photo {
	  width:80%;
	  margin:0 -5% 40px auto;
  }
}
@media screen and (max-width: 640px) {
  .top_service .service2 .photo {
	  width:100%;
	  margin:0 -5% 20px auto;
  }
}

.top_service .text_box {
	max-width:360px;
}

.top_service .service1 .text_box {
}
@media screen and (max-width: 1000px) {
  .top_service .service1 .text_box {
	  max-width:70%;
	  margin:0 0 60px 0;
  }
}
@media screen and (max-width: 640px) {
  .top_service .service1 .text_box {
	  max-width:95%;
	  margin:0 auto 20px 0;
  }
}

.top_service .service2 .text_box {
}
@media screen and (max-width: 1000px) {
  .top_service .service2 .text_box {
	  max-width:70%;
	  margin:0 0 60px auto;
  }
}
@media screen and (max-width: 640px) {
  .top_service .service2 .text_box {
	  max-width:95%;
	  margin:0 0 40px auto;
  }
}

.top_service h3 {
	font-size:24px;
	line-height:1.4em;
	font-weight:bold;
	margin:0 0 40px 0;
}
@media screen and (max-width: 640px) {
  .top_service h3 {
	  font-size:20px;
	  margin:0 0 20px 0;
  }
}

.top_service p {
	font-size:14px;
	line-height:1.8em;
}
@media screen and (max-width: 640px) {
  .top_service p {
  }
}


/*--------------------
費用
---------------------*/

.top_price {
	display: flex;
	padding-bottom:60px;
}
@media screen and (max-width: 1000px) {
  .top_price {
	  display: block;
  }
}

.top_price .photo {
	width:50%;
	transform: translateX(10px); 
	-webkit-transform: translateX(10px);
	transition: 0.8s 0.8s ease-in-out;
	-webkit-transition: 0.8s 0.8s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .top_price .photo {
	  display: block;
	  width:70%;
	  margin:0 0 60px 0;
  }
}
@media screen and (max-width: 640px) {
  .top_price .photo {
	  width:90%;
	  margin:0 0 30px 0;
  }
}

.top_price .text {
	width:50%;
	position: relative;
	transform: translateX(-10px); 
	-webkit-transform: translateX(-10px);
	transition: 0.8s 1.4s ease-in-out;
	-webkit-transition: 0.8s 1.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .top_price .text {
	  display: block;
	  width:100%;
  }
}
@media screen and (max-width: 640px) {
  .top_price .text {
  }
}

.top_price .text .text_box {
	position: absolute;
	top:20%;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	max-width:370px;
	-webkit-transition: 0.8s 1.8s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .top_price .text .text_box {
	  position: static;
	  max-width:70%;
  }
}
@media screen and (max-width: 640px) {
  .top_price .text .text_box {
	  max-width:90%;
	  margin-left:auto;
	  margin-right:0;
  }
}

.top_price .text h3 {
	font-size:24px;
	line-height:1.4em;
	font-weight:bold;
	margin:0 0 40px 0;
}
@media screen and (max-width: 640px) {
  .top_price .text h3 {
	  font-size:20px;
	  margin:0 0 20px 0;
  }
}

.top_price .text p {
	font-size:14px;
	line-height:1.8em;
	margin:0 0 40px 0;
}



/*--------------------
デザイナー
---------------------*/

.list_column {
	  margin: 0px 0px 0px auto;
	  display: flex;
}
@media screen and (min-width: 1400px) {
  .list_column {
		width:95%;
		margin:0 0 0 auto;
  }
}
@media screen and (min-width: 1600px) {
  .list_column {
	  max-width:1400px;
	  width:auto;
	  margin:0 auto;
  }
}
@media screen and (max-width: 1400px) {
  .list_column {
		width:95%;
		margin:0 0 0 auto;
  }
}
@media screen and (max-width: 1000px) {
  .list_column {
	  display: block;
  }
}
@media screen and (max-width: 640px) {
  .list_column {
  }
}

.list_column .page_subtitle {
	width:25%;
}
@media screen and (max-width: 1400px) {
  .list_column .page_subtitle {
	  padding:0 0 0 0px;
	  box-sizing: border-box;
  }
}
@media screen and (max-width: 1000px) {
  .list_column .page_subtitle {
		width:100%;
		margin:0 auto 20px auto;
		padding:0 0 0 0px;
  }
}
@media screen and (max-width: 640px) {
  .list_column .page_subtitle {
	  	width:95%;
		margin:0 0 20px 0;
  }
}

.list_column .list_column_slide, .list_column .list_column_slide2 {
	width:75%;
	transform: translateY(0px); 
	-webkit-transform: translateY(0px);
	transition: 0.8s 1.0s ease-in-out;
	-webkit-transition: 0.8s 1.0s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .list_column .list_column_slide, .list_column .list_column_slide2 {
		width:100%;
		margin:0 0px 0px 0;
		box-sizing: border-box;
		padding-left:0%;
  }
}
@media screen and (max-width: 640px) {
  .list_column .list_column_slide, .list_column .list_column_slide2 {
	  padding-top:20px;
  }
}

.list_column .list_column_slide .slick-list, .list_column .list_column_slide2 .slick-list {
	width:100%;
	padding: 0 80px 0px 0;
	box-sizing: border-box;
}
@media all and (max-width: 1000px) {
    .list_column .list_column_slide .slick-list, .list_column .list_column_slide2 .slick-list {
    }
}
@media all and (max-width: 640px) {
    .list_column .list_column_slide .slick-list, .list_column .list_column_slide2 .slick-list {
	    padding: 0 40px 0px 0;
    }
}

.list_column .list_column_slide .slick-slide, .list_column .list_column_slide2 .slick-slide {
	width:25%;
	padding: 0 30px 0px 0;
	box-sizing: border-box;
}
@media all and (max-width: 800px) {
    .list_column .list_column_slide .slick-slide, .list_column .list_column_slide2 .slick-slide {
    }
}

.list_column .list_column_slide .slick-slide:nth-child(odd), .list_column .list_column_slide2 .slick-slide:nth-child(odd) {
	padding-top:40px;
}
@media screen and (max-width: 640px) {
  .list_column .list_column_slide .slick-slide:nth-child(odd), .list_column .list_column_slide2 .slick-slide:nth-child(odd) {
		padding-top:0px;
  }
}

.list_column .list_column_slide div, .list_column .list_column_slide2 div {
}

.list_column .list_column_slide a, .list_column .list_column_slide2 a {
	display: block;
	text-decoration: none;
	  transition: 0.4s 0s ease-in-out;
	  -webkit-transition: 0.4s 0s ease-in-out;
}

.list_column .list_column_slide a:hover, .list_column .list_column_slide2 a:hover {
}

.list_column .list_column_slide a .photo, .list_column .list_column_slide2 a .photo {
	margin:0 0 15px 0;
	width:100%;
	height:auto;
	  overflow: hidden;
}

.list_column .list_column_slide a .photo img {
	  transition: 0.4s 0s ease-in-out;
	  -webkit-transition: 0.4s 0s ease-in-out;
}

.list_column .list_column_slide a:hover .photo img {
	transform: scale(1.1);
}

.list_column .list_column_slide2 a .photo {
	aspect-ratio: 1 / 1;
	position: relative;
}

.list_column .list_column_slide2 a .photo .photo_img, .list_column .list_column_slide2 a .photo .photo_img2 {
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
}

.list_column .list_column_slide2 a .photo .photo_img img, .list_column .list_column_slide2 a .photo .photo_img2 img {
	width:100%;
	height:100%;
	object-fit: cover;
}

.list_column .list_column_slide2 a .photo .photo_img2 {
	opacity: 0;
	  transition: 0.4s 0s ease-in-out;
	  -webkit-transition: 0.4s 0s ease-in-out;
}

.list_column .list_column_slide2 a:hover .photo .photo_img2 {
	opacity: 1;
}

.list_column .list_column_slide a .sub, .list_column .list_column_slide2 a .sub {
	font-size:13px;
	margin:0 0 10px 0;
	width:100%;
	height:auto;
}

.list_column ul li a .title {
	font-size:15px;
	width:100%;
	height:auto;
}

.list_column .list_column_slide a .role , .list_column .list_column_slide2 a .role {
	font-size:13px;
	margin:0 0 10px 0;
	width:100%;
	height:auto;
}

.list_column .list_column_slide a h3 , .list_column .list_column_slide2 a h3 {
	font-size:15px;
	width:100%;
	height:auto;
	font-weight:bold;
	margin:0 0 10px 0;
}

.list_column .list_column_slide a h4 , .list_column .list_column_slide2 a h4 {
	font-size:13px;
	width:100%;
	height:auto;
	font-weight:normal;
}



.list_column .list_column_slide .slick-prev , .list_column .list_column_slide .slick-next , .list_column .list_column_slide .slick-dots , .list_column .list_column_slide2 .slick-prev , .list_column .list_column_slide2 .slick-next , .list_column .list_column_slide2 .slick-dots {
	display: none;
}