@charset "utf-8";

@font-face {
	font-family: 'FontAwesome';
	src: url('../common/fonts/fontawesome-webfont.eot');
	src: url('../common/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
		url('../common/fonts/fontawesome-webfont.woff') format('woff'),
		url('../common/fonts/fontawesome-webfont.ttf') format('truetype'),
		url('../common/fonts/fontawesome-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
html {
	height:100%;
    margin:0;
    padding:0;
}
body {
	width:100%;
	height:100%;
	color:#444;
	font-size:14px;
	line-height:1.6em;
	font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Verdana,"Lucida Grande",sans-serif;
	/* mac 不適応 \*/
	letter-spacing:1px;
	/* ここまで */
}
a {
	color:#444;
}
a:hover {
	color: #F60;
}
img {
	border:none;
}
h1,h2,h3,h4,h5,h6,p,ul,dl,dt,dd {
	display:block;
}



/* --------------------------------------------------------------------------------
PAGELAYOUT
-------------------------------------------------------------------------------- */
#container {
	width:100%;
	text-align:center;
	position:relative;
}
#contents {
	width:1000px;
	margin:0 auto;
}
#header {
    height:75px;
	margin-bottom:30px;
    border-bottom:#FF6600 solid 2px;
    box-sizing:border-box;
    text-align:left;
}



/* --------------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------------- */
#header > div {
    width:1000px;
    margin:0 auto;
    text-align:right;
}
#header h1 {
    font-size:75%;
    height:35px;
    line-height:30px;
    color:#666666;
}
#logo {
    float:left;
    text-align:left;
}
#h_menu {
    padding-top:20px;
    font-size:86%;
    line-height:1em;
}
#h_menu li {
    display:inline;
}
#h_menu li a {
    text-decoration: none;
}
#h_menu li a:hover {
    text-decoration: underline;
}
#h_menu li + li {
    padding-left:20px;
}


/* --------------------------------------------------------------------------------
CONTENTS
-------------------------------------------------------------------------------- */
#top {
    margin-bottom:40px;
}

#info {
	margin-bottom:40px;
	padding:10px;
	border:#FF0000 solid 1px;
}
#oshirase {
	font-weight:bold;
	margin-bottom: 10px;
}


#campaign {
    margin-bottom:40px;
}
#campaign div {
    width:49%;
    height:80px;
    float:left;
}
#campaign div.left {
    text-align:right;
	padding-right: 10px;
}
#campaign div.right {
    text-align:left;
	padding-left: 10px;
}
#campaign a:hover img {
	filter:alpha(opacity=75);
	-ms-filter:"alpha(opacity=75)";
	-moz-opacity:0.75;
	opacity:0.75;
}


/* ------------------
訴求BOX
------------------ */
#recommend {
    height:195px;
    margin-bottom:40px;
    background:url(../images/bg_recommend.png) repeat-x left bottom;
}
#recommend h2 {
    height:20px;
    overflow:hidden;
}
#recommend ul {
    padding:11px 10px 18px; 
}
#recommend li {
    width:244px;
    height:145px;
    float:left;
    line-height:1.4em;
    letter-spacing:0;
    text-align:left;
}
#recommend li + li {
    border-left:#BBB solid 1px;
}
#recommend li .box_idt {
    font-size:75%;
    line-height:1.5em;
    padding-left:1.5em !important;
    text-indent:-1.5em !important;
}
#recommend li dt {
    height:40px;
    margin-bottom:3px;
    position:relative;
}
#recommend li dt img {
    position:relative;
    top:-3px;
    left:0;
}
#recommend li dd {
    padding:0 22px;
}


