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

/*--------------------
共通設定
---------------------*/

.scroll_fadein_header {
	transform: translate(0,0px); 
	-webkit-transform: translate(0,0px);
	-webkit-transition: 0.4s 0.0s ease-in-out;
	transition: 0.4s 0.0s ease-in-out;
}



/*--------------------
ページタイトル
---------------------*/

.page_title_section {
    width: 100%;
    padding: 200px 0px 0px 0px;
}
@media all and (max-width: 1000px) {
    .page_title_section {
        padding: 140px 0 0px 0;
    }
}

.page_title {
	margin:0 0 60px 0;
	position: relative;
}
@media screen and (max-width: 640px) {
 .page_title {
		margin:0 0 40px 0;
  }
}

.page_title .en {
	font-size:60px;
	font-weight:bold;
	letter-spacing: 0.1em;
	line-height:1.2em;
	margin:0 0 20px 0;
}
@media screen and (max-width: 1000px) {
 .page_title .en {
	font-size:44px;
	margin:0 0 15px 0;
  }
}

.page_title .works_category {
	font-size:32px;
	font-weight:bold;
	letter-spacing: 0.1em;
	line-height:1.2em;
	margin:0 0 20px 0;
}
@media screen and (max-width: 1000px) {
 .page_title .works_category {
	font-size:26px;
	margin:0 0 15px 0;
  }
}

.page_title h1 {
	font-size:18px;
	font-weight:bold;
	letter-spacing: 0.05em;
	line-height:1.2em;
	margin:0 0 0px 0;
}
@media screen and (max-width: 1000px) {
 .page_title h1 {
	font-size:18px;
	 line-height:1.2em;
	 margin:0 0 40px 0;
  }
}

.page_title p {
	display: inline-block;
	max-width:50%;
	position: absolute;
	top:0;
	right:0;
	 text-align: right;
}
@media all and (max-width: 1000px) {
    .page_title p {
	    position: static;
	    text-align: left;
	    max-width:100%;
    }
}


@media all and (max-width: 640px) {
    .page_title p br {
	    display: none;
    }
}



.pankuzu {
	position: absolute;
	top:84px;
	right:0;
	writing-mode: vertical-rl;
	font-size:11px;
}
@media screen and (max-width: 640px) {
 .pankuzu {
		writing-mode: horizontal-tb;
		top:60px;
		right: auto;
		left:10px;
  }
}

.pankuzu ul {
}

.pankuzu ul li {
	display: inline-block;
	color:#666;
	padding:0 0 20px 0;
	position: relative;
}
@media screen and (max-width: 640px) {
 .pankuzu ul li {
		padding:0 20px 5px 0;
		line-height:1.4em;
		vertical-align: top;
  }
}

@media screen and (max-width: 640px) {
 .pankuzu ul li:last-child {
		padding:0 0px 5px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width:340px;
  }
}

.pankuzu ul li:after {
	content:"";
	width:7px;
	height:5px;
	background-image: url(../images/pankuzu_arrow.png);
	background-repeat: no-repeat;
	position: absolute;
	bottom:4px;
	left:8px;
	background-size: 7px auto;
}
@media screen and (max-width: 640px) {
 .pankuzu ul li:after {
	 transform: rotate(-90deg);
	 top:5px;
	 bottom:auto;
	 left:auto;
	 right:4px;
  }
}

.pankuzu ul li:last-child:after {
	display: none;
}

.pankuzu ul li a {
	color:#999;
	text-decoration: none;
}


/*--------------------
事例一覧
---------------------*/

#works_catgory {
	margin:0 0 40px 0;
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 0.4s ease-in-out;
	-webkit-transition: 0.8s 0.4s ease-in-out;
}
@media screen and (max-width: 640px) {
 #works_catgory {
		margin:0 0 20px 0;
  }
}

#works_catgory ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}

#works_catgory ul li {
	width:22%;
	margin:0 0 20px 0;
	text-align: center;
	
}

#works_catgory ul li a {
	display: block;
	background-color: #FFF;
	border-radius: 10px;
	padding: 20px 0;
	text-decoration: none;
	line-height:20px;
	-webkit-transition: 0.4s 0.0s ease-in-out;
	transition: 0.4s 0.0s ease-in-out;
}
@media screen and (max-width: 640px) {
 #works_catgory ul li a {
		padding: 14px 0;
  }
}

#works_catgory ul li a:hover {
	background-color: #464343;
	color:#FFF;
}

#works_catgory ul li.current-cat a {
	background-color: #666;
	color:#FFF;
}

#works_catgory ul li a:before {
	content:"○";
	font-size:10px;
	line-height:20px;
	margin-right:10px;
	-webkit-transition: 0.4s 0.0s ease-in-out;
	transition: 0.4s 0.0s ease-in-out;
}
@media screen and (max-width: 640px) {
 #works_catgory ul li a:before {
		display: none;
  }
}

#works_catgory ul li a:hover:before {
	color:#FFF;
}

#works_list {
	
}
@media all and (max-width: 640px) {
    #works_list {
	    margin:0 -4% 0 -4%;
    }
}

#works_list ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}

#works_list ul::after {
display: block;
content:"";
width:31%;
}
@media screen and (min-width: 1800px) {
  #works_list ul::after {
		width:23%;
  }
}
@media screen and (min-width: 1800px) {
  #works_list ul::before {
		display: block;
		content:"";
		width:23%;
		order:1;
  }
}

#works_list ul li {
	width:31%;
	margin:0 0 100px 0;
	
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 0.4s ease-in-out;
	-webkit-transition: 0.8s 0.4s ease-in-out;
}
@media screen and (min-width: 1800px) {
  #works_list ul li {
		width:23%;
		margin:0 0 60px 0;
  }
}
@media screen and (max-width: 1000px) {
  #works_list ul li {
		width:48%;
		margin:0 0 60px 0;
  }
}
@media screen and (max-width: 640px) {
  #works_list ul li {
		width:100%;
  }
}

@media screen and (min-width: 1800px) {
  #works_list ul li:nth-of-type(2n) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
  }
  #works_list ul li:nth-of-type(2n+1) {
		transition: 0.8s 0.8s ease-in-out;
		-webkit-transition: 0.8s 0.8s ease-in-out;
  }
  #works_list ul li:nth-of-type(4n) {
		transition: 0.8s 1.0s ease-in-out;
		-webkit-transition: 0.8s 1.0s ease-in-out;
  }
  #works_list ul li:nth-of-type(4n+1) {
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
}

@media screen and (max-width: 1800px) {
  #works_list ul li:nth-of-type(3n-1) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
  }
  #works_list ul li:nth-of-type(3n) {
		transition: 0.8s 0.8s ease-in-out;
		-webkit-transition: 0.8s 0.8s ease-in-out;
  }
}

