@charset "Shift_JIS";

/* ============================================================
    —R—“ΰ‘•@Šξ–{
   ============================================================ */
/*
head  #D7C4A5 (ƒx[ƒWƒ…)
fotter #8C593E (‚±‚°’ƒ)
font color  #4A2727
*/
 
 
/*--------------------------------------------------
  01 TOP page
  --------------------------------------------------*/  

a { 
  text-decoration: none; 
  color: #3C7F6B; 
}
a:hover { 
  color: #32725F; 
}

/* ƒtƒbƒ^[ŒΕ’θ—p@------------------------------*/ 

html,body{
  height: 100%;
}
#all{
  width: 100%;
  position: relative;
  height:auto !important;
  height: 100%;
  min-height: 100%;
}


/* ƒwƒbƒ_[------------------------------*/ 

header{
  display:block;
  width: 100%;
}  
  
h1 { 
  color: #4A2727;
  font-size: 1.8rem; 
  font-weight: 500;
  letter-spacing: 0.2rem;
  padding-top: 8px;
  padding-right: 30px;
  font-family: "Ÿΰ–Ύ’©", YuMincho, "ƒqƒ‰ƒMƒm–Ύ’© ProN W3", "Hiragino Mincho ProN", "HG–Ύ’©E", "‚l‚r ‚o–Ύ’©", serif;
  line-height: .875; 
}
@media (max-width: 990px) { 
h1 { 
  margin-left: 30px;
}
}

h1 a{ 
  color: #4A2727;
}
h1 a:hover { 
  color: #4A2727;
}


.main_img img{
  display:block;
  max-height:560px;
  width: 100%;
}  

.main_img2 img{
  display:none;
} 
.main_img3 img{
  display:none;
}

@media (max-width: 900px) { 
.main_img img{
  display:none;
} 
.main_img2 img{
  display:block;
  width: 100%;
}  
.main_img3 img{
  display:none;
}  
}

@media (max-width: 600px) { 
.main_img img{
  display:none;
} 
.main_img2 img{
  display:none;
} 
.main_img3{
  overflow: hidden;
}  
.main_img3 img{
  display:block;
  min-width: 480px;
  width: 100%;
}  
} 


/* TOPΠ‰ξ
||||||||||||||||||||| */
#intro-space{
  margin-top:0;
  margin-bottom: 30px;
/* background-image:url(../index_img/d_back.jpg);*/
}

.intro img{
  padding: 10px 0px 10px;
  text-align: center;
}

.short_ex{
  font-size: 105%; 
  padding: 30px 140px 20px;
  height: auto;
  line-height: 180%;
}

@media (max-width: 1000px) {
.short_ex{
  font-size: 100%;
  padding: 10px 5px 5px;
  height: auto;
  text-align: left;
}
}

h2#speciality{
  font-size: 1.34rem; 
  line-height: 1.217391304; 
  margin-top: 10px;
  margin-bottom:25px;
  color: #3C7F6B;
} 

@media (max-width: 767px) {
#intro-space{
  margin-top:0;
  text-align: center;
/* background-image:url(../index_img/d_back.jpg);*/
}

.intro img{
  padding: 10px 0px 20px;
  text-align: center;
}

h2#speciality{
  margin-top: 10px;
  margin-bottom:10px;
} 
.container p{
  padding: 0px 20px 0px;
  text-align: left;
}
}

 
/* ƒƒCƒ“------------------------------------*/ 
.main{
  margin-top:0;
  text-align: left;
  background-color:#D7C4A5;
}
 
/* ƒCƒ“ƒtƒH------------------------------------*/ 

.infoma{
  padding: 25px 20px 30px;
  text-align: left; 
  padding-bottom: 150px;  /* ‘ζ‚QŠK‘w FooterŒΕ’θ•ͺ*/
}
@media (max-width: 767px) {
.infoma{
  padding: 25px 8px 30px;
  text-align: center; 
}
}


.book{
  margin: 18px auto 12px;
  padding: 10px 20px;
  width: 100%;
  white-space: normal;
  text-align: left;
  border: #8C593E dotted 1px;
  background-color:#FFFFFF;
}
@media (max-width: 767px) {
.book{
  margin: 20px auto 10px !important;
  padding: 8px 20px !important;
  text-align: center;
}
}

.tel{
  font-size:large;
  font-weight: 700;
  letter-spacing:0.25em;
}
.mail{
  font-size:114%;
  font-weight: 700;
  letter-spacing:0.25em;
}

