/* CSS Document */

#top{
}

/* sec_photo */
#top .sec_photo{
	position:relative;
	width:100%;
	min-width:1024px;
	height:320px;
	overflow:hidden;
}
#top .sec_photo .wrap{
	position:absolute;
	top:50%;
	left:50%;
}
#top .sec_photo .wrap .image{
	text-indent:-9999px;
}
#top .sec_photo .wrap .line{
	position:absolute;
	top:0;
	left:0;
	text-indent:-9999px;
	transition:width 0.6s ease-in 0s;
}
#top .sec_photo .wrap .logo{
	position:absolute;
	top:0;
	left:0;
	text-indent:-9999px;
	width:85px;
	height:85px;
	overflow:hidden;
	background-image:url("/_img/top/logo_frame.png");
	background-size:2465px 85px;
}

/* anime */
#top .sec_photo.anime_stop .wrap .line{
	width:0%!important;
}
#top .sec_photo.anime_stop .wrap .logo{
}

#top .sec_photo.anime_start .wrap .line{
}
#top .sec_photo.anime_start .wrap .logo{
	animation:logo 1.0s steps(28) 0.5s forwards;
}
@keyframes logo {
	100% {background-position:-2380px;}
}


/* photo1 */
#top .sec_photo.photo1{
	min-height:500px;
	height: 48vw;
}
#top .sec_photo.photo1 .wrap{
	margin:-468px 0 0 -960px;
	width:1920px;
}
#top .sec_photo.photo1 .image{
	height:937px;
	width:960px;
}
#top .sec_photo.photo1 .wrap_l{
	float:left;
	position:relative;
}
#top .sec_photo.photo1 .wrap_l_1 .logo{
	top: 457px;
	left: 784px;
}
#top .sec_photo.photo1 .wrap_l_1 .image{
	background-image:url("/_img/top/visual_01_01.jpg");
}
#top .sec_photo.photo1 .wrap_l_1 .line{
	background-image:url("/_img/top/visual_01_line_01.png");
	top: 496px;
	left: 644px;
	width:125px;
	height:81px;
}
#top .sec_photo.photo1 .wrap_r{
	float:right;
	position:relative;
}
#top .sec_photo.photo1 .wrap_r_1 .logo{
	top: 709px;
	left: 584px;
}
#top .sec_photo.photo1 .wrap_r_1 .image{
	background-image:url("/_img/top/visual_01_02.jpg");
}
#top .sec_photo.photo1 .wrap_r_1 .line{
	background-image:url("/_img/top/visual_01_line_02.png");
	top: 626px;
	left: 451px;
	width:123px;
	height:126px;
}

/* photo2 */
#top .sec_photo.photo2{
	height:30vw;
	min-height:320px;
}
#top .sec_photo.photo2 .wrap{
	margin:-300px 0 0 -960px;
}
#top .sec_photo.photo2 .image{
	background-image:url("/_img/top/visual_02.jpg");
	height:600px;
	width:1920px;
}
#top .sec_photo.photo2 .line{
	background-image:url("/_img/top/visual_02_line_01.png");
	top: 258px;
	left: 1029px;
	width:163px;
	height:60px;
}
#top .sec_photo.photo2 .logo{
	top:276px;
	left:1207px;
}
#top .sec_photo.photo2:anime_start .line{
}

/* photo3 */
#top .sec_photo.photo3{
	height:30vw;
	min-height:320px;
}
#top .sec_photo.photo3 .wrap{
	margin:-300px 0 0 -960px;
}
#top .sec_photo.photo3 .image{
	background-image:url("/_img/top/visual_03.jpg");
	height:600px;
	width:1920px;
}
#top .sec_photo.photo3 .line{
	background-image:url("/_img/top/visual_03_line_01.png");
	top: 307px;
	left: 1258px;
	width:217px;
	height:149px;
}
#top .sec_photo.photo3 .logo{
	top: 268px;
	left: 1491px;
}

/* photo4 */
#top .sec_photo.photo4{
	height:30vw;
	min-height:320px;
}
#top .sec_photo.photo4 .wrap{
	margin:-300px 0 0 -960px;
}
#top .sec_photo.photo4 .image{
	background-image:url("/_img/top/visual_04.jpg");
	height:600px;
	width:1920px;
}
#top .sec_photo.photo4 .line{
	background-image:url("/_img/top/visual_04_line_01.png");
	top: 306px;
	left: 940px;
	width:88px;
	height:51px;
}
#top .sec_photo.photo4 .logo{
	top: 265px;
	left: 1037px;
}


