@charset "utf-8";

/*!
 * 更新ツール[スライドショー]
 * Copyright 株式会社コムネット
 */

._my_slideshow_box {
	margin: 0 0 10px 0;
	padding: 0;
	width: 100%;
	max-width: 560px;
}

/* --- タイトル --- */
._my_slideshow_box .title {
	margin: 4px 0 0 0;
	padding: 4px 0 4px 10px;
	font-size: 14px;
	font-weight: normal;
	color: #444444;
	border-style: solid;
	border-width: 1px;
	border-color: #BBBBBB;
}

/* --- 拡大写真 --- */
._my_slideshow_box .image {
	margin: 0;
	padding: 0;
	text-align: center;
	max-height: 420px;
	background-color: #EDEDED;
	background-image: url(../img/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center 160px;
}


/* --- コメント --- */
._my_slideshow_box .comment {
	margin: 0 0 0 0;
	padding: 6px;
	height: 70px;
	overflow: auto;
	font-size: 12px;
	font-weight: normal;
	color: #444444;
	border-style: solid;
	border-width: 1px;
	border-color: #BBBBBB;
}

/* --- 操作パネル --- */
._my_slideshow_box .panel {
	margin: 0 0 0 0;
	padding: 0;
	width: 478px;
	height: 71px;
	background-color: #EDEDED;
}

._my_slideshow_box .panel:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}

._my_slideshow_box .panel .left_button {
	width: 20px;
	height: 71px;
	float: left;
}

._my_slideshow_box .panel .right_button {
	width: 20px;
	height: 71px;
	float: right;
}

._my_slideshow_box .panel .imagelist {
	margin: 0 0 0 40px;
	padding: 0;
	width: 355px;
	height: 71px;
	float: left;
}

/* サムネイル表示エリア(手前) */
._my_slideshow_box .panel .imagelist .preview {
	margin: 0;
	width: 355px;
    z-index: 2;
    overflow: hidden;
    position: relative;
}

@media print,screen and (min-width: 992px) {
	._my_slideshow_box .panel {
		width: 560px;
	}
	._my_slideshow_box .panel .imagelist {
		margin-left: 10px;
		width: 498px;
	}
	._my_slideshow_box .panel .imagelist .preview {
		width: 498px;
	}
}

/* サムネイルリスト(奥) */
._my_slideshow_box .panel .imagelist .list {
	margin: 0;
	padding: 0;
	visibility: hidden; /* 20110204 追加 */
    z-index: 1;
}

._my_slideshow_box .panel .imagelist .list ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

._my_slideshow_box .panel .imagelist .list ul:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}

._my_slideshow_box .panel .imagelist .list li {
	margin: 0;
	padding: 0;

/* 枠線の太さを含めた幅・高さ */
/*
	width: 100px;
	height: 100px;
*/
	width: 71px;
	height: 71px;
/*
	width: 56px;
	height: 56px;
*/
	float: left;
	border-style: solid;
	border-width: 3px;
	border-color: #000000;
	background-color: #BBBBBB;
}

._my_slideshow_box .panel .imagelist .list li h1,
._my_slideshow_box .panel .imagelist .list li p {
	display: none;
}

/* ボタン */
._my_slideshow_box .button {
	background-color: #BBBBBB;
}

._my_slideshow_box .button:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}

._my_slideshow_box .page {
	margin: 13px 0 0 0;
	width: 110px;
	float: left;
	font-size: 12px;
	font-weight: normal;
	color: #444444;
	text-align: right;
}

._my_slideshow_box .button .button_first {
	margin: 0;
	padding: 8px 0 8px 0;
	width: 84px;
	float: left;
	text-align: center;
}

._my_slideshow_box .button .button_last {
	margin: 0;
	padding: 8px 0 8px 0;
	width: 84px;
	float: right;
	text-align: center;
}

._my_slideshow_box .button .button_start {
	margin: 0;
	padding: 8px 0 8px 0;
	width: 180px;
	float: left;
	display: block;
	text-align: center;
}

