@charset "utf-8";
/* ===================================================

◇　spend CSS　◇

====================================================== */

#spend { line-height: 1.6;}

/* 共通clear
------------------------------------------------------ */
#spend section,
#spend .tit_col2,
#spend ul.photo2 { zoom: 1;}

#spend section:after,
#spend .tit_col2:after,
#spend ul.photo2:after { clear: both; content: "."; display: block; height: 0; font-size: 0; visibility: hidden; }

/* 共通cnav
------------------------------------------------------ */
#spend #cnav { padding: 70px 0 50px;}
#spend #cnav1 a { background: #e3e1c8;}
#spend #cnav2 a { background: #e9ddd9;}
#spend #cnav3 a { background: #d9e7e9;}
#spend #cnav4 a { background: #d7e0cb;}

#spend #cnav1 a:hover { background: #d1cd94;}
#spend #cnav2 a:hover { background: #d8c2ba;}
#spend #cnav3 a:hover { background: #b9d2d7;}
#spend #cnav4 a:hover { background: #c2d1ae;}

#spend #cnav1:hover { background: url(../../img/spend/img/cnav_arrow1.png) no-repeat center bottom;}
#spend #cnav2:hover { background: url(../../img/spend/img/cnav_arrow2.png) no-repeat center bottom;}
#spend #cnav3:hover { background: url(../../img/spend/img/cnav_arrow3.png) no-repeat center bottom;}
#spend #cnav4:hover { background: url(../../img/spend/img/cnav_arrow4.png) no-repeat center bottom;}

/* 共通コンテンツ
------------------------------------------------------ */
#spend h2 { background: url(../../img/spend/img/title_bg.jpg) no-repeat center top;}

#spend #contents { background: url(../../img/spend/img/con_bg.png) no-repeat center top;}

#spend h3 { margin: 0 auto; text-align: center; border-left: none; padding:25px 0; background: url(../../img/spend/img/contit_bg.png) no-repeat center top; position: relative; width: 665px;}
#spend h3 span { position:absolute; top:-10px; left:480px;}

#spend section { padding: 30px 25px; margin: 0 auto 30px auto;}
#spend section:last-child { margin-bottom: 0;}
#spend  h4 { padding: 27px 0; text-align: center; background: url(../../img/spend/img/con_stit_bg.png) no-repeat center;}

/* type1 */
#spend .tit_col1 { width: 445px; float: left; text-align: left;}
#spend .tit_col1 h5 { padding: 20px 0; margin: 0; border-left: none;}
#spend .tit_col1 h5>img, #spend .tit_col span { display: block; line-height: 1; padding-bottom:10px;}
#spend .tit_col1 span { padding-top: 21px;}
#spend .photo1 { float: right; width: 467px;}
#spend .photo1 li { float: left; padding-bottom: 5px;}
#spend .photo1 li:first-child  { padding-right: 5px;}

/* type2 */
#spend .tit_col2 { display: table; width: 940px; padding: 0 0 20px 0; text-align:left;}
#spend .tit_col2 h5 { display: table-cell; /* padding: 20px 0; */ margin: 0; border-left: none;}
#spend .tit_col2 h5 img { vertical-align: middle;}
#spend .tit_col2 span { margin: 10px 0 0 25px;}
#spend .tit_col2 p { display: table-cell; width:340px; padding: 0 0 0 40px; vertical-align: middle;}
#spend .photo2 li { float: left; padding: 0 5px 5px 0;}
#spend .photo2 li:last-child  { padding-right: 0;}

#spend section .item { position: absolute;}


/* 家族
------------------------------------------------------ */
#spend .spend1 section { background: url(../../img/spend/img/s1_bg.gif) repeat; border: 5px #e3e1c8 solid;}
#spend .spend1 #sec2,
#spend .spend1 #sec4,
#spend .spend1 #sec5,
#spend .spend1 #sec7,
#spend .spend1 #sec11 { position: relative;}
#spend .spend1 #sec2 .item { top: 16px; left: 324px;}
#spend .spend1 #sec4 .item { top: 17px; right: 378px;}
#spend .spend1 #sec5 .item { top: 21px; left: 373px;}
#spend .spend1 #sec7 .item { top: 47px; left: 362px;}
#spend .spend1 #sec11 .item { bottom: 106px; left: 0;}

/* カップル
------------------------------------------------------ */
#spend.spend2 section { background: url(../../img/spend/img/s2_bg.gif) repeat; border: 5px #ded3cf solid;}
#spend.spend2 #sec2,
#spend.spend2 #sec4,
#spend.spend2 #sec7 { position: relative;}
#spend.spend2 #sec2 .item { top: 25px; left: 348px;} 
#spend.spend2 #sec4 .item { top: 20px; left: 350px;}
#spend.spend2 #sec7 .item { top: 42px; right: 381px;}

/* 記念日
------------------------------------------------------ */
#spend.spend3 section { background: url(../../img/spend/img/s3_bg.gif) repeat; border: 5px #cddfe2 solid;}
#spend.spend3 #sec4 p { padding-left: 28px;}
#spend.spend3 #sec6,
#spend.spend3 #sec7 { position: relative;}
#spend.spend3 #sec6 .item { top: 39px; left: 363px;}
#spend.spend3 #sec7 .item { top: 67px; right: 376px;}

/* 友人と連泊
------------------------------------------------------ */
#spend.spend4 section { background: url(../../img/spend/img/s4_bg.gif) repeat; border: 5px #dbdfd5 solid;} 
#spend.spend4 #sec2,
#spend.spend4 #sec7,
#spend.spend4 #sec11 { position: relative;}
#spend.spend4 #sec2 .item { top: 50px; left: 375px;} 
#spend.spend4 #sec7 .item { top: 63px; left: 354px;}
#spend.spend4 #sec11 .item { top: 100px; left: 354px;}