@charset "utf-8";
/*
Theme Name:FF14note
Theme URI: 
Description: ff14の軌跡
Version: 
Author: vivi
Author URI: 
*/

body {
	font-family: 'MyFont';
	font-weight: normal;
	line-height: 1.5;
	font-size:17px;
}
@font-face {
	font-family: 'MyFont';
	src: url("/font/mushin.otf");
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

 a {
	text-decoration:none;
	color:#eee;
}


/* ハンバーガーメニュー */

.btnHamburger {
  /*position: fixed;*/
	position:absolute;
  top: 45px;
  right: 10px;
  width: 30px; /* クリックエリアの横幅*/
  height: 20px; /* クリックエリアの高さ*/
  cursor: pointer;
	z-index: 100;
}
/* 3本線の1本ごとに共通するスタイルを指定 ---------------------- */
.btnHamburger .line {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px; /* 横幅 */
  height: 4px; /* 1本辺りの高さ */
  background: #fff; /* 線の色 */

  /* 適用するプロパティ、変化する時間、変化する速度 */
  -webkit-transition:  0.3s;
  transition:  0.3s;
 }
/* 3本線の各線の位置を指定 ---------------------- */
.btnHamburger .line_01 { top: 0; }
.btnHamburger .line_02 { top: 8px; }
.btnHamburger .line_03 { top: 16px; }
/*カバーレイヤークリック前*/
#coverlayer {
background: #000;
width: 1px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
opacity: 0;
transition: 0.5;
z-index: 10;


}

aside{
position: fixed;
top:50px;
right: -500px;
width: 100%;
opacity: 0;
transition: 0.5s;
z-index: 50;
height: 100%;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
color:#fff;
}
/*カバーレイヤークリック後*/
#coverlayer.is-active {
width: 100%;
opacity: 1;

}

/*navのクリック後*/
aside.is-active {
opacity: 1;
left: 50%;
transform: translateX(-50%);

}
/*ハンバーガーメニュークリック後*/
/* 最上部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_01 {
  top: 8px; /* 上から2番目の線の位置に変更 */

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
	background: #fff;
}

/* 上から2番目の線のスタイル ---------------------- */
.btnHamburger.is-active .line_02 {
  opacity: 0; /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_03 {
  top: 8px; /* 上から2番目の線の位置に変更 */

  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
	background: #fff;
}
#wrapper {
	min-width:375px;
}
#box{
		position: relative;
		width: 100%;
		z-index: -99;
		
	}
#kobox1{
		width: 50%;
		height: 100%;
		position: fixed;
		z-index: -10;
		filter: grayscale(0%) blur(3px);/*モノクロ具合を変更したい場合はこの数値を変更*/
	}
	#spkobox{
		width: 50%;
		height: 100%;
		position: fixed;
		right: 0;
		z-index: -10;
		filter: grayscale(0%) blur(3px);/*モノクロ具合を変更したい場合はこの数値を変更*/
	} 

header h1 {
	width:250px;
	padding-left:5px;
	margin-bottom: 50px;
}
nav {
	
	margin-bottom:50px;
}


nav ul{
display: flex;
flex-wrap: wrap;
	
}
nav ul li {
width: 50%;
	position:relative;
	
}
nav ul li a {
display: block;
text-align: center;
line-height: 48px;
	
	
}
nav ul li:nth-of-type(odd) {
width: 49.733%;
}
nav ul li a::after{
	content:"";
	display:block;
	width:130px;
	height:10px;
	background:#000;
	position:absolute;
	bottom:30%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index:-1;
}
nav ul .sub-menu li{
	width:100%;
}
.sub-menu li a {
	display:block;
	}
main {
		width: 100%;
		 background-color:rgba(255,255,255,0.3);
		margin-bottom:50px;
		border-top:3px solid #fff;
		border-bottom:3px solid #fff;
	}
	#index article {
		display:flex;
		justify-content:space-around;
		flex-wrap: wrap;
		
		
	}
main section {
	width:177.5px;
	margin:0 auto;
	padding-top:10px;
	margin-bottom:10px;
	word-wrap:wrap;
}

#index .post a {
		display:block;
		height:100%;
	}	
.bimg {
	margin-bottom:5px;
}
.btitle {
	font-size:20px;
	font-weight:bold;
	margin-bottom:5px;
	word-wrap:break-word;
}
.brog {
	margin-bottom:5px;
	word-wrap:break-word;
}
.day {
	text-align:right;
	font-size:8px;
}
aside {
	background: #000;
	
	
}

aside h2 {
	padding: 20px 0 0 15px;
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
}
#p-img {
	text-align: center;
	margin-bottom: 15px;
	
}
#p-img img {
	border-radius:15px;
}


#name,#Self-introduction {
	padding-left: 10px;
	
}
#name {
	font-weight:bold;
}
footer {
	position:fixed;
	bottom:1%;
	right:1%;
	width:200px;
	z-index:999;
}