._my_slideshow_box .button .button_stop {
	margin: 0;
	padding: 8px 0 8px 0;
	width: 180px;
	float: left;
	display: none;
	text-align: center;
}


/* --- ギャラリー --- */
._my_slideshow_gallery {
	margin: 4px 0 0 0;
	padding: 4px;
	font-size: 14px;
	font-weight: normal;
	color: #444444;
	border: solid 1px #BBBBBB;
}

@media (min-width: 768px){
	._my_slideshow_gallery {
		padding: 10px;
		display: inline-block;
	}
}

._my_slideshow_gallery ul {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	list-style-type: none;
}

._my_slideshow_gallery ul li {
	margin: 1px;
	padding: 0;
	width: 120px;
	height: 120px;
	float: left;
	background-color: #DEDEDE;
}

._my_slideshow_gallery ul li div {
	margin: 0;
	padding: 0;
	width: 120px;
	height: 120px;
	layout-grid-line: 120px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

._my_slideshow_gallery ul li img.landscape {
	max-width: 120px;
	vertical-align: middle;
}

._my_slideshow_gallery ul li img.portrait {
	max-height: 120px;
	vertical-align: middle;
}



/* ---------------------------------------------------------------- *
   スマートフォン向けタブメニュー
 * ---------------------------------------------------------------- */

#_my_smartphone_tab {
}

#_my_smartphone_tab .tab_navigation {
	background-color: #000000;
	opacity: 0.8;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10000;
}

#_my_smartphone_tab .tab_navigation ul {
	overflow: hidden;
}

#_my_smartphone_tab .tab_navigation ul li {
	margin: 0;
	padding : 0.5em 0.5em;
	float: left;
	width: 90px;
	list-style: none;
	font-weight: bold;
	font-size : 1.5em; /* 24px */
	line-height : 1; /* 24px */
	text-align: center;
	border: 2px solid #000000;
}

#_my_smartphone_tab .tab_navigation ul li.selected {
	color:#000000;
	background-color: #EE99B7;
}

#_my_smartphone_tab .tab_navigation ul li a:link,
#_my_smartphone_tab .tab_navigation ul li a:visited {
	display: block;
	width: 100%;
	color: #FFFFFF;
	text-decoration: none;
}

#_my_smartphone_tab .tab_navigation ul li a:hover {
	opacity: 1.0;
}

#_my_smartphone_tab .tab_navigation ul li.selected a:link,
#_my_smartphone_tab .tab_navigation ul li.selected a:visited {
	display: block;
	color:#000000;
	background-color: #EE99B7;
}

#_my_smartphone_tab .tab_container {
	text-align: left;
}

#_my_smartphone_tab .tab_body {
	display: none;
	margin-bottom: 1.5em;
}


/* ---------------------------------------------------------------- *
   動画の表示最適化
 * ---------------------------------------------------------------- */
._my_video_wrapper {
	position: relative;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
}

._my_video_wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ---------------------------------------------------------------- *
   ギャラリー [写真スワイプ領域]
 * ---------------------------------------------------------------- */
#_my_photo_slide {
	margin: 0;
	padding:0;
	width: 100%;
	overflow: hidden;
	background-color: #000000;
	color: #FFFFFF;
}

#_my_photo_slide_box {
	margin:0;
	padding:0;
	width: 20000px;
	list-style-type: none;
}

#_my_photo_slide_box li {
	margin:0 5px 0 0;
	padding:0;
	float: left;
	list-style-type: none;
	text-align: center;
}

#_my_photo_slide_box li p.title {
	margin: 5px 0;
	padding: 0;
	max-width: 320px;
	height: 18px;
	overflow: hidden;
	font-size: 90%;
}

#_my_photo_slide_box li p.comment {
	margin: 5px 0;
	padding: 0;
	max-width: 320px;
	font-size: 80%;
	line-height: 120%;
	text-align: left;
}


/* jQuery UI 背景の黒色化 */
.ui-page {
	background: transparent;
}

.ui-body-c,
.ui-overlay-c {
	background-color: #000000;
}

/* ---------- End of CSS ---------- */