/*----- common script--------------------*/
.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

html,body{
	height:100%;
}

body{
	font-family: "Rounded Mplus 1c";
	background-image:none;
	background-color:#f7efde;
	line-height:1.5em;
	background-attachment:fixed;
	min-height:100%;
}

p span{
	font-family: "Sawarabi Gothic";
}

/*ふきだし関連*/
.tar-fukidashi{
	margin-left:15%;
	margin-right:15%;
	display:block;
	color:#ff0000;
	border-bottom: dashed 3px ;
}

.fukidashi{
	display: block;
	width:150%;
	height:auto;
	position:absolute;
	top:20%;
	left:25%;
	padding:16px;
	border-radius:20px;
	color:#000;
	font-weight:bold;
	background-color:white;
	z-index:3;
	opacity:0;
	transition: 0.3s;
}

.tar-fukidashi:hover + .fukidashi {
	opacity:1;
}
.hover-right{
}
.hover-right:hover{
	position:relative;
	top:4px;
	left:4px;
}

header{
	height:400px;
	/*background-image: url("../img/headerback2.png");*/
	background-image: url("../img/background.jpg");
	background-position:bottom center;
	background-size: cover;
	background-repeat:no-repeat;
}

#toplogo{
	position:absolute;
	top:260px;
	right:80px;
	width:8rem;
}

#panolink{
	position:absolute;
	top:220px;;
	left:2vw;
	z-index:20;
}

#panolink img{
	width:9rem;
	height:9rem;
}

#global-nav{
	position:relative;
	width:100%;
	height:60px;
	line-height:80px;
	padding-top:370px;
}

#global-nav ul{
	margin:0;
	padding:0;
}
#global-nav ul li{
	padding:0;
	margin:0;
	float:left;
	list-style:none;
	width:calc(100%/4);
}
#global-nav a{
	display:block;
	text-align:center;
	text-decoration: none;
	font-size:3rem;
	font-weight:800;
	color:white;
	background-color:#F7164E;
	border:solid white;
	border-radius:40px 40px 40px 40px;
}

#global-nav a:hover{
	background-color:#FFA5BB;
}



#bg-anime{
	position:fixed;
	width:100%;
	height:100%;
	z-index:-100;
}
.content1{
	position:absolute;
	top:15%;
	left:65%;
	width:15rem;
	transform:rotate(40deg);
}

.content2{
	position:absolute;
	top:-3%%;
	left:-4%;
	width:20rem;
	transform:rotate(320deg);
}

.content3{
	position:absolute;
	bottom:0;
	left:-15%;
	width:25rem;
	transform:rotate(45deg);
}

.content4{
	position:absolute;
	top:60%;
	left:40%;
	width:30rem;
	transform:rotate(30deg);
}
/*
h1{
	position: absolute;
	top: 80px;
	left:50%;
	margin-left:-443px;
	font-size:128px;
	padding:20px;
	background-color:rgba(255,255,255,0.7);
	border-radius:30px;
}
*/

h1{
	position: absolute;
	top: 80px;
	left:50%;
	margin-left:-443px;
	font-size:128px;
	padding:20px;
	font-weight:900;
	background-color:rgba(255,255,255,0.7);
	border-radius:30px;
}

h2{
	font-size:48px;
	position: relative;
	padding: 0.5em;
	background: #F7164E;
	color: white;
	margin:20px;
	margin-bottom:40px;
	font-weight:900;
}

h2::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 20px transparent;
	border-right: solid 50px rgb(149, 158, 155);
}

#MainInfo{
	width: 100%;
	height: 1330px;
	overflow: hidden;
	position: relative;
	margin-top:100px;
}

#MainOv{
	margin: 0 auto;
	position:relative;
	width:1000px;
	height:100%;
	padding:15px;
}


h3{
	position: relative;
	font-size:32px;
	background-color:#F7164E;
	color:white;
	padding:15px;
	margin-bottom:25px;
	font-weight:800;
}

h3::before{
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 50px rgb(149, 158, 155);
}


#MainOv h4{
	font-size:24px;
	margin:15px 5px 0 5px;
	padding:10px;
	padding-bottom:5px;
	background-color:white;
	border-radius:10px 10px 0 0;
	font-weight:700;
}

.CatchCopy{
	position:absolute;
	top:160px;
	left:250px;
	width:710px;
}

.RealInfo{
	position:absolute;
	top:280px;
	left:250px;
	width:710px;
}

.PresentInfo{
	position:absolute;
	top:400px;
	left:250px;
}

.InfoLogo{
	position:absolute;
	top:180px;
	left:40px;
}

#ComingPresent{
	position:absolute;
	top:460px;
	left:15px;
	width:97%;
}

#BuyPresent{
	position:absolute;
	top:710px;
	left:15px;
	width:48%;
}


#BuyPresent small{
	display:block;
	line-height: 1.4em;
}

#SellPresent{
	position:absolute;
	top:710px;
	right:15px;
	width:48%;
}
#SellPresent small{
	display:block;
	line-height: 1.4em;
}


#honsya{
	position:absolute;
	top:1020px;
	right:15px;
	width:48%;
	border-radius:40px;
}
#honsya::after{


}
/*プレゼントがらみのboxのデザイン*/
.PresBoxDes{
	border:solid white;
	border-radius:20px 20px 20px 20px;
	padding:10px;
}

#WhenWhere{
	position:relative;
	margin:100px auto;
	width:1000px;
	padding:15px;
	z-index:1;
}
#WhenWhere h3{
	font-size:36px;
	margin-left:15px;
	padding-top:20px;
	margin-bottom:10px;
}

