@CHARSET "UTF-8";
/*******************************************************************************
 * LOOK Planning＆Design Inc.
 * WEB SITE ver.2021
 * RESPONSIVE
 * PC width min-width:768px
 * SP max-width: 767px(iPhone6+ ヨコイチまで)
*******************************************************************************/
@import url(base.css);

/******************************************************************************

 * アニメーション
 
******************************************************************************/
/*FadeInUp*/
.c-animation.is-animation {
    transform: translateY(0);
    opacity: 1;
}
.c-animation {
    transform: translateY(50px);
	opacity: 0;
	transition: opacity 2.5s cubic-bezier(.075,.82,.165,1),transform 2.5s cubic-bezier(.075,.82,.165,1);
	will-change: transform;
}

/*fadeIn*/
.fadeInTrigger{opacity: 0;}
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/*一文字づつ*/
.eachTextAnime span{
	opacity: 0;
}
.eachTextAnime.appeartext span{ 
	animation:text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
		0% {opacity:0;}
		100% {opacity:1;}
}

/*CGアニメ*/
.logo-cg-item {
		stroke:#231815;
		fill:#ACA8A7;
		fill-opacity: 0;
		stroke-width:1;
		stroke-dasharray: 3000;
		stroke-dashoffset:3000;
		-webkit-animation: anime-logo-cg 4s ease-in 0s forwards;
		animation: anime-logo 4s ease-in 0s forwards;
	}
	
