@charset "UTF-8";



body{
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

.inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 30px 10px;
}


.app-inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 10px;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
a{
    color: #2a4793;
}
h2{
   text-align: center;
    margin: 0 20px 60px;
}
h2 img{
    max-width: 390px;
}
dt{
    color: #634128;
    letter-spacing: 0.1rem;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
}
dt,dd{
    line-height: 1.2;
    text-align: left;
}

.attention-txt,.attention-list li{
    font-size: 13px;
    padding-left: 15px;
    text-indent: -16px;
}
.attention-txt::before,.attention-list li::before {
    content: "\00203b";
    padding-right: 3px;
}
.attention-list li > ul li::before{
    content: "\0030fb";
}
.present-area,.contract-area {
    background: #f4efe6;
}
.object-area,.app-box,.step-area,.question-area{
    background: #fff;
}
.object-area,.present-area,.app-box,.step-area,.contract-area,.question-area{
    border-top: #2a4793 2px solid 
}

#wrapper{
    overflow: hidden;
}



header{
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    border-bottom: 1px #f4efe6 solid;
}

.headinner{
    max-width: 960px;
    margin: 0 auto;
    background: #fefefe;
}

header p{
    display: inline-block;
    padding: 5px;
}
header p a img{
    max-width: 137px;
}
header h1{
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
}



.main-sp{
    display: none;
}
.main-area{
    background: #f4efe6;
}
.main-area .main-bg{
    background: url('../img/bg_main.png') no-repeat;
    background-size: 955px;
    background-position: left bottom;
    padding: 0;
}
.main-area p img {
    width: 100%;
    max-width: 618px;
    padding: 40px 5px;
}


.object-box,
.present-area dl {
    display: inline-block;
    padding: 15px;
    border: 1px dashed #634128;
    vertical-align: top;
    background: #fff;
}
.object-box dl dt,
.present-area dl dt{
    padding: 0 0 2px 15px;
    font-size: 23px;
    margin: 0 0 15px 65px;
    border-bottom: solid 2px #634128;
    text-align: left;
}

.object-area{
    text-align: center;
}
.object-area .inner{
    background: url('../img/bg_home.png') no-repeat;
    background-position: center bottom -2px;
    background-size: 980px;
    padding-bottom: 40px;
}
.object-box{
    width: 48.5%;
    margin: 0 3% 3% 0;
    position: relative;
}
.object-box:nth-child(odd) {
    margin-right: 0;
}
.object-area p img{
    position: absolute;
    width: 70px;
    top: -10px;
    left: 10px;
}
.object-box p a{
    position: absolute;
    top: 20px;
    right: 10px;
}
.object-box dl dd{
    height: 60px;
}
.object-box ul li{
    float: left;
    width: 49%;
    margin-right: 2%;
}
.object-box ul li:last-child{
    margin-right: 0;
}
.object-box ul li a{
    padding: 5px;
    display: block;
}
.object-box p a:hover{
    opacity: 0.6;
}
.object-box ul li:nth-child(1) a{
    color: #2a4793;
    border: 1px solid #2a4793;
    background: #fff;
}
.object-box ul li:nth-child(2) a{
    color: #fff;
    border: 1px solid #2a4793;
    background: #2a4793;
}
.object-box ul li:nth-child(1) a:hover{
    color: #49c18e;
    border: 1px solid #49c18e;
    background: #fff;
    transition: 0.4s;
}
.object-box ul li:nth-child(2) a:hover{
    color: #fff;
    border: 1px solid #49c18e;
    background: #49c18e;
    transition: 0.4s;
}