/* ƒtƒbƒ^[------------------------------------*/ 


@media (min-width: 768px) {
footer{
   display:block;
   width: 100%;
   margin-top:10px;
   height: 120px;
   background-color: #8C593E;  /* ‚±‚°’ƒ*/
 }
 
.f-info{
  list-style: none;
  padding: 25px 0 15px;
  color: #fff;
  letter-spacing:0.2em;
  text-align: center; 
}
.f-info2{
  display:none;
}

.f-info a{ 
  color: #fff; 
}
}

@media (max-width: 767px) {
footer{
   display:block;
   width: 100%;
   margin-top:20px;
   height: 120px;
   background-color: #8C593E;  /* ‚±‚°’ƒ*/
 }
 
.f-info{
  display:none;
}
.f-info2{
  list-style: none;
  padding: 20px 0 10px;
  color: #fff;
  font-size: 0.86rem;
  letter-spacing:0.1em;
  line-height: 140%;
  text-align: center; 
}
.f-info2 a { 
  color: #fff; 
}
.copy{
  font-size: 0.76rem;
}
}

/* Pagetop---*/
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#pageTop a {
  display: block;
  position:fixed;
  bottom:10px;
  right:4px;
}


/* ============================================================
    02 ABOUT
   ============================================================ */
/* ‘ζ‚QŠK‘w---*/    

/*  ‘ζ‚QŠK‘w ‹€’Κ•”•ͺ --------------------------*/ 
#about,
#works,
#access,
#contact { 
  display:block;
  margin: 40px 0 0px;
  text-align:center;
}

.title-serif { 
font-family: "Ÿΰ–Ύ’©", YuMincho, "ƒqƒ‰ƒMƒm–Ύ’© ProN W3", "Hiragino Mincho ProN", "HG–Ύ’©E", "‚l‚r ‚o–Ύ’©", serif;
}


@media (max-width: 767px) {
#about,
#works,
#access, 
#contact{ 
  margin: 50px 0 0px;
}
}

#about .main_img{
 width: 100%;
 height:300px;  /* ƒCƒ[ƒW‚̍‚‚³300px*/
 background:url(../img/about/main_img.jpg) center center no-repeat;
 background-size:cover;
 position:relative;
 box-sizing:border-box;
}  
#works .main_img{
 width: 100%;
 height:300px;  /* ƒCƒ[ƒW‚̍‚‚³300px*/
 background:url(../img/works/main_img.jpg) center center no-repeat;
 background-size:cover;
 position:relative;
 box-sizing:border-box;
}  
#access .main_img {
 width: 100%;
 height:300px;  /* ƒCƒ[ƒW‚̍‚‚³300px*/
 background:url(../img/access/main_img.jpg) center center no-repeat;
 background-size:cover;
 position:relative;
 box-sizing:border-box;
}  



/*  ABOUT “ΖŽ© -------------------------------*/ 

h3.prof{
  margin:30px auto 0;
  display: flex !important;
  align-items: center;
  justify-content: center; 
}

h3.prof::before,
h3.prof::after {
  border-top: 1px solid;
  content: "";
  width: 18em; /* ό‚Μ’·‚³ */
  color:#3C7F6B;
}
h3.prof::before {
  margin-right: 30px;
}
h3.prof::after {
  margin-left: 30px;
}

/* @768ˆΘ‰Ί ----------------------*/ 
@media only screen and (max-width: 768px) {
h3.prof::before,
h3.prof::after {
  border-top: 1px solid;
  content: "";
  width: 2em; /* ό‚Μ’·‚³ */
  color:#3C7F6B;
}
h3.prof::before {
  margin-right: 15px;
}
h3.prof::after {
  margin-left: 15px;
}
}



.short_ex2{ 
  max-width: 980px;
  margin-top: 20px;
  padding: 10px 30px 20px;
  height: auto;
  line-height: 180%;
  text-align: left;
}
.short_ex2 img{ 
  margin-top: 20px;
}
@media (max-width: 979px) {
.short_ex2{
  padding: 25px 30px 10px;
  height: auto;
}
}

@media (max-width: 767px) {
.short_ex2{
  padding: 25px 10px 10px;
  height: auto;
}
.short_ex2 .prof-photo{ 
  text-align: center;
}
}

#about table{
 margin-top:-20px; 
 margin-left:0px;

}

