@charset "UTF-8";
html {
	width:100%;
	margin:0 auto;
	text-align: center;
	animation: loading 1s;
}

img {
	width: 100%;
	pointer-events: none;
  }

@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

body {
	width:100%;
	margin: 0 auto;
	user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
font-family: 'Shippori Mincho', serif;
background:url(../img/top_bg_pc.png);
background-repeat:repeat-y;
background-size: cover;
}

#top_page{
	width:100%;
	margin:0 auto;

}

.first_zone{
	max-width:110vw;
	margin:0 auto;
}

.top {
	width:100%;
	margin:0 auto;
	padding:5% 0;

}
.top img{
	max-width:55vw;
	margin:0 auto;
}
@media screen and (max-width: 700px) {
	.top img{
		max-width:90vw;
	}
}
.top_back{
    width:100%;
	margin:0 auto;
	position: relative;
	height:700px;
	background:#282828;
	overflow: hidden;
}
@media screen and (max-width:700px) {
	.top_back{
		height:47vh;
		padding:5% 0 0 0;
	}
}

.top_title{
	margin:auto;
	max-width:900px;
}
.top_title h1{
	width:90%;
	margin:0 auto;
	filter:drop-shadow(0 0 51px #fff);
}

@keyframes animation-sample{
    0%{
		transform: scale(1.1) rotate(20deg);
        filter: blur(30px);	
    }
    100%{
		transform: scale(1) rotate(0deg);
        filter: blur(0);		
    }
}
.btn {
	width:50%;
	margin: 0 auto;
	filter:drop-shadow(0 0 18px #fff000);
	z-index:999;
	position: absolute;
	top:5%;
	left:0;
	right:0;
}

@media screen and (max-width: 425px) {
	.btn {
		top:0;
	}
}
.btn img{
	max-width:500px;
}
#seni_btn{
	max-width:800px;
	margin:0 auto;
	
}

@media screen and (max-width: 425px) {
	#seni_btn{
		top:51%;
	}
}
/********************/

.annai{
	width:100%;
	margin:0 auto;
	position:absolute;
	top:58%;
	z-index:15;
}

@media screen and (max-width: 425px) {
	.annai{
		top:63%;
	}
}
.annai_block{
max-width:800px;
margin:0 auto;
}

.annai_block a{
	margin-top:5%;
}

.annai_block p{
	color:#fff;
	text-align:left;
	font-size:18px;
	line-height:33px;
}

@media screen and (max-width: 425px) {
.annai_block p{
	width:90%;
	margin:0 auto;
}
}
.voice {
	width:100%;
	margin: auto;
	padding:3% 0;
}
.voice_block{
	max-width:45vw;
	margin:0 auto;
}
@media screen and (max-width: 700px) {
	.voice_block{
		top:0;
		max-width:90vw;
	}
}
@media screen and (max-width: 700px) {
.voice_block img{
width:90%;
margin:5% 0;
}
}
.want_title{
width:100%;
margin:0 0 8% 0;
}
.want_box{
	max-width:700px;
	display:-webkit-flex;
	display:flex;
	margin:0 auto;
}
.want1,.want2,.want3,.want4{
	flex:1;
	margin:10px;
}

.want_arrow{
	width:80%;
	margin:0 auto;
}
.want_arrow img{
	margin:8% 0;
}
.first_v{
	width:100%;
	margin:5% 0;
	text-align:left;
	background: -moz-linear-gradient(65deg, #fff7ca, #e9d5b7); 
background: -webkit-linear-gradient(65deg, #fff7ca, #e9d5b7); 
background: linear-gradient(25deg, #fff7ca, #e9d5b7); 
	filter:drop-shadow(0 0 11px #d8b261);
	border:solid 1px #d8b261;
	padding:87px 80px;
}

@media screen and (max-width:700px) {
	.first_v{
		width:90%;
		margin:5%;
		background-size:contain;
		padding:15px;
	}
}

.first_v h3{
	color:#585858;
	font-size:2em;
}

@media screen and (max-width: 700px) {
	.first_v h3{
		font-size:1.1em;
	}

}
.first_v p{
	font-size:18px;
	line-height:31px;
	text-align:left;
	color:#000;
}

@media screen and (max-width: 700px) {
	.first_v p{
		font-size:13px;
		line-height:21px;
	}
}
.memo{
	font-size:1.5em;
	color:#b54043;
	display: block;
	margin:2% 0 3% 0;
}

@media screen and (max-width: 768px) {
	.memo{
		font-size:0.8em;
	}
}
.support {
	padding-top: 50px;
}

.voice .support img {
	width: 50%;
}

#prog1 {
	display: none;
    width: 50%;
    margin-top: 50px;
}

#form_top {
	max-width:800px;
	margin:0 auto;
	padding:5% 0;
}
@keyframes fuwafuwa {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-20px);
	}
  }
#form_top h2 {
	animation: 3s fuwafuwa infinite;
	filter:drop-shadow(0 0 101px #ffa27c);
}

#form_top p {
	font-size:2.7em;
	line-height:1.7em;
	color:#d8b261;
}

@media screen and (max-width: 768px) {
	#form_top p {
		font-size:23px;
		margin-bottom:5%;
	}
}
select {
    background-color: #fff;
	color: black;
    border: solid 2px black;
    padding: 20px 40px;
    border-radius: 10px;
}

#form_top p {
	padding: 80px 0px;
}

#form_top p img {
	width: 75%;
}

#q2 label img {
	width: 100%;
}

.flex {
	display: flex;
    justify-content: space-evenly;
}

label {
	margin-top: 50px;
	display: inline-block;
}

a {
	display: inline-block;
}

#q1 {
	font-size: 30px;
}

input[type=radio] {
    display: none;
}

