@charset "utf-8";
/* CSS Document */

/*************************/
/* プロフィールBOXの開閉 */
/*************************/

.wrapper-profile {
	display: none;
}

/******************************/
/* プロフィール画像のスタイル */
/******************************/
.profile img{
	border-radius: 10%;
}

/********************************/
/* スライドショー全体のスタイル */
/********************************/

.wrapper-slide {
	margin: 0 auto;
	max-width: 960px;
	background: #fff;
}

.slide {
	position: relative;
	margin: 0 auto;
	max-width: 420px;
	font-size: 0; /* 画像下の隙間を埋めるため */
}

.slide img {
	max-width: 100%;
	margin: 10px auto;
}

.slide > .container {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 写真の配置 */

.slide > .container > li {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.7s linear;
}

.slide > .container > li.current {
	position: relative;
	z-index: 1;
	opacity: 1;
}

/* スライドショーのボタン */

.slide a.prev,
.slide a.next {
	position: absolute;
	display: block;
	top: 45%;
	width: 40px;
	height: 40px;
	text-indent: -5000px;
	z-index: 10; /* ボタンを常に画像より上に配置 */
}

.slide a.prev {
	background: url(../images/arrow-left1.png) 50% 50% no-repeat;
	left: 0;
}

.slide a.prev:hover {
	background: url(../images/arrow-left2.png) 50% 50% no-repeat;
}

.slide a.prev:active {
	background: url(../images/arrow-left3.png) 50% 50% no-repeat;
}

.slide a.next {
	background: url(../images/arrow-right1.png) 50% 50% no-repeat;
	right: 0;
}

.slide a.next:hover {
	background: url(../images/arrow-right2.png) 50% 50% no-repeat;
}

.slide a.next:active {
	background: url(../images/arrow-right3.png) 50% 50% no-repeat;
}

/* レスポンシブ　スマホ向け　幅600px以下 */

@media screen and (max-width:600px) {
	.slide a.prev,
	.slide a.next {
		top: 40%;
	}
}

/**************************/
/* タブ切り替えのスタイル */
/**************************/

.tab-menu {
	border-bottom: 6px solid #8dcb89;
}
.tab-menu > li {
	float: left;
	margin: 0 3px 0 0;
}
.tab-menu > li > a {
	display: block;
	padding: 8px 20px 4px 20px;
	background: #bbb;
	border-radius: 5px 5px 0 0;
	color: #fff;
}
.tab-menu > li > a:hover {
	background: #a2a2a2;
}
.tab-menu > li > a:active {
	background: #757575;
}
.tab-menu > li.selected > a {
	background-color: #568453;
	color: #fff;
}
.tab-contents {
	padding: 20px 2.2727272%;/* 2.2727272%（20px/880px） */
	background: #ededed;
}
.tab-contents .hidden {
	display: none;
}

/* レスポンシブ　スマホ向け　幅600px以下 */

@media screen and (max-width:600px) {
	.tab-menu > li {
		margin: 0 2px 0 0;
	}
	.tab-menu > li > a {
		padding: 5px 5px 3px 5px;
	}
}


/**********************/
/* モーダルウィンドウ */
/**********************/
.modalwin {
	position: fixed;
	width: 600px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 #000;
}

.show {
	display: block;
}

.hide {
	display: none;
}

.modalwin h1 {
	background: #ededed;
	padding: 20px;
	border-radius: 5px 5px 0 0;
	font-size: 1.2em;
}

.modalwin-contents {
	padding: 20px;
}

.modalwin-contents img {
	margin: 0 30px 10px 0;
	float: left;
}

.modalwin-contents p {
	margin: 0 0 1em 0;
	line-height: 1.8em;
}

/* 閉じるボタン */
a.modal-close {
	display: block;
	background-image: url(../images/close.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
}

a.modal-close:hover {
	background-position: -40px 0;
}

a.modal-close:active {
	background-position: -80px 0;
}

/* シェード */

#shade {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.3;
}

/* レスポンシブ　スマホ向け　幅600px以下 */

@media screen and (max-width:600px) {
	.modalwin {
		width: 90%;
	}	
}


/* ページトップに戻るボタンのスタイル */
.pageup {
	margin: 0 auto;
	max-width: 960px;
	height: 30px;
	background: #fff;
	position: relative;
}

.pageup a {
	display: block;
	width: 60px;
	height: 30px;
	border-radius: 30px 30px 0 0;
	background-color: #324930;
	background-image: url(../images/arrow-1.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: absolute;
	right: 4.1666666%;/* 4.1666666%（40px/960px） */
	bottom: 0;
}

.pageup a:hover {
	background-image: url(../images/arrow-2.png);
}

.pageup a:active {
	background-image: url(../images/arrow-3.png);
}