#WhenWhere h4{
	font-size:24px;
	margin-left:15px;
	padding-top:20px;
}

#When{
	float:left;
	width:50%;
}

#Where{
	float:right;
	width:50%;
}

#map{
	margin-top:220px;
	width:100%;
	height:320px;
}


#WhenWhere h3{
	margin-top:20px;
}

#access>p{
	margin:20px;
}

p.train-icon:before {
	content:"";
	display:inline-block;
	width:40px;
	height:40px;
	background:url(../img/icon/icon_train.png);
	background-size:contain;
	vertical-align: middle;
	margin-right:10px;
}
p.car-icon:before {
	content:"";
	display:inline-block;
	width:40px;
	height:40px;
	background:url(../img/icon/icon_car.png);
	background-size:contain;
	vertical-align: middle;
	margin-right:20px;

}

.list{
	position:relative;

	display:block;

	margin-right:25px;
	margin-left:20px;
	margin-top:10px;
	margin-bottom:30px;

	padding:15px;

	font-size:50px;
	font-weight:800;
	line-height:1em;
	float:left;
	background-color:white;
}

.list:before{
	content:"";
	position:absolute;
	width:95%;
	height:95%;
	transform:rotate(10deg);
	background-color:#F7164E;
	z-index:-1;
}


.detail{
	font-size:32px;
	font-weight:800;
}

.big{
	font-size:36px;
	font-weight:800;

}

.subinfo{
	font-size:20px;
	display: inline-block;
	line-height:1.1em;
}


/*スライドショウ関連CSS*/
.SlideShow {
	margin:80px 0;
}

.swiper-container {
    width: 100%;
	height: 12rem;
	padding-top:1rem;
	padding-bottom:1rem;
}
.swiper-slide>a>img {
	display:block;
	height:100%;
	margin: 0 auto;
	border-radius:50px;
	border: 10px double green;

}

.Question{
	position:relative;
	margin:100px auto;
	width:1000px;
	padding:15px;
}

.Question dl{
	display:block;
	padding-left:20px;
}

.Question dt>p{
	font-weight:800;
}

.Question dd{
	font-size:20px;
}

.Question dt>p::before{
	white-space: pre-wrap;
	content:"Q.";
}
.Question dd>p::before{
	white-space: pre-wrap;
	content:"　A.";
}

#ToContact a{
	display:block;
	margin:0px auto;
	margin-top:50px;
	margin-bottom:20px;
	width:280px;
	background-color:#f96a0c;
	color:white;
	text-decoration:none;
	padding:20px;
	font-weight:800;
	text-align:center;
	border-radius:20px;
	border:solid white;


	position:relative;
	transition: all 1s;

}

#ToContact a::before{
	content:'';
	display:block;
	position:absolute;
	top:0px;
	left:30px;
	background-image:url(../img/huresukakuma.png);
	background-repeat: no-repeat;
	width:200px;
	height:0;
	transition:all 1s;
}

#ToContact a:hover::before{
	display:block;
	top:-100px;
	width:200px;
	height:100px;
}


#global-nav a.bay-nav{
	background-color:#2377ff;
}
#global-nav a.bay-nav:hover{
	background-color:#42ccff;
}
#global-nav a.sell-nav{
	background-color:#39ce75;
}
#global-nav a.sell-nav:hover{
	background-color:#5def98;
}
#global-nav a.QA-nav{
	background-color:#f96a0c;
}
#global-nav a.QA-nav:hover{
	background-color:#ffa163;
}

a#sell-QA{
	background-color:#f96a0c;
}
a#buy-QA{
	background-color:#f96a0c;
}

.BoxDes{
	background-color:#ffbb8c;
	box-shadow:0 0 10px 10px rgba(252,120,80,0.6) inset;
	border-radius:10px 10px 100px 10px;
	width:1000px;
}

/*フッター用CSS*/
footer{
	margin-top:30px;
}

#footerlogo{
	float:left;
	width:15rem;
}
#footerlogo img{
	width:100%;
	margin-top:1rem;
	padding:1rem 1rem 0 1rem;
}

#setumei{
	line-height:1em;
	padding-top:1.3rem;
	float:left;
}

#copyright{
	line-height:1em;
	text-align:center;
}
#copyright p{
	margin:10px;
}

/*購入者売買者質問に関する要素の色を分ける*/
.buy-tag{
	background-color:#2377ff;
}
.sell-tag{
	background-color:#39ce75;
}
.QA-tag{
	background-color:#f96a0c;
}


/*動作するアニメーションクラス*/
.korokoro {
  animation: korokoro 2.5s linear 0s 1;
}

@keyframes korokoro {
	0%   { transform: translate(0%, 0%); }
	5%   { transform: translate(10%, 0%) rotate(10deg); }
	25%  { transform: translate(20%, 0%) rotate(20deg); }
	30%  { transform: translate(-10%, 0%) rotate(-10deg); }
	35%  { transform: translate(-15%, 0%) rotate(-15deg); }
	45%  { transform: translate(10%, 0%) rotate(10deg); }
	50%  { transform: translate(15%, 0%) rotate(15deg); }
	60%  { transform: translate(-5%, 0%) rotate(-5deg); }
	65%  { transform: translate(-7%, 0%) rotate(-7deg); }
	75%  { transform: translate(0%, 0%) rotate(0deg); }
	00% { transform: translate(0%, 0%) rotate(0deg); }
}

@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}