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

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

#mv {
	width: 100%;
	line-height: 0;
	margin: 0;
	position: relative;
}

#mv object,
#mv #animation_container{width: 100%;}

#mv object {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 641px){
	
	#mv {
		min-width: 1300px;
		padding-top: 46.15%;
		/*overflow: hidden;*/
	}
	
	#mv h1{
		width: 1128px;
		position: absolute;
		bottom: -0;
		left: 5.92%;
		z-index: 3;
	}
	
	section#info {
		width: 100%;
		min-width: 1300px;
		background: #fdd000;
		padding: 38px 0 30px;
	}
	
	section#info div.info_block{
		width: 994px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	section#info div.info_block h2{
		width: 100px;
		font-size: 20px;
		font-size: 2.0rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.2em;
		padding: 14px 0;
	}
	
	section#info div.info_block ul{
		width: 866px;
		list-style: none;
		padding: 14px 0 14px 95px;
		border-left: 1px solid #4d4d4d;
	}
	
	section#info div.info_block ul li{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	section#info div.info_block ul li + li{
		margin-top: 8px;
	}
	
	section#info div.info_block ul li p.date{
		width: 120px;
		letter-spacing: 0.1em;
	}
	
	section#info div.info_block ul li p.title{
		width: 645px;
		letter-spacing: 0.2em;
	}
	
	section#info div.info_block ul li p.title a{
		color: #4d4d4d;
	}
	
	section#about {
		width: 1140px;
		margin: 70px auto 60px;
		height: 585px;
		background: url("../images/top/about_photo_pc.jpg") no-repeat;
		background-size: cover;
		border-radius: 20px;
		line-height: 0;
		overflow: hidden;
		position: relative;
	}
	
	section#about div.block{
		width: 470px;
		padding: 58px 30px 36px;
		background: #FFF;
		position: absolute;
		top: -20px;
		right: 38px;
		border-radius: 20px;
	}
	
	section#about div.block h2 {
		width: 346px;
		line-height: 0;
		margin-bottom: 26px;
	}
	
	section#about div.block figure {
		display: none;
	}
	
	section#about div.block p {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2.2;
		letter-spacing: 0.1em;
	}
	
	section#about div.block ul {
		width: 220px;
		margin: 15px 0 0;
		list-style: none;
	}
	
	section#about div.block ul li{
		border-radius: 8px;
		overflow: hidden;
	}
	
	section#about div.block ul li + li{
		margin-top: 9px;
	}
	
	section#about div.block ul li a{
		display: block;
		color: #FFF;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.1em;
		padding: 10px 13px;
		background: rgb(0,159,232);
		background: linear-gradient(90deg, rgba(0,159,232,1) 0%, rgba(0,151,156,1) 100%);
		position: relative;
	}
	
	section#about div.block ul li a::after{
		content: "";
		width: 20px;
		height: 5px;
		background: url("../images/top/arrow_white.svg") no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 12px;
		right: 13px;
		z-index: 2;
	}
	
	section#slider_block {
		width: 100%;
		padding: 45px 0 90px;
	}
	
	section#slider_block h2{
		width: 306px;
		margin: 0 auto 23px;
		line-height: 0;
	}
	
	section#work {
		width: 1140px;
		margin: 0 auto;
		overflow: hidden;
		border-radius: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}
	
	section#work div.text_block{
		width: 40%;
		color: #FFF;
		padding: 50px 45px 45px;
		background: rgb(0,159,232);
		background: linear-gradient(90deg, rgba(0,159,232,1) 0%, rgba(0,151,156,1) 100%);
		position: relative;
	}
	
	section#work div.text_block::after{
		content: "";
		width: 142px;
		height: 208px;
		background: url("../images/top/work_illust.svg") no-repeat;
		position: absolute;
		top: 7px;
		right: 14px;
		z-index: 1;
	}
	
	section#work div.text_block h2{
		width: 208px;
		line-height: 0;
		margin-bottom: 28px;
	}
	
	section#work div.text_block p{
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2.1;
		letter-spacing: 0.1em;
		margin-bottom: 35px;
	}
	
	section#work div.text_block a{
		width: 150px;
		display: block;
	}
	
	section#work figure {
		width: 60%;
		line-height: 0;
	}
	
}

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 640px){
	
	#mv {
		padding-top: 89.30%;
		/*overflow: hidden;*/
	}
	
	#mv h1{
		width: 89%;
		position: absolute;
		top: 38.9%;
		left: 5.49%;
		z-index: 3;
	}
	
	section#info {
		width: 100%;
		background: #fdd000;
		padding: 20px 0 30px;
	}
	
	section#info div.info_block{
		width: 86.4%;
		margin: 0 auto;
	}
	
	section#info div.info_block h2{
		font-size: 24px;
		font-size: clamp(12px, 2.8vw, 24px);
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.2em;
		margin-bottom: 8px;
	}
	
	section#info div.info_block ul{
		width: 100%;
		list-style: none;
		font-size: 24px;
		font-size: clamp(12px, 2.8vw, 24px);
	}
	
	section#info div.info_block ul li{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	section#info div.info_block ul li + li{
		margin-top: 6px;
	}
	
	section#info div.info_block ul li p.date{
		width: 7em;
		letter-spacing: 0.04em;
	}
	
	section#info div.info_block ul li p.title{
		width: -webkit-calc(100% - 7em);
		width: -moz-calc(100% - 7em);
		width: calc(100% - 7em);
		letter-spacing: 0.14em;
	}
	
	section#info div.info_block ul li p.title a{
		color: #4d4d4d;
	}
	
	section#about {
		width: 90%;
		margin: 40px auto 20px;
		line-height: 0;
	}
	
	section#about div.block{
		width: 100%;
	}
	
	section#about div.block h2 {
		width: 53.8%;
		max-width: 418px;
		line-height: 0;
		margin: 0 auto 20px;
	}
	
	section#about div.block figure {
		display: block;
		border-radius: 20px;
		line-height: 0;
		overflow: hidden;
		margin-bottom: 20px;
	}
	
	section#about div.block p {
		font-size: 13px;
		font-size: clamp(13px, 3.03vw, 26px);
		line-height: 2.1;
		letter-spacing: 0.025em;
	}
	
	section#about div.block ul {
		width: 80%;
		min-width: 220px;
		margin: 20px auto 0;
		list-style: none;
	}
	
	section#about div.block ul li{
		border-radius: 8px;
		overflow: hidden;
	}
	
	section#about div.block ul li + li{
		margin-top: 9px;
	}
	
	section#about div.block ul li a{
		display: block;
		color: #FFF;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.1em;
		padding: 10px 13px;
		background: rgb(0,159,232);
		background: linear-gradient(90deg, rgba(0,159,232,1) 0%, rgba(0,151,156,1) 100%);
		position: relative;
	}
	
	section#about div.block ul li a::after{
		content: "";
		width: 20px;
		height: 5px;
		background: url("../images/top/arrow_white.svg") no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 12px;
		right: 13px;
		z-index: 2;
	}
	
	section#slider_block {
		width: 100%;
		padding: 30px 0 60px;
	}
	
	section#slider_block h2 {
		width: 41.5%;
		max-width: 356px;
		line-height: 0;
		margin: 0 auto 20px;
	}
	
	section#work {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	
	section#work div.text_block{
		width: 100%;
		color: #FFF;
		padding: 40px 10% 30px;
		background: rgb(0,159,232);
		background: linear-gradient(90deg, rgba(0,159,232,1) 0%, rgba(0,151,156,1) 100%);
		position: relative;
	}
	
	section#work div.text_block::after{
		content: "";
		width: 16.4vw;
		height: 24.2vw;
		background: url("../images/top/work_illust.svg") no-repeat;
		position: absolute;
		top: 4.1vw;
		right: 14vw;
		z-index: 1;
	}
	
	section#work div.text_block h2{
		width: 31.7vw;
		max-width: 272px;
		line-height: 0;
		margin-bottom: 18px;
	}
	
	section#work div.text_block p{
		font-size: 13px;
		font-size: clamp(13px, 3.03vw, 26px);
		line-height: 2.1;
		letter-spacing: 0.1em;
		margin-bottom: 30px;
	}
	
	section#work div.text_block a{
		width: 46.15vw;
		max-width: 198px;
		margin: 0 auto;
		display: block;
	}
	
	section#work figure {
		width: 100%;
		line-height: 0;
	}
}