@charset "utf-8";
/* ==========================================================

home.css

============================================================ */

@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

  PC

  _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/	
	
	/* common.css上書き
	--------------------------------------------------------*/
	#footer{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	
	/* レイアウト
	--------------------------------------------------------*/
	.wrap_home{
		position: relative;
		width: 100%;
		height: calc(100vh - 250px);
		overflow: hidden;
	}
	
	#container_home{
		top: 50%;
		left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);		
		position: absolute;
		width: 100%;
	}
	
	/* コンテンツ
	--------------------------------------------------------*/
	
	/*--公開になったカテゴリーが増えたら編集--*/
	.parts_circle:nth-child(1),
	.parts_circle:nth-child(2),
	.parts_circle:nth-child(3),
	.parts_circle:nth-child(4){pointer-events: none;}
	
	.txt_path01{
		font-family: 'Roboto Condensed', sans-serif;
		font-weight: bold;
		font-style: Italic;
		font-size: 3.5rem;
		letter-spacing: 0.1em;
		color: #F9D2D7;
		position: absolute;
		top: 9%;
		right: 0;
		left: 0;
		margin: auto;
		transition: .2s ease-in-out;
		-webkit-transition:.2s ease-in-out;
		z-index: -5;
	}
	
	.txt_path01:hover{
		transition: .4s ease-in-out;
		-webkit-transition:.4s ease-in-out;
		opacity: 1;
	}
	
	.it_circle .txt_path01,
	.develop_circle .txt_path01,
	.hosting_circle .txt_path01,
	.ses_circle .txt_path01{opacity: 0;}
	
	
	.it_circle:hover .txt_path01{
		-webkit-transform: translate(0% , -85%);	
		transform: translate(0% , -85%);
	}
	
	.develop_circle:hover .txt_path01{
		-webkit-transform: translate(25% , -43%);	
		transform: translate(25% , -43%);
	}
	
	.hosting_circle:hover .txt_path01{
		-webkit-transform: translate(-25% , -66%);	
		transform: translate(-25% , -66%);
	}
	
	.ses_circle:hover .txt_path01{
		-webkit-transform: translate(0% , -95%);	
		transform: translate(0% , -95%);
	}

	.creative_circle .txt_path01{
		-webkit-transform: translate(-3% , -82%) rotate(24deg);	
		transform: translate(-3% , -82%) rotate(24deg);
	}
	
	.promotion_circle .txt_path01{
		-webkit-transform:translate(2% , -70%) rotate(-26deg);	
		transform:translate(2% , -70%) rotate(-26deg);
	}
	
	.parts_circle:hover .txt_path01{
		animation-delay: 0.3s;
		transition: .2s ease-in-out .2s;
		-webkit-transition:.2s ease-in-out .2s;
		opacity: 1;
	}
	
	.it_circle img{width: 14%;}
	.develop_circle img{width: 73%;}
	.hosting_circle img{width: 60%;}
	.ses_circle img{width: 32%;}
	.creative_circle img{width: 65%;}
	.promotion_circle img{width: 70%;}
	
	.parts_circle{width: 14%;}
	
	.path_01{
		position: relative;
		display:-webkit-flex;
        display:flex;
		-webkit-justify-content: center;
        justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		min-height: 29.77vw;
	}
		
	.it_circle:hover,
	.develop_circle:hover,
	.hosting_circle:hover,
	.ses_circle:hover,
	.creative_circle:hover,
	.promotion_circle:hover{
		-webkit-animation: jello 1.2s ease;
		animation: jello 1.2s ease;
	}
	
	.creative_circle:hover::before{
		-webkit-animation: hoveraction .8s ease;
		animation: hoveraction .8s ease;
		animation-delay: 0.2s;
	}
	
	.it_circle,.develop_circle,.hosting_circle,
	.ses_circle,.creative_circle,.promotion_circle{
		width: 85.04%;
		height: 0;
		padding-top: 85.04%;
		border-radius: 50%;
		position: relative;
		text-align: center;
		margin: 0 auto;
	}
	
	.it_circle{
		background: url("../img/circle_it.svg") no-repeat center center;
		background-size: cover;
	}
	
	.develop_circle{
		background: url("../img/circle_development.svg") no-repeat center center;
		background-size: cover;
	}
	
	.hosting_circle{
		background: url("../img/circle_host.svg") no-repeat center center;
		background-size: cover;
	}
	
	.ses_circle{
		background: url("../img/circle_ses.svg") no-repeat center center;
		background-size: cover;
	}
	
	.creative_circle{
		background: url("../img/circle_creative.svg") no-repeat center center;
		background-size: cover;
	}
	
	.promotion_circle{
		background: url("../img/circle_pr.svg") no-repeat center center;
		background-size: cover;
	}
	
	/* stop */
	.stop{animation-play-state: paused;}

}


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