@media screen and (max-width: 1000px) {
	#works_list ul li:nth-of-type(even) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
  }
}

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


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

#works_list ul li a .photo {
	margin:0 0 26px 0;
	padding-top:82%;
	position: relative;
}

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

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

#works_list ul li a .photo .photo_img1 {
	opacity: 1;
	width:100%;
	height:100%;
}

#works_list ul li a .photo .photo_img2 {
	opacity: 0;
	width:100%;
	height:100%;
}

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

#works_list 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) {
  #works_list ul li a h3 {
	  width:90%;
	  margin:0 auto 15px auto;
  }
}

#works_list ul li a h4 {
	font-size:14px;
	font-weight:normal;
	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) {
  #works_list ul li a h4 {
	  width:90%;
	  margin:0 auto 15px auto;
  }
}

#works_list ul li a .category {
	font-size:12px;
	font-weight:normal;
	color:#aaaaaa;
	  transition: 0.2s 0s ease-in-out;
	  -webkit-transition: 0.2s 0s ease-in-out;
}
@media screen and (max-width: 640px) {
  #works_list ul li a .category {
	  width:90%;
	  margin:0 auto 0px auto;
  }
}

#works_list ul li a:hover h3 , #works_list ul li a:hover h4 , #works_list ul li a:hover .category {
	opacity: 0.8;
}


/*--------------------
ページ送り
---------------------*/

div.page_navi {
	text-align:center;
	padding:40px 0px 60px 0px;
}

.wp-pagenavi {
	clear: both;
}

.wp-pagenavi .pages {
	display: none;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	background-color:#fff;
	padding: 18px 22px;
	margin: 4px;
	color:#222;
	font-size:15px;
	border-radius: 8px;
	-webkit-transition: 0.4s 0.0s ease-in-out;
	transition: 0.4s 0.0s ease-in-out;
}
@media all and (max-width: 800px) {
    .wp-pagenavi a, .wp-pagenavi span {
	    display: inline-block;
		margin: 8px;
    }
}
@media all and (max-width: 640px) {
    .wp-pagenavi a, .wp-pagenavi span {
		padding: 10px 18px;
		margin: 5px;
    }
}


@media all and (max-width: 640px) {
    .wp-pagenavi .extend , .wp-pagenavi .last {
	    display: none;
    }
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background-color: #464343;
	color:#FFF;
}

.wp-pagenavi span.current {
}


/*--------------------
事例詳細
---------------------*/


.page_title_section_works {
    width: 100%;
    padding: 160px 0px 0px 0px;
}
@media all and (max-width: 1000px) {
    .page_title_section_works {
        padding: 120px 0 0px 0;
    }
}
@media all and (max-width: 640px) {
    .page_title_section_works {
        padding: 140px 0 0px 0;
    }
}

.page_title_works {
	margin:0 0 60px 0;
	position: relative;
}
@media screen and (max-width: 640px) {
 .page_title_works {
		margin:0 0 40px 0;
  }
}

.page_title_works .en {
	font-size:16px;
	font-weight:normal;
	letter-spacing: 0.1em;
	line-height:1.2em;
	margin:0 0 50px 0;
}
@media screen and (max-width: 1000px) {
 .page_title_works .en {
	font-size:16px;
	margin:0 0 40px 0;
  }
}
@media screen and (max-width: 640px) {
 .page_title_works .en {
	font-size:14px;
	margin:0 0 40px 0;
  }
}

.page_title_works h1 {
	font-size:24px;
	font-weight:bold;
	letter-spacing: 0.05em;
	line-height:1.2em;
	margin:0 0 15px 0;
}
@media screen and (max-width: 1000px) {
 .page_title_works h1 {
	font-size:20px;
	 line-height:1.2em;
	 margin:0 0 15px 0;
  }
}
@media screen and (max-width: 640px) {
 .page_title_works h1 {
	 line-height:1.4em;
  }
}

.page_title_works h2 {
	font-size:16px;
	font-weight:bold;
	letter-spacing: 0.05em;
	line-height:1.2em;
	margin:0 0 60px 0;
}
@media screen and (max-width: 1000px) {
 .page_title_works h2 {
	font-size:16px;
	 line-height:1.2em;
	 margin:0 0 40px 0;
  }
}


.works_photo {
	margin:0 0 140px 0;
}
@media screen and (max-width: 640px) {
 .works_photo {
	 margin:0 0 100px 0;
  }
}

.works_photo ul {
	
}

.works_photo ul li {
	margin:0 0 60px 0;
}
@media screen and (max-width: 1000px) {
 .works_photo ul li {
	margin:0 0 40px 0;
  }
}
@media screen and (max-width: 640px) {
 .works_photo ul li {
	 margin:0 -4% 20px -4%;
  }
}


@media screen and (max-height: 800px) and (min-width: 1000px) {
 .works_photo ul li img {
	 max-width:75%;
  }
}

.works_detail {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
    margin:0 0 80px 0;
}
@media screen and (max-width: 1000px) {
 .works_detail {
		margin:0 auto 40px auto;
  }
}

.works_detail .works_text {
	width:42%;
}
@media screen and (max-width: 1000px) {
 .works_detail .works_text {
		width:80%;
		margin:0 auto 80px auto;
  }
}
@media screen and (max-width: 640px) {
 .works_detail .works_text {
		width:100%;
		margin:0 auto 40px auto;
  }
}

.works_detail .works_text h2 {
	font-size:20px;
	line-height:1.6em;
	margin:0 0 40px 0;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
 .works_detail .works_text h2 {
	 font-size:18px;
	 line-height:1.4em;
	 margin:0 0 30px 0;
  }
}

.works_detail .works_text p {
	margin:0 0 20px 0;
}


.works_detail .works_info {
	width:42%;
	padding-top:24%;
}
@media screen and (max-width: 1000px) {
 .works_detail .works_info {
		padding-top:0px;
		width:80%;
		margin:0 auto 40px auto;
  }
}
@media screen and (max-width: 640px) {
 .works_detail .works_info {
		width:100%;
		padding-top:60px;
		margin:0 auto 40px auto;
  }
}

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

.works_detail .works_info table {
	border-top:solid 1px #DDD;
	width:100%;
	box-sizing: border-box;
}

.works_detail .works_info table tr {
	border-bottom:solid 1px #DDD;
}

.works_detail .works_info table th {
	padding:30px 30px 30px 0;
	text-align: left;
	vertical-align: top;
	font-size:12px;
	font-weight:normal;
	width:25%;
}
@media screen and (max-width: 640px) {
 .works_detail .works_info table th {
	 padding:20px 20px 20px 0;
	 width:30%;
  }
}