/* ------------------
各サイトボタン
------------------ */
#site {
    margin-bottom:40px;
    padding:15px;
    background:#F7EFE4;
    letter-spacing:0;
    text-align:left;
}
#site > ul > li {
    width:455px;
    height:260px;
    margin:15px;
    float:left;
	-moz-box-shadow:0 0 10px #999;
	-webkit-box-shadow:0 0 10px #999;
    box-shadow:0 0 10px #999;
    position:relative;
    behavior: url(/common/js/PIE.htc);
}
#site li a {
    width:455px;
    height:260px;
    background:#FFF;
    display:block;
    position:relative;
    text-decoration:none;
}
#site li a:hover {
    background:#FFFFEA;
    color:#444;
}
#site dt {
    height:40px;
    margin:0 20px 10px;
    padding-top:19px;
}
#site dt h3 {
    float:left;
    margin:0;
}
#site dt p {
    padding-top:3px;
    float:right;
}
#site dd > p {
    height:134px;
    padding:6px 250px 0 20px;
    background:right bottom no-repeat;
}
#site dd ul {
    height:28px;
    padding:11px;
}
#site dd li {
    width:100px;
    height:28px;
    float:left;
}
#site dd li + li {
    padding-left:11px;
}

/* サイトクローズ時 */
#site li a.close {
    background:#EEE;
}
#site li a.close:hover {
    background:#DDD;
}
#site dd > div {
    height:28px;
    padding:11px 0;
    background:#999;
    text-align:center;
}
#site dd > div p {
    color:#FFF;
    font-weight:bold;
    font-size:108%;
    line-height:28px;
}

/* 引越し */
#site li.hikkoshi dt {
    border-bottom:#339900 dotted 2px;
}
#site li.hikkoshi dd > p {
    background-image:url(../images/img_hikkoshi.png);
}
#site li.hikkoshi dd ul {
    background:#390;
}

/* 結婚 */
#site li.wedding dt {
    border-bottom:#FA5C5B dotted 2px;
}
#site li.wedding dd p {
    background-image:url(../images/img_wedding.png);
}
#site li.wedding dd ul {
    background:#FA5C5B;
}

/* 出産 */
#site li.birth dt {
    border-bottom:#FFB000 dotted 2px;
}
#site li.birth dd > p {
    background-image:url(../images/img_birth.png);
}
#site li.birth dd ul {
    background:#FFB000;
}

/* デザイン */
#site li.design dt {
    border-bottom:#D43AFF dotted 2px;
}
#site li.design dd > p {
    background-image:url(../images/img_design.png);
}
#site li.design dd ul {
    background:#D43AFF;
}

/* シンプル */
#site li.simple dt {
    border-bottom:#1A69AE dotted 2px;
}
#site li.simple dd > p {
    background-image:url(../images/img_simple.png);
}
#site li.simple dd ul {
    background:#1A69AE;
}

/* 39 */
#site li.thankyou dt {
    border-bottom:#E60000 dotted 2px;
}
#site li.thankyou dd > p {
    background-image:url(../images/img_39.png);
}
#site li.thankyou dd ul {
    background:#E60000;
}

/* クリスマス */
#site li.xmas dt {
    border-bottom:#D91718 dotted 2px;
}
#site li.xmas dd > p {
    background-image:url(../images/img_xmas.png);
}
#site li.xmas dd ul {
    background:#D91718;
}

/* データ入稿 */
#site li.data dt {
    border-bottom:#3EBBBB dotted 2px;
}
#site li.data dd > p {
    background-image:url(../images/img_data.png);
}
#site li.data ul {
    background:#3EBBBB;
}

/* 暑中見舞い */
#site li.shochu dt {
    border-bottom:#0085DD dotted 2px;
}
#site li.shochu dd > p {
    background-image:url(../images/img_shochu.png);
}
#site li.shochu dd ul {
    background:#0085DD;
}

/* 喪中はがき */
#site li.mochu dt {
    border-bottom:#7A3686 dotted 2px;
}
#site li.mochu dd > p {
    background-image:url(../images/img_mochu.png);
}
#site li.mochu dd ul {
    background:#7A3686;
}

/* 年賀状 */
#site li.nenga dt {
    border-bottom:#F30 dotted 2px;
}
#site li.nenga dd > p {
    background-image:url(../images/img_nenga.png);
}
#site li.nenga dd ul {
    background:#F30;
}

/* 寒中見舞い */
#site li.kanchu dt {
    border-bottom:#C4A034 dotted 2px;
}
#site li.kanchu dd > p {
    background-image:url(../images/img_kanchu.png);
}
#site li.kanchu dd ul {
    background:#C4A034;
}