スマートフォン（iPhone,Android)

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
	
	/* common.css上書き
	--------------------------------------------------------*/
	#footer{
		width: 100%;
		padding: 0 0 10px 0;
		margin-bottom: 0;
	}
	
	/*　レイアウト
	--------------------------------------------------------*/
	#container_home{
		padding: 100px 40px 0;
		margin-bottom: 100px;
	}
	
	/*　コンテンツ
	--------------------------------------------------------*/
	.it_circle,.develop_circle,.hosting_circle,
	.ses_circle,.creative_circle,.promotion_circle{
		width: 65%;
		height: 0;
		padding-top: 65%;
		border-radius: 50%;
		position: relative;
	}
	
	/*--カテゴリーが増えたらこちら編集--*/
	/*.it_circle .txt_path01{
		position: absolute;
		top: -20%;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		width: 16%;
	}
	
	.develop_circle .txt_path01{
		position: absolute;
		top: -18%;
    	left: 36%;
		width: 80%;
	}*/
	
	.it_circle .txt_path01,
	.develop_circle .txt_path01,
	.ses_circle .txt_path01,
	.hosting_circle .txt_path01{display: none;}
	
	.hosting_circle .txt_path01{
		position: absolute;		
		width: 68%;
		top: -16%;
    	right: 39%;
		opacity: 1;
	}
	
	.ses_circle .txt_path01{
		position: absolute;
		width: 34%;
		top: -18%;
    	right: 35%;
		opacity: 1;
	}
	
	.creative_circle .txt_path01{
		position: absolute;
		width: 70%;
		top: -18%;
		right: 35%;
		opacity: 1;
	}
	
	.promotion_circle .txt_path01{
		position: absolute;
		width: 80%;
		top: -18%;
		right: -12%;
		opacity: 1;
	}
	
	.it_circle .txt_path01 img,
	.develop_circle .txt_path01 img,
	.hosting_circle .txt_path01 img,
	.ses_circle .txt_path01 img,
	.creative_circle .txt_path01 img,
	.promotion_circle .txt_path01 img{width: 100%;}
		
	.parts_circle{margin-bottom: 20vw;}
	
	.parts_circle:last-child{margin-bottom: 0;}
	
	.parts_circle:nth-child(1),
	.parts_circle:nth-child(2),
	.parts_circle:nth-child(3),
	.parts_circle:nth-child(4){
		pointer-events: none;
	}
	
	.parts_circle a{
		display:-webkit-flex;
        display:flex;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.parts_circle:nth-of-type(odd) a{
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
		
	.it_circle{
		background: url("../img/circle_it.svg") no-repeat center center;
		background-size: cover;
	}
	
	.develop_circle{
		background: url("../img/circle_development.svg") no-repeat center center;
		background-size: cover;
	}
	
	.hosting_circle{
		background: url("../img/circle_host.svg") no-repeat center center;
		background-size: cover;
	}
	
	.ses_circle{
		background: url("../img/circle_ses.svg") no-repeat center center;
		background-size: cover;
	}
	
	.creative_circle{
		background: url("../img/circle_creative.svg") no-repeat center center;
		background-size: cover;
	}
	
	.promotion_circle{
		background: url("../img/circle_pr.svg") no-repeat center center;
		background-size: cover;
	}
	
	/*　スクロールアクション
	--------------------------------------------------------*/
	
	/*--基本--*/
   /*.txt_path01.delighter {
      transition: all .3s ease-out;
      opacity: 0;
   }*/
 
	/*--カテゴリーが増えたらこちら編集--*/
	/*--スタートしたアクション--*/
	/*.hosting_circle .txt_path01.delighter.started {
		top: 21%;
		right: 10%;
		opacity: 1;
   }
	
	.ses_circle .txt_path01.delighter.started {
		top: 21%;
    	right: 25%;
		opacity: 1;
   }*/
	
	/*.creative_circle{
		-webkit-animation: jello 1.2s ease;
		animation: jello 1.2s ease;
	}
	
	.creative_circle .txt_path01.delighter.started {
		top: 21%;
		right: 25%;
		opacity: 1;
   }
	

	.promotion_circle .txt_path01.delighter.started {
		top: 21%;
		right: 8%;
		opacity: 1;
   }*/
 
	/*--エンド時のアクション--*/	
	/*.hosting_circle .txt_path01.delighter.ended  {
		top: -16%;
    	right: 39%;
		opacity: 1;
   }
	
	.ses_circle .txt_path01.delighter.ended  {
		top: -18%;
    	right: 35%;
		opacity: 1;
   }*/
	
	/*.creative_circle .txt_path01.delighter.ended  {
		top: -18%;
		right: 35%;
		opacity: 1;
   }
	
	.promotion_circle{
		-webkit-animation: jello 1.2s ease;
		animation: jello 1.2s ease;
	}
	
	.promotion_circle .txt_path01.delighter.ended  {
		top: -18%;
		right: -12%;
		opacity: 1;
   }*/
	
	
}