.works_detail .works_info table td {
	padding:30px 0px 30px 0;
	vertical-align: top;
}
@media screen and (max-width: 640px) {
 .works_detail .works_info table td {
	 padding:20px 0px 20px 0;
  }
}

.related_works {
	margin:0 0 40px 0;
}


/*--------------------
事例 費用について
---------------------*/

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

.top_price .photo {
	width:50%;
}
@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;
}
@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;
}
@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;
}

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

.page_title_sevice {
	position: relative;
}

.service_subtitle_jp {
	position: absolute;
	top:-50%;
	right:8px;
	writing-mode: vertical-rl;
	font-size:20px;
	font-weight:bold;
	letter-spacing: 2px;
	white-space: nowrap;
}
@media screen and (max-width: 1000px) {
 .service_subtitle_jp {
		right:60px;
  }
}
@media screen and (max-width: 640px) {
 .service_subtitle_jp {
		font-size:14px;
		right:4px;
  }
}


.service_top {
	aspect-ratio: 1 / 1.15;
	position: relative;
    width: min(100%, 1600px);
    margin: 0 auto 40px auto;
}
@media screen and (min-width: 1600px) {
 .service_top {
		aspect-ratio: 1 / 1.15;
  }
}
@media screen and (max-width: 1200px) {
 .service_top {
		aspect-ratio: 1 / 1.3;
  }
}
@media screen and (max-width: 800px) {
 .service_top {
	 	aspect-ratio: 1 / 1.6;
  }
}
@media screen and (max-width: 640px) {
 .service_top {
		 aspect-ratio: auto;
  }
}

.service_top .photo_box {
	position: absolute;
	z-index: 2;
}
@media screen and (max-width: 640px) {
 .service_top .photo_box {
	 position: static;
  }
}

.service_top .photo_box .photo_bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.service_top .photo1 {
	width:57%;
	top:0;
	left:0;
}
@media screen and (max-width: 640px) {
 .service_top .photo1 {
	 width:96%;
	 margin:0 0 20px 0;
  }
}

.service_top .photo1 .photo_bg {
	padding-top:68%;
}

.service_top .photo1.scroll_fadein_cont {
	transform: translateX(20px); 
	-webkit-transform: translateX(20px);
	transition: 0.6s 0.4s ease-in-out;
	-webkit-transition: 0.6s 0.4s ease-in-out;
}

.service_top .photo2 {
	width:35%;
	top:18%;
	right:0;
}
@media screen and (max-width: 640px) {
 .service_top .photo2 {
	 width:70%;
	 margin:0px 0 60px auto;
  }
}

.service_top .photo2 .photo_bg {
	padding-top:126%;
}
@media screen and (max-width: 640px) {
 .service_top .photo2 .photo_bg {
	 padding-top:100%;
  }
}

.service_top .photo2.scroll_fadein_cont {
	transform: translateX(-20px); 
	-webkit-transform: translateX(-20px);
	transition: 0.6s 0.8s ease-in-out;
	-webkit-transition: 0.6s 0.8s ease-in-out;
}

.service_top .photo3 {
	width:35%;
	bottom:0;
	left:10%;
}
@media screen and (max-width: 640px) {
 .service_top .photo3 {
	 display: inline-block;
	 width:74%;
	 margin:0 0 20px 0;
  }
}

.service_top .photo3 .photo_bg {
	padding-top:102%;
}
@media screen and (max-width: 640px) {
 .service_top .photo3 .photo_bg {
	 padding-top:90%;
  }
}



.service_top .photo3.scroll_fadein_cont {
	transform: translateX(20px); 
	-webkit-transform: translateX(20px);
	transition: 0.6s 0.4s ease-in-out;
	-webkit-transition: 0.6s 0.4s ease-in-out;
}

.service_top .photo4 {
	width:17%;
	bottom:26%;
	right:28%;
}
@media screen and (max-width: 1200px) {
 .service_top .photo4 {
		bottom:30%;
		right:28%;
  }
}
@media screen and (max-width: 640px) {
 .service_top .photo4 {
	 	display: inline-block;
	 	width:42%;
	 	margin:0 2% 80px 24%;
  }
}

.service_top .photo4 .photo_bg {
	padding-top:72%;
}

.service_top .photo4.scroll_fadein_cont {
	transform: translateX(-20px); 
	-webkit-transform: translateX(-20px);
	transition: 0.6s 0.5s ease-in-out;
	-webkit-transition: 0.6s 0.5s ease-in-out;
}

.service_top .photo5 {
	width:10%;
	bottom:24%;
	right:14%;
}
@media screen and (max-width: 1200px) {
 .service_top .photo5 {
		bottom:28%;
		right:14%;
  }
}
@media screen and (max-width: 640px) {
 .service_top .photo5 {
	 	display: inline-block;
	 	width:28%;
	 	margin:0 0 40px auto;
  }
}

.service_top .photo5 .photo_bg {
	padding-top:85%;
}


.service_top .photo5.scroll_fadein_cont {
	transform: translateX(-20px); 
	-webkit-transform: translateX(-20px);
	transition: 0.6s 0.6s ease-in-out;
	-webkit-transition: 0.6s 0.6s ease-in-out;
}


.service_top .text_box1 {
	max-width:450px;
	width:32%;
	position: absolute;
	top:40%;
	left:20%;
	z-index: 3;
}
@media screen and (max-width: 1200px) {
 .service_top .text_box1 {
	 width:40%;
	 left:10%;
	 top:36%;
  }
}
@media screen and (max-width: 640px) {
 .service_top .text_box1 {
	 position: static;
	 width:80%;
	 margin:0 15% 60px auto;
  }
}

.service_top .text_box1.scroll_fadein_cont {
	transform: translateY(-20px); 
	-webkit-transform: translateY(-20px);
	transition: 0.6s 0.6s ease-in-out;
	-webkit-transition: 0.6s 0.6s ease-in-out;
}

.service_top .text_box2 { 
	max-width:450px;
	width:32%;
	position: absolute;
	bottom:2%;
	right:16%;
	z-index: 3;
}
@media screen and (max-width: 1200px) {
 .service_top .text_box2 {
	 width:40%;
	bottom:2%;
	right:4%;
  }
}
@media screen and (max-width: 640px) {
 .service_top .text_box2 {
	 position: static;
	 width:80%;
	 margin:0 auto 20px 15%;
  }
}