.gift-sp{
    display: none;
}
.present-area .inner{
    position: relative;
    background: url(../img/deco_preesntbox.png) no-repeat;
    background-position: bottom right;
    background-size: 200px;
}
.present-area h2 {
    margin-bottom: 100px;
}
.present-area ul{
    padding: 0 50px;
}
.present-area ul li{
    width: 100%;
    position: relative;
    margin-bottom: 5%;
}
.present-area ul li:nth-child(even){
    text-align: right;
}
.present-area ul li:nth-child(odd) img{
    max-width: 300px;
    position: absolute;
    top: -66px;
    left: 0;
}
.present-area ul li:nth-child(even) img{
    max-width: 300px;
    position: absolute;
    top: -60px;
    right: 0;
}
.present-area li:nth-child(odd) dl,
.present-area li:nth-child(even) dl{
    width: 70%;
}
.present-area li:nth-child(odd) dl{
    margin-left: 7%;
    padding-left: 175px;
}
.present-area li:nth-child(even) dl{
    margin-right: 7%;
    padding-right: 175px;
}
.present-area li:nth-child(even) dl dt{
    padding: 0 15px 2px 0;
    margin: 0 65px 15px 0;
    text-align: right;
}
.present-area li:nth-child(even) dl dd {
    padding-left: 15px;
}
.present-area img.deco {
    position: absolute;
    top: 30px;
    right: 0;
    width: 261px;
}
.present-area ul li img.deco-kira {
    position: absolute;
    top: -10px;
    left: 140px;
    width: 30px;
}
.present-area p{
    text-align: center;
}
.present-area .inner {
    position: relative;
    background: url(../img/deco_preesntbox.png) no-repeat;
    background-position: bottom 35px right;
    background-size: 200px;
}


.app-box ul li img {
    max-width: 100%;
    margin-bottom: 15px;
}
.app-box ul li {
    display: inline-block;
    width: 48.5%;
    padding: 0 25px;
}
.app-box ul li:first-child {
    margin-right: 3%;
}
.app-box ul li > p a {
    padding: 10px;
    display: block;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.1rem;
    color: #fff;
    border-radius: 5px;
}
.app-box ul li p.period-txt {
    text-align: center;
    margin-top: 10px;
}
.app-box ul li p:nth-child(2){
    position: relative;
}
.app-inner ul li p a > img {
    width: 80px;
    position: absolute;
    top: -10px;
    left: -15px;
}

.app-box ul li:nth-child(1) p a:hover{
    position: relative;
    top: 6px;
    box-shadow: none;
}
.app-box ul li:nth-child(1) p a{
    background: #ccc;
    box-shadow:0px 5px 0px 0px #ccc;
    -moz-box-shadow:0px 5px 0px 0px #ccc;
    -webkit-box-shadow:0px 5px 0px 0px #ccc;
    pointer-events:none
}
.app-box ul li:nth-child(2) p a{
    background: #ccc;
    box-shadow:0px 5px 0px 0px #ccc;
    -moz-box-shadow:0px 5px 0px 0px #ccc;
    -webkit-box-shadow:0px 5px 0px 0px #ccc;
    pointer-events:none
}
.app-box ul li:nth-child(1) p a span{
    padding: 10px 0 10px 35px;
    background: url(../img/icn_look.png) no-repeat;
    background-position: left center;
    background-size: 19px;
}
.app-box ul li:nth-child(2) p a span{
    padding: 10px 0 10px 35px;
    background: url(../img/icn_look.png) no-repeat;
    background-position: left center;
    background-size: 19px;
}


.step-area ul li {
    float: left;
    width: 25%;
    height: 295px;
    text-align: center;
    padding: 70px 0 10px 0;
    position: relative;
}
.step-area ul li::before{
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    right: -15px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 10px solid transparent;
    border-left: 10px solid #2a4793;
}
.step-area ul li:last-child::before{
    display: none;
}
.step-area ul li:nth-child(1) {
    background: url('../img/step_01.png') no-repeat center top;
    background-size: 234px;
}
.step-area ul li:nth-child(2) {
    background: url('../img/step_02.png') no-repeat center top;
    background-size: 234px;
}
.step-area ul li:nth-child(3) {
    background: url('../img/step_03.png') no-repeat center top;
    background-size: 234px;
}
.step-area ul li:nth-child(4) {
    background: url('../img/step_04.png') no-repeat center top;
    background-size: 234px;
}
.step-area ul li > dl,.step-area ul li dl dt,.step-area ul li dl dd{
    text-align: center;
    width: 185px;
    margin: 0 auto 10px;
}