/* ------------------
スタッフ紹介
------------------ */
#bnr_staff {
    width:750px;
    margin:0 auto 40px;
}
#bnr_staff a:hover img {
	filter:alpha(opacity=75);
	-ms-filter:"alpha(opacity=75)";
	-moz-opacity:0.75;
	opacity:0.75;
}


/* ------------------
SNS
------------------ */
#sns {
    margin-bottom:50px;
    font-size:86%;
}
#sns > ul > li {
    width:320px;
    float:left;
}
#sns li.facebook,
#sns li.instagram {
    margin-right:20px;
}
#sns li dt {
    height:22px;
    margin-bottom:10px;
    border-bottom:#CCC solid 1px;
    font-weight:bold;
    text-align:left;
}
/* twitter */
#sns #twitter-widget-0 {
    height:320px !important;
}

/* Instagram */
#sns .instagram dd {
    height:320px;
    overflow-y:scroll;
}
#sns .instagram li {
    width:90px;
    height:90px;
    padding:5px;
    float:left;
}
#sns .instagram li a {
    width:90px;
    height:90px;
    margin:0 auto;
    display:block;
    position:relative;
    color:#FFF;
    overflow:hidden;
}
#sns .instagram li a div {
    width:100%;
    height:20px;
    position: absolute;
    background:rgba(0,0,0,0.25);
    left:0;
    bottom:-20px;
    -webkit-transition-property: bottom;  
    -webkit-transition-duration: 0.2s;  
    -webkit-transition-timing-function: linear;
}
#sns .instagram li a:hover div {
    left:0;
    bottom:0;
}
#sns .instagram li a {
    display:block;
}
#sns .instagram li a img {
    width:100%;
}
#sns .instagram li a:hover img {
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	-moz-opacity:0.7;
	opacity:0.7;
}
#sns .instagram li span {
    padding:0 5px;
}
#sns .instagram li span.likes:before {
	margin-right:3px;
	font: 100% 'FontAwesome';
	content: "\f004";
}
#sns .instagram li span.cmts:before {
	margin-right:3px;
	font: 100% 'FontAwesome';
	content: "\f075 ";
}
#sns .instagram #btn_more {
    margin:10px;
    padding:5px;
    color:#FFF;
    text-decoration:none;
    background:#333;
    cursor:pointer;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}
#sns .instagram #btn_more:hover {
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	-moz-opacity:0.7;
	opacity:0.7;
}
   

/* ------------------
新着情報
------------------ */
#news {
    width: 750px;
    margin: 0 auto 60px;
    border: #CCC solid 1px;
}
#news > dl > dt {
    height:30px;
    padding-left:10px;
    background:#F7EFE4;
    border-bottom:#CCC solid 1px;
    text-align: left;
}
#news > dl > dt h4 {
    color:#F60;
    font-size:115%;
    font-weight:bold;
    line-height:30px;
}
#news > dl > dd {
    height:120px;
    padding:0 10px;
    overflow-y:scroll;
	scrollbar-base-color:#ffffff;
	scrollbar-face-color:#ffffff;
	scrollbar-arrow-color:#CCCCCC;
	scrollbar-shadow-color:#CCCCCC;
	scrollbar-darkshadow-color:#ffffff;
	scrollbar-highlight-color:#CCCCCC;
	scrollbar-3dlight-color:#ffffff;
	scrollbar-track-color:#ffffff;
}
#news dl > dd li {
    padding: 5px 0;
    display: block;
    list-style-type: none;
    border-bottom: #DDD dotted 1px;
    font-size:86%;
}
#news li dt {
    width: 65px;
    padding: 0 10px;
    margin-right: 10px;
    float: left;
    text-align: right;
}
#news li dd {
    width: 604px;
    float: left;
    text-align: left;
}