/*個別*/

	#single .post {
		width:365px;
		margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	}
#single .bimg {
	margin-bottom:10px;
}
#single .btitle {
	
	margin-bottom:10px;
}
#single .brog {
	margin-bottom:10px;
}
#single .day {
	margin-bottom: 30px;
}
#single .nav-below {
	padding-bottom:10px;
	margin-bottom:30px;
	border-bottom:1px solid #fff;
}

#comment {
	width:calc( 100% - 26px );
	border-radius:15px;
	margin:0 auto;
	padding: 10px;
	font-size:17px;
}

/*404*/

#error .post{
	width:375px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 20px;
}
#error .post h1 {
	
	font-size:16px;
	text-align:center;
	font-weight:bold;
	margin-bottom:10px;
}
#error .post p {
	text-align:center;
	
}
#error #errorimg {
	
	margin:auto;
	margin-bottom:10px;
	
}







/*tab*/
@media screen and (min-width:600px){
	
	.btnHamburger,#coverlayer {
display: none;
}
	#wrapper {
		width:748px;
		margin: 0 auto;
	}
	header h1 {
		width:350px;
		margin:0 auto;
		line-height:80px;
		margin-bottom:50px;
	}
nav {
	margin-bottom: 50px;
}
nav ul{
	display: flex;
	justify-content: space-between;
	flex-wrap:nowrap;
}

	nav ul li a {
		width:150px;
		
		margin: 0 auto;
		
	}
	#menu-item-97 a,#menu-item-98 a,#menu-item-99 a,#menu-item-105 a{
		border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
		border:2px solid #fff;
		background:none;
		color:#000;
		 background:linear-gradient(45deg, rgba(0,0,0,0.6),rgba(136,136,136,0.6),rgba(255,255,255,0.6));/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;
	}
#menu-item-99 {
  position: relative;

}


nav ul li:nth-of-type(2n) a{


}
	
.sub-menu {
  display: none;
 
}	
	
	
	.sub-menu li a {
		display:block;
	}
	nav ul .sub-menu li {
		margin:5px;
	}	

#content {
	display: flex;
	justify-content: space-between;
	margin-bottom:50px;
}
	main {
		width:480px;
		border:3px solid #fff;
		border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	}
	
	
.post {
	width:220px;
	margin:5px;
	padding:5px;
	word-wrap: break-word;
	
	}
	aside {
	position: static;
	opacity: 1;
	border:1px solid #fff;
	border-radius:8% 8% 7% 14% / 15% 40% 23% 43%;
	background-color:rgba(255,255,255,0.1);
	width: 238px;
}
aside h2 {
	padding: 10px 0 0 15px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
}
#p-img {
	width:208px;
	margin:0 auto;
	border: 3px solid #fff;
}
#name {
	padding-left: 15px;
	font-weight: bold;
	margin-top:10px;
	margin-bottom: 10px;
}
#Self-introduction {
	padding:0 15px 10px;
}
	
	
/*single*/
#single .post{
		width:460px;
		margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	}	
	#single img {
		border-radius:35px;
	}

/*404*/

#error .post{
	width:718px;
	margin: 0 auto;
	padding-top: 15px;
	padding-bottom: 20px;
}
#error .post h1 {
	font-size:16px;
	text-align:center;
	font-weight:bold;
	margin-bottom:10px;
}
#error .post p {
	text-align:center;
}
#error #errorimg {
	margin-bottom:10px;
}
}



/*pc*/

@media screen and (min-width:960px){
	body {
		background:#fff;
		font-size:20px;
	}
	nav ul li a::after{
	content:"";
	width:150px;
	height:10px;
	
}
	#wrapper {
	width: 1280px;
	margin: 0 auto;
}
#box{
		display: flex;
		position: relative;
		width: 100%;
		z-index: -99;
	}
	#kobox1{
		width:45%;
		height: 100%;
		position: fixed;
		z-index: -10;
		filter: grayscale(85%);/*モノクロ具合を変更したい場合はこの数値を変更*/
	}
	#kokobox1{
		width:55%;
		height: 55%;
		position: fixed;
		right: 0;
		top: 0;
		z-index: -1;
		-webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
		filter: grayscale(100%) brightness(75%);/*モノクロ具合を変更したい場合はこの数値を変更*/
		 background-image:  repeating-linear-gradient(45deg, #ffc107 25%, transparent 25%, transparent 75%, #ffc107 75%, #ffc107), repeating-linear-gradient(45deg, #ffc107 25%, #ffe9a7 25%, #ffe9a7 75%, #ffc107 75%, #ffc107);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
	}
	
	#kokobox2{
		width: 60%;
		height: 60%;
		position: fixed;
		right: 0;
		bottom: 0;
		-webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
		filter: grayscale(75%);/*モノクロ具合を変更したい場合はこの数値を変更*/
	}	

