/* 
 Custom Jimdo theme "DMJ Cafe"
 Author: Hide Yuki
 http://donnamonjyaroi.jimdo.com/
 2013-2014, Japan
*/

/*  ベース設定
----------------------------------------------- */

html
{
	overflow-y: scroll;
}

html,body
{
	height: 100%;
}

body,div,p,h1,h2,h3,h4,h5,h6
{
	margin: 0;
	padding: 0;
}

body > #container
{
	height: auto;
}

a
{
	-webkit-transition:all 400ms;
	-moz-transition:all 400ms;
	-ms-transition:all 400ms;
	-o-transition:all 400ms;
	transition:all 400ms;
}

/*  リンク付画像マウスオーバー時透明度変更
----------------------------------------------- */
a:hover img 
{ 
	filter:alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-moz-opacity:0.7; /* Firefox 1.5未満, Netscape用 */
	-khtml-opacity: 0.7;  /* Safari 1.x, 他khtmlに対応したブラウザ用  */
	opacity: 0.7; /* Firefox 1.5以上, Opera, Safari用 */

	-webkit-transition:all 400ms;
	-moz-transition:all 400ms;
	-ms-transition:all 400ms;
	-o-transition:all 400ms;
	transition:all 400ms;
}  

/*  文字スタイル
----------------------------------------------- */
#header h1,#header a
{
	padding:0;
	font-size:30px;
	font-weight:bold;
	text-decoration:none;
	line-height:1.3em;
	color:#ff8c00;
	text-align:left;
}

#header a:hover
{
	text-decoration:none;
}

#container #wrap h2
{
	clear: both;
	padding: 5px 10px;
	background: #ffdbb2;
	line-height: 20px;
	border-radius: 3px;
        color:#6B6A68;
}


/*  レイアウト
----------------------------------------------- */

body
{
	background: #333333;
}

#bg
{
	background: #333333 url(https://u.jimcdn.com/cms/o/sa168aade17cfea97/userlayout/img/bg.jpg?t=1426436335) repeat-x fixed;  /* CSS3未対応ブラウザ用 */
	background-size: cover;  /* CSS3対応ブラウザ用 */
}

#base
{
	clear: both;
	margin: 0;
	background: #ffffff;
}

.cc-indexpage #header
{
	display: none;
}