.service_top .text_box2.scroll_fadein_cont {
	transform: translateY(-20px); 
	-webkit-transform: translateY(-20px);
	transition: 0.6s 0.6s ease-in-out;
	-webkit-transition: 0.6s 0.6s ease-in-out;
}


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

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


.service_subtitle_en {
	position: absolute;
	top:-14%;
	right:33%;
	writing-mode: vertical-rl;
	font-size:36px;
	font-weight:bold;
	line-height:1.4em;
	letter-spacing: 1px;
	white-space: nowrap;
	color:#eee;
	z-index:1;
}
@media screen and (max-width: 1200px) {
 .service_subtitle_en {
		right:30%;
  }
}
@media screen and (max-width: 1000px) {
 .service_subtitle_en {
		font-size:28px;
		right:32%;
  }
}
@media screen and (max-width: 640px) {
 .service_subtitle_en {
	 	display: none;
  }
}

.service_subtitle_en span {
	margin-top:46%;
}




.solutiton {
	padding:40px 0 40px 0;
}
@media screen and (max-width: 640px) {
 .solutiton {
	 padding:0px 0 0px 0;
  }
}

.solutiton ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}

.solutiton ul li {
	width:46%;
	margin:0 0 0px 0;
}
@media screen and (max-width: 1000px) {
 .solutiton ul li {
	 width:70%;
	margin:0 0 60px 0;
  }
}
@media screen and (max-width: 640px) {
 .solutiton ul li {
	 width:94%;
	margin:0 0 40px 0;
  }
}

.solutiton ul li:nth-child(odd) {
	margin-top:-40px;
}
@media screen and (max-width: 1000px) {
 .solutiton ul li:nth-child(odd) {
	 	margin-top:0px;
  }
}

.solutiton ul li:nth-child(even) {
	margin-top:120px;
}
@media screen and (max-width: 1000px) {
 .solutiton ul li:nth-child(even) {
		margin-top:0px;
		margin-left:auto;
  }
}


.solutiton ul li img {
	margin:0 0 25px 0;
}
@media screen and (max-width: 640px) {
 .solutiton ul li img {
	 margin:0 0 20px 0;
  }
}

.solutiton ul li h3 {
	font-size:18px;
	margin:0 0 15px 0;
	font-weight:bold;
}

.solutiton ul li p {
	
}


.list_column {
	  margin: 0px 0px 0px auto;
}
@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;
	  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 .list_column_slide .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 {
    }
}
@media all and (max-width: 640px) {
    .list_column .list_column_slide .slick-list {
	    padding: 0 40px 0px 0;
    }
}

.list_column .list_column_slide .slick-slide {
	width:25%;
	padding: 0 60px 0px 0;
	box-sizing: border-box;
}
@media all and (max-width: 640px) {
    .list_column .list_column_slide .slick-slide {
	    padding: 0 40px 0px 0;
    }
}

.list_column .list_column_slide div {
}

.list_column .list_column_slide a {
	display: block;
	text-decoration: none;
}

.list_column .list_column_slide .photo {
	margin:0 0 50px 0;
	width:100%;
	height:auto;
	position: relative;
}

.list_column .list_column_slide .photo .number {
	font-size:64px;
	line-height:1.2em;
	position: absolute;
	bottom:-32px;
	left:0;
}

.list_column .list_column_slide h3 {
	font-size:16px;
	width:100%;
	height:auto;
	font-weight:bold;
	margin:0 0 20px 0;
}


