body{ 
margin: 0;
padding:0;
font-family:"ヒラギノ明朝 Pro ","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif,Times;
font-size:14px;
letter-spacing:0.02em;
word-break: normal;
word-wrap: break-word;
background: #ffffff;
}

img{
border:0px;
max-width: 100%; 
}

a:link{ color:#222222;text-decoration: none;}
a:visited{ color: #444444; text-decoration: none;}
a:hover{ color: #222222; text-decoration: underline; }
a:active{ color:#222222; text-decoration: underline; }


body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

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

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

/*---------------main_all---------------*/
#all{
width:100%;
margin:0;
padding:0;
clear:both;
}

#wrap{
width:100%;
}


/*---------------head---------------*/
header{
font-weight: nomal;
width:100%;
margin:0;
padding:0;
color:#222222;
letter-spacing:0.01em;
text-align:left;
position:fixed;
transform: translate3d(0, 0, 0);
background-color: #ffffff;
z-index: 3;
}


/*---------------top---------------*/
#top_logo{
height:100px:
padding:0;
text-align:left;
width:100%;
font-size:10px;
}

#top_logo img{
	width: 400px;
	height:auto;
	padding-top:10px;
	padding-right:10px;
	padding-bottom:0px;
	padding-left:10px;
	vertical-align:middle;
}

#top_logo a:link{ color:#000;text-decoration: none;}
#top_logo a:visited{ color: #000; text-decoration: none;}
#top_logo a:hover{ color: #7a6c38; text-decoration:  none;}
#top_logo a:active{ color: #cf574c; text-decoration:  none; }

.title{
	text-align:left;
	font-size:10px;
	letter-spacing:0;
	margin-top:5px;
	margin-bottom:20px;
	padding-left:17px;
}

small{
font-size:85%;
letter-spacing:0;
line-height:110%;
}

.menu_g{
font-size:40px;
letter-spacing:0;
vertical-align: middle;
}

#top_menu{
width:100%;
display:none;
}
#top_menu a:link{ color:#000000;text-decoration: none;}
#top_menu a:visited{ color: #000000; text-decoration: none;}
#top_menu a:hover{ color: #b40000; text-decoration: none; }
#top_menu a:active{ color: #b40000; text-decoration: underline; }

/*---------------contants---------------*/

h1{
margin:20px 0 50px 0 ;
font-size:250%;
letter-spacing:0.1em;
text-align:center;
font-weight:lighter;
line-height:180%;
}

#calligraphy h1{
margin:10px 0 50px 0 ;
font-size:180%;
letter-spacing:0em;
text-align:center;
font-weight:light;
}

h2{
color: #222;
margin:10px 0 10px 0;
padding:0;
font-size:130%;
text-align:center;
letter-spacing:0.02em;
clear:both;
line-height:180%;
text-align: left;
border-bottom:solid #222222 2px;
font-weight:lighter;
}

h3{
color: #222;
margin:30px 0 10px 0;
padding:0;
font-size:110%;
font-weight:bold;
}

.dn{
display:none;
}

.cap{
font-size:12px;
}

article{
padding-top:100px;
font-size: 14px;
line-height:170%;
clear:both;
}

section{
clear:both;
padding:20px;
}

img{
display: inline;
}

p{
letter-spacing: 0.02em;
margin-bottom:30px;
}

.button{
width:60%;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
text-align:center;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  background: transparent;
  padding: 18px 30px;
  border: 2px solid #333;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.button::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #333;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}
.button:hover {
  color: #fff;
  textdecoration:none;
}
.button:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


dl{
display:flex}

dd{
text-align:left;
margin: 0;
width:50%;
}

dt{
margin: 0 ;
width:50%;
}
.box img{
		height: auto;
		margin:0 auto;
		clip-path: ellipse(40% 40% at 50% 50%);
}

#calligraphy {
border-top:solid 2px #222222 ;
border-bottom:solid 2px #222222 ;
}

#calligraphy::before {
content: "";
position: fixed; /* 画面に固定 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url(img/jn_celticknot_s.gif);
background-size: cover;
background-position: center;
z-index: -1; /* コンテンツの背面に配置 */
}

#class{
border-bottom:solid 2px #222222 ;
background-image:url(img/calligraphy_jn_3_s.gif);
/*background-size: cover;*/
}

#about{
background-image:url(img/botanical_pansy_jn_s.gif);
/*background-size: cover;*/
}

#contact{
border-top:solid 2px #222222 ;
border-bottom:solid 2px #222222 ;
text-align:center;
}

#contact h2{
text-align:center;
border-bottom:none;
}

