@charset "utf-8";

@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//fonts.googleapis.com/css?family=Libre+Baskerville);
/*----------------------------------------
	style
----------------------------------------*/
* {
	margin: 0;
	padding: 0;
	font-style: normal;
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	word-break: break-all;
}

input:focus {
  outline: 0;
  border-color: orange;
}

body{
background-image:url("../img/bg.jpg");
background-repeat:repeat;
background-color:#710f0e;
}

#wrapper_index{
max-width:600px;
background-image:url("../img/base.jpg");
background-repeat:repeat;
background-color:#fff;
margin:0 auto 0;
box-shadow: 0px 0px 10px;
overflow:hidden;
position:relative;
width:100%;
}

#wrapper{
max-width:600px;
background-image:url("../img/base.jpg");
background-repeat:no-repeat;
background-color:#fff;
margin:0 auto 0;
box-shadow: 0px 0px 10px;
overflow:hidden;
position:relative;
width:100%;
}

#flame_right{
position:absolute;
width:16px;
background-image:url("../img/flame_r.jpg");
background-repeat:repeat-Y;
height:100%;
right:0px;
z-index:100;
}

#flame_left{
position:absolute;
width:16px;
background-image:url("../img/flame_l.jpg");
background-repeat:repeat-Y;
height:100%;
left:0px;
z-index:100;
}

.text_1{
	width: 92%;
	display: block;
	margin: 15px auto 0;
}

.logo{
width:70%;
display:block;
margin:0 auto 0;
position:relative;
z-index:100;
}

.chara{
	width: 100%;
	display: block;
	margin: 0 auto 0px;
}

form{
margin:2% auto 0;
}

form .text{
position:relative;
z-index:20;
display:block;
width:80%;
height:10%;
margin:0 auto 0;
font-size:23px;
font-weight:bold;
padding:15px;
color:#999;
background-color:#eee;
border:3px solid #583518;

border-radius: 10px;
-webkit-border-radius:?10px;
-moz-border-radius:?10px;?

}

form input.btn{
display:block;
width:25%;
height:180px;
margin:30px auto 5%;
background-size:contain;
background-color:transparent;
border:0px solid #000;
background-image:url("../img/btn_enter.png");
background-repeat:no-repeat;
cursor:pointer!important;
}


.exp_mitama{
	width: 100%;
	display: block;
	margin: 0px auto 0px;
	border-bottom:1px solid #966;
	position:relative;
	z-index:0;
}

.bnr_box{
width:90%;
display:block;
margin:5% auto 0;
position:relative;
padding-top:47%;
background-image:url("../img/bnr_t2.jpg");
background-size:100%;
border:1px solid #482100;
cursor:pointer;
}

.bnr_box img{
display:none;
}

.bnr{
width:100%;
display:block;
}


.footer{
width:100%;
height:100px;
display:block;
margin:0px auto 0px;
padding:30px 0 10px;
text-align:center;
background-color:#fff;
}

.footer img{
width:40%;
}


.bnr_btn{
width:48%;
display:block;
top:12%;
position:absolute;
}

.bnr_btn.leftSide{
left:1%;
}

.bnr_btn.rightSide{
left:50%;
}

.mo:hover{
opacity: 0.7;
z-index:0;
}



/*---------------child-----------------*/

.text_2{
display:block;
width:90%;
text-align:center;
margin:0 auto 0;
font-size:30px;
font-weight:600;
color:#fff;
line-height:120%;
}

.text_2 nobr{
text-align:center;
margin:0 auto 0;
font-size:30px;
font-weight:600;
color:#fff;
line-height:120%;
}

.text_2_red{
color:#ec9f5f;
font-size:30px;
}

#img_mitama{
width:85%;
font-size:20px;
margin:2% auto 5%;
background-image:url("../img/base_mitama.png");
padding:1%;
background-size:contain;

box-shadow:0px 0px 8px ;
position:relative;
}