#header
{
	clear: both;
	display: block;
	border-bottom: 5px solid #FF8C00;
	margin:0 auto;
	min-width:1000px;
	padding: 20px 0px 10px 0px;
	background: #ffffff;
}
/* start: clearfix ------------------------------ */
#header:after
{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

#header
{
	display:inline-table;
}

/* Hides from Mac IE \*/
* html #header
{
	height:1px;
}

#header
{
	display:block;
}
/* */
/* end: clearfix ------------------------------ */

#wrap_header
{
	clear: both;
	margin:0 auto;
	width: 1000px;
	color: #000000;
}

#container
{
	clear: both;
	margin:0 auto;
	width: 1000px;
	min-width:1000px;
	background:#ffffff;
}

#wrap
{
	clear: both;
	margin:0 auto;
	width: 1000px;
}

#menu
{
	clear: both;
	margin: 0 auto;
	min-width:1000px;
	padding: 0px 0px 0px 0px;
	display: block;
	background: #ff8c00;
	border-bottom: 5px solid #ff8c00;
}
/* start: clearfix ------------------------------ */
#menu:after
{
	content:".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

#menu
{
	display: inline-table;
}

/* Hides from Mac IE \*/
* html #menu
{
	height: 1px;
}
#menu
{
	display: block;
}
/* */
/* end: clearfix ------------------------------ */


#wrap_menu
{
	clear: both;
	display: block;
	margin:0 auto;
	width: 1000px;
}

#sidebar
{
	clear: both;
	padding: 10px 0 0 0px; 
}

.cc-indexpage #content
{
	float: left;
	width: 980px;
	padding: 20px 10px 10px 10px; 
}

#content
{
	float: right;
	width: 715px;
	padding: 8px 8px 8px 8px; 
}

#footer
{
	clear: both;
	border-top: 0px solid #FACC6B;
	margin:0 auto;
	padding: 5px 0px 10px 0px;
	min-width:1000px;
	height: 150px;
	color: #444342;
	background: #FFD289;
}

#wrap_footer
{
	clear: both;
	margin:0 auto;
	width: 1000px;
	min-width:1000px;
}

#footer .gutter 
{
	padding:5px 0px 0px 0px;
	margin-left:5px;
	margin-right:5px;
	min-width:1000px;
	color: #6B6A68;
}

#footer .gutter a
{
	color: #6B6A68;
}

#clear
{
	clear:both;
}


/*トップ画像部分（可変）
----------------------------------------------- */
.cc-indexpage #topimage
{
	position: relative;
        display: block;
        margin:0 auto;
        width: 100%;
	max-width: 1280px;
	min-width: 1000px;
}

.cc-indexpage #topimage img
{
        width: 100%;
}

.top_text
{
	position: absolute;
	bottom: 12%;
	right: 5%;
}

#topimage
{
        display: none;
}

/*  メインメニューレイアウト（横表示）
----------------------------------------------- */

#navigation
{
	clear: both;
	width: 1000px;
	background: #B7771D;
        border-top: 4px solid #ff8c00;
}

#navigation .mainNav1
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#navigation .mainNav1 li
{
	float: left;
	height: 50px;
	line-height: 50px;
}
#navigation .mainNav1 li a
{
        font-size:15px;
        width:198px;
        text-align:center;
        border-right: 1px dotted #D2691E;
        border-left: 1px dotted #D2691E;
	padding: 0;
	display: block;
	color: #F8FFF6;
        background: #ff8c00;
        font-weight: bold;
	text-decoration: none;
}

#navigation .mainNav1 li .current
{
	padding: 0;
	display: block;
	color: #6B6A68;
        background: #ffdbb2;
	text-decoration: none;
}

#navigation .mainNav1 li a:hover
{
	color: #FFFFFF;
	background: #FFA500;
}


/*  2階層目を非表示　*/
#navigation .mainNav2,
#navigation .mainNav3
{
	display: none;
}


/*  サイドメニューレイアウト
----------------------------------------------- */

.cc-indexpage #side
{
        display: none;
}

#side
{
	padding: 12px 12px 10px 10px; 
	float: left;
	width: 244px;
}

#side .mainNav1,
#side .mainNav2,
#side .mainNav3
{
	display: inline;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#side .mainNav1 li,
#side .mainNav2 li,
#side .mainNav3 li
{
	width: 235px;
	height: 30px;
	line-height: 30px;
	display: inline;
}


#side .mainNav1 li a
{
	display: block;
	padding: 0 0 0 10px;
	color: #000000;
        border-left: 8px solid #ff8c00;
	border-bottom: 1px solid #333333;
	text-decoration: none;
}

#side .mainNav2 li a
{
	display: block;
	padding: 0 0 0 10px;
	color: #000000;
        border-left: 8px solid #BCE1CF;
	border-bottom: 1px solid #333333;
	text-decoration: none;
}

#side .mainNav3 li a
{
	display: block;
	padding: 0 0 0 10px;
	color: #000000;
	border-bottom: 1px solid #333333;
	text-decoration: none;
}

#side .mainNav1 li a
{
	margin: 2px 0 0 0;
}

#side .mainNav2 li a
{
 	margin: 2px 0 0 0px;
}

#side .mainNav3 li a
{
 	margin: 2px 0 0 20px;
}

#side .mainNav1 a:hover,
#side .mainNav2 a:hover,
#side .mainNav3 a:hover
{
	color: #FFFFFF;
	background: #ff8c00;
	font-weight: bold;
}

#side .mainNav1 .current,
#side .mainNav2 .current,
#side .mainNav3 .current
{
	color: #FFFFFF;
	font-weight: bold;
	background: #ff8c00;
}

/*  サイドリンクメニュー一階層目を表示させない
----------------------------------------------- */

#side ul.mainNav1 li .level_1 
{
	display: none;
}   


/*  （クラス）指定した場所にトップへ戻るボタンを設置
--------------------------------------------------------------- */
.cc-indexpage .backtotop
{
        display: none;
}

.backtotop 
{
	float: right;
	width: 170px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	margin: 0 !important;
	padding: 10px !important;
	line-height: 15px;
	color: #ffffff  !important;
	text-decoration: none !important;
	background: #ff8c00;
	border-radius: 3px;
} 

.backtotop:hover,active
{
	float:right;
	text-align: center;
	font-weight: bold; 
	font-size:14px;
	text-decoration: none !important;
	background: FF9F32;
}                          


/*  回り込み解除指定
----------------------------------------------- */         
.clear
{
	clear:both;
}  

.clear hr
{
	display:none;
}


/*　ブログ
----------------------------------------------- */
/* 日付部分背景 */
#wrap .blogselection .datetime,
#wrap .post .datetime
{
	position: relative;
	width: 52px;
	height: 57px;
	margin: 0 0 0 80px;
	padding: 2px 0 0 0;
	background: none;
	/* for IE */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.jimdo.com/s/img/cc/datesticker-bg.png', sizingMethod = 'crop', enabled='false') !important;
}

/* 日付部分日本語化 */
.blogselection .datetime p.day,
.post .datetime p.day
{
	position: absolute;
	top: 10px;
	left: 0px;
	width: 52px;
	color: #222222;
	font-size: 14px;
	line-height: 14px;
        font-weight: bold;
	text-align: center;
	padding: 0;
}

.blogselection .datetime p.mon,
.post .datetime p.mon
{
	position:absolute;
	top: 10px;
	left: -35px;
	width: 52px;
	color: #222222;
	font-size: 14px;
	line-height: 14px;
        font-weight: bold;
	text-align: center;
	padding: 0;
}

.blogselection .datetime p.yr,
.post .datetime p.yr
{
	display: block;
	position: absolute;
	top: 10px;
	left: -85px;
	width: 60px;
	color: #222222;
	font-size: 14px;
	line-height: 14px;
        font-weight: bold;
	text-align: center;
	padding:0;
}

/* 年・日追加 */
.blogselection .datetime p.yr:after,
.post .datetime p.yr:after
{
	content: "年";
}

.blogselection .datetime p.day:after,
.post .datetime p.day:after
{
	content: "日";
} 

/* ブログ単独記事表示タイトル*/
.post > h1
{
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}

.post > h1 a
{
	color: #111111;
	border: none;
	text-decoration: none;
	font-weight: bold;
}

/* ブログ記事タイトル一覧表示部分 */
.blogselection h1
{
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}

.blogselection h1 a
{
	color: #111111;
	border: none;
	text-decoration: none;
	font-weight: bold;
}

/*ブログ一覧表示間隔設定*/
#wrap .blogselection .clearover
{
	margin: 0 0 10px 0;
}

/* 続きを読む・コメント非表示 */
.blogreadmore,
.comment 
{
	display: none;
}


/* パンくずリスト
---------------------------------------------*/
#breadcrumb{
	margin:0px auto;
	padding:10px;
	font-size:14px;
}

.cc-indexpage #breadcrumb{
	display: none;
}

#breadcrumb div{
	display:inline;
}