@keyframes anime-logo{
		0%{stroke-dashoffset:3000;fill-opacity: 0;}
		30% {fill-opacity: 0;}
		60% {fill-opacity: 0.8; stroke:#ACA8A7;}
		100%{stroke-dashoffset:0;fill-opacity: 1; stroke:#ACA8A7;}
}
@-webkit-keyframes anime-logo{
		0%{stroke-dashoffset:3000;fill-opacity: 0;}
		30% {fill-opacity: 0;}
		60% {fill-opacity: 0.8;  stroke:#ACA8A7;}
		100%{stroke-dashoffset:0;fill-opacity: 1; stroke:#ACA8A7;}
}

/******************************************************************************

 * ARTICLE　共通
 
******************************************************************************/
body>article { width:100%; margin:auto;}
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	section{
		width:1280px;
		margin:100px auto;
		padding-top:10px;
	}
	h1{
		display:table;
		margin:auto;
		padding-top:100px;
	}
	#logo-CG{
		display:block;
		width:310px;
		height:auto;
		margin:auto;
	}
	h1>img{
		display:block;
		margin:20px auto 0;
		width:354px;
		height:auto;
		animation-delay: 1.5s;
	}
	h2{
		font-size:1.8rem;
		letter-spacing:0.2em;
		font-weight:normal;
		text-align:center;
		margin-bottom:50px;
	}
	h2::before {
		content: "";
		background: url(../img/mark.svg) left;
		display: inline-block;
		height: 12px;
		width: 12px;
		vertical-align: baseline;
		margin-right:12px;
	}
	h2::after {
		content: "";
		background: url(../img/mark.svg) right;
		display: inline-block;
		height: 12px;
		width: 12px;
		vertical-align: baseline;
		margin-left:10px;
	}
	h3{
		font-family: 'Noto Serif JP', serif;
		font-size:2.7rem;
		line-height:1.5;
		text-align:left;
		display:table;
		margin:0 auto 20px;
		font-weight:normal;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	section{
		width:100%;
		margin:80px auto;
	}
	h1{
		margin:auto;
		padding-top:50px;
		text-align:center;
	}
	#logo-CG{
		display:block;
		margin:auto;
		width:50%;
		max-width:310px;
		height:auto;
	}
	h1>img{
		display:block;
		margin:20px auto 0;
		width:60%;
		max-width:354px;
		height:auto;
	}
	h2{
		font-size:1.8rem;
		letter-spacing:0.2em;
		font-weight:normal;
		text-align:center;
		margin-bottom:30px;
	}
	h2::before {
		content: "";
		background: url(../img/mark.svg) left;
		display: inline-block;
		height: 12px;
		width: 12px;
		vertical-align: baseline;
		margin-right:12px;
	}
	h2::after {
		content: "";
		background: url(../img/mark.svg) right;
		display: inline-block;
		height: 12px;
		width: 12px;
		vertical-align: baseline;
		margin-left:10px;
	}
	h3{
		font-family: 'Noto Serif JP', serif;
		font-size:2rem;
		line-height:1.5;
		text-align:left;
		display:table;
		margin:0 auto 20px;
		font-weight:normal;
		text-align:center;
	}
	img{
		width:100%;
		height:auto;
	}
}

/******************************************************************************

 * #Concept
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#Concept>div{
		display:table;
		margin:auto;
	}
	#Concept>div>p{
		font-size:1.5rem;
		line-height:1.8;
	}
	#Concept>figure{
		display: -webkit-box; /* old Android */
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		margin:100px auto;
	}
	#Concept>figure>img{
		width:640px;
		height:auto;
	}
	#Concept>div:nth-of-type(2)>p{
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size:1.4rem;
		letter-spacing:0.2rem;
		margin-bottom:80px;
		text-align:center;
	}
	#Concept>div:nth-of-type(2)>p>span{
		font-family: 'Noto Serif JP', serif;
		font-size:4rem;
		display:block;
	}
	#Concept>div>ul{
		display: -webkit-box; /* old Android */
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari etc. */
		-ms-flex-wrap: wrap; /* IE10*/
		flex-wrap: wrap;
	}
	#Concept>div>ul>li{
		margin-bottom:40px;
	}
	#Concept>div>ul>li:nth-of-type(3n){
		animation-delay: 0.5s;
	}
	#Concept>div>ul>li:nth-of-type(4n+1){
		animation-delay: .8s;
	}
	#Concept>div>ul>li:nth-of-type(2),
	#Concept>div>ul>li:nth-of-type(7),
	#Concept>div>ul>li:nth-of-type(10){
		animation-delay: 1s;
	}
	#Concept>div>ul>li:nth-of-type(8),
	#Concept>div>ul>li:nth-of-type(4){
		animation-delay: 1.5s;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#Concept{
		padding:0 16px;
	}
	#Concept>div>p{
		font-size:1.5rem;
		line-height:1.8;
	}
	#Concept>figure{
		margin:30px 0;
	}
	#Concept>figure>img{
		max-width:640px;
		height:auto;
		margin-bottom:10px;
	}
	#Concept>div:nth-of-type(2)>p{
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size:1.3rem;
		letter-spacing:0.2rem;
		margin-bottom:40px;
		text-align:center;
	}
	#Concept>div:nth-of-type(2)>p>span{
		font-family: 'Noto Serif JP', serif;
		font-size:2.2rem;
		display:block;
	}
	#Concept>div>ul{
		display: -webkit-box; /* old Android */
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari etc. */
		-ms-flex-wrap: wrap; /* IE10*/
		flex-wrap: wrap;
	}
	#Concept>div>ul>li{
		width : calc(100% /2 ) ;
		margin-bottom:10px;
	}
	#Concept>div>ul>li:nth-of-type(3n){
		animation-delay: 0.5s;
	}
	#Concept>div>ul>li:nth-of-type(4n+1){
		animation-delay: .8s;
	}
	#Concept>div>ul>li:nth-of-type(2),
	#Concept>div>ul>li:nth-of-type(7),
	#Concept>div>ul>li:nth-of-type(10){
		animation-delay: 1s;
	}
	#Concept>div>ul>li:nth-of-type(8),
	#Concept>div>ul>li:nth-of-type(4){
		animation-delay: 1.5s;
	}
}