.step-area ul li > dl dd span{
    display: inline;
    background: linear-gradient(transparent 70%, #ffe48f 70%);
}
.step-area ul li > img {
    width: 185px;
    padding: 0 30px;
    margin: 10px 0;
}



.contract-area dl {
    margin-bottom: 30px;
}
.contract-area dl dt{
    text-align: center;
}
.contract-area dl dd {
    background: #fff;
    padding: 25px 25px 15px;
}
.contract-area dl dd:last-child {
    padding-bottom: 25px;
}
.contract-area dl dd li{
    list-style-type: disc;
    margin-left: 15px;
    word-break: break-all;
}
.contract-area dl dd:nth-of-type(n+2){
    padding-top: 0;
}
.contract-area dl dd ul.attention-list li{
    list-style-type: none;
    margin: 0;
}
.contract-area dl dd ul.list-number li{
    list-style-type: decimal;
}


.question-inner {
    background: #f4efe6;
    padding: 30px;
}
.question-inner dl {
    background: #fff;
    padding: 15px 25px;
    margin-bottom: 30px;
}
.question-inner dl dt {
    background: url(../img/icn_question.png) no-repeat left center;
    background-size: 35px;
    text-align: left;
    padding: 10px 0 10px 50px;
    margin-bottom: 5px;
    border-bottom: #634128 1px dashed
}
.question-inner dl dd {
    background: url(../img/icn_answer.png) no-repeat center left;
    background-size: 35px;
    text-align: left;
    padding: 10px 0 10px 50px;
}
.question-inner dl ul li{
    list-style-type: disc;
    margin-left: 20px;
}
.question-inner dl:last-child {
    margin-bottom: 0;
}


.ft-inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 30px 0;
}
footer p {
    text-align: center;
}
footer p img{
    max-width: 980px;
    position: relative;
    top: 3px;
}
footer .ft-bg{
    background: #2a4793;
    color: #fff;
    text-align: center;
}
footer .ft-bg ul{
    margin-bottom: 5px;
}
footer .ft-bg ul li{
    display: inline;
    border-right: 1px solid #fff;
    padding: 0px 15px;
}
footer .ft-bg ul li:last-child{
    border-right: 0;
}
footer .ft-bg ul li a{
    color: #fff;
}
footer .ft-bg ul li a:hover{
    opacity: 0.6;
}
.ft-sp{
    display: none;
}



@media screen and (max-width: 900px) {
    
    
    .main-pc{
        display: none;
    }
    .main-sp{
        display: inline-block;
    }
    .main-area{
        text-align: center;
    }
    .main-area .main-bg{
        background: none;
    }
    .main-area p img {
        padding: 0 5px;
    }
    
    .object-box {
        width: 100%;
        margin: 0 0 5% 0;
        transition: 0.6s;
    }
    .object-area .inner{
        background: none;
    }
    .object-box dl dd {
        height: auto;
        margin-bottom: 15px;
    }
    
    .present-area img.deco{
        display: none;
    }
    .present-area ul {
        padding: 0;
    }
    .present-area ul li {
        margin-bottom: 10%;
    }
    .present-area li:nth-child(2n) dl {
        width: 90%;
        margin-right: 10%;
    }
    .present-area li:nth-child(2n+1) dl {
        width: 90%;
        margin-left: 10%;
    }
    .present-area ul li img.deco-kira{
        display: none;
    }
    .present-area dl dt{
        margin: 0 0 15px 50px;
    }
    .present-area li:nth-child(even) dl dt{
        margin: 0 50px 15px 0;
    }
    
    .step-area ul li {
        width: 50%;
        margin-bottom: 20px;
        transition: 0.6s;
    }
    .step-area ul li::before{
        display: none;
    }
    
    .app-box ul li {
        padding: 0;
    }
	

	
	
	
}