.list_column_slide {
	padding-bottom:120px;
	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 all and (max-width: 640px) {
    .list_column_slide {
	    padding-bottom:100px;
    }
}

.list_column .slick-prev, .list_column .slick-next {
	border:solid 1px #464343;
	border-radius: 100px;
	width:65px;
	height:65px;
	position: absolute;
	bottom: 0px;
}
@media all and (max-width: 640px) {
    .list_column .slick-prev, .list_column .slick-next {
	    
    }
}



.list_column .slick-prev {
	right:200px;
	background-image: url(../images/arrow1.png);
	background-size: 36px auto;
	background-repeat: no-repeat;
	background-position: 50% 45%;
	transform: scale(-1, 1);
	-webkit-transition: 0.4s 0s ease-in-out;
	transition: 0.4s 0s ease-in-out;
}
@media all and (max-width: 640px) {
    .list_column .slick-prev {
	    right:160px;
    }
}

.list_column .slick-prev:hover {
	background-position: 70% 45%;
	opacity:0.8;
}

.list_column .slick-next {
	background-image: url(../images/arrow1.png);
	background-size: 36px auto;
	background-repeat: no-repeat;
	background-position: 50% 45%;
	-webkit-transition: 0.4s 0s ease-in-out;
	transition: 0.4s 0s ease-in-out;
}
@media all and (max-width: 640px) {
    .list_column .slick-next {
	    right:80px;
    }
}

.list_column .slick-next:hover {
	background-position: 70% 45%;
	opacity:0.8;
}

.list_column .slick-dots {
	font-size:0;
	position: absolute;
	bottom: 0px;
	text-align:center;
}

.list_column .slick-dots li {
    margin: 0 0px;
    display: inline-block;
    width: 40px;
    height: 4px;
}

.list_column .slick-dots li:first-child {
	border-radius: 100px 0px 0px 100px;
}

.list_column .slick-dots li button {
    width: 40px;
    height: 4px;
    padding: 0px;
    background-color: #ddd;
}

.list_column .slick-dots li.slick-active button::before {
    width: 40px;
	height: 4px;
	padding:0;
	background-color: #464343;
}

.list_column .slick-disabled {
	opacity: 0.1 !important;
}


.q_and_a {
	
}


/* Chrome、Safari以外 */
summary {
  display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

.q_and_a details {
	font-size:16px;
	margin:0 0 20px 0;
	padding:0px 0px 0px 0px;
}

.q_and_a summary {
	background-color: #FFF;
	text-decoration: none;
	display: block;
	padding:30px 40px 30px 90px;
	position: relative;
	-webkit-transition: 0.4s 0s ease-in-out;
	transition: 0.4s 0s ease-in-out;
	cursor: pointer;
}
@media all and (max-width: 640px) {
    .q_and_a summary {
	    padding:20px 40px 20px 60px;
    }
}

details[open] summary {
	background-color: #f0f0f0;
}

.q_and_a summary:before {
	content:"Q";
	width:44px;
	height:44px;
	padding:10px 0 0 0px;
	border-radius: 100px;
	box-sizing: border-box;
	color:#FFF;
	font-size:24px;
	text-align: center;
	background-color: #464343;
	position: absolute;
	top:20px;
	left:30px;
}
@media all and (max-width: 640px) {
    .q_and_a summary:before {
		width:30px;
		height:30px;
		font-size:16px;
		padding: 4px 0 0 0;
		left:14px;
    }
}

.q_and_a summary:after {
	content:"";
	width:21px;
	height:12px;
	background-image: url(../images/q_a_arrow.png);
	background-repeat: no-repeat;
	background-size: 21px auto;
	position: absolute;
	top:36px;
	right:20px;
	-webkit-transition: 0.4s 0s ease-in-out;
	transition: 0.4s 0s ease-in-out;
}

details[open] summary:after {
	transform: scale(1, -1);
}

.q_and_a details span {
	display: block;
	padding:30px 30px 30px 90px;
	background-color: #FFF;
	animation  : textFadeQestion 0.4s ease;
}
@media all and (max-width: 1000px) {
    .q_and_a details span {
		padding:30px 30px 30px 30px;
    }
}
@media all and (max-width: 640px) {
    .q_and_a details span {
		padding:20px 20px 20px 20px;
    }
}
@keyframes textFadeQestion {
   0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateX(0px); }
}


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

.price_top {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
    width: min(100%, 1800px);
    margin:0 auto;
}

.price_top .photo_box {
	width:45%;
	aspect-ratio: 1 / 1.15;
	background-size: cover;
	background-position: center center;
	transform: translateX(20px); 
	-webkit-transform: translateX(20px);
	transition: 0.6s 0.4s ease-in-out;
	-webkit-transition: 0.6s 0.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .price_top .photo_box {
	  width:60%;
	  margin:0 0 60px 0;
  }
}
@media screen and (max-width: 480px) {
  .price_top .photo_box {
	  width:80%;
  }
}

.price_top .text_box {
	width:45%;
	box-sizing: border-box;
	padding:0 10% 0 0;
	transform: translateX(-20px); 
	-webkit-transform: translateX(-20px);
	transition: 0.6s 0.6s ease-in-out;
	-webkit-transition: 0.6s 0.6s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .price_top .text_box {
	  width:100%;
	  padding:0 5% 0 15%;
  }
}
@media screen and (max-width: 640px) {
  .price_top .text_box {
	  width:100%;
	  padding:0 5% 0 5%;
  }
}

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

.price_top .text_box .price_box {
	font-size:16px;
	border:solid 2px #464343;
	margin:0 0 30px 0;
	padding:20px 10px;
	font-weight:bold;
	box-sizing: border-box;
	text-align: center;
}
@media screen and (max-width: 640px) {
  .price_top .text_box .price_box {
	  font-size:15px;
	  padding:20px 5px;
  }
}

.price_top .text_box p {
	font-size:14px;
	line-height:1.8em;
	margin:0 0 40px 0;
}
@media screen and (max-width: 640px) {
  .price_top .text_box p {
	  margin:0 0 20px 0;
  }
}

.price_graph p {
	margin:0 0 40px 0;
}

.price_graph .graph_box {
	margin:0 0 20px 0;
	padding:60px;
	background-color: #FFF;
}
@media screen and (max-width: 1000px) {
  .price_graph .graph_box {
	  padding:40px;
  }
}
@media screen and (max-width: 640px) {
  .price_graph .graph_box {
	  padding:40px 20px;
  }
}

.graph_box {
	
}

.graph_box h3 {
	width:14%;
	font-size:20px;
	font-weight:bold;
	box-sizing: border-box;
	padding:0 2% 0 0;
}
@media screen and (max-width: 1000px) {
  .graph_box h3 {
	  width:100%;
	  margin:0 0 20px 0;
	  text-align: center;
  }
}

.graph_box h3 img {
	width:80%;
}
@media screen and (max-width: 1000px) {
  .graph_box h3 img{
	  width:100px;
  }
}

.graph_box .graph_other {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
    margin:0 0 30px 0;
}

.graph_box .graph_bar1 , .graph_box .graph_bar2 , .graph_box .graph_bar3 {
	text-align: center;
	font-size:18px;
	color:#FFF;
	font-weight: bold;
	height:80px;
	box-sizing: border-box;
	padding:28px 20px 0 20px;
}
@media screen and (max-width: 1000px) {
  .graph_box .graph_bar1 , .graph_box .graph_bar2 , .graph_box .graph_bar3 {
	  font-size:14px;
	  padding:28px 0px 0 0px;
  }
}

.graph_box .graph_other .graph_bar1 {
	background-color: #c1c1c1;
	width:86%;
}
@media screen and (max-width: 1000px) {
  .graph_box .graph_other .graph_bar1 {
	  width:100%;
	  margin:0 0 40px 0;
  }
}


.graph_box .graph_store {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
}

.graph_box .graph_store .graph_bar2 {
	width:22%;
	background-color: #4f4f4f;
	position: relative;
}
@media screen and (max-width: 1000px) {
  .graph_box .graph_store .graph_bar2 {
	  width:36%;
  }
}

.graph_box .graph_store .graph_bar2:after {
	content:"+";
	width:30px;
	height:30px;
	font-size:30px;
	font-weight:bold;
	position: absolute;
	top:30%;
	right:-15px;
}

.graph_box .graph_store .graph_bar3 {
	background-color: #e5b942;
	animation  : graphBar 10s ease infinite;
}

@keyframes graphBar {
   0% {width:15%; }
  50% {width:62%}
  100% {width:15%; }
}
@media screen and (max-width: 1000px) {
  @keyframes graphBar {
	   0% {width:25%; }
	  50% {width:62%}
	  100% {width:25%; }
	}
}


.price_graph .check_list {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}

.price_graph .check_list li {
	font-size:16px;
	font-weight: bold;
	background-color: #FFF;
	width:49%;
	margin:0 0 20px 0;
	padding:24px 20px 24px 60px;
	box-sizing: border-box;
	background-image: url(../images/price_check.png);
	background-repeat: no-repeat;
	background-size: 23px auto;
	background-position: 20px 26px;
}
@media screen and (max-width: 640px) {
  .price_graph .check_list li {
	  width:100%;
  }
}


.price_case {
	
}

.price_case ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
}

.price_case ul li {
	width:48%;
	margin:0 0 40px 0;
}
@media screen and (max-width: 1000px) {
  .price_case ul li {
	  width:100%;
	  margin:0 0 20px 0;
  }
}

.price_case ul li .price_detail {
	font-size:14px;
	width:80%;
	margin:0 auto 0 auto;
}

.price_case ul li .price_detail tr {
	border-bottom:solid 1px #DDD;
}

.price_case ul li .price_detail tr:last-child {
	border-bottom:none;
}

.price_case ul li .price_detail th {
	font-weight:normal;
	text-align: left;
	width:25%;
	padding:20px 20px 20px 0;
	vertical-align: top;
}