#img_mitama img{
display:block;
width:100%;
margin:auto;
}

#namebox{
margin:0 auto 5%;
width:60%;
display:block;
position:relative;
}

.namebase_mitama{
display:block;
margin:0 auto 0;
width:100%;
}

#namesub_mitama{
display:block;
width:100%;
top:5px;
text-align:center;
color:#fff;
font-size:14px;
position:absolute;
z-index:100;
}

#name_mitama{
display:block;
width:100%;
text-align:center;
color:#fff;
top:18px;
font-size:35px;
position:absolute;
z-index:100;
}

#name_mitama.ns{
display:block;
width:100%;
text-align:center;
color:#fc0;
top:12%;
font-size:40px;
position:absolute;
z-index:100;
}

#text_mitama{
width:88%;
font-size:16px;
margin:0 auto 10%;
line-height:1.7;
display:block;
}

#sns {
display:block;
width:90%;
margin:0 auto 2%;
clear:both;
}



#sns:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#sns a{
display:block;
float:left;
width:48%;
margin:0 1% 0;
}

#sns a img{
display:block;
width:100%;
margin:0 auto 0;
}

a.back{
display:block;
width:88%;
margin:3% auto 9%;
}

a.back img{
display:block;
width:100%;
margin:0 auto 0;
}

.copyguard{
position:absolute;
height:100%;
width:100%;
}

h3{
	font-size:24px;
	display:block;
	font-weight:bold;
	margin:40px auto 15px;
	text-align:center;
	width:90%;
	text-shadow:1px 1px 4px rgba(0,0,0,0.7);
}

h3 span{
	font-size:34px;
	color:#ffec4e;
  font-family: 'Libre Baskerville';
}


.area_radiobtn{
	width:70%;
	margin:0 auto 40px;
}

.area_radiobtn .radio{
	width:29%;
	display:block;
	float: left;
	margin:0.5% 2%;
	position:relative;
}

.area_radiobtn .radio img{
	width:100%;
	display:block;
}

.area_radiobtn .radio img.on{
	width:100%;
	display:block;
	position:absolute;
	top:0px;left:0px;
	opacity:0;
}
/*.area_radiobtn .radio.on img.on{
	opacity:1;
}*/

.area_radiobtn .radio input{
	width:100%;
	height:100%;
	position:absolute;
	opacity:0;
	z-index:20;
}



.sankaku{
	width: 0;
	height: 0;
	border: 28px solid transparent;
	border-top: 28px solid #c69438;
	margin:30px auto -36px;
}

/*-700*/





@media screen and (max-width: 700px){

body{-webkit-text-size-adjust:none;}

#flame_right{
position:absolute;
width:12px;
background-size:contain;
background-image:url("../img/flame_r.jpg");
background-repeat:repeat-Y;
height:100%;
right:0px;
}

#flame_left{
position:absolute;
width:12px;
background-image:url("../img/flame_l.jpg");
background-repeat:repeat-Y;
background-size:contain;
height:100%;
left:0px;
}


form .text{
position:relative;
z-index:20;
display:block;
width:85%;
height:10%;
margin:3% auto 0;
font-size:16px;
padding:15px;
color:#999;

border:2px solid #482100;

border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}


form .btn{
display:block;
width:20%%;
height:150px;
margin:-2% auto 0;

background-size:contain;

background-color:transparent;
border:0px solid #000;
background-image:url("../img/btn_enter.png");
background-repeat:no-repeat;
cursor:pointer!important;
}


.footer{
width:100%;
height:80px;
display:block;
margin:40px auto 0px;
padding:0 0 10px;
text-align:center;
background-color:#fff;
}


/*---------------child-----------------*/




.namebase_mitama{
display:block;
margin:0 auto -10.5%;
width:60%;
}

#namebox{
margin:0 auto 5%;
width:60%;
display:block;
position:relative;
}

.namebase_mitama{
display:block;
margin:0 auto 0;
width:100%;
}

