@charset "UTF-8";
/*
 * CSS style.css
 */
/*========================================

  .header

========================================*/
.header{
  background: #444;
}

.header__inner{
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.header__inner.mod__wrapper{
  max-width: 1400px;
  width: 93.75%;
  margin: 0 auto;
}

.header__logo{
  display: block;
  width: 100px;
  padding: 15px 0;
}

.header__txt{
  width: 351px;
  margin-left: auto;
  padding: 14px 0 18px;
  line-height: 0;
}

.mod__img img{
  width: 100%;
}

@media (max-width: 960px){
  .header__txt{
    width: 300px;
  }
}

@media (max-width: 640px){
  .header__logo{
    width: 80px;
  }
  .header__txt{
    width: 52%;
  }
}

.usage__works__by{
  margin-top: 1.17%;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  line-height: 1;
}
@media (max-width: 640px){
  .usage__works__by{
  margin-top: 3.33%;
  line-height: 1.5;
}
}

/* ---------------------------------------
footer
--------------------------------------- */
footer{
	clear: both!important;
}
footer .mod__wrapper{

  box-sizing: border-box;
  max-width: 1200px;
  width: 93.75%;
  margin: 0 auto;
}
@media (max-width: 640px){
  footer .mod__wrapper{
    width: 90.625%;
  }
}

/* ---------------------------------------
base
--------------------------------------- */
body{
  position: relative;
  min-height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  /* font-family: "メイリオ", "ヒラキ?ノ角コ? Pro W3", "Hiragino Kaku Gothic Pro", "MS Pコ?シック", sans-serif; */
  font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
  font-size: 100%;

  font-feature-settings: 'palt' 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}


a{
  text-decoration: none;
}

a:hover{
  opacity: 0.8;
}

a.fade{
  display:block;
  transition: opacity 0.5s;
}


.fadeIn{
  opacity: 0;
  transition: opacity 0.7s;
}

.fadeInDone{
  opacity: 1.0;
}

.sp-img {
	display: none;
}
@media (max-width: 768px){
	.pc-img {
		display: none;
	}
	.sp-img {
		display: block;
	}
}
/* ---------------------------------------
top_title
--------------------------------------- */

.top_title{
	width: 100%;
	background: #444;
	float: left;
}
.top_title .inner{
	margin: 0 auto;
	max-width: 1260px;
	padding: 30px;
}
.top_title img{
	width: 100%;
}
.top_title .title img{
	max-width: 434px;
}
.top_title .image img{
	max-width: 564px;
}
.top_title .title {
	width: 40%;
	float: left;
	margin-top: -30px;
}
.top_title .image {
	text-align: right;
	width: 60%;
	float: right;
	padding-top: 0px;
	margin-top: -25px;
	margin-bottom: -8px;
	margin-right: -20px;
}
.top_title .title p.logo{
	max-width: 100%;
}
.top_title .title p.logo img{
	max-width: 435px;
}
.top_title .title p{
	margin-bottom: 10px!important;
}
.top_title .text{
	font-size: 96%;
	white-space: nowrap;
	line-height: 1.8em;
}

@media (max-width: 1245px){
.top_title .inner{
	margin: 0 auto;
	max-width: 1316px;
	padding: 20px 2.5%;
}
	.top_title .title .logo{
		margin-bottom: 20px!important;
	}
.top_title .title {
	width: 49%;
	float: left;
}
.top_title .title p{
	margin-bottom: 5px!important;
}
	.top_title .text{
		white-space:normal!important;
		font-size: 93%;
		}
	.top_title .image {
		padding-top: 0px;
		width: 49%;
	}
	.sp{
		display: none;
	}
}
@media (max-width: 1200px){
	.top_title .image {
		padding-top: 90px;
		width: 49%;
	}
}
@media (max-width: 768px){
	.top_title .inner{
		margin: 0 auto;
		max-width: 1316px;
		padding: 20px 5%;
		margin-top: 20px;
	}
	.top_title .text{
		white-space:normal!important;
		width: 50%;
		float: left;
		margin-top: 5%;
		font-size: 100%;
	}
	.top_title .title {
		width: 100%;
		float: none;
	}
	.top_title .image {
		padding-top: 30px;
	}
	.top_title .title .logo{
		margin-bottom: 10px!important;
	}
	.top_title .title .logo img{
		    max-width: 100%!important;
	}
	.top_title .title .logo img:first-child{
		       width: 60%;
    			margin: 0 20%;
	}
}
@media (max-width: 640px){
	.top_title .image {
		padding-top: 90px;
		width: 49%;
	}
}
@media (max-width: 480px){
	.top_title .title {
		width: 	100%;
		float: none;
	}

	.top_title .image {
		text-align: center;
		padding: 0px;
		width: 100%;
		float: none;
		display: none;
	}
	.top_title .text{
		white-space:normal!important;
		line-height: 1.8em;
		font-size: 112%;
		padding: 15px 0px 0;
		width: 100%;
		float: none;
		margin-top: 0%;
	}
	.top_title .title img{
		max-width: none;
	}
	.top_title .image img{
		max-width: none;
		margin-bottom: -20px;
	}
}
/* ---------------------------------------
body
--------------------------------------- */
.body{
	max-width: 1260px;
	margin: 0 auto;
	padding-top: 30px;
}

.body img{
	width: 100%;
}
.person{
	float: left;
	width: 100%;
	padding: 33px;
}
.person img{
	width: 100%;
	max-width: 124px;	
}
.body .picture{
	width: 42%;
	float: left;
}
.body .names p,
.body .copy p{
	font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif;
}
.body .names{
	width: 58%;
	float: right;
	padding-left: 8px;
}
.body .part{
	font-size: 112%;
line-height: 1.1em;
	margin-bottom: 20px;
}
.body .name{
	font-size: 181%;
	line-height: 1.1em;
}
.body .copy{
	padding-top:10px;
	clear: both;
	margin-bottom: 20px;
}
.body .inner{
	padding: 30px 30px;
	float: left;
	width: 100%;
}
.list{
	width: 31.46%;
	float: left;
	background: #222;
	margin-right: 32px;
	margin-bottom: 32px;
}
.list a p{
	 color: #fff;
}
.list a:hover img{
	  opacity: 0.8;
}
@media (max-width: 1225px){
	.body .names{
		padding-left: 8px!important;
	}
	.body .part{
		font-size: 87%;
		margin-bottom: 10px;
	}
	.body .name{
		font-size: 137%;
		line-height: 1.1em;
	}
.list{
	width: 31%;
	float: left;
	background: #222;
	margin-right: 3.5%;
	margin-bottom: 32px;
}
}
@media (max-width: 1090px){
	.body .part{
		font-size: 87%;
		margin-bottom: 10px;
	}
	.body .name{
		font-size: 122%;
		line-height: 1.1em;
	}
}

@media (max-width: 900px){
	.body .part{
		font-size: 73%;
		margin-bottom: 10px;
	}
	.body .name{
		font-size: 93%;
		line-height: 1.1em;
	}
}
@media (max-width: 800px){
	.body .part{
		font-size: 73%;
		margin-bottom: 10px;
	}
	.body .name{
		font-size: 87%;
		line-height: 1.1em;
	}
}

@media (max-width: 768px){
	.body .names{
		padding-left: 8px!important;
	}
	.list{
		width: 47.5%;
		margin-right: 2.5%!important;
	}
	.body .inner{
		padding: 30px 0 30px 2.5%;
		float: left;
		width: 100%;
	}
	.list:nth-child(2n){
		margin-right:0;
	}
	.body .part{
		font-size: 93%;
		margin-bottom: 25px!important;
	}
	.body .name{
		font-size: 147%;
	}
	.body .part{
		margin-bottom: 10px;
	}
	.body .copy{
		padding-top: 5px;
		clear: both;
		font-size: 112%;
		margin-bottom: 20px;
		line-height: 1.5em;
	}
	.list .text{
		clear: both;
		font-size: 93%;
		line-height: 1.3em;
	}
}
@media (max-width: 610px){
	.body .part{
		font-size: 81%;
		margin-bottom: 15px;
	}
	.body .name{
		font-size: 122%;
	}
}
@media (max-width: 510px){
	.body .part{
		font-size: 73%;
		margin-bottom: 15px;
	}
	.body .name{
		font-size: 106%;
	}
}
@media (max-width: 480px){
.body .picture{
	width: 40%;
	float: left;
}
	.body .names{
	width: 60%;
	float: right;
	padding-left: 10px;
}
	.body .part{
		font-size: 112%;
		line-height: 1.1em;
		margin-bottom: 20px;
	}
	.body .name{
		font-size: 200%;
		line-height: 1.1em;
	}
	.list{
		width: 100%;
		margin-right: 0!important;
	}
	.body .copy{
		clear: both;
		font-size: 112%;
		margin-bottom: 20px;
	}
	.body .inner{
		padding: 30px 30px 0px 30px;
		float: left;
		width: 100%;
	}
	.list:nth-child(1n){
		margin-right:0;
	}

}
.list .point{
	font-size: 73%;
	color: #222;
	background-color: #fff;
	padding: 5px 5px 4px 5px;
	float: left;
	margin-bottom: 5px;
	font-weight: bold;
	line-height: 1em;
}
.list .text{
	clear: both;
	font-size: 93%;
}
.list:nth-child(3n){
margin-right:0;
}
div.bg{

	padding: 0px!important;
	margin: 0px!important;
}
div.bg img{
	margin-bottom: -6px;
}