﻿@charset "UTF-8";

.mainimg {

	margin-bottom: 0;

}

#achievement {
	
	position: relative;
	padding-top: 21.5rem;
	background: #E6DAC5;

}

#achievement:before {

	position: absolute;
	top:  0;
	left: 0;
	content: "";
	width:  100%;
	height: 21.5rem;
	background: #000;

}

#achievement .wrap {
	
	position: relative;
	padding-top:    6.5rem;
	padding-bottom: 5rem;

}

#achievement .wrap .obj1 {

	position: absolute;
	top:  0;
	left: 0;
	z-index: 1;
	width: 50.8rem;

}

#achievement .wrap .obj2 {

	position: absolute;
	top:   0;
	right: 0;
	z-index: 1;
	width: 50.8rem;

}

#achievement .wrap .obj1 img { width: 100%; }
#achievement .wrap .obj2 img { width: 100%; }

#achievement .wrap .inner {
	
	width: 145rem;
	margin: 0 auto;

}

#achievement .inner .img {
	
	position: relative;
	z-index: 2;
	float: left;
	width: 53.2rem;
	overflow: hidden;

}

#achievement .inner .img:nth-child(2) {

	float: right;

}

#achievement .inner .img::before, #achievement .inner .img::after {

  position: absolute;
  z-index: 2;
  content: "";
  width:  0;
  height: 0.3rem;
  background: #fff;
  transition: all 0.57s cubic-bezier(1,0,0,1);

}

#achievement .inner .img::before {

  left: 0.6rem;
  top:  0;
  transition-duration: 0.524s;
  
}

#achievement .inner .img::after {

  right:  0.6rem;
  bottom: 1.3rem;
  transition-duration: 0.524s;
  
}

#achievement .inner .img:hover::before, #achievement .inner .img:hover::after {

  width: 97.6%;
  
}

#achievement .inner .img span {

  display: block;
  
}

#achievement .inner .img span::before, #achievement .inner .img span::after {

  position: absolute;
  content:"";
  width:  0.3rem;
  height: 0;
  background: #fff;
  transition: all 0.57s cubic-bezier(1,0,0,1);
  z-index: 10;
  
}

#achievement .inner .img span::before {

  left: 0.6rem;
  top:  0.2rem;
  transition-duration: 0.524s;
  
}

#achievement .inner .img span::after {

  right:  0.6rem;
  bottom: 1.6rem;
  transition-duration: 0.524s;
  
}

#achievement .inner .img:hover span::before, #achievement .inner .img:hover span::after {

  height: 96%;
  
}

#achievement .inner .img img { width: 100%; }

#achievement .big_logo {

	padding-top: 16rem;

}

#achievement .big_logo .logo {
	
	position: relative;
	width: 41rem;
	margin: 0 auto;
	margin-bottom: 4rem;
	transform: translateX(3.4rem);

}

#achievement .big_logo .logo:before {

	position: absolute;
	top:  -4rem;
	left: -6.5rem;
	content: "";
	width: 44.2rem;
	height: 0.2rem;
	background: #3D3D3D;

}

#achievement .big_logo .logo:after {

	position: absolute;
	top:  -7rem;
	left: -3rem;
	content: "";
	width: 0.2rem;
	height: 44rem;
	background: #3D3D3D;

}

#achievement .big_logo .logo img { width: 100%; }

#achievement .map_wrap {
	
	padding-top:    46.5rem;
	padding-bottom: 17.5rem;
	background: #000;

}

#achievement .map_wrap .map {
	
	display: block;
	height: 30.8rem;
	background-image: url('../img/map.webp');
	background-size: cover;
	background-position: center center;
	border-top:    0.3rem solid #F1A702;
	border-bottom: 0.3rem solid #F1A702;

}


/* MacBook Pro16 */
@media only screen and (max-width: 1728px) {



}


/* MacBook Pro14 */
@media only screen and (max-width: 1512px) {



}


/* 中サイズ */
@media only screen and (max-width: 1366px) {



}


/* MacBook Air */
@media only screen and (max-width: 1280px) {



}