@media screen and (max-width: 640px) {
    header h1{
        font-size: 12px;
        font-weight: normal;
        background: #fcf5e3;
        padding: 8px;
        line-height: 1.4;
        text-align: center;
    }
    .inner {
        padding: 10px 10px;
    }
    dd {
        line-height: 1.4;
    }
    
    .present-area h2{
        margin: 0 20px 60px
    }
    .present-area .inner {
        background: none;
    }
    .present-area ul li {
        margin-bottom: 5%;
    }
    .present-area ul li,.present-area ul li:nth-child(odd) img,.present-area ul li:nth-child(even) img{
        position: static;
        text-align: center;
    }
    .present-area ul li:nth-child(2n){
        text-align: center;
    }
    .present-area ul li:nth-child(odd) img,.present-area ul li:nth-child(even) img {
        max-width: 200px;
        margin-bottom: 5px;
    }
    .present-area li:nth-child(odd) dl,.present-area li:nth-child(even) dl{
        width: 100%;
        margin: 0;
        padding: 15px;
    }
    .present-area dl dt,.present-area li:nth-child(even) dl dt {
        padding: 0 0 5px 0;
        margin: 0 0 15px 0;
        text-align: center;
    }
    .present-area li:nth-child(even) dl dd {
        padding-left: 0;
    }
    .gift-pc{
        display: none;
    }
    .gift-sp{
        display: inline-block;
    }
    
    .app-box ul li {
        display: block;
        width: 100%;
        padding: 0 25px;
        margin-bottom: 30px;
        text-align: center;
        transition: 0.6s;
    }
    .app-box ul li:first-child {
        margin-right: 0;
    }
    .app-box ul li img {
        max-width: 340px;
        margin-bottom: 10px;
    }
	
	.close{
    text-align:center;
    padding: 10px;
	color:#F00;
    margin: 10px 0;
    border: 1px solid #F00;
    font-weight: normal;
	font-size:12px;

}
	
	
	
	
}
@media screen and (max-width: 510px) {
    body,p,dd{
        font-size: 14px;
    }
    h2,.present-area h2 {
        margin: 0 20px 40px;
    }
    
    .main-area .main-bg h1 {
        background: none;
        padding: 10px;
        margin: 0 0 30px 0;
    }
    
    .step-area ul li{
        width: 100%;
    }
    
    .object-box dl dt,
    .present-area dl dt{
        font-size: 20px;
    }
    
    .contract-area dl dd:last-child {
        padding-bottom: 25px;
    }
    .contract-area dl dd {
        background: #fff;
        padding: 15px 15px 10px;
    }
    .contract-area dl dd:last-child {
        padding-bottom: 15px;
    }
    
    .question-inner {
        padding: 15px;
    }
    .question-inner dl {
        padding: 15px;
        margin-bottom: 15px;
    }
    .question-inner dl dt {
        background: url(../img/icn_question.png) no-repeat left center;
        background-size: 30px;
        text-align: left;
        padding: 10px 0 10px 40px;
        font-size: 18px;
        letter-spacing: 0;
    }
    .question-inner dl dd {
        background: url(../img/icn_answer.png) no-repeat center left;
        background-size: 30px;
        text-align: left;
        padding: 10px 0 10px 40px;
    }
	
	.close{
    text-align:center;
    padding: 10px;
	color:#F00;
    margin: 10px 0;
    border: 1px solid #F00;
    font-weight: normal;
	font-size:12px;

}
	
	
	
    
    .ft-sp{
        display: block;
    }
    .ft-pc{
        display: none;
    }
    footer .ft-bg ul li {
        padding: 0px 7px;
    }
}
@media screen and (max-width: 365px) {
.object-box p a {
    position: absolute;
    top: 103px;
    right: 10px;
    font-size: 12px;
}
    .app-box ul li{
        padding: 0;
    }
    .app-box ul li > p a{
        font-size: 18px;
    }
	
	.close{
    text-align:center;
    padding: 10px;
	color:#F00;
    margin: 10px 0;
    border: 1px solid #F00;
    font-weight: normal;
	font-size:12px;

}
	
}