.price_case ul li .price_detail td {
	padding:20px 20px 20px 0;
	vertical-align: top;
}

.price_case ul li .price_detail td .total {
	display: block;
	border-top:solid 1px #222;
	margin-top:15px;
	padding-top:15px;
	font-size:16px;
	font-weight:bold;
}



.price_cont {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    flex-direction: row;
    width: min(100%, 1600px);
    margin:0 auto 0px auto;
}
@media screen and (max-width: 1000px) {
  .price_cont {
	  width:90%;
  }
}

.price_cont .text_box {
	width:50%;
}
@media screen and (max-width: 1000px) {
  .price_cont .text_box {
	  width:100%;
	  margin:0 0 40px 0;
  }
}

.price_cont .text_box .center_box {
	width:70%;
	margin:0 auto;
}
@media screen and (max-width: 1200px) {
  .price_cont .text_box .center_box {
	  width:86%;
  }
}
@media screen and (max-width: 640px) {
  .price_cont .text_box .center_box {
	  width:100%;
  }
}


.price_cont .text_box .center_box h2 {
	font-size:24px;
	line-height:1.4em;
	font-weight:bold;
	margin:0 0 30px 0;
}
@media screen and (max-width: 640px) {
  .price_cont .text_box .center_box h2 {
	  font-size:20px;
	  margin:0 0 20px 0;
  }
}

.price_cont .text_box .center_box p {
	margin-bottom:20px;
}

.price_cont .text_box p .gyotai {
	width:120px;
	display: inline-block;
}

.price_cont .text_box .center_box h2 span {
	font-size:70%;
}

.hosoku_text {
	font-size:70%;
	color:#888;
}

.price_cont .photo_box {
	width:50%;
	aspect-ratio: 1 / 0.84;
	background-size: cover;
	background-position: center center;
}
@media screen and (max-width: 1000px) {
  .price_cont .photo_box {
	  width:80%;
	  margin:0 0 40px 0;
	  aspect-ratio: 1 / 0.7;
  }
}
@media screen and (max-width: 640px) {
  .price_cont .photo_box {
	  aspect-ratio: 1 / 0.84;
  }
}

.price_cont .photo_box_point {
}
@media screen and (max-width: 1000px) {
  .price_cont .photo_box_point {
	  margin-left:auto;
  }
}


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


.designer_list ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}
.designer_list ul::after {
display: block;
content:"";
width:28%;
}

.designer_list ul li {
	width:28%;
	margin:0 0 80px 0;
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 0.4s ease-in-out;
	-webkit-transition: 0.8s 0.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .designer_list ul li {
		width:45%;
		margin:0 0 80px 0;
  }
}
@media screen and (max-width: 640px) {
  .designer_list ul li {
		width:84%;
		margin:0 auto 80px 4%;
  }
}



@media screen and (min-width: 1001px) {
  .designer_list ul li:nth-of-type(3n-1) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
		margin:80px 0 80px 0;
  }
  .designer_list ul li:nth-of-type(3n) {
		transition: 0.8s 0.8s ease-in-out;
		-webkit-transition: 0.8s 0.8s ease-in-out;
  }
}
@media screen and (max-width: 1000px) {
  .designer_list ul li:nth-of-type(even) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
		margin:80px 0 80px 0;
  }
}
@media screen and (max-width: 640px) {
	.designer_list ul li:nth-of-type(3n-1) {
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
  .designer_list ul li:nth-of-type(3n) {
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
  .designer_list ul li:nth-of-type(even) {
		margin:0 4% 80px auto;
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
}

.designer_list ul li a {
	display: block;
	text-decoration: none;
}

.designer_list ul li a .photo {
	margin:0 0 20px 0;
	overflow: hidden;
}

.designer_list ul li a .photo img {
	filter: grayscale(0%);
	vertical-align: bottom;
		transition: 0.4s 0.0s ease-in-out;
		-webkit-transition: 0.4s 0.0s ease-in-out;
		
}

.designer_list ul li a .sub {
	font-size:14px;
	margin:0 0 15px 0;
}

.designer_list ul li a .title {
	font-size:18px;
	font-weight:bold;
	margin:0 0 5px 0;
}

.designer_list ul li a .en {
	font-size:12px;
}

.designer_list ul:hover li a .photo img {
}

.designer_list ul:has(li:hover){
}


.designer_list ul li a:hover .photo img {
	transform: scale(1.1);
}

.designer_detail {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
    margin:0 0 80px 0;
}

.designer_detail .photo {
	width:40%;
	transform: translateX(20px); 
	-webkit-transform: translateX(20px);
	transition: 0.8s 0.4s ease-in-out;
	-webkit-transition: 0.8s 0.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .designer_detail .photo {
		width:80%;
		margin:0 auto;
		transform: translateY(20px); 
		-webkit-transform: translateY(20px);
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
}
@media screen and (max-width: 640px) {
  .designer_detail .photo {
		width:90%;
  }
}

.designer_detail .profile {
	width:50%;
	padding:40px 0 0 0;
	transform: translateX(-20px); 
	-webkit-transform: translateX(-20px);
	transition: 0.8s 0.8s ease-in-out;
	-webkit-transition: 0.8s 0.8s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .designer_detail .profile {
		width:80%;
		margin:0 auto;
		transform: translateY(20px); 
		-webkit-transform: translateY(20px);
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
}
@media screen and (max-width: 640px) {
  .designer_detail .profile {
		width:90%;
  }
}

.designer_detail .profile h1 {
	font-size:30px;
	margin:0 0 10px 0;
	font-weight:bold;
}
@media screen and (max-width: 640px) {
  .designer_detail .profile h1 {
		font-size:24px;
  }
}

.designer_detail .profile .en {
	font-size:14px;
	margin:0 0 60px 0;
	font-weight:bold;
}

.designer_detail .profile .role {
	font-size:16px;
	margin:0 0 40px 0;
	font-weight:bold;
}

.designer_detail .profile h2 {
	font-weight:bold;
	font-size:13px;
	margin:0 0 10px 0;
	position: relative;
	padding:0 0 0 20px;
}

.designer_detail .profile h2:before {
	content:"";
	width:10px;
	height:1px;
	background-color: #222;
	position: absolute;
	top:50%;
	left:0;
}

.designer_detail .profile_text {
	margin:0 0 60px 0;
}

#designer_works {
	
}

#designer_works ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}

#designer_works ul li {
	width:47%;
	margin:0 0 60px 0;
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 0.4s ease-in-out;
	-webkit-transition: 0.8s 0.4s ease-in-out;
}
@media screen and (max-width: 640px) {
  #designer_works ul li {
		width:100%;
  }
}

#designer_works ul li:nth-child(even) {
	margin:80px 0 60px 0;
	transition: 0.8s 0.8s ease-in-out;
	-webkit-transition: 0.8s 0.8s ease-in-out;
}
@media screen and (max-width: 640px) {
  #designer_works ul li:nth-child(even) {
		margin:0px 0 60px 0;
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
}

#designer_works ul li a {
	display: block;
	position: relative;
	text-decoration: none;
}

