@charset "utf-8";

/* aboutconan */
#aboutconan{
    position: relative;
    margin: 0 auto;
	text-align: center;
}
#aboutconan h2{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	background: rgb(50,183,182, 0.6);
	background: linear-gradient(180deg, rgba(50,183,182,0.6) 0%, rgba(53,129,165,0.6) 50%, rgba(66,83,137,0.6) 100%);
}
#aboutconan h2 img{
	position: relative;
	margin: 0 auto;
}
#aboutconan .aboutWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 800px;
	padding-top: 40px;
	text-align: left;
}
#aboutconan .aboutWrap .leftBlock{
	position: relative;
	width: calc(100% - 80px);
	margin: 0 0 10px 0;
	padding: 20px;
	background-color: rgba(255,255,255,0.90);
	max-width:600px;
	border-radius: 8px;
	color: #031324;
}
#aboutconan .aboutWrap .leftBlock::before, #aboutconan .aboutWrap .rightBlock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: transform 0.3s linear, border-width 0.3s linear, border-radius 0.3s linear, filter 0.6s linear;
  /* ショートハンド(一括指定) */
  background-image: linear-gradient(135deg, #C7C7C7 0%, #F2F3F3 50%, #C7C7C7 100%);
  background-origin: border-box;
  /* 背景の基準位置はボーダーも含める */
  background-clip: border-box;
  /* 背景の適用範囲はボーダーも含める */
  /* ショートハンド(一括指定) */
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
#aboutconan .aboutWrap .leftBlock p{
	position: relative;
	padding-left: 1.2em;
	margin: 0 auto .3em auto;
}
#aboutconan .aboutWrap .leftBlock .qtn p::before, #aboutconan .aboutWrap .leftBlock .ans01::before{
	position: absolute;
	top:0;
	left: 0;
}
#aboutconan .aboutWrap .leftBlock .qtn p::before{content: 'Q.';}
#aboutconan .aboutWrap .leftBlock .ans01::before{content: 'A.';left: 0.15em;}
#aboutconan .aboutWrap .leftBlock .qtn p{color: #0B4F8B;}
#aboutconan .aboutWrap .rightBlock{
	position: relative;
	width: calc(100% - 90px);
	margin: 0 20px 30px auto;
	padding: 20px;
	max-width:400px;
	border-radius: 8px;
}
#aboutconan .aboutWrap .rightBlock.conan{background-color: rgba(20,55,133,0.80);}
#aboutconan .aboutWrap .rightBlock.kogorou{background-color: rgba(45,114,59,0.80);}
#aboutconan .aboutWrap .rightBlock p{
	position: relative;
	margin: 0;
	width: calc(100% - 30px);
}
#aboutconan .aboutWrap .rightBlock::after{
	position: absolute;
	top:50%;
	right: -35px;
	transform: translateY(-50%);
	width: 90px;
	height: 100px;
	content: '';
	display: block;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
#aboutconan .aboutWrap .rightBlock.conan::after{background-image: url("../img/about_chara01.png");}
#aboutconan .aboutWrap .rightBlock.conan.c01::after{background-image: url("../img/about_chara01-1.png");}
#aboutconan .aboutWrap .rightBlock.conan.c02::after{background-image: url("../img/about_chara01-2.png");}
#aboutconan .aboutWrap .rightBlock.conan.c03::after{background-image: url("../img/about_chara01-3.png");}
#aboutconan .aboutWrap .rightBlock.conan.c04::after{background-image: url("../img/about_chara01-4.png");}
#aboutconan .aboutWrap .rightBlock.kogorou::after{background-image: url("../img/about_chara02.png");}
#aboutconan .aboutWrap .rightBlock.kogorou.c01::after{background-image: url("../img/about_chara02-1.png");}
#aboutconan .aboutWrap .rightBlock.kogorou.c02::after{background-image: url("../img/about_chara02-2.png");}

#aboutconan .hole3{
	position: relative;
	margin: 0 auto 30px auto;
	border: solid 1px #ffffff;
	max-width: 740px;
}
#aboutconan .toTop{
	position: relative;
	margin: 50px auto 0 auto;
	padding: 40px 15px;
	width: calc(100% - 50px);
	max-width: 960px;
	background-color: rgba(79,120,121,0.8);
	border:solid 2px #ffffff;
	text-align: left;
}
#aboutconan .toTop p{padding: 0 10px 30px 10px;}
#aboutconan .toTop .button{
	padding:6px 0;
	margin: 0 auto 10px auto;
	width: calc(100% - 10px);
	background: #ffffff;
	border: solid 1px #ffffff;
	color: #031324;
	max-width: 600px;
}
#aboutconan .toTop .button::after{transform: translateY(-50%) rotate(-90deg);}
#aboutconan .toTop .button:hover{background: #031324;color: #ffffff;}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* aboutconan */
	#aboutconan{
		padding-top: 60px;
		background-image: none;
	}
	#aboutconan h2{padding: 40px 0;}
	#aboutconan .aboutWrap{padding-top: 80px;}
	#aboutconan .aboutWrap .leftBlock{
		margin: 0 0 20px 0;
		padding: 40px;
	}
	#aboutconan .aboutWrap .leftBlock .qtn p{margin: 0 auto 1em auto;}
	#aboutconan .aboutWrap .rightBlock{
		margin: 0 20px 80px auto;
		padding: 40px;
	}
	#aboutconan .aboutWrap .rightBlock p{width: calc(100% - 80px);}
	#aboutconan .aboutWrap .rightBlock::after{
		right: -40px;
		width: 150px;
		height: 170px;
	}
	
	#aboutconan .hole3{margin: 0 auto 50px auto;}
	#aboutconan .toTop{
		margin: 90px auto 0 auto;
		padding: 60px 20px;
		background-size: auto 5px, auto 5px;
		text-align:center;
	}
	#aboutconan .toTop p{padding: 0 10px 40px 10px;}
	#aboutconan .toTop .button{padding:12px 0;}
}

/* ----- ruby ----- */
@media screen and (min-width: 693px) {
	.rubyTop{
		margin: -.5em auto 0 auto;
	}
	#aboutconan .aboutWrap .leftBlock .rubyTop p.ans01::before{
		top: .5em;
	}
}

/* ----- navigation ----- */
@media screen and (min-width: 1170px) {
	.pages header{display: none;}
		/* detail */
	#detail,#goods, #howto{
		padding-top: 120px;
	}
}