@charset "UTF-8";

/*
**************************************
*Since: 2015-03-23
*Modified: 2015-00-00
**************************************
*/




/* wrapper
---------------------------------------------------------------------------------------- */
#wrapper {
	width: 100%;
	background: #FFF;
	margin: 0 auto;
}


/* header
---------------------------------------------------------------------------------------- */
#header {
	width: 100%;
    padding: 6% 0 10% 0;
}

#header h1 {
	margin: 0 0 6% 3%;
    text-align: left;
}

#header h1 img {
    width: 30%;
}

#header ol {
	width: 90%;
    padding: 0 5%;
	background: url(../img/boder1.gif) repeat-x 0 100%;
    text-align: center;
}

#header ol li {
    display: inline-block;
    width: 18%;
	padding: 0 1% 26px 1%;
    box-sizing: border-box;
}

#header ol li img {
    width: 100%;
}
	
	
#header ol li.active {
    background: url(../img/icon_header_active.gif) no-repeat 50% 100%;
}

.bg01{
	background: repeat-y url("../sp/01/img/bg01.jpg");
background-size:contain;
} 

.bg01 .anigif{
padding:0 10%;

}
/* contents
---------------------------------------------------------------------------------------- */
.container {
	width:320px;
	margin:0 auto;
}

#contents {
    padding: 0 0 35px 0;
    font-size: 12px;
}

#contents p img {
    width: 100%;
}

#contents h2 {
	margin: 10% 0 5% 0;
}

#contents h2 img {
    width: 100%;
}

/* contents > table
-------------------------------------------------------------------- */
#contents table {
	width: 90%;
    margin: 0 auto;
    font-size: 12px;
    border-left: 1px solid #f0eedb;
}

/* contents > table.in_case
-------------------------------------------------------------------- */
#contents table.in_case th {
    background: #f9f8f3;
    padding: 12px 0;
	border-right: 1px solid #f0eedb;
	border-top: 1px solid #f0eedb;
    color: #595959;
    font-weight: normal;
    text-align: center;
}

#contents table.in_case th.name {
    width: 25%;
}

#contents table.in_case td.item img {
    width: 100%;
}


#contents table.in_case td {
	border-right: 1px solid #f0eedb;
	border-top: 1px solid #f0eedb;
    color: #595959;
    text-align: center;
    vertical-align: middle;
}


#contents table.in_case td {
	border-right: 1px solid #f0eedb;
	border-top: 1px solid #f0eedb;
    color: #000;
    text-align: center;
}


#contents table.in_case tr.p_detail td {
    padding: 5% 0;
	vertical-align: middle;
}
        
#contents table.in_case tr.p_detail td.item {
    padding: 0;
}
    
#contents table.in_case tr.p_total th,
#contents table.in_case tr.p_send th,
#contents table.in_case tr.a_total th {
    background: #fefaef;
	padding-right: 18px;
	text-align: right;
}
#contents table.in_case tr.p_total td,
#contents table.in_case tr.a_total td {
	font-weight: bold;
}


/* contents > .kome
-------------------------------------------------------------------- */
#contents ul.kome {
	width: 83.7%;
    margin: 0 auto;
    padding: 3%;
	border: 1px solid #f0eedb;
}

#contents ul.kome li {
    font-size: 12px;
    text-align: left;
    line-height: 1.8;
}


/* contents > .case
-------------------------------------------------------------------- */
#contents table.case {
	border-top: 1px solid #f0eedb;
}

#contents table.case th {
    font-size: 14px;
	background: #f9f8f3;
    border-right: 1px solid #f0eedb;
	border-bottom: 1px solid #f0eedb;
	color: #595959;
	padding: 3%;
	text-align: left;
	vertical-align: top;
}

#contents table.case td {
	padding: 3%;
	border-right: 1px solid #f0eedb;
    border-bottom: 1px solid #f0eedb;
	vertical-align: middle;
    text-align: left;
}



/* contents > .sub
-------------------------------------------------------------------- */
#contents table.sub,
#contents table.prive {
	border-top: 1px solid #f0eedb;
}

#contents table.sub th,
#contents table.prive th {
    font-size: 14px;
	background: #f8eed1;
    border-right: 1px solid #f0eedb;
	border-bottom: 1px solid #f0eedb;
	color: #595959;
	padding: 3%;
	text-align: left;
	vertical-align: top;
}

#contents table.sub th em,
#contents table.prive th em {
    margin: 0 0 0 2%;
    padding: 1% 2%;
    background: #ff0000;
    color: #FFF;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
}

#contents table.sub th em.em2,
#contents table.prive th em.em2 {
    background: #838383;
}

#contents table.sub td,
#contents table.prive td {
	padding: 3%;
	border-right: 1px solid #f0eedb;
    border-bottom: 1px solid #f0eedb;
	vertical-align: middle;
    text-align: left;
}


#contents table.sub td.name input,
#contents table.sub td.kana input,
#contents table.sub td.add input,
#contents table.sub td.add3 input,
#contents table.sub td.add4 input,
#contents table.sub td.tel input,
#contents table.sub td.mail input,
#contents table.sub td.pay table td input {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0;
}

#contents table.sub td.name ul li div,
#contents table.sub td.kana ul li div,
#contents table.sub td.add div,
#contents table.sub td.add3 div,
#contents table.sub td.add4 div,
#contents table.sub td.tel div,
#contents table.sub td.mail div,
#contents table.sub td.pay table td div {
    background: #ffe8e8;
    margin: 0;
    padding: 0 3%;
    box-sizing: border-box;
}


#contents table.sub td.name ul,
#contents table.sub td.kan ul {
    width: 100%;
}

