/* CSS Document */

body {
	background: url("../photos/background/sky_bk_x.jpg");
	background-repeat: no-repeat;
	background-position:center;
	width: 100%;
	min-height: 100vh;
	background-size: cover;
	font-family:Arial, Helvetica, "sans-serif",Osaka, "Osaka−等幅", "小塚明朝 Pro R", "游教科書体 ミディアム";
}
body,td,th {
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;

}

/*文章コピペ禁止*/
.bio{
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
}

h3.bio{
	font-style: italic;
	color: #2C0087;
	font-family: "Times New Roman", Times, "serif";

}
p.bio{
	font-size: 15px;
	color: #2C0087;
	font-style: italic;
	font-family:"小塚明朝 Pro R", "游教科書体 ミディアム",Arial, Helvetica, "sans-serif";
}
h3.cv{
	color: #2C0087;
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-style: bold;
}
p.cv{
	color: #2C0087;
	font-size: 15px;
	font-family: Arial, Helvetica, "sans-serif";
}

.vertical{
	writing-mode: vertical-rl;
	font-family: "凌慧体-简 中黑体","魏碑-繁 粗体","行楷-繁 细体",Georgia, "Times New Roman", Times, "serif";
	float: left;
	padding: 2px;
}
h5.cv{
	color: #2C0087;
	font-size: 15px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, "serif";
}

/*ドラッグ無効化*/
img {
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}
.resizeimage img {
width: 100%;
	padding-right: 15px;
	pointer-events: none;
}

/*お目目を右に配置*/
img.right{
    float: right;
}
/*お目目を揺らす*/
.buruburu-hover:hover {
    display: inline-block;
    animation: hurueru .1s  infinite;
	float: right;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.logo_name_01{
	float: left;
}
/*目次二重階層*/
.accordion{
		float: left;
		padding-left: 30px;
		padding-bottom: 20px;
}
.accordion ul {
	list-style: none;
	margin:0;
}
label{
	cursor: pointer;
}
.toggle{
	display: none;
}
.toggle + ul{
	max-height: 0;
	overflow: hidden;
	transition: all .5s ease;
}
.toggle:checked + ul{
	max-height: 500px;
	transition: all 2s ease-in;
}
.info{
	letter-spacing: 0.7em;
}
.about{
	letter-spacing: 0.31em;
}
.works{
	letter-spacing: 0.24em;
}
.project{
	letter-spacing: 0.06em;
}
.contact{
	letter-spacing: 0.03em;
}

/*BOOKアニメ*/
.book img{
	width: 100%;
	max-width: 55%;
	min-width:45%;
	pointer-events: none;	
}
div.book{
	text-align: center;
	padding:10px;
}

/*額装写真GIF*/
.framedphoto img{
	width: 100%;
	max-width:40%;
	min-width:35%;
	text-align: center;
	padding: 20px;
	pointer-events: none;
}
/*ニュースNEWS*/
div.news{
	text-align: center;
    width: 100%;
	min-width: 35%;

}
iframe{
	border-radius: 10px;
}
h1.iframe_news{
	color: #D70003;
	font-family:"Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
	width:100%;
	text-align: center;
	animation: key1 .6s ease infinite alternate;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}
/*動画*/
video{
	width: 100%;
	max-width:614px;
}
/*テーブル3画像*/
table img{
	pointer-events: none;
}

/*フェードイン画像*/
.feedin{
	text-align: center;
	height: auto;
	margin: 0 auto;
	padding: 30px;
	border: 1px;
	box-sizing: border-box;
	margin-bottom:20px;
}
.feedin img{
	width:100%;
	max-width: 80%;
	height: auto;
	-webkit-transition: all 2.5s;
	-moz-transition: all 2.5s;
	-ms-transition: all 2.5s;
	-o-transition: all 2.5s;
	transition: all 2.5s;
	opacity: 0;
	overflow: hidden;
}
.feedin img:hover{
	opacity: 1;
}
/*文字の色変化*/
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #666;
}
a:active {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}
/*画像の位置調整*/
div.ff22{
	border: 1px;
	width: auto;
	height:auto;
	margin:auto;
	padding:20px;
}
div.gg22{
	border: 1px;
	width: auto;
	height:auto;
	margin:auto;
	padding:20px;
}
div.eeee{
	border: 1px;
	width: auto;
	height:auto;
	margin:auto;
	padding:20px;
}
/*セルフポートレイト*/
div.selfportrait{
	width: 100%;
	padding: 20px;
	text-align: center;
}

/*cave*/
div.cave{
	width: 100%;
	padding: 20px;
	text-align: right;
}

/*Term and Conditions*/
div.termconditions{
	text-align: center;

}
iframe{
	border-radius: 10px;
	    width: 100%;
	max-width: 50%;
}

/*footerについて*/
div.footer{
	border: 1px;
	width: auto;
	height:auto;
	margin:auto;
	padding:auto;
}
.copyright{
	width:auto;
	text-align: left;
}

/*========= 上部固定させるためのCSS ===============*/
#header{
	height:180px;/*高さ指定*/
	width:100%;/*横幅指定*/
}

/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed{
	position:fixed;/*fixedを設定して固定*/
	z-index: 999;/*最前面へ*/
	top:0;/*位置指定*/
	left:0;/*位置指定*/
}

/*========= 以下は検証用のレイアウトのためのCSS ===============*/
nav ul{
list-style: none;
display:block;/*display:flexから変更*/
justify-content: center;
}
/*目次を縦一列にする*/
nav .column{
 column-count: 1;
}
/*カーソル合わしたときにグレーになる*/
nav ul li a{
text-decoration: none;
color: #666;
padding:5px;
}

/* スマホ用のCSSはメディアクエリの外に記述する */

@media screen and (min-width: 481px) {
	/* 481px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS（PC用） */
}

@media screen and (max-width: 1024px) { }
@media screen and (max-width: 896px) { }
@media screen and (max-width: 480px) { }

.container { max-width: 1024; }