#designer_works ul li a:after {
	content:"";
	position: absolute;
	bottom:20px;
	right:0;
	width:36px;
	height:10px;
	background-repeat: no-repeat;
	background-image: url(../images/arrow1.png);
	background-size: 36px auto;
}

#designer_works ul li .photo {
	margin:0 0 15px 0;
	overflow: hidden;
}

#designer_works ul li .photo img {
	vertical-align: bottom;
		transition: 0.4s 0.0s ease-in-out;
		-webkit-transition: 0.4s 0.0s ease-in-out;
}

#designer_works ul li a:hover .photo img {
	transform: scale(1.1);
}

#designer_works ul li .photo img {
	
}

#designer_works ul li h3 {
	font-size:15px;
	font-weight:bold;
	margin:0 0 5px 0;
	padding-right:40px;
}

#designer_works ul li .category {
	font-size:13px;
	padding-right:40px;
}


/*--------------------
私たちについて
---------------------*/

.company_photo {
    width: min(100%, 1600px);
    margin: 0 auto;
}

.company_photo .list_column_slide {
	transform: translateY(0px); 
	-webkit-transform: translateY(0px);
		transition: 0.4s 0.0s ease-in-out;
		-webkit-transition: 0.4s 0.0s ease-in-out;
}

.company_photo .list_column_slide div {
}

.company_photo .list_column_slide .photo {
	margin:0 4px 0 0;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center center;
}

.conpany_message {
	text-align: center;
}
@media screen and (max-width: 640px) {
  .conpany_message {
		text-align: left;
  }
}

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

.conpany_message p {
}

.company_outline {
	
}

.company_outline table {
	border-top: solid 1px #DDD;
	width:100%;
}

.company_outline table tr {
	border-bottom: solid 1px #DDD;
}

.company_outline table th {
	padding:40px 20px 40px 20px;
	vertical-align: top;
	text-align: left;
	width:20%;
	font-weight: normal;
	font-size:13px;
	line-height:2em;
	color:#666;
}
@media screen and (max-width: 640px) {
  .company_outline table th {
	  padding:20px 10px 10px 10px;
	  display: block;
	  box-sizing: border-box;
	  width:100%;
  }
}

.company_outline table td {
	padding:40px 20px 40px 20px;
	vertical-align: top;
	font-size:15px;
	line-height:2em;
}
@media screen and (max-width: 640px) {
  .company_outline table td {
	  padding:0px 10px 20px 10px;
	  display: block;
	  box-sizing: border-box;
	  width:100%;
  }
}

.company_access {
	margin:0 0 80px 0;
	text-align: center;
}

.company_access iframe {
	width:100%;
	height:500px;
	margin:0 0 20px 0;
}
@media screen and (max-width: 640px) {
  .company_access iframe {
	  height:400px;
  }
}

.company_access p {
	margin:0 0 10px 0;
}


/*--------------------
コラム・アイデア
---------------------*/


.column_list ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}
.column_list ul::after {
display: block;
content:"";
width:33.2%;
}

.column_list ul li {
	width:33.2%;
	margin:0 0 80px 0;
	transform: translateY(-40px); 
	-webkit-transform: translateY(-40px);
	transition: 0.8s 0.4s ease-in-out;
	-webkit-transition: 0.8s 0.4s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .column_list ul li {
		width:49.6%;
		margin:0 0 80px 0;
  }
}
@media screen and (max-width: 640px) {
  .column_list ul li {
		width:88%;
		margin:0 auto 60px 0%;
  }
}



