@charset "utf-8";
/*
theme Name: touch the 琴線
Description: original theme
version： 2.0.0
*/

/*cssのリセット*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}
 
body {
  line-height: 1;
}
 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}
 
nav ul {
  list-style: none;
}
 
blockquote,
q {
  quotes: none;
}
 
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
 
a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}
 
ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}
 
mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9;
}
 
del {
  text-decoration: line-through;
}
 
abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}
 
table {
  border-spacing: 0;
  border-collapse: collapse;
}
 
hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

body{
	font-family:  YakuHanMP,  'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size: 62.5%;
	line-height: 1.7;
	margin-top :100px;
	animation: fadeIn 4s ease 0s 1 normal;
	-webkit-animation: fadeIn 4s ease 0s 1 normal;
	}

	@keyframes fadeIn {
	    0% {opacity: 0}
	    100% {opacity: 1}
	}

	@-webkit-keyframes fadeIn {
	    0% {opacity: 0}
	    100% {opacity: 1}
	}

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

::selection {
	background: #FFFF00;
}
::-moz-selection {
	background: #FFFF00;
}


.flexbox{
	max-width: 1020px;
	margin: 0 auto;
	display: flex;
	overflow: hidden;
}

header{
	width: 20px;
	background: yellow;
	position: fixed;
	margin: 25px 10px;
}

header img{
	width: 100%;
	height: auto;
}

header a img:hover{
	opacity: 0.6;
	transition: .9s;
}

main{
	width: 800px;
	overflow: hidden;
	margin:0 60px 0 160px;
}

main ul{
	margin-bottom: 100px;
	/*background: green;*/
}

main ul li{
	font-size: 2.1rem;
	line-height: 1.7;
	letter-spacing: 0.2rem;
	text-align: justify;
	text-justify: inter-ideograph;
	font-weight: lighter;
}

main ul li.f-36{
	font-size: 3.6rem;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}

main ul li.f-55{
	font-size: 5.5rem;
	line-height: 1.4;
	letter-spacing: 0rem;
}


main ul li a:hover{
	color:#FF9900;
	transition: color .6s;
}

main ul li:nth-child(2){
	font-size: 1.1rem;
	color: #bbb;
	margin-top: 20px;
	letter-spacing: 0.1rem;
}


footer{
	width: 100%;
	height: 150px;
}

footer div{
	width: 100%;
	max-width: 1020px;
	margin: 50px auto 0;
	padding: 20px 0 0 0;
	border-top: solid 1px #bbb;
}

footer div p{
	font-size: 0.6rem;
	color: #333;
	text-align:right;
	letter-spacing: 0.1rem;
}

.sp{
	display: none;
}

@media (max-width: 480px) {

	body{
			font-family:  YakuHanMP, "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
		margin-top:80px;
	}

	.flexbox{
		display: block;
	}

	header{
		width: 160px;
		position: relative;
		margin: 80px auto 150px;
	}


	main{
		width: calc(100% - 40px);
		margin:0 auto 0;
	}

	main ul{
		margin-bottom: 80px;
	}

	main ul li{
		font-size: 1.4rem;
		line-height: 1.7;
		letter-spacing: 0.1rem;
	}

	main ul li.f-36{
		font-size: 2rem;
		line-height: 1.5;
		letter-spacing: 0.1rem;
	}

	main ul li.f-55{
		font-size: 2.8rem;
		line-height: 1.4;
		letter-spacing: 0rem;
	}

	main ul li:nth-child(2){
		font-size: 0.8rem;
		margin-top: 10px;
	}

	footer{
		width: calc(100% - 20px);
		margin:0 auto 0;
		height: 100px;
	}

	.pc{
		display: none;
	}
	.sp{
		display: block;
	}

}