/* ---- */
#top .sec_content{
	width:808px;
	margin:0 auto;
	position:relative;
	padding:60px 0 80px 0;
}
#top .sec_content h2{
	margin:0;
	float:left;
	position:relative;
}
#top .sec_content .overview{
	margin:50px 0 0 225px;
}
#top .sec_content .overview.no_title{
	margin:20px 0 0 225px;
}
#top .sec_content .overview h3{
	font-family:"A1 Mincho", serif;
	font-size:29px;
	line-height:1.5em;
	letter-spacing:0.3em;
	margin:0 0 35px 0;
	width:720px;
}
#top .sec_content .overview p{
	margin:0;
	line-height:2.6em;
	font-size:16px;
}
#top .sec_content ol{
	list-style:none;
	width:680px;
	margin:40px auto 0 140px;
	position: relative;
}
#top .sec_content ol li{
	padding: 0 0 84px 0;
}
#top .sec_content ol li:last-child{
	background:none;
	padding-bottom:0;
}
#top .sec_content ol li .left{
	width:250px;
}
#top .sec_content ol li dl{
	width:405px;
}
#top .sec_content ol li dl dt{
	color:#e60000;
	font-size:26px;
	line-height:1em;
	margin:8px 0 15px;
}
#top .sec_content ol li dl dt span{
	font-size:13px;
	margin-left:7px;
}
#top .sec_content ol li dl dd{
	margin:0;
	line-height:1.3;
	font-size:20px;
}
/*
#top #our_detail ol li div {
	width: 261px;
	margin-bottom: 20px;
}
#top #our_detail ol li dl {
	width: 395px;
}
#top #our_detail ol li dl dt {
 	font-size: 32px;
 	line-height: 1.1;
 	margin: 0 0 15px;
}
#top #our_detail ol li dl dt span {
	display: block;
	font-size: 18px;
	margin: 0;
}
#top #our_detail ol li dl dd {
	line-height: 1.3;
	font-size: 22px;
}
*/
#top #our .detail {
	display:none;
}
#top #our hr{
	border: none;
	width: 100%;
	border-top: 1px solid #e60000;
	margin: 20px 0 20px 0;
}
#top #our p {
	line-height: 1.7;
	letter-spacing: -0.08em;
	margin-bottom: 1.5em;
}
#top #our ul {
	display: flex;
	flex-direction: column;
	height: 4em;
		flex-wrap: wrap;
}
#top #our ul li{
	margin: 0 0 .8em 0;
	padding: 0;
}
#top #our ul li::before {
	content: "・";
}

.more_btn{
	float: right;
	display: block;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: 30px;
	text-decoration: none;
}
.more_btn.open{
	padding: 14px 40px 14px 0;
	background-image: url("/_img/common/icon_more.png");
}
.more_btn.open:before{
	content: "もっと詳しく";
}
.more_btn:hover{
	opacity: .5;
}
.more_btn.close {
	text-indent: -9999px;
	width: 40px;
	height: 40px;
	background-image: url("/_img/common/icon_close.png");
	background-repeat: no-repeat;
	background-position: center right;
	text-decoration: none;
}

/* ---- */
#top .sec_news{
	margin: 12px 0 0 0;
  position: relative;
	left: 50%;
	display: inline-block;
}
#top .sec_news p.news{
  margin: 0 0 2px 52px;
	font-size: 14px;
}

#top .sec_news span{
  color: #ff0000;
  letter-spacing: 0.2em;
  font-family: "FB Miller Display Roman", serif;
  margin-right: 15px;
}
#top .sec_news span::after{
  content: '';
  width: 20px;
  height: 10px;
  margin-left: 3px;
  display: inline-block;
  background-image:url("/_img/common/icon_carat_r2.svg");
  background-repeat:repeat-x;
  background-position:bottom left;
}

#top .sec_news a{
	text-decoration: none;
  font-family: "A1 Mincho", serif;
}
#top .sec_news a:hover{
	text-decoration: underline;
}


/* ---- */
#top #philosophy h2{
	background-image:url("/_img/top/ttl_philosophy.png");
	width:152px;
	height:212px;
	text-indent:-9999px;
}

#top #what h2{
	background-image:url("/_img/top/ttl_whatwedo.png");
	width:160px;
	height:212px;
	text-indent:-9999px;
}
#top #what figure{
	padding:40px 0 0 0;
	position:relative;
	width:808px;
	height:560px;
}
#top #what figure p{
	position:absolute;
	background-repeat:no-repeat;
	text-indent:-9999px;
}
#top #what figure p.parts1{
	top: 253px;
	left: 163px;
	background-image:url("/_img/top/diagram_1.png");
	width:468px;
	height:73px;
	z-index:2;

	opacity:0;
}
#top #what figure p.parts2{
	top: 50px;
	left: 161px;
	background-image:url("/_img/top/diagram_2.png");
	width:221px;
	height:246px;
	z-index:3;

	opacity:0;
	margin-top:-30px;
}
#top #what figure p.parts3{
	top: 50px;
	left: 412px;
	background-image:url("/_img/top/diagram_3.png");
	width:221px;
	height:246px;
	z-index:4;

	opacity:0;
	margin-top:-30px;
}
#top #what figure p.parts4{
	top: 378px;
	left: 286px;
	background-image:url("/_img/top/diagram_4.png");
	width:221px;
	height:221px;
	z-index:5;

	opacity:0;
	margin-top:-30px;
}
#top #what figure p.parts5{
	top: 296px;
	left: 286px;
	background-image:url("/_img/top/diagram_5.png");
	background-position:bottom center;
	width:221px;
	height:83px;
	z-index:6;

	height:0;
	top: 379px;
}
/*
#top #what figure p.parts6{
	top: 44px;
	left: 143px;
	background-image:url(/_img/top/diagram_6.png);
	width:508px;
	height:508px;
	z-index:1;
}
*/
#top #what figure p.parts6a{
	top: 44px;
	left: 143px;
	background-image:url("/_img/top/diagram_6.png");
	background-position:left bottom;
	width:259px;
	height:508px;
	z-index:1;

	height:0;
	margin-top:508px;
}
#top #what figure p.parts6b{
	top: 44px;
	left: 402px;
	background-image:url("/_img/top/diagram_6.png");
	background-position:right top;
	width:259px;
	height:508px;
	z-index:1;

	height:0;
}