#about td{
 vertical-align:top;
 padding-bottom:10px;
 color:#4A2727;  
 font-size: 105%; 
}

.pastime{
  margin:30px 0 20px; 
  background-color: #F0E2C6;
  padding: 10px 25px 15px;
}

.staffword{
  margin:40px 20px 20px -10px; 
  padding-right:10px;
  text-align:left;
}
@media (max-width: 767px) {
.staffword{
   margin:10px auto 30px; 
   max-width:80%;
}
}
@media (max-width: 560px) {
.staffword{
  margin:10px auto 30px; 
  max-width:96%;
}
}

/* ============================================================
    03WORKS
   ============================================================ */
.works{
  padding:10px 10px 0px;
	 text-align: left !important;
} 

.item{ 
  margin-top:10px;
  padding: 5px 5px 5px; 
  font-size: 0.8rem;
  line-height: 100%;
  height:auto;
  overflow:hidden;
} 

.works-cap{
  padding: 10px 0 0; 
  font-size: 0.8rem;
  line-height: 130%;
  text-align: center;
}  


.works-others1{
	max-width:930px; 
 margin:10px auto 25px;
	padding-top:5px;
 text-align: center ;
 border: #3C7F6B 1px solid;
	overflow: hidden;
}  
.works-others1 ul{
  padding: 10px 40px 10px 30px; 
}  
.works-others1 li{
  list-style:none;
  padding: 5px; 
	 margin-right:-25px;
  font-size: 0.86rem;
  line-height: 120%;
  text-align:left;
}

.works-others2{
	max-width:540px; 
 margin:10px auto 25px;
 text-align: center;
 border: #3C7F6B 1px solid;
	overflow: hidden;
}
.works-others2 ul{
  padding: 10px 40px 10px 40px; 
}  
.works-others2 li{
  list-style:none;
  padding: 5px; 
  font-size: 0.86rem;
  line-height: 120%;
  text-align:left;
}

/* @MOBILE ----------------------*/ 
@media only screen and (max-width: 768px) {
.works-others1, .works-others2{
		max-width:90%; 
  margin:10px auto 25px;
  text-align: center ;
  border: #3C7F6B 1px solid;
	 overflow: hidden;
}  
.works-others1 ul, .works-others2 ul{
	 padding: 10px 10px 10px 10px !important; 
  font-size: 0.82rem;
  line-height: 130%;
}
}	
	
	
/*  580ˆΘ‰Ί ----------------------*/ 
@media only screen and (max-width: 580px) {
.works ul{
  padding: 10px 30px; 
}
.works li{
  padding: 5px 5px; 
}
}
/*   ŽΐΡ@768ˆΘ‰Ί ----------------------*/ 
@media only screen and (max-width: 768px) {
.works{
  width: 100%;
  padding:10px 5px 10px;
  text-align: center;
}  

.item{
  margin: 5px 0 0px;
  font-size: 0.8rem;
  text-align: center;
  overflow:hidden;
}
}
 
/* ============================================================
   ACCESS
   ============================================================ */
   
#around{
  max-width:980px;
  margin:auto;
  margin-bottom: 40px;
  overflow: hidden;
}  
.around-photo{
  width:100%;
  padding: 5px 5px 10px; 
  line-height: 100%;
  height:auto;
  text-align: center;
}  

/*   ŽΐΡ@768ˆΘ‰Ί ----------------------*/ 
@media only screen and (max-width: 768px) {
#around{
  max-width:768px;
  margin-bottom: 30px;
} 

.around-photo{
  width:100%;
  padding: 5px 15px 5px;
  font-size: 0.8rem;
  line-height: 90%;
  height:auto;
  text-align: center;
}
.around-photo img{
  margin: -5px -10px;
}  
}


ul.address{
  list-style: none;
  max-width: 500px;
  padding: 0px 30px 20px;
  height: auto;
  line-height: 180%;
  text-align:center;
}

ul.address a{
  color: #4A2727;
}

.map {
 position: relative;
 padding-bottom: 55%; // c‰‘”δ
 height: 0;
 overflow: hidden;
 margin-left:70px;
 margin-right:70px;
}
.map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 85% !important;
}

@media (max-width: 767px) {
.map {
 margin-left:0px;
 margin-right:0px;
 padding-bottom: 70%; // c‰‘”δ
}
}
  
.route {
  width: 90% ;
 }

@media (max-width: 767px) {
.route {
 width: 100% ;
 }
}