/******************************************************************************

 * #Services
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#Services>div:first-of-type{
		width:810px;
		margin:80px auto;
		display: -webkit-box; /* old Android */
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-justify-content: space-between;/* Safari etc. */
		-ms-justify-content: space-between;/* IE10*/
		justify-content: space-between;
	}
	#Services>div>dl{
		width:260px;
	}
	#Services>div>dl>dt{
		font-size:1.8rem;
		border-bottom:solid 4px #3B3932;
		padding-bottom:10px;
		text-align:center;
	}
	#Services>div>dl>dd{
		padding:20px 10px 0;
	}
	#Services>div>dl>dd>ul>li{
		font-size:1.6rem;
		margin-bottom:20px;
	}
	#Services>div>dl>dd>ul>li>ul{
		margin:10px 0 0 1em;
	}
	#Services>div>dl>dd>ul>li>ul>li{
		font-size:1.2rem;
		line-height:1.8;
	}
	/***/
	#Services>div>ul{
		display: -webkit-box; /* old Android */
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari etc. */
		-ms-flex-wrap: wrap; /* IE10*/
		flex-wrap: wrap;
		-webkit-justify-content: space-between;/* Safari etc. */
		-ms-justify-content: space-between;/* IE10*/
		justify-content: space-between;
	}
	#Services>div>ul>li{
		margin-bottom:40px;
	}
	#Services>div>ul>li>img{
		width:260px;
		height:auto;
	}
	#Services>div>ul>li>span{
		display:block;
		margin-top:6px;
		font-size:1.2rem;
	}
	#Services>div>ul>li:nth-of-type(3n){
		animation-delay: 0.5s;
	}
	#Services>div>ul>li:nth-of-type(4n+1){
		animation-delay: .8s;
	}
	#Services>div>ul>li:nth-of-type(7){
		animation-delay: 1s;
	}
	#Services>div>ul>li:nth-of-type(8){
		animation-delay: 1.5s;
	}
	#Services>div>ul>li .btn{
		position: relative;
		overflow: hidden;
		display:block;
		background:#383838;
		font-size:1.8rem;
		padding:8px 0;
		text-align:center;
		margin:20px 0 0;
		transition: ease .2s;
 	}
	.btn span {
		position: relative;
		z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
		color:#FFF;
	}
	.btn:hover span{
		color:#fff;
	}
	.bgskew::before {
		content: '';
		/*絶対配置で位置を指定*/
		position: absolute;
		top: 0;
		left: -130%;
		/*色や形状*/
		background:#aaa;
		width:120%;
		height: 100%;
		transform: skewX(-25deg);
	}
	
	/*hoverした時のアニメーション*/
	.bgskew:hover::before {
		animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
	}
	
	@keyframes skewanime {
		100% {
			left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
		}
}


}
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#Services{
		padding-top:30px;
	}
	#Services>div{
		margin:40px 0;
	}
	#Services>h3{
		padding:0 16px;
	}
	#Services>div>dl{
		margin-bottom:40px;
		padding:0 26px;
	}
	#Services>div>dl>dt{
		font-size:1.8rem;
		border-bottom:solid 4px #3B3932;
		padding-bottom:10px;
		text-align:center;
	}
	#Services>div>dl>dd{
		padding:20px 10px 0;
	}
	#Services>div>dl>dd>ul>li{
		font-size:1.6rem;
		margin-bottom:20px;
	}
	#Services>div>dl>dd>ul>li>ul{
		margin:10px 0 0 1em;
	}
	#Services>div>dl>dd>ul>li>ul>li{
		font-size:1.2rem;
		line-height:1.8;
	}
	/***/
	#Services>div>ul{
		padding:0 11px;
		display: -webkit-box; /* old Android */
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari etc. */
		-ms-flex-wrap: wrap; /* IE10*/
		flex-wrap: wrap;
		-webkit-justify-content: space-between;/* Safari etc. */
		-ms-justify-content: space-between;/* IE10*/
		justify-content: space-between;
	}
	#Services>div>ul>li{
		width : calc((100% - 20px)/2 ) ;
		margin:0 5px 20px;
	}
	#Services>div>ul>li>span{
		display:block;
		margin-top:6px;
		font-size:1.2rem;
	}
	#Services>div>ul>li .btn{
		display:block;
		background:#383838;
		font-size:1.5rem;
		color:#FFF;
		padding:8px 0;
		text-align:center;
		margin:20px 0 0;
		transition: ease .2s;
 	}
}