/* iPadPro */
@media only screen and (max-width: 1024px) {

	#achievement {
		
		padding-top: 24rem;
		
	}
		
	#achievement:before {
		
		height: 24rem;
		
	}
	
	#achievement .wrap {
		
		padding-top:    10rem;
		padding-bottom: 5rem;
	
	}
	
	#achievement .wrap .obj1 {
		
		top:  0;
		left: 0;
		width: 59rem;
		
	}
	
	#achievement .wrap .obj2 {
		
		top:   0;
		right: 0;
		width: 59rem;
		
	}
	
	#achievement .wrap .inner {
		
		width: 145rem;
		
	}
	
	#achievement .inner .img {
		
		float: left;
		width: 60rem;
		
	}
	
	#achievement .inner .img:nth-child(2) {
		
		float: right;
		
	}
	
	#achievement .big_logo {
		
		padding-top: 20rem;
		
	}
	
	#achievement .big_logo .logo {
		
		width: 41rem;
		margin-bottom: 8rem;
		transform: translateX(3.4rem);
		
	}
	
	#achievement .big_logo .logo:before {
		
		top:  -4rem;
		left: -6.5rem;
		width: 44.2rem;
		height: 0.2rem;
		
	}
	
	#achievement .big_logo .logo:after {
		
		top:  -7rem;
		left: -3rem;
		width: 0.2rem;
		height: 44rem;
		
	}
	
	#achievement .map_wrap {
		
		padding-top:    38rem;
		padding-bottom: 17.5rem;
		
	}
	
	#achievement .map_wrap .map {
		
		height: 40rem;
		background-image: url('../img/map.webp');
		border-top:    0.5rem solid #F1A702;
		border-bottom: 0.5rem solid #F1A702;
		
	}

}


/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {



}


/* iPad Pro11 */
@media only screen and (max-width: 834px) {



}


/* iPad Air */
@media only screen and (max-width: 820px) {



}


/* iPhone13 miniの横 */
@media only screen and (max-width: 812px) {



}


/* iPad 9th */
@media only screen and (max-width: 810px) {



}


/* iPad */
@media only screen and (max-width: 768px) {



}

/* iPad 6th Mini */
@media only screen and (max-width: 744px) {



}


/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {



}


/* iPhone8の横 */
@media only screen and (max-width: 667px) {



}


/* iPhone5の横 */
@media only screen and (max-width: 568px) {



}


/* AndLoidL */
@media only screen and (max-width: 480px) {

	#achievement {
		
		padding-top: 26rem;
		
	}
		
	#achievement:before {
		
		height: 26rem;
		
	}
	
	#achievement .wrap {
		
		padding-top:    14rem;
		padding-bottom: 5rem;
	
	}
	
	#achievement .wrap .obj1 {
		
		top:  auto;
		bottom: 0;
		left: 0;
		width: 66rem;
		
	}
	
	#achievement .wrap .obj2 {
		
		top:   0;
		right: 0;
		width: 66rem;
		
	}
	
	#achievement .wrap .inner {
		
		width: 76%;
		
	}
	
	#achievement .inner .img {
		
		float: none;
		width: 100%;
		margin-bottom: 8rem;
		
	}
	
	#achievement .inner .img:nth-child(2) {
		
		float: none;
		
	}
	
	/*
	
	#achievement .wrap .obj1 {
		
		top:  0;
		left: 0;
		width: 71rem;
		
	}
	
	#achievement .wrap .obj2 {
		
		top:   0;
		right: 0;
		width: 71rem;
		
	}
	
	#achievement .wrap .inner {
		
		width: 150rem;
		
	}
	
	#achievement .inner .img {
		
		float: left;
		width: 72rem;
		
	}
	
	#achievement .inner .img:nth-child(2) {
		
		float: right;
		
	}
	
	*/
	
	#achievement .big_logo {
		
		padding-top: 24rem;
		
	}
	
	#achievement .big_logo .logo {
		
		width: 46rem;
		margin-bottom: 10rem;
		transform: translateX(3.4rem);
		
	}
	
	#achievement .big_logo .logo:before {
		
		top:  -5rem;
		left: -8.5rem;
		width: 52rem;
		height: 0.2rem;
		
	}
	
	#achievement .big_logo .logo:after {
		
		top:  -8rem;
		left: -5rem;
		width: 0.2rem;
		height: 52rem;
		
	}
	
	#achievement .map_wrap {
		
		padding-top:    36rem;
		padding-bottom: 17.5rem;
		
	}
	
	#achievement .map_wrap .map {
		
		height: 50rem;
		background-image: url('../img/map_sp.webp');
		border-top:    0.8rem solid #F1A702;
		border-bottom: 0.8rem solid #F1A702;
		
	}

}


/* Iphone13 Pro Max */
@media only screen and (max-width: 430px) {



}


/* Iphone12 Pro Max */
@media only screen and (max-width: 428px) {



}


/* iPhonePlus */
@media only screen and (max-width: 414px) {



}


/* iPhone14 Pro */
@media only screen and (max-width: 393px) {



}


/* iPhone12 Pro */
@media only screen and (max-width: 390px) {



}


/* iPhone8 */
@media only screen and (max-width: 375px) {



}


/* Galaxy */
@media only screen and (max-width: 360px) {



}


/* iPhone5 */
@media only screen and (max-width: 320px) {



}