#breadcrumb ol{
	margin:0px;
	padding:0px;
	display:inline;
}

#breadcrumb ol li{
	display:inline;
	margin-right:10px;
	font-size:14px;
}

#breadcrumb ol li:before{
	content:"> ";
} 


/*リンクボタン
----------------------------------------------- */
.link 
{
	display: inline-block;
	*display: inline;  
	*zoom: 1;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
	line-height: 20px;
	color: #ffffff  !important;
	text-decoration: none !important;
	background: #FFD289;
	border-radius: 3px;
	box-shadow: 0 0 30px 5px rgba(0,0,0,0.1);
}

.link:hover
{
	font-weight: bold; 
	font-size:14px;
	text-decoration: none !important;
　　　　　background: #F4751F;
}

.link2
{
	display: inline-block;
	*display: inline;  
	*zoom: 1;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
	line-height: 20px;
	color: #6B6A68  !important;
	text-decoration: none !important;
	background: #BCE1CF;
	border-radius: 3px;
	box-shadow: 0 0 30px 5px rgba(0,0,0,0.1);
}

.link2:hover
{
	font-weight: bold; 
	font-size:14px;
        color: #ffffff  !important;
	text-decoration: none !important;
	background: #ff8c00;
}

.link3
{
	display: inline-block;
	*display: inline;  
	*zoom: 1;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
	line-height: 20px;
	color: #ffffff  !important;
	text-decoration: none !important;
	background: #00aeef;
	border-radius: 3px;
	box-shadow: 0 0 30px 5px rgba(0,0,0,0.1);
}

.link3:hover
{
	font-weight: bold; 
	font-size:14px;
	text-decoration: none !important;
	background: #67C7EA;
}

.link4
{
	display: inline-block;
	*display: inline;  
	*zoom: 1;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
	line-height: 20px;
	color: #ffffff  !important;
	text-decoration: none !important;
	background: #82AC5A;
	border-radius: 3px;
	box-shadow: 0 0 30px 5px rgba(0,0,0,0.1);
}

.link4:hover
{
	font-weight: bold; 
	font-size:14px;
	text-decoration: none !important;
	background: #9AC96A;
}

.link-title
{
	display: inline-block;
	*display: inline;  
	*zoom: 1;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	padding: 20px !important;
	line-height: 20px;
	color: #4B4B50  !important;
	text-decoration: none !important;
	background: #84E0B2;
	border-radius: 5px;
        border: 2px solid #ffffff;
        box-shadow: 0 0 30px 5px rgba(0,0,0,0.1);
} 

.link-title:hover
{
	text-align: center;
	font-weight: bold; 
	font-size: 20px;
        color: #6B6A68 !important;
	text-decoration: none !important;
	background: #ffdbb2;
} 

/* 枠表示用ソース
----------------------------------------------- */
div.imprint
{
	border:1px solid #CCC;
	padding:10px;
	background:#FAFAFA;
}

/* ページ内スクロール用ソース
----------------------------------------------- */
.scroll
{
	background-color: #ffffff;
	overflow: auto;
	height: 300px;
	margin: 10px;
	padding: 20px;
	border: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.scroll_min
{
	background-color: #ffffff;
	overflow: auto;
	height: 100px;
	margin: 10px;
	padding: 20px;
	border: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}


.home .site-content .entry-header {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    background-color: transparent;
}


/* デフォルト（PC表示）：スマホ用画像を非表示 */
.sp-only {
  display: none !important;
}

/* スマホ表示時（画面幅 768px 以下の場合） */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important; /* PC用画像を隠す */
  }
  .sp-only {
    display: block !important; /* スマホ用画像を表示 */
    width: 100%;               /* 幅いっぱいに広げる */
    height: auto;
  }
}