@charset "UTF-8";

#main{
  text-align:left;
}
#magArea{
	width:740px;
    margin-bottom:70px;
}
#magArea .keyV{
    width:740px;
    height:290px;
	margin-bottom:20px;
}
#magArea h3{
	text-align:center;
	margin-bottom:20px;
	color:#727171;
	font-size:15pt;
	font-weight:bold;
}
#magNav{
	text-align:center;
	margin-bottom:17px;
}
#magNav	img:first-child{
	margin-right:20px;
}
#pcArea .note{
    position:relative;
    width:740px;
    height:164px;
    margin:0;
    padding:0;
}
#pcArea .note img{
    width:100%;
}
#pcArea .note span{
    display:block;
    position:absolute;
    top:59px;
    left:167px;
    width:447px;
    height:93px;
    padding:10px 0 0 8px;
    font-size:16px;
    font-weight:bold;
    color:#555;
    background-color:#fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#pcArea,#mobileArea{
	margin-bottom:15px;
}
#pcArea{	
	border-bottom:solid 5px #ef856e;
	background:url(../img/bg_pc.gif) repeat-y;
}
#pcArea-tp,#mobileArea-tp{
	width:728px;
	margin:0px auto;
	padding-top:15px;
}
#pcArea-tp{
    background:url(../img/bg_pc_02.gif) repeat-x;
}
#pcArea-ft{
	background:url(../img/bg_pc_03.gif) repeat-x bottom;
	padding-bottom:22px;
}
#pcAreaInner,#mobileAreaInner{
	width:694px;
	margin:0px auto;
}
#pcAreaInner h5{
    width:100%;
    height:30px;
    line-height:30px;
    font-size:17px;
    text-indent:1em;
    font-weight:bold;
    color:#fff;
    background-color:#755c3c;
    background:linear-gradient(#4e3c1f, #856c4c);
	margin-bottom:12px;
}
#pcAreaInner p{
	text-align:center;
	padding-bottom:15px;
	margin-top:7px;
}
#pcAreaInner dl,#mobileAreaInner dl{
	position:relative;
}
.howtoPosi{
	top:0px;
	left:0px;
}
.howtoPosi + dd{
	margin: 10px 0;
    padding: 25px 0;
}
.howtoL{
	float:left;
	width:334px;
}
.howtoR{
	float:right;
	width:334px;
}
.howtoL dd,.howtoR dd{
	position:relative;
	left:-4px;
}
#mobileArea{
    clear:both;
	border-bottom:solid 5px #8c9bce;
	background:url(../img/bg_mobile.gif) repeat-y;
}
#mobileArea-tp{
    background:url(../img/bg_mobile_02.gif) repeat-x;
}
#mobileArea-ft{
	background:url(../img/bg_mobile_03.gif) repeat-x bottom;
	padding-bottom:17px;
}
.setteiTxt{
	font-size:9pt;
	text-indent:-1em;
	padding-left:1em;
	margin-top:10px;
}
.setteiTxt a{
	margin-right:30px;
	color:#2158a6;
}
.howtoL2{
    width:364px;
	float:left;
}
.howtoR2{
    width:328px;
	float:right;
    margin-top:45px;
}

#mailserviceArea h4{
    width:100%;
    height:30px;
    line-height:30px;
    font-size:17px;
    text-indent:1em;
    font-weight:bold;
    color:#fff;
    background-color:#888;
	margin-bottom:20px;
}
#mailserviceArea h4 + p{
	margin-bottom:6px;
	text-align:center;
	color:#727171;
	font-size:14pt;
	font-weight:bold;
}
#mailserviceArea dl{
	color:#727171;
}
#mailserviceArea dt{
	background:url(../img/bg_line.gif) repeat-x bottom;
	padding-bottom:10px;
	font-weight:bold;
	font-size:14pt;
	margin-bottom:10px;
}
#mailserviceArea dt span{
	display:block;
	background:url(../img/icon_quest.gif) no-repeat;
	line-height:42px;
	padding-left:45px;
}
#mailserviceArea dd{
	width:auto;
	margin-left:43px;
	margin-bottom:18px;
	font-size:11pt;
}
#mailserviceArea dd li{
	background:url(../img/icon_circle.gif) no-repeat 0px 4px;
	padding-left:17px;
}
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
    display:inline-bloack;
}

