/* CSS Document */

#kenkyujyo #contents .monitor {
	background: #ff0000;
}

#profile {
	position: relative;
	width: 97.4%;
	margin: 0 auto;
}

#profile .topBg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

#profile .bottomBg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#profile .topBg img {
	width: 100%;
}

#profile .bottomBg img {
	width: 100%;
	vertical-align: bottom;
}

#profile .topBg .pc,
#profile .bottomBg .pc {
	display: block;
}

#profile .topBg .smp,
#profile .bottomBg .smp {
	display: none;
}

#profile .inrBg {
	background: url(../img/index/index_bg_01.jpg) no-repeat center center #ffbe69;
	background-size: auto;
}

#profile .profileImg {
	position: relative;
	width: 44.5%;
	float: left;
	text-align: center;
	padding: 10.5% 0 0 1.5%;
	z-index: 10;
}


#profile .profileImg img{
	width: 100%;
	max-width: 409px;
}

#profile .tlBox.pc {
	display: block;
}

#profile .tlBox.smp {
	display: none;
}

#profile .tlBox {
	width: 27%;
	float: right;
	padding: 8px;
	margin: 7% 10px 0 0;
	background: #1ca0f1;
	border-radius: 10px;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#profile .tlBox .tlBtn {
	width: 100%;
	text-align: center;
	padding: 0 0 3px;
}

#profile .tlBox .tlBtn img {
	width: 100%;
	max-width: 191px;
}

#profile .tlBox .tlBoxInr {
	min-height: 330px;
}


@media all and (-ms-high-contrast:none) {
	#profile .tlBox .tlBoxInr {
		display: none;
	}
}
@-moz-document url-prefix(){
	#profile .tlBox .tlBoxInr {
		display: none;
	}
}

#profile .profileList {
	width: 23%;
	float: left;
	padding: 8% 0 3.5%;
}

#profile .profileList h2 {
	color: #000000;
	font-size: 20px;
}

#profile .profileList .ttl {
	width: 104px;
	text-align: left;
	padding: 0 0 2px;
}


#profile .profileList .txt {
	color: #000000;
	font-size: 15px;
	line-height: 1.3;
	padding: 0 0 8px;
}

#profile .profileList .bullet {
	position: relative;
	padding: 0 0 0 10px;
}

#profile .profileList .bullet.end {
	padding: 0 0 8px 10px;
}

#profile .profileList .txt span {
	display: block;
	position: absolute;
	width: 15px;
	left: -5px;
	top: -2px;
	color: #000000;
}

@media screen and (min-width: 980px) {
	#profile {
		min-height: 513px;
	}
}
@media screen and (max-width: 980px) {
	
	* html 	#profile .block01 {
		zoom: 1;
	}

	*+html 	#profile .block01 {
		zoom: 1;
	}

	#profile .block01:after {
		height: 0;
		visibility: hidden;
		content: ".";
		display: block;
		clear: both;
	}

	#profile .profileImg {
		width: 45%;
		float: left;
		padding: 10.5% 0 0 1.5%;
	}
	
	#profile .tlBox {
		width: 45%;
		float: right;
		padding: 8px;
		margin: 9% 10px 0 0;
		background: #1ca0f1;
	}

	#profile .profileList {
		float: none;
		width: 90%;
		padding: 2% 0 5%;
		margin: 0 auto;
	}

	#profile .profileList .block02 {
		width: 30%;
		float: left;
		padding: 0 0 0 0;
	}
	
	#profile .profileList .block03 {
		width: 30%;
		float: left;
		padding: 0 0 0 4%;
	}
	
	#profile .profileList .block04 {
		width: 30%;
		float: left;
		padding: 0 0 0 4%;
	}
	
	#profile .profileList h2 {
		width: 100%;
		display: block;
	}
}

@media screen and (max-width: 680px) {
	
	#profile .tlBox.pc {
		display: none;
	}
	
	#profile .tlBox.smp {
		display: block;
	}
	
	#profile {
		width: 96.4%;
	}
	
	#profile .topBg .pc,
	#profile .bottomBg .pc {
		display: none;
	}
	
	#profile .topBg .smp,
	#profile .bottomBg .smp {
		display: block;
	}
	
	#profile .inrBg {
		background: url(../img/index/index_bg_04.png) no-repeat center 15% #ffbe69;
		background-size: 100% auto;
	}


	#profile .profileList .block02 {
		width: 100%;
		float: none;
		padding: 0 0 0 0;
	}
	
	#profile .profileList .block03 {
		width: 100%;
		float: none;
		padding: 0 0 0 0;
	}
	
	#profile .profileList .block04 {
		width: 100%;
		float: none;
		padding: 0 0 0 0;
	}

	#profile .profileImg {
		width: 80%;
		float: none;
		text-align: center;
		padding: 15% 0 0;
		margin: 0 auto;
	}
	

	#profile .profileList {
		width: 90%;
		float: none;
		padding: 3% 0 15%;
		margin: 0 auto;
	}
	
	#profile .profileList h2 {
		font-size: 18px;
	}

	#profile .profileList .ttl img {
		width: 100%;	
	}
	
	#profile .profileList .txt {
		font-size: 14px;
	}
	
	#profile .tlBox {
		width: 95%;
		float: none;
		margin: 30px auto 0 ;
	}
	
}