#contact p{
margin-bottom:0;
padding:20px;
}

.read_2{
margin-left: auto;
margin-right: auto;
margin-bottom:50px;
max-width:600px;
font-size:110%;
line-height:190%;
padding:5px;
background-color:#ffffff;
border:solid 2px #222222;
}

/*---------------footer---------------*/
footer{
padding:30px 0 30px 0;
margin-top:0px;
margin-left: auto;
margin-right: auto;
clear:both;
text-align:center;
}

#copy{
padding:20px;
clear:both;
color:#666666;
font-size:12px;
}

#copy a:link{ color:#000000;text-decoration: none;}
#copy a:visited{ color: #000000; text-decoration: none;}
#copy a:hover{ color: #888888; text-decoration: none; }
#copy a:active{ color: #888888; text-decoration: underline; }

ol{
list-style:none;
margin:0 0 0 10px ;
padding:0;
font-size:14px;
line-height:130%;
}

nav ul{
display:flex;
width:100%;
list-style:none;
margin:auto;
padding:0px;
}

nav li{
font-size:110%;
width:20%;
text-align:center;
margin-top:20px;
margin-bottom:20px;}

/*---------------media screen---------------*/
@media screen and (min-width:850px) { 
body{
font-size:15px;
}

.dn{
display:inline;
}

p {
    letter-spacing: 0.02em;
}

/*---------------main_all---------------*/


#wrap{
width:100%;
margin-left: auto;
margin-right: auto;
}

* #wrap{
width:100%;
}

#top_logo img {
width: 400px;
float:none;
}

#top_menu{
width:100%;
display:block;
margin:20px 0 0 0 ;
clear:both;
}

#top_menu ul{
text-align:center;
padding:0;
}

#top_menu li{
display: inline;
list-style-type:none;
text-align:left;
padding:0 10px 0 0;
font-size:90%;
}

header{
letter-spacing:0.1em;
}

/*---------------contants---------------*/

section{
clear:both;
padding:50px 30px 30px 30px;
margin-left: auto;
margin-right: auto;
}

dl{
margin:10px 0 0 0;
display: flex; 
}

dt{
width:50%}

dd{
width:50%}

th{
text-align:left;
width:70%;
}

td{
text-align:left;
width:25%;
font-size:90%;
}
}

@media screen and (min-width:650px)  {
}

@media screen and (min-width:710px) {

#top_navi ul {
width:70%;
}

.box{
display: flex;
margin-left: auto;
margin-right: auto;
max-width:900px;
height:auto;
padding-left: 20px;
padding-right: 20px;
} 

.box_left{
width:50%;
margin-left: auto;
margin-right: auto;
}

.box_right{
width:50%;
margin-left: auto;
margin-right: auto;
margin-bottom:70px;
}

.box p{
letter-spacing:0.1em;
line-height:170%;
font-size:100%;
}

.read{
margin-left: auto;
margin-right: auto;
max-width:600px;
font-size:110%;
line-height:190%;
margin-bottom:50px;
padding:20px;
background-color:#ffffff;

}

.box img{
		width:100%;
}
}

@media screen and (min-width:810px)  {

#calligraphy{
background-image:url(img/jn_celticknot.gif);
background-size: cover;
background-attachment: fixed;
}
#calligraphy::before {
background-image:none;
}

#class{
background-image:url(img/calligraphy_jn_3.gif);
background-size: cover;
background-attachment: fixed;
}

#about{
background-image:url(img/botanical_pansy_jn.gif);
background-size: cover;
background-attachment: fixed;
}

#contact{
background-image:url(img/jn_celticknot.gif);
background-size: cover;
background-attachment: fixed;
}

section{
clear:both;
padding:50px 0 0 0;
margin-left: auto;
margin-right: auto;
}

.contact{
margin-left: auto;
margin-right: auto;
width:500px;
}

.contact p{
letter-spacing:0.07em;
line-height:230%;
}

#top_menu li{
display: inline;
list-style-type:none;
text-align:left;
padding:0 20px 0 0;
margin:0;
font-size:110%;
}

#top_menu li:last-child{
	padding:0;
}

#box img{
display: inline;
}

#box dl{
width:750px;
margin-left:auto;
margin-right:auto;
}

#box dd{
text-align: left;
}
}

@media screen and (min-width:1024px) {
}

@media print{
body{
width:100%;
letter-spacing:0.02em;}

header{
position:static;
}

h1 {
font-size:130%;
    margin: 10px 0 0 0;
	}

 img {
    width: 100%;
}

dl {
    margin: 0;
}

p{
font-size: 12pt;
}
}