#contents table.sub td.name ul li,
#contents table.sub td.kana ul li {
     width: 48%;
     text-align: left;
}

#contents table.sub td.name ul li div,
#contents table.sub td.kana ul li div {
     width: 50%;
     text-align: left;
}


#contents table.sub td.name ul li.left,
#contents table.sub td.kana ul li.left {
    float: left;
}

#contents table.sub td.name ul li.right,
#contents table.sub td.kana ul li.right {
    float: right;
}

#contents table.sub td.sex div {
    float: left;
    width: 48%;
    margin: 0;
    padding: 0;
    text-align: center;
}

#contents table.sub td.sex div:nth-of-type(2) {
    float: right;
}

#contents table.sub td.sex .ui-radio {
  clear: none!important;
}

#contents table.sub td.sex div label {
    width: 100%;
    background: #f8f7ef;
    text-align: left;
    font-size: 14px;
    line-height: 42px;
}


#contents table.sub td.birth ul li {
    overflow: hidden;
    margin: 0 0 1% 0;
}

#contents table.sub td.birth ul li div {
    float: left;
    width: 90%;
    margin: 0 ;
    padding: 0;
}

#contents table.sub td.birth ul li div div {
    width: 100%;
    background: #f8f7ef;
}

#contents table.sub td.birth ul li div.unit {
  float: left;
  width: 5%;
  padding: 0 0 0 5%;
  position: relative;
  top: 26px;
  text-align: left;
}



#contents table.sub td.birth ul li {
     width: 100%;
     text-align: left;
}

#contents table.sub td.birth ul li.select01,
#contents table.sub td.birth ul li.select02 {
    margin: 0 0 3% 0;
}

#contents table.sub td.birth ul li select,
#contents table.sub td.pay table td select {
    color: #B3B3B3;
    width: 100%;
    height: 42px;
    font-size: 100%;
    text-align: center;
}


#contents table.sub td.pay select {
    color: #B3B3B3;
    width: 100%;
    height: 42px;
    margin: 0 1% 0 0;
    background: url(../img/bg_select.png) no-repeat right #f8f7ef;
    background-size: auto 42px;
    border: 1px solid #cdcbbb;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 100%;
    text-align: center;
}


#contents table.sub td.add div {
    margin: 3% 0 0 0;
}


#contents table.sub td.add img {
    width: 100%;
    margin: 3% 0 0 0;
}




/* contents > .prive
-------------------------------------------------------------------- */
#contents table.prive {
    margin: 10% auto 0 auto;
}

#contents table.prive td a {
    color: #fa3167;
}

#contents table.prive td iframe {
    margin: 3% 0 0 0;
}


#contents table.prive td div {
     width: 94%;
     margin: 2% 0 0 0;
     padding: 5% 3%;
     text-align: center;
     background: #fdf3f6;
}

#contents table.prive td div.check_area {
    overflow: hidden;
}

#contents table.prive td div  div {
    float: left;
    width: 48%;
    margin: 0;
    padding: 0;
    text-align: center;
}

#contents table.prive td div  div:nth-of-type(2) {
    float: right;
}

#contents table.prive td div  .ui-radio {
  clear: none!important;
}

#contents table.prive td div  div label {
    width: 100%;
    background: #f8f7ef;
    text-align: left;
    font-size: 14px;
    line-height: 42px;
}
/* chance
---------------------------------------------------------------------------------------- */
.chance {
    width: 100%;
}

.chance img {
    width: 100%;
}


/* cv
---------------------------------------------------------------------------------------- */
.cv {
	width: 100%;
    padding: 0 0 40px 0;
}

/*.cv img {
	width: 50%;
}*/

.cv_01{
	width:38.7%;
}

.cv_02{
	width:61.3%;
}



/* btn01.02
---------------------------------------------------------------------------------------- */
#btn01 {
	width: 100%;
    margin: 0 auto 10% auto;
    text-align: center;
}

#btn01 ul li.cnf a {
    display: block;
}

#btn01 ul li.cnf img {
    width: 100%;
}


#btn01 ul li.sub a {
    display: block;
}

#btn01 ul li.sub img {
    width: 100%;
}


#btn01 ul li.back {
    width: 100%;
    margin: 7% auto 0 auto;
    font-size: 15px;
}

#btn01 ul li.back img {
    width: 60%;
}

#btn01 ul li.back a {
    display: block;
    margin: 5% auto 0 auto;
}

#thanks_msg a {
    color: #000;
    text-decoration: underline;
}

#thanks_msg a:hover {
    text-decoration: none;
}


/* footer
---------------------------------------------------------------------------------------- */
#footer {
	overflow: hidden;
    margin: 0 auto;
	padding: 5% 0;
    border-top: 1px solid #7c623d;
}

#footer .f_left {
    font-size: 10px;
    text-align: center;
}

#footer .f_left a {
    color: #000;
    text-decoration: underline;
}

#footer .f_left a:hover {
    text-decoration: none;
}

#footer .f_right {
}

#footer .f_right ul {
    margin: 30px 0 5px 0;
}
	
#footer .f_right ul li {
    margin: 0 5px;
    display: inline-block;
    text-align: center;
}

#footer .f_right ul li img {
    width: 100%;
}

#footer .f_right p {
    font-size: 10px;
    text-align: center;
}

/* ロード画面 */
#loading {
    width: 100%;
    min-height: 100vh;
    background: #E2C9D5;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#loading img {
    max-width: 100%;
    width: 400px;
}

.blinking{
    animation:blink 1.0s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {opacity:0.7;}
    100% {opacity:1;}
}