/* ------------------
グループサイト
------------------ */
#group {
    margin-bottom: 50px;
}
#group > dl > dt {
    height:16px;
    margin-bottom:25px;
}
#group ul {
    padding:0 5px;
}
#group li {
    width:310px;
    height:150px;
    padding:0 10px;
    float:left;
}
#group li a {
    width:310px;
    height:150px;
    display:block;
    text-decoration:none;
}
#group li a:hover {
    background:#FFFFEA;
    color:#444;
}
#group li dl {
    width:308px;
    height:144px;
}
#group li dt {
    height:42px;
    margin:0 14px;
}
#group li p {
    height: 88px;
    padding: 12px 147px 0 14px;
    background: right bottom no-repeat;
    font-size: 86%;
    letter-spacing: 0;
    line-height: 1.4em;
    text-align: left;
}

/* COM */
#group li.com dl {
    border:#3071B7 solid 1px;
    border-bottom:#3071B7 solid 5px;
}
#group li.com dt {
    border-bottom:#3071B7 dotted 2px;
}
#group li.com dd p {
    background-image:url(../images/img_com.png);
}

/* SELF */
#group li.self dl {
    border:#2F599D solid 1px;
    border-bottom:#2F599D solid 5px;
}
#group li.self dt {
    border-bottom:#2F599D dotted 2px;
}
#group li.self dd p {
    background-image:url(../images/img_self.png);
}

/* 感謝はがき */
#group li.kansha dl {
    border:#C7161E solid 1px;
    border-bottom:#C7161E solid 5px;
}
#group li.kansha dt {
    border-bottom:#C7161E dotted 2px;
}
#group li.kansha dd p {
    background-image:url(../images/img_kansha.png);
}


/* ------------------
運営会社
------------------ */
#company {
    margin-bottom: 50px;
    text-align: left;
}
#company > dl > dt {
    height:16px;
    margin-bottom:25px;
}
#company > dl > dd {
    padding-left:15px;
}
#company dd dl {
    margin-bottom: 20px;
}
#company dd dt {
    height: 20px;
    margin-right: 25px;
    float: left;
}
#company dd dd {
    line-height:22px;
    font-size:79%;
    letter-spacing:0;
}
#company li {
    padding-right: 25px;
    display: inline;
}
#company a:hover img {
	filter:alpha(opacity=75);
	-ms-filter:"alpha(opacity=75)";
	-moz-opacity:0.75;
	opacity:0.75;
}



/* --------------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------------- */
#footer {
    padding-top:20px;
    background:#EFEFEF;
    text-align:left;
}
#footer li a {
    text-decoration: none;
}
#footer li a:hover {
    text-decoration: underline;
}
#footer > ul {
    width:1000px;
    margin:0 auto;
    padding-bottom:20px;
}
#footer > ul >li {
    width:390px;
    margin-right:50px;
    float:left;
}
#footer li dt {
    margin-bottom:10px;
    font-weight:bold;
}
#footer dd li {
    width:130px;
    float:left;
    font-size:86%;
}
#footer dd li.w100 {
    width:100%;
}
#f_menu {
    height:30px;
    border-top:#CCC solid 1px;
    font-size:86%;
    line-height:30px;
    text-align:right;
}
#f_menu ul {
    width:1000px;
    margin:0 auto;
}
#f_menu li {
    display:inline;
    padding-left:50px;
}


/* --------------------------------------------------------------------------------
OTHER
-------------------------------------------------------------------------------- */
.box_att {
	padding:10px;
	border:#F30 solid 1px;
	background:#FFE1E1;
	color:#F30;
	font-weight:bold;
	position:relative;
}
.box_att2 {
	padding:10px;
	border:#F30 solid 2px;
	background:#FFEEEE;
	position:relative;
}
.box_att3 {
	padding:10px;
	border:#F30 solid 1px;
	position:relative;
}
.box_att2 strong {
	font-size:125%;
}
.box_gray {
	padding:10px;
	border:#CCC solid 1px;
	background:#F9F9F9;
}
.box_gray2 {
	padding:20px;
	border:#CCC solid 1px;
	background:#F9F9F9;
}
.box_gray3 {
	padding:20px;
	background:#F6F6F6;
}
.box_white {
	padding:10px;
	border:#CCC solid 1px;
	background:#FFF;
}

.ro a:hover img {
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	-moz-opacity:0.7;
	opacity:0.7;
}

#box_tag {
    width:1px;
    height:1px;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}