/*------------------------------------------------------------
	スライド
------------------------------------------------------------*/

.slideBox {
  height: 500px;
  width: 900px;
  margin:0 auto;
  overflow: hidden;
  position: relative;
}

/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 16s 0s infinite;
  animation: anime 16s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
}


/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}









/*スライダー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	background:transparent;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	#stage {
		padding: 0 0 100px 0;
		}
}


/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#back1,#back2,#back3,#back4,#next1,#next2,#next3,#next4 {
	display: none;
}
/* 表示切換えボタンと表示位置　z-indexで画像を手前に */
.circ img {
	position: absolute;
	bottom:0%;
	cursor: pointer;
	z-index: 98;
}
#lb1 img { left: 0%;width:25%; }
#lb2 img { left: 25%;width:25%; }
#lb3 img { left: 50%;width:25%; }
#lb4 img { left: 75%;width:25%; }

@media screen and (max-width: 768px) {
	#lb1 img { left: 0%;bottom:15%;width:50%; }
	#lb2 img { left: 50%;bottom:15%;width:50%; }
	#lb3 img { left: 0%;width:50%; }
	#lb4 img { left: 50%;width:50%; }
}



/* stageが初期サイズ以下のなったときのサイズ */
@media screen and (max-width: 660px) { .pb, .nb { font-size:18px; } }
/*全表示スライドのコンテナー*/
#photos {
	position: absolute;
	width:100%;
	height:90%; /*100%;*/
	left: 4.55%;
	opacity:0;
	/*pointer-events: none;*/
	animation:flowSlides 10s infinite;
}
/* 個々のスライド */
.pic {
	position: absolute;
	width:100%;
	height:100%;
}

/* 現スライド標示ボタン　（現在未使用） */
.pic img:nth-child(1) { width:90.9%; margin-left:4.55%; }
.pic img:nth-child(2) { width:3%; bottom:-8.5%; /*2.5%;*/ }

/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 960px; }
#photo3 { left: 1920px; }
#photo4 { left: 2880px; }

/* 写真の下に現スライド標示ボタンを配置　（現在未使用） */
#photo1 img:nth-child(2) { position:absolute;left:40%;width:3%; }
#photo2 img:nth-child(2) { position:absolute;left:43%;width:3%; }

/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動　（現在未使用）*/
#r1:checked ~ #photos { animation:flowSlides1 32s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 32s infinite; animation-delay: -8s; }
#r3:checked ~ #photos { animation:flowSlides3 32s infinite; animation-delay: -16s; }
#r4:checked ~ #photos { animation:flowSlides4 32s infinite; animation-delay: -24s; }


/* 初期スライドショー */
@keyframes flowSlides {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	8% { left:0px; opacity:1; }
	10% { left:0px; opacity:0; }
	10.1% { left:-960px; opacity:0; }
	12% { left:-960px; opacity:1; }
	48% { left:-960px; opacity:1; }
	50% { left:-960px; opacity:0; }
	50.1% { left:-1920px; opacity:0; }
	52% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.1% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	98% { left:-2880px; opacity:1; }
	100% { left:0px; opacity:0; }
}

/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
	0% { left:0px; opacity:1; }
	100% { left:0px; opacity:1; }
}
@keyframes flowSlides2 {
	0% { left:-960px; opacity:1; }
	100% { left:-960px; opacity:1; }
}
@keyframes flowSlides3 {
	0% { left:-1920px; opacity:1; }
	100% { left:-1920px; opacity:1; }
}
@keyframes flowSlides4 {
	0% { left:-2880px; opacity:1; }
	100% { left:-2880px; opacity:1; }
}


/* プロフィールページ　スマホ用メニューボタン追加 */
div#profile-menu-btn img {
	width: 50%;
	float:left;
	margin: 15px 0 0 0;
}

@media(min-width:1541px){
    .profile-menu-btn__smp{
        display: none !important;
    }
}





/* アクセス時にポップアップ */
.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 60px 10px;
  text-align: center;
}
#img1:not(:target) + .modal-wrapper {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}
#img1:target + .modal-wrapper {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}
.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 70%;
  max-width: 600px;
  padding: 30px 30px 15px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
}
.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}
.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #95979c !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}