#top #what figure.anime_start p.parts1{
	transition:all 1.2s linear 0s;
	opacity:1;
}
#top #what figure.anime_start p.parts2{
	transition:all 0.8s ease 1.0s;
	opacity:1;
	margin-top:0px;
}
#top #what figure.anime_start p.parts3{
	transition:all 0.8s ease 1.5s;
	opacity:1;
	margin-top:0px;
}
#top #what figure.anime_start p.parts4{
	transition:all 0.8s ease 2.0s;
	opacity:1;
	margin-top:0px;
}
#top #what figure.anime_start p.parts5{
	transition:all 0.8s linear 2.5s;
	height:83px;
	top: 296px;
}
#top #what figure.anime_start p.parts6a{
	transition:all 1.0s cubic-bezier(0.445, 0.05, 0.55, 0.95) 4.3s;
	height:508px;
	margin-top:0;
}
#top #what figure.anime_start p.parts6b{
	transition:all 1.0s cubic-bezier(0.445, 0.05, 0.55, 0.95) 3.3s;
	height:508px;
}

#top #what figure.anime_stop p.parts1{
	transition:all 1.0s linear 0s;
}
#top #what figure.anime_stop p.parts2{
	transition:all 1.0s linear 0s;
}
#top #what figure.anime_stop p.parts3{
	transition:all 1.0s linear 0s;
}
#top #what figure.anime_stop p.parts4{
	transition:all 1.0s linear 0s;
}
#top #what figure.anime_stop p.parts5{
	transition:all 1.0s linear 0s;
}
#top #what figure.anime_stop p.parts6a{
	transition:all 1.0s linear 0s;
}
#top #what figure.anime_stop p.parts6b{
	transition:all 1.0s linear 0s;
}


#top #our h2,
#top #our_detail h2{
	background-image:url("/_img/top/ttl_ourvalue.png");
	width:152px;
	height:212px;
	text-indent:-9999px;
	position: absolute;
	top: 60px;
}

#top #profile{
	position:relative;
}
#top #profile h2{
	background-image:url("/_img/top/ttl_companyprofile.png");
	width:232px;
	height:212px;
	text-indent:-9999px;
	position:relative;
}
#top #profile a{
	text-decoration:underline;
}
#top #profile a:hover{
	color:#e60000;
	text-decoration:underline;
}
#top #profile dl{
	padding:0 0 30px 50px;
	font-size:14px;
	line-height:1.5em;
	width:706px;
}
#top #profile dl:last-child{
	padding-bottom:0;
}
#top #profile dl dt{
}
#top #profile dl dd{
}
#top #profile dl dd table{
}
#top #profile dl dd table tr{
}
#top #profile dl dd table th{
	font-weight:normal;
	text-align:left;
	width:110px;
	vertical-align:top;
}
#top #profile dl dd table td{
	vertical-align:top;
}
#top #profile h3{
	background-image:url("/_img/top/logo_radian.png");
	width:46px;
	height:370px;
	position:absolute;
	text-indent:-9999px;
	top:272px;
	right:55px;
}

#top #profile .open_toggle{
	position:relative;
	cursor:pointer;
	border-bottom:2px solid #d9d9d9;
	width:190px;
}
#top #profile .open_toggle:after{
	position:absolute;
	top:0;
	left:174px;
	content:url("/_img/common/icon_carat_b.png");
	display:block;
	width:14px;
	height:12px;
	margin-top: 0;
	transition:all 0.5s ease;
}
#top #profile .open_toggle.open:after{
	transform:rotate(-180deg);
	margin-top: 7px;
}
#top #profile .open_toggle ~ dd{
	display:none;
}
#top #profile .open_toggle.open ~ dd{
	/*display:block;*/
}


/* anime */
#top .anime_fade{
	opacity:0;
	transition:all 0.5s linear;
}
#top .anime_fade.fade_in{
	opacity:1;
}

#top .anime_slide{
	top:-30px;
	transition:all 0.5s ease-out;
}
#top .anime_slide.slide_in{
	top:0;
}