@charset "UTF-8";
/* clearfix */
.cF:after, .cF:before, blockquote:after, blockquote:before, q:after, q:before {content: ""}
.cF:after, .clearfix {clear: both}
.cF:after, .cF:before {display: block}
.cF {zoom: 1}


/* reset */
a, a:hover {text-decoration: none}
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;border-collapse: collapse!important}
:focus {outline: 0}
ol, ul, ul li {list-style: none}
table {border-collapse: collapse!important;border-spacing: 0}
caption, td, th {font-weight: 400}
#article-box h2, #nav-wrapper a:hover, #side-list a:hover, #side-list h3, #this_title h1, #this_title p, .last-p a {font-weight: 700}
blockquote, q {quotes: "" ""}
a img {border: 0!important}
.cF {zoom: 1}
ul {margin: 0;padding: 0}
.cF:after, .cF:before {display: block}
img {max-width: 100%}
dd, dt, h1, h2, h3, h4, h5, h6, li, p, pre {line-height: 1.7em;display: block}
#article-box, #my_footer, #head-site, #contents-box, #nav-wrapper, #navi-page, #side-list, #this_title {display: block}



/*--------------- 全体の設定 ---------------*/
body {font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;font-size: 15px;line-height: 1.7;letter-spacing: .14em;color: #333;text-align: left;background: #fff}

#article-box p{ line-height:2;}

a:hover{ text-decoration:underline; }




#article-box .content_box h3{font-size:15px;text-align:center;font-weight:bold;}

/* #article-boxにh3のテキストが挿入された場合の処理。　*/

.glink{color:blue !important;}

/* クライアントへリンクが貼られているのがハッキリわかるように青色に指定　*/

.social-btn{ height:36px; padding:15px 0;}

.social-btn a.line{display:block; margin-right:20px; float:left; margin-left:30px;}

.social-btn div.pocket-btn{float:left;}

/* ソーシャルボタン .social-btnの 横並び */

.last-p p a:first-child{float:left;}

.last-p p a:last-child{float:right; }

/* ページナビの 横並び */




/*--------------- コーディング ---------------*/
/*　レイアウト　複数指定　*/
body{
background: rgb(255,255,255);
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(194,161,146,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(194,161,146,1) 100%);
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(194,161,146,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c2a192',GradientType=1 );
}

.all-wrapper{
padding:0 32px;
width:1090px;
margin:0 auto;
background-color:white;
position:relative;
}

#my_footer{
position:absolute;
left:0;
bottom:0;
width:1154px;
}

#nav-wrapper{
position:absolute;
top:290px;
left:30px;
width:336px;
}



/*---- #navi-page ----*/
#navi-page{
height:35px;
text-align:right;

}

#navi-page p{
line-height:35px;
color:#52BBD6;
font-size:12px;
}

#navi-page a{
color:#52BBD6;
}


/*---- #head-site ----*/
#head-site{
width:1084px;
height:184px;
background-color:red;
background:url(../img/header01.jpg) no-repeat right top #00B4E1;
}

#this_title{
width:477px;
height:184px;
color:white;
}

#this_title h1{
font-size:23px;
    padding: 45px 0 12px 30px;
}

#this_title p{
 padding:0 0 0 30px;
 font-size:20px;
}



/*---- #nav-wrapper ----*/

#nav-wrapper ul{
margin:0 auto;
width:250px;
}

#nav-wrapper li a{
display:block;
width:250px;
margin-bottom:20px;
height:54px;
line-height:57px;
text-indent:60px;
background:url(../img/btn01.jpg) no-repeat left top;
color:#fff;
}

#nav-wrapper li a:hover{
background:url(../img/btn01_hover.jpg) no-repeat left top;
text-decoration:none;
font-weight:normal;
}



/*---- #contents-box ----*/
#contents-box{
margin-top:21px;
}

.social-btn{
position:absolute;
top:450px;
left:80px;

}


/* #article-box */
#article-box{
float:right;
width:720px;
}

#article-box h2{
color:#996249;
font-size:21px;
height:60px;
background:url(../img/icon01.jpg) no-repeat left top;
line-height:83px;
padding:0 0 3px 0;
text-align:center;
vertical-align:bottom;
margin-bottom:21px;
border-bottom:2px dashed #4C362C;
}

#article-box .content_box{
margin:0 auto;
}

#article-box h2+div{
padding:0 25px;
}

#article-box ul{
margin-top:30px;
}

#article-box ul li{
text-align:center;
margin-bottom:27px;
}

#article-box li a{
color:#996249;
}

/* #side-list */
#side-list{
width:270px;
float:left;
padding:60px 30px;
border:3px solid #4C362C;
border-radius:12px;
padding-top:260px;
font-weight:bold;
}

#side-list div{
text-align:center;
}

#side-list h3{
font-size:16px;
padding-bottom:20px;
padding-top:20px;
}

#side-list ul{
margin-bottom:30px;
}

#side-list li{
margin-bottom:15px;
color:#00B4E1;
}

#side-list li a{
color:#996249;
}




/* ---- .last-p ---- */
.last-p{
width:300px;
padding:60px 0 120px 583px;
}

.last-p a{
color:#4C362C;
}



/* ---- #my_footer ---- */

#my_footer{
background:#4C362C;
}

#my_footer p{
text-align:center;
color:#fff;
}

#my_footer a{
color:#fff;
}


}