/******************************************************************************

 * #Company
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#Company>table{
		margin:auto;
	}
	#Company>table th{
		padding:10px;
		width:30%;
		font-weight:normal;
	}
	#Company>table td{
		padding:10px;
		line-height:1.7;
	}
}

/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#Company{
		padding:30px 16px 0;
	}
	#Company>table{
		width:100%;
		margin:auto;
		font-size:1.5rem;
	}
	#Company>table th{
		background:#efefef;
		display:block;
		padding:10px;
		font-weight:normal;
	}
	#Company>table td{
		display:block;
		padding:10px;
		line-height:1.7;
	}
}

/******************************************************************************

 * #Contact
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#Contact{
		margin-top:150px;
	}
	/***/
	#Contact table{
		width:800px;
		margin:50px auto 0;
		border: 1px solid #c8c8c8;
	}
	#Contact table th{
		padding:10px;
		width:30%;
		font-weight:normal;
		border: 1px solid #c8c8c8;
		vertical-align:middle;
	}
	#Contact table th>span{
		display:inline-block;
		margin-left:6px;
		font-size:1.1rem;
		color:#900;
	}
	#Contact table td{
		padding:10px;
		line-height:1.7;
		border: 1px solid #c8c8c8;
	}
	#Contact table td input[type="text"],
	#Contact table td textarea{
		width:70%;
		padding:5px;
    	outline: none;
   	 	border: 1px solid #DDD;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
   		 font-size: 16px;
	}
	#Contact table td input.zip{ width:30%;}
	input[type="text"]:focus,
	texture:focus,
	textarea:focus,
	texture:focus{
		box-shadow: 0 0 7px #3498db;
    	border: 1px solid #3498db;
	}	
	#Contact table td div label{
		display:block;
		margin:3px 0;
	}
	#Contact table td label>input{
		vertical-align:-1px;
	}
	/**エラー**/
	#Contact table td p.error{
		margin:0;
    	color:#900;
		font-size:1.1rem;
	}
	/**********ボタン***********/
	form>div{
		text-align:center;
	}
	input[type="submit"],
	input[type="reset"],
	input[type="button"]{
		width:200px;
		background: #fff; /* Old browsers */
    	border: 1px solid #3B3932;
    	color: #111;
    	padding: 10px 20px;
		margin:30px 10px 0;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
   	 	border-radius: 3px;
		cursor:pointer;
	}
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover{
		color:#FFF;
		background: #3B3932; /* Old browsers */
	}
	
	/*******************************************
					確認画面
	********************************************/
	#confirmWrap {
		width:100%;
		margin:100px auto 0;
		color:#555;
		line-height:120%;
		font-size:90%;
	}
	#confirmWrap p {
		font-size:1.6rem;
		line-height:1.5;
		margin-bottom:30px;
	}
	#confirmWrap table.formTable{
		background:#FFF;
		width:1000px;
		margin:50px auto 0;
		line-height:1.8;
	}
	#confirmWrap table.formTable td,
	#confirmWrap table.formTable th{
		border: 1px solid #c8c8c8;
		padding:10px;
	}
	#confirmWrap table.formTable th{
		width:30%;
		color:#3a3a3a;
		font-size:15px;
		font-weight:normal;
	}
	#confirmWrap .error_messe{
		margin:5px 0;
		color:red;
	}
	
	/*******************************************
				送信完了
	********************************************/
	#thanks{
		margin:100px auto 0;
		text-align:center;
	}
	#thanks>p{
		font-size:2rem;
		line-height:3;
	}
	#thanks>p>a{
		font-size:1.6rem;
		color:#3a3a3a;
		line-height:1.5;
		border:solid #c8c8c8 1px;
		display:table;
		padding:10px 50px;
		margin:50px auto 0;
		background: #fff; /* Old browsers */
		background: linear-gradient(to bottom, #fff 0%,#eee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   		background: -moz-linear-gradient(top, #FFF 0%, #EEE);
    	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
		-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
   	 	border-radius: 3px;
	}
}
	
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#Contact{
		padding:30px 16px 0;
	}
	/***/
	#Contact table{
		font-size:1.5rem;
		width:100%;
		background:#FFF;
		margin:0 auto 20px;
	}
	#Contact table td{
		display:block;
	}
	#Contact table th{
		display:block;
		text-align:left;
		background:#ececec;
		color:#3a3a3a;
		font-size:15px;
		padding:10px 15px;
		font-weight:normal;
	}
	#Contact table th>span{
		display:inline-block;
		margin-left:6px;
		font-size:1.1rem;
		color:#900;
	}
	#Contact table td{
		text-align:left;
		color:#3a3a3a;
		font-size:15px;
		padding:15px 10px;
	}
	#Contact table td input[type="text"],
	#Contact table td textarea{
		width:100%;
		padding:8px;
    	outline: none;
   	 	border: 1px solid #DDD;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
   		 font-size: 16px;
	}
	#Contact table td input.zip{ width:50%;}
	input[type="text"]:focus,
	texture:focus,
	textarea:focus,
	texture:focus{
		box-shadow: 0 0 7px #3498db;
    	border: 1px solid #3498db;
	}	
	#Contact table td label{
		display:block;
		margin:3px 0;
	}
	#Contact table td label span{
		display:block;
		vertical-align:top;
		margin-left:30px;
	}
	#Contact table td label input{
		float:left;
		width:20px;
		height:20px;
		margin:4px 5px 0 0;
	}
	#Contact table td textarea{
		margin-top:5px;
	}
	/**エラー**/
	#Contact table td p.error{
		margin-bottom:4px;
		color:#900;
		font-size:1.1rem;
	}
	/**********ボタン***********/
	form>div{
		text-align:center;
	}
	input[type="submit"],
	input[type="reset"],
	input[type="button"]{
		width:120px;
		background: #fff; /* Old browsers */
    	border: 1px solid #3B3932;
    	color: #111;
    	padding: 10px 0;
		margin:20px 10px 0;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
   	 	border-radius: 3px;
		cursor:pointer;
	}
	/*******************************************
					確認画面
	********************************************/
	#confirmWrap {
		width:100%;
		margin:0 auto 30px;
		padding:30px 10px 20px;
		color:#555;
		line-height:120%;
		font-size:90%;
	}
	#confirmWrap p {
		font-size:1.6rem;
		line-height:1.5;
		margin-bottom:30px;
	}
	#confirmWrap table.formTable{
		width:100%;
		background:#FFF;
		margin:30px auto 0;
		line-height:1.8;
	}
	#confirmWrap table.formTable td{
		display:block;
		padding:10px 10px;
	}
	#confirmWrap table.formTable th{
		display:block;
		text-align:left;
		background:#ececec;
		color:#3a3a3a;
		font-size:1.5rem;
		padding:10px 10px;
		font-weight:normal;
	}
	#confirmWrap .error_messe{
		margin:5px 0;
		color:red;
	}

	/*******************************************
				送信完了
	********************************************/
	#thanks{
		text-align:center;
		margin:70px 0 50px;
	}
	#thanks>p{
		font-size:16px;
		line-height:2;
	}
	#thanks>p>a{
		font-size:16px;
		color:#3a3a3a;
		line-height:1.5;
		border:solid #c8c8c8 1px;
		display:table;
		padding:10px 50px;
		margin:50px auto 0;
		background: #fff; /* Old browsers */
		background: linear-gradient(to bottom, #fff 0%,#eee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   		background: -moz-linear-gradient(top, #FFF 0%, #EEE);
    	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
		-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
   	 	border-radius: 3px;
	}
}