@media screen and (min-width: 1001px) {
  .column_list ul li:nth-of-type(3n-1) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
  }
  .column_list ul li:nth-of-type(3n) {
		transition: 0.8s 0.8s ease-in-out;
		-webkit-transition: 0.8s 0.8s ease-in-out;
  }
}
@media screen and (max-width: 1000px) {
  .column_list ul li:nth-of-type(even) {
		transition: 0.8s 0.6s ease-in-out;
		-webkit-transition: 0.8s 0.6s ease-in-out;
  }
}
@media screen and (max-width: 640px) {
	.column_list ul li:nth-of-type(3n-1) {
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
  .column_list ul li:nth-of-type(3n) {
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
  .column_list ul li:nth-of-type(even) {
		margin:0 0% 60px auto;
		transition: 0.8s 0.4s ease-in-out;
		-webkit-transition: 0.8s 0.4s ease-in-out;
  }
}

.column_list ul li a {
	display: block;
	text-decoration: none;
}

.column_list ul li a .photo_box {
	position: relative;
	aspect-ratio: 1 / 1;
	margin:0 0 20px 0;
}

.column_list ul li a .photo1 {
	width:100%;
	aspect-ratio: 1 / 1;
	position: absolute;
}

.column_list ul li a .photo1 img {
	width:100%;
	height:100%;
	object-fit: cover;
}

.column_list ul li a .photo2 {
	width:100%;
	aspect-ratio: 1 / 1;
	position: absolute;
	opacity: 0;
		transition: 0.4s 0.0s ease-in-out;
		-webkit-transition: 0.4s 0.0s ease-in-out;
}

.column_list ul li a .photo2 img {
	width:100%;
	height:100%;
	object-fit: cover;
}

.column_list ul li a:hover .photo2 {
	opacity: 1;
}

.column_list ul li a .photo1 img , .column_list ul li a .photo2 img {
	vertical-align: bottom;
		
}

.column_list ul li a .cat {
	font-size:14px;
	margin:0 auto 10px auto;
	width:95%;
}

.column_list ul li a h2 {
	font-size:15px;
	font-weight:bold;
	margin:0 auto 10px auto;
	width:95%;
}

.column_list ul li a h3 {
	font-size:13px;
	font-weight:normal;
	margin:0 auto 5px auto;
	width:95%;
}

.column_list ul li a:hover .cat , .column_list ul li a:hover h2 , .column_list ul li a:hover h3 {
	opacity: 0.8;	
}


.column_cont {
	
}
@media screen and (max-width: 640px) {
  .column_cont {
	  width:100%;
	  margin:0 auto 40px auto;
  }
}


@media screen and (max-width: 640px) {
  .column_cont .page_title_works {
	  width:90%;
	  margin-left:auto;
	  margin-right:auto;
  }
}

.column_contents {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
}

.column_contents .side_menu {
}

.column_contents .main_cont {
	width:100%;
	background-color: #FFF;
	box-sizing: border-box;
	padding:0 5% 40px 5%;
	margin:0 0 60px 0;
}

.column_contents .main_cont .top_image {
	margin:0 -5.5% 80px -5.5%;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .top_image {
	  margin:0 -5% 40px -5%;
  }
}

.column_contents .main_cont .column_index {
	background-color: #f7f7f7;
	padding:40px;
	margin:0 0 80px 0;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_index {
	  padding:20px;
	  margin:0 0 40px 0;
  }
}

.column_contents .main_cont .column_index h3 {
	font-size:15px;
	font-weight:bold;
	margin:0 0 20px 0;
	padding:0 0 10px 0;
	border-bottom:dotted 1px #ddd;
}

.column_contents .main_cont .column_index ul {
	margin:0 0 0 0px;
	padding:0 0 0 20px;
}

.column_contents .main_cont .column_index ul li {
	margin:0 0 15px 0;
	padding:0 0 0 0px;
	list-style-type: disc;
	font-size:15px;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_index ul li {
		margin:0 0 10px 0;
	  font-size:14px;
  }
}

.column_contents .main_cont .column_index ul li a {
	text-decoration: none;
	display: block;
}

.column_contents .main_cont .column_index ul li a:hover {
	text-decoration: underline;
}

.column_contents .main_cont .column_text {
	margin:0 0 80px 0;
	scroll-margin-top: 80px;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_text {
	  margin:0 0 60px 0;
	  scroll-margin-top: 80px;
  }
}

.column_contents .main_cont .column_text h2 {
	font-size:22px;
	line-height:1.6em;
	font-weight:bold;
	margin:0 0 30px 0;
	padding:0 0 0 20px;
	position: relative;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_text h2 {
		font-size:20px;
  }
}

.column_contents .main_cont .column_text h2:before {
	content:"";
	width:10px;
	height:1px;
	background-color: #222;
	position: absolute;
	top:16px;
	left:0;
}

.column_contents .main_cont .column_text h3 {
	margin:0 0 10px 0;
	font-size:18px;
	line-height:1.6em;
	font-weight:bold;
	padding:0 20px 0 20px;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_text h3 {
		font-size:16px;
  }
}

.column_contents .main_cont .column_text h4 {
	margin:0 0 10px 0;
	font-size:15px;
	line-height:1.6em;
	font-weight:bold;
	padding:0 20px 0 20px;
}

.column_contents .main_cont .column_text img {
	margin:0 0px 30px 0px;
	vertical-align: bottom;
}

.column_contents .main_cont .column_text p {
	margin:0 0 40px 0;
	padding:0 20px 0 20px;
	font-size:15px;
}

.column_contents .main_cont .column_text .url a {
	
}

.column_contents .main_cont .column_text ul {
	margin:0 20px 40px 20px;
}

.column_contents .main_cont .column_text ul li {
	margin:0 20px 10px 20px;
	font-size:14px;
	list-style-type: disc;
}


.column_contents .main_cont .column_text .hosoku {
	font-size:13px;
	color:#999;
}


.column_contents .main_cont .column_end {
	margin:0 0 80px 0;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
    background-color: #f9f9f9;
    padding:60px;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_end {
	  margin:0 0 60px 0;
	  display: block;
	  padding:40px 20px;
  }
}

.column_contents .main_cont .column_end .photo {
	width:30%;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_end .photo {
	  width:60%;
	  margin:0 auto 40px auto;
  }
}

.column_contents .main_cont .column_end .photo .photo_box {
	border-radius: 100%;
	background-size: cover;
	background-position: center center;
	padding-top:100%;
}

.column_contents .main_cont .column_end .text {
	width:70%;
	padding:0px 0 0 60px;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_end .text {
	  width:100%;
	  padding:0px 0 0 0px;
	  margin:0 auto 0px auto;
  }
}

.column_contents .main_cont .column_end .text h2 {
	font-size:24px;
	line-height:1.4em;
	font-weight:bold;
	margin:0 0 40px 0;
}
@media screen and (max-width: 640px) {
  .column_contents .main_cont .column_end .text h2 {
	  font-size:18px;
	  text-align: center;
  }
}

.column_contents .main_cont .column_end .text p {
	margin:0 0 20px 0;
}



/*--------------------
PALETTE WIKI
---------------------*/

.wiki_list {
	margin:0 0 40px 0;
}

.wiki_list ul {
	font-size:0;
}

.wiki_list ul li {
	display: inline-block;
	font-size:15px;
	width:25%;
	vertical-align: top;
	box-sizing: border-box;
	padding:0 2% 20px 0;
}
@media screen and (max-width: 1200px) {
  .wiki_list ul li {
	width:33.3%;
  }
}
@media screen and (max-width: 1000px) {
  .wiki_list ul li {
	width:50%;
	padding:0 3% 20px 0;
  }
}

.wiki_list ul li a {
	display: block;
	background-color: #FFF;
	padding:40px;
	text-decoration: none;
	position: relative;
	border:solid 2px transparent;
		transition: 0.4s 0.0s ease-in-out;
		-webkit-transition: 0.4s 0.0s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .wiki_list ul li a {
	padding:20px 10px 20px 10px;
  }
}

.wiki_list ul li a:after {
	content:"";
	position: absolute;
	bottom:-2px;
	right:-2px;
  	width: 20px;
  	height: 20px;
  	background-color: #888;
  	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
@media screen and (max-width: 1000px) {
  .wiki_list ul li a:after {
  	width: 10px;
  	height: 10px;
  }
}

.wiki_list ul li a:hover {
	border:solid 2px #888;
}

.wiki_list ul li h3 {
	font-size:18px;
	line-height:1.4em;
	font-weight:bold;
	margin:0 0 20px 0;
}
@media screen and (max-width: 640px) {
  .wiki_list ul li h3 {
	font-size:15px;
	margin:0 0 0px 0;
  }
}

.wiki_list ul li p {
	font-size:13px;
	color:#888;
    line-height: 180%;
    min-height: calc(1em * 1.8 * 3);
}
@media screen and (max-width: 640px) {
  .wiki_list ul li p {
	display: none;
  }
}

.page_title_works .wiki_title {
	font-size:32px;
}
@media screen and (max-width: 1000px) {
 .page_title_works .wiki_title {
	font-size:24px;
  }
}
@media screen and (max-width: 640px) {
 .page_title_works .wiki_title {
  }
}

.column_contents .wiki_cont {
	padding-top:40px;
}