header h1{
	width: 450px;
	line-height:100px;
	margin-bottom:100px;
	filter: grayscale(0%);
	
}

nav ul{
	display: flex;
	justify-content: space-between;
	
}
	nav ul li {
		width:320px;
	}
nav ul li a{
	width: 200px;
	text-align:center;
}
	nav ul li:nth-of-type(odd) {
width: 320px;
}

	nav ul li a {
		border:none;
		margin: 0 auto;
		color: #fff;
  border-radius: 0.5rem;
 font-weight:bold;
		border:3px solid #fff;
	}
	




	
.sub-menu {
  display: none;
	width:500px;
	
}	
	
	nav ul .sub-menu li {
		width:200px;
		float:left;
		margin:15px 10px;
	}	
	
	
	.sub-menu li a {
		width:200px;
		display:block;
	}
	#menu-item-100 ,#menu-item-102 ,#menu-item-103  {
border:none;
	clear:both;
}
	
	
	/*ボタンデザイン*/
	nav {
		background:none;
		margin-bottom:100px;
	}
	nav a {
		
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  
}
	@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
	
nav a:before {
  position: absolute;
  top: -6px;
  left: -6px;
width: 100%;
  height: 100%;
 content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
border: 3px solid #000;
  border-radius: 0.5rem;
transform-origin: top left;
 
	
}

nav a:hover {
  padding: calc(0.2rem - 6px) 0.2rem;
transition: 0.5s;
	/*background: radial-gradient(closest-corner, rgba(238, 238, 174, 0.7), rgba(211, 249, 232, 0.7));*/
}

nav a:hover:before {
  top: 0;
  left: 0;
	 
}	
	



	
	
	
/*⇑ボタンデザイン*/	
	
#content {
	display: flex;
	justify-content: space-between;
	
}
	main {
		width:100%;
		max-width: 860px;
	}
	main article {
		display:flex;
		justify-content:space-between;
		flex-wrap: wrap;
	}
.post {
	width:380px;
	margin: 15px;
	padding:10px;
	filter: grayscale(100%);
	border-radius: 5px;
	word-wrap: break-word;
	
	}
/*section action*/
#index .post {
  position: relative;
  z-index: 1;
  overflow: hidden;
	
}
#index .post:hover::before {
  transform-origin: top right;
  transform: skewX(-45deg) translateX(0);
	
}
#index .post::before {
  content: "";
  width: 250%;
  height: 100%;
  background: linear-gradient(45deg, rgba(251, 213, 251, 0.7), rgba(149, 233, 243, 0.7));
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform-origin: top left;
  transform: skewX(-45deg) translateX(-100%);
  transition:0.5s;

}
 
#index .post:hover {
	filter:grayscale(0);
	box-shadow: 2px 2px 5px;
	transition: 0.5s;
}
	
	#index .post a:hover {
		color:#000;
	}
/**⇑section action*/
.bimg {
	padding-bottom: 10px;
}
.btitle {
	font-size:25px;
	padding-bottom: 10px;
	font-weight: bold;
}
.brog {
	padding-bottom: 15px;
}
.day {
	text-align: right;
	font-size: 12px;
}
aside {
	filter: grayscale(100%);
	position: static;
	opacity: 1;
	width: 390px;
}
	aside:hover {
		filter: grayscale(0%);
	}
aside h2 {
	padding: 20px 0 0 20px;
	margin-bottom: 15px;
	font-size: 25px;
	font-weight: bold;
}
#p-img {
	text-align: center;
	margin-bottom: 15px;
	width:350px;
	border:3px solid #fff; 
	border-radius:15px;
}
#name {
	padding-left: 20px;
	font-weight: bold;
}
#Self-introduction {
	padding-left: 20px;
}
	footer {
		width:300px;
	}
	
	#single .post {
		width:840px;
		margin: 0px;
	padding-top: 10px;
	padding-left:10px;
	padding-bottom: 10px;
	filter: grayscale(0%);/*モノクロ具合を変更したい場合はこの数値を変更*/
	
	}
	#single .post:hover {
	background:none;
	box-shadow: none;
}
#comment {
	font-size:20px;
}	
/*404*/
#error .post{
	width:100%;
	padding-top: 20px;
	padding-bottom: 30px;
	filter: grayscale(0%);
}
#error .post h1 {
	font-size:20px;
	text-align:center;
	font-weight:bold;
	margin-bottom:15px;
}
#error .post p {
	text-align:center;
}
#error #errorimg {
	margin-bottom:15px;
	text-align:center;
}
}
/* PCで観ると"pc"のclassがついた画像が表示 */ 
.pc { display: block !important; } 
.sp { display: none !important; } 
/* スマホで観ると"sp"のclassがついた画像が表示 */ 
@media only screen and (max-width: 599px) { 
.pc { display: none !important; } 
.sp { display: block !important; } 
}