#namesub_mitama{
font-size:12px;
display:block;
width:100%;
top:8%;
text-align:center;
color:#fff;
position:absolute;
z-index:100;
}

#text_mitama{
width:88%;
font-size:15px;
margin:0 auto 5%;
line-height:1.6;
}

#name_mitama{
font-size:30px;
display:block;
width:100%;
text-align:center;
color:#fff;
top:25%;
position:absolute;
z-index:100;
}

#name_mitama.ns{
display:block;
width:100%;
text-align:center;
color:#fff;
top:24%;
font-size:30px;
position:absolute;
z-index:100;
}

/*オプション*/

h3{
	margin-top:7%;
}






}





@media screen and (max-width: 500px){


#flame_right{
position:absolute;
width:8px;
background-size:contain;
background-image:url("../img/flame_r.jpg");
background-repeat:repeat-Y;
height:100%;
right:0px;
z-index:100;
}

#flame_left{
position:absolute;
width:8px;
background-image:url("../img/flame_l.jpg");
background-repeat:repeat-Y;
background-size:contain;
height:100%;
left:0px;
z-index:100;
}


form .text{
position:relative;
z-index:20;
display:block;
width:85%;
height:10%;
margin:4% auto 0;
font-size:14px;
padding:10px;
color:#999;

border:2px solid #482100;

border-radius: 10px;
-webkit-border-radius:?10px;
-moz-border-radius:?10px;?
}

form .btn{
display:block;
width:20%%;
height:100px;
margin:-2% auto 0;

background-size:contain;

background-color:transparent;
border:0px solid #000;
background-image:url("../img/btn_enter.png");
background-repeat:no-repeat;
cursor:pointer!important;
}


.footer{
width:100%;
height:50px;
display:block;
margin:0px auto 0px;
padding:30px 0 10px;
text-align:center;
background-color:#fff;
}

/*---------------child-----------------*/

.text_2{
display:block;
width:90%;
text-align:center;
margin:0 auto 5%;
font-size:24px;
font-weight:600;
color:#fff;
/*text-shadow: 0px 0px 8px #fff;*/
line-height:120%;
}

.text_2 nobr{
text-align:center;
margin:0 auto 0;
font-size:24px;
font-weight:600;
color:#fff;
/*text-shadow: 0px 0px 8px #fff;*/
line-height:120%;
}

.text_2_red{
color:#ec9f5f;
font-size:24px;
}

#namebox{
margin:0 auto 5%;
width:70%;
display:block;
position:relative;
}

.namebase_mitama{
display:block;
margin:0 auto 0;
width:100%;
}

#namesub_mitama{
display:block;
width:100%;
top:10%;
text-align:center;
color:#fff;
font-size:10px;
position:absolute;
z-index:100;
}

#name_mitama{
font-size:26px;
display:block;
width:100%;
text-align:center;
color:#fff;
top:28%;
position:absolute;
z-index:100;
}

#name_mitama.ns{
display:block;
width:100%;
text-align:center;
color:#fff;
top:23%;
font-size:23px;
position:absolute;
z-index:100;
}

/*オプション*/
h3{
	font-size:16px;
	line-height:1.2;
}
.area_radiobtn{
	width:90%;
}

form input.btn{
display:block;
width:35%;
height:180px;
margin:6% auto 0;
background-size:contain;
background-color:transparent;
border:0px solid #000;
background-image:url("../img/btn_enter.png");
background-repeat:no-repeat;
cursor:pointer!important;
}

}


@media screen and (max-width: 400px){
	#namesub_mitama{
	display:block;
	width:100%;
	top:10%;
	text-align:center;
	color:#fff;
	font-size:9px;
	position:absolute;
	z-index:100;
	}

	#name_mitama{
	font-size:20px;
	display:block;
	width:100%;
	text-align:center;
	color:#fff;
	top:28%;
	position:absolute;
	z-index:100;
	}
}