/* --------------- スマホ --------------- */
@media screen and (max-width:767px){

    #magArea{
        width: 100%;
        max-width: 100%;
    }
    #magArea img {
        width: 100%;
        height: auto;
    }
    #magArea .keyV{
        width:100%;
        height: auto;
        margin-bottom:15px;
    }
    #magArea h3{
        white-space:nowrap;
        font-size:4vw;
        line-height:1.6;
    }
    #magNav{
        text-align:center;
        margin-bottom: 3%;
    }
    #magNav	img:first-child{
        margin-right:0px;
    }
    #pcArea,#mobileArea{
        margin-bottom:15px;
    }
    #pcArea{	
        background-size: contain;
        border-bottom: solid 3px #ef856e;
    }
    #mobileArea{	
        background-size: contain;
        border-bottom: solid 3px #8c9bce;
    }
    #pcArea-tp,#mobileArea-tp{
        width:98%;
        margin:0px auto;
        padding-top:3%;
    }
    #pcArea .note{
        position:static;
        width:100%;
        height:auto;
        margin:0;
        padding:0;
    }
    #pcArea .note span{
        display:block;
        position:static;
        width:100%;
        height:auto;
        padding:10px;
        font-size:3.5vw;
        background-color:transparent;
    }
    #pcArea-tp{
        background:url(../img/bg_pc_02.gif) repeat-x;
    }
    #mobileArea-tp{
        background:url(../img/bg_mobile_02.gif) repeat-x;
        width: 98%;
    }
    #pcArea-ft{
        padding-bottom:5%;
    }
    #mobileArea-ft{
        padding-bottom:2%;
    }
    #pcAreaInner,#mobileAreaInner{
        width:98%;
        margin:0px auto;
    }
    #pcAreaInner h5{
        font-size:4vw;
        margin-bottom:12px;
    }
    #pcAreaInner p{
        text-align:center;
        padding-bottom:15px;
        margin-top:7px;
    }
    #pcAreaInner dl,#mobileAreaInner dl{
        position:relative;
        margin: 0 auto;
        width: 98%;
    }
    .howtoPosi{
        top:0px;
        left:0px;
        margin-bottom: 3%;
    }
    .howtoPosi + dd{
        margin: 0 auto;
        padding: 0 0 4%;
        width: 100%;
    }
    dt.howtoPosi img {
        width: 45%!important;
    }
    .howtoL{
        float:none;
        width:98%;
        margin-bottom: 3%!important;
    }
    .howtoR{
        float:none;
        width:98%;
    }
    .howtoL dd,.howtoR dd{
        position:relative;
        left:0;
    }
    #mobileArea{
        clear:both;
    }
    .setteiTxt{
        font-size:3vw;
        text-indent:-1em;
        padding-left:1em;
        margin-top:10px;
    }
    .setteiTxt a{
        margin-right:0;
    }
    .howtoL2{
        float:left;
        width: 51%!important;
    }
    .howtoR2{
        float:right;
        width: 48%!important;
        margin-top: 6%!important;
    }
    #mailserviceArea h4{
        font-size:4vw;
        margin-bottom: 3%;
    }
    #mailserviceArea h4 + p{
        margin-bottom: 4%;
        text-align: left;
        font-size: 3.8vw;
    }
    #mailserviceArea dt{
        background:url(../img/bg_line.gif) repeat-x bottom;
        padding-bottom: 10px;
        font-size: 4vw;
        margin-bottom: 10px;
    }
    #mailserviceArea dt span{
        display:block;
        background:url(../img/icon_quest.gif) no-repeat;
        background-size: 20px;
        line-height: 26px;
        padding-left: 32px;
        font-weight:bold;
    }
    #mailserviceArea dd{
        width:100%;
        margin-left:0px;
        margin-bottom:4%;
        font-size:3.7vw;
    }
    #mailserviceArea dd li{
        background:url(../img/icon_circle.gif) no-repeat 0px 7px;
        padding-left:3.7vw;
        background-size: 2vw;
        margin-bottom:3px;
    }
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    #mailserviceArea {
        width: 98%;
        margin: 0 auto;
    }
    .clearfix{
        display:inline-bloack;
    }

}/* スマホ */