#yourname {
	background-color: #ffffff;
	width: 50%;
	margin: 0 auto;
	padding: 30px 20px;
	border-radius: 10px;
	border: black 2px solid;
	color: black;
	font-size: 30px;
}


#form_top h1 {
	width:100%;
	margin: 0 auto;
	padding: 0px 0px 50px;
}

#conform {
	padding: 100px 0px;
	max-width:1000px;
	margin:0 auto;
	background:url(../img/uservoice_back.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
}

#conform img{
	width:80%;
	margin:0 auto;
}

.pro {
	padding:50px 0px;
	line-height: 2;
	width:100%;
	margin:5% 0;
	color: #70343f;
	font-size: 30px;
	font-weight:bold;
	background:#fff;
	border:solid 1px #d8b261;
}
@media screen and (max-width: 770px) {
.pro {
	width:90%;
	padding:40px 0;	
	font-size: 15px;
	font-size: 25px;
	margin:5%;
}
}
.care {
	width:90%;
	margin:0 auto;
	background:#fff;
	padding:40px;
}

@media screen and (max-width: 425px) {
	.care {
		padding:20px;
	}
}
.care p{
	text-align:left;
	font-size:18px;
	line-height:28px;
}
@media screen and (max-width: 425px) {
	.care p{
		font-size:15px;
		line-height:23px;
	}
}

@media screen and (max-width: 425px) {
	.top p {
		width: 95%;
		margin: 0 auto;
	}

	#prog1 {
		width: 70%;
		margin-top: 0px;
	}

	.ab {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: 1000;
	}
	.info p {
		 margin-bottom: 0px;
	}

	a {
		display: inline-block;
		width: 70%;
	}

	.info {
		padding: 30px 0px;
	}
	.support {
		padding-top: 20px;
	}

	#form_top p {
		padding: 50px 0px 0px;
	}

	#form_top h1 {
		width:100%;
		margin: 0 auto;
		padding: 0px 0px 30px;
	}

	select {
		background-color: #fff;
		color: black;
		border: solid 2px black;
		padding: 10px 20px;
		border-radius: 10px;
	}

	#q1 {
		font-size: 15px;
	}

	label {
		margin-top: 40px;
		display: inline-block;
	}

	label img {
		width: 80%;
	}

	.flex {
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-evenly;
	}

	.flex label {
		width: 45%;
		margin-top: 30px;
	}

	#yourname {
		background-color: #ffffff;
		width: 70%;
		margin: 0 auto;
		padding: 15px 20px;
		border-radius: 10px;
		border: black 2px solid;
		color: black;
		font-size: 15px;
	}
}
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 768px) {
	.pc{display: none;}
	.sp{display: block;}
}
footer{
	background:#000;
	padding:15px 0;
	color:#fff;
	margin:5% 0 0 0;
}

.doors {
	position:absolute;
	width: 100%;  
	top:8%;
	z-index:7;
	overflow: hidden; 
	display: flex;
  }
  .door {
	width: 100%;  /* ドア1枚分の横幅 */
	box-sizing: bordre-box; /* 余白の計算を簡単にするため */
	transition: all .1s;	
  }
  .door.left{
	max-width:1000px;
}
.door.right{
	max-width:1000px;
}
.no_click{
	pointer-events: none;
}

.pc_block{display: block;}
.sp_block{display: none;}

@media screen and (max-width: 768px) {
.pc_block{display: none;}
.sp_block{display: block;}
}
.saposapo{
	max-width:500px;
	margin:0 auto;
	color: #000;
  background: #bab100;
  border-bottom: 5px solid #605b00;
  border-radius: 11px;
  padding:15px 27px 10px 27px;
}
@media screen and (max-width: 768px) {
	.saposapo{
		max-width:250px;
		padding:15px 7px 10px 7px;
	}
}
.saposapo:hover{
	margin-top: 3px;
	color: #000;
	background: #bab100;
	border-bottom: 2px solid #605b00;
}
.saposapo p{
	color:#372a0f;
	font-size:2em;
	font-weight:500;
}
@media screen and (max-width: 768px) {
	.saposapo p{
		font-size:1.2em;
	}
}
/*********************/

#sapo_all{
	max-width:600px;
	margin:0 auto;
}
.sapo_but_area{
	width:100%;
margin:5% 0 0 0;
}
.sapo_but_fir{
	background:#000;
	border:1px solid #bab100;
  border-image: linear-gradient(to right, #bab100 0%, #605b00 100%);
  border-image-slice: 1;
  color:#fff;
  padding:13px 10px;
}

@media screen and (max-width: 768px) {
	.sapo_but_fir{
		width:90%;
		margin:0 auto;
	}
}
.sapo_but_fir p{
	font-size:23px;
	color:#e9d5b7;
}

@media screen and (max-width: 768px) {
	.sapo_but_fir p{
		font-size:18px;
	}
}

.sapo_but{
	background:#000;
	border:1px solid #bab100;
  border-image: linear-gradient(to right, #bab100 0%, #605b00 100%);
  border-image-slice: 1;
  color:#fff;
  padding:13px 10px;
  margin:5% 0 0 0;
}
@media screen and (max-width: 768px) {
	.sapo_but{
		width:90%;
		margin:5% 5% 0 5%;
	}
}
.sapo_but p{
	font-size:23px;
	color:#e9d5b7;
}
@media screen and (max-width: 768px) {
	.sapo_but p{
		font-size:18px;
	}
}
.backmenu{
	background: linear-gradient(to right, #bab100 0%, #605b00 100%);
	margin:5% 0 0 0;
	padding:10px 0;
}
@media screen and (max-width: 768px) {
	.backmenu{
		width:90%;
		margin:5% 5% 0 5%;
}
}

.touch__nav {
	color: #fff;
}