/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #332b0b;
	FONT-SIZE:20px;
font-family:'Noto Sans JP', sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}
@media only screen and (max-width: 1080px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #383c40;
	FONT-SIZE:17px;
font-family:'Noto Sans JP', sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}
}
@media only screen and (max-width: 640px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #383c40;
	FONT-SIZE:16px;
font-family:'Noto Sans JP', sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}
}
@media only screen and (max-width: 480px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #383c40;
	FONT-SIZE:15px;
font-family:'Noto Sans JP', sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 2000px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#3371a7;
    text-decoration: none;
}

a:hover{
	outline:0;
	color: #5dc1cf;
    text-decoration: underline;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

br.sp,br.spt,br.spt2,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,br.spm,.nst,.nss,br.smm3{
	display:none;
}
@media only screen and (max-width: 1280px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm,br.smm3{
	display:none;
}
br.spt,br.sm,br.smt,.nst{
	display:inherit;
}
}
@media only screen and (max-width: 640px) {
br.spt,br.smt,br.smm2,.nsp,.nst,.nsm,.nsm2,br.smm3{
	display:none;
}
br.spm,br.smm,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 480px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2,br.smm3{
	display:none;
}
br.spm,br.smm,br.smm2,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 414px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2{
	display:none;
}
br.spm,br.smm,br.smm2,.nss,br.smm3{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 0;
padding: 0;
}

#logo{
clear: both;
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0 2%;
text-align: left;
}
#logo img{
max-width: 70%;
}
@media only screen and (max-width: 1280px) {
#logo{
width: 30%;
padding: 0 1%;
}
#logo img{
max-width: 90%;
}
}
@media only screen and (max-width: 1080px) {
#logo img{
max-width: 100%;
}
}
@media only screen and (max-width: 835px) {
#logo{
width: 100%;
padding: 0 1% 5px;
}
#logo img{
max-width:40%;
}
}
@media only screen and (max-width: 640px) {
#logo img{
max-width:45%;
}
}
@media only screen and (max-width: 480px) {
#logo img{
max-width:55%;
}
}
@media only screen and (max-width: 414px) {
#logo img{
max-width:65%;
}
}

#header-box{
float: right;
width: 60%;
height: auto;
margin: 0;
padding: 0 2% 10px 0;
text-align:right;
}
#header-box img{
max-width:35%;
margin: 10px 10px 0 0;
}
@media only screen and (max-width: 1280px) {
#header-box{
width: 70%;
padding: 0 6% 10px 0;
}
}
@media only screen and (max-width: 1080px) {
#header-box{
padding: 0 7% 10px 0;
}
#header-box img{
max-width:42%;
margin: 0px 5px 0 0;
}
}
@media only screen and (max-width: 835px) {
#header-box{
display: none;
}
}

#sns{
float: right;
width: 40%;
display: flex;
align-items: flex-end;
align-self:stretch;
}
@media only screen and (max-width: 1280px) {
#sns{
width: 50%;
}
}
@media only screen and (max-width: 1080px) {
#sns{
width: 55%;
}
}

#line-box,#insta-box{
text-align: center;
flex-wrap: wrap;
flex-direction: column;
align-self:stretch;
justify-content: center;
align-items: center;
flex-basis:46%;
margin: 0 2%;
background: #06c755;
border-radius: 10px;
height: auto;
min-height: 80px;
}
#insta-box{
background: #e4a429;
}
#header-box #line-box img{
max-height: 35px;
margin: 0 0 5px;
}
#header-box #insta-box img{
max-height: 30px;
margin: 0 0 5px;
}
@media only screen and (max-width: 1280px) {
#line-box,#insta-box{
min-height: 70px;
}
}
@media only screen and (max-width: 1080px) {
#line-box,#insta-box{
flex-basis:48%;
margin: 0 1%;
border-radius: 5px;
}
#header-box #line-box img{
max-height: 28px;
margin: 0 0 5px;
}
#header-box #insta-box img{
max-height: 25px;
margin: 0 0 5px;
}
#line-box,#insta-box{
min-height: 60px;
}
}

#line-box a,#insta-box a{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px 3%;
text-align: center;
color: #fff;
font-size: 17px;
line-height: 100%;
text-decoration: none;
}
@media only screen and (max-width: 1280px) {
#line-box a,#insta-box a{
padding: 0px 3%;
font-size: 17px;
}
}
@media only screen and (max-width: 1080px) {
#line-box a,#insta-box a{
padding: 0px 2%;
font-size: 16px;
}
}

#menu-box {
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding:30px 0 30px;
}
menu {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

menu ul {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media only screen and (max-width: 1440px) {
menu ul {
  padding: 0 5%;
}
}

menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 20px;
  line-height: 150%;
  flex: 1 0 auto;
}
menu li.bno,menu li.bno3{
display: none;
}
menu li a:link,
menu li a:visited {
  height: auto;
  text-decoration: none;
  color: #6a513e;
  line-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
menu li a:hover {
  text-decoration: underline;
}
menu li img{
display: block;
margin: 0 0 25px;
max-height: 50px;
}

@media only screen and (max-width:1280px) {
#menu-box{
clear: both;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9999;
background: none;
}
menu{
clear: both;
float: left;
width: 90%;
height: auto;
height: 100vh;
margin: 0 0 0 10%;
padding: 0;
text-align: left;
position: fixed;
top: 0;
background: rgba(255,255,255,1);
box-shadow: -5px 5px 15px #ccc;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5%;
text-align: left;
align-items: flex-start;
justify-content:flex-start;
}
menu li,menu li.bno {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 3%;
  text-align: left;
  font-size: 20px;
  line-height: 100%;
border-bottom:2px dashed #a9a292;
width: 100%;
align-items: flex-start;
justify-content:flex-start;
display: flex;
flex: none;
}
menu li.bno,menu li.bno3{
display: inherit;
}
menu li img{
display: inline-flex;
margin: 0 4% 0 0;
max-height: 50px;
max-width:40px;
vertical-align: middle;
}
menu li.bno3{
display: inherit;
margin: 0;
padding: 0;
}
menu li.bno3 img{
max-width: 80%;
margin: 0;
max-height: 80px;
width: auto;
}
menu li a:link,menu li a:visited,menu li.bno a:link,menu li.bno a:visited{
float: none;
flex: 1;
display: inline;
text-decoration: none;
color: #6d592e;
padding: 15px 0 15px;
text-align: left;
line-height: 100%;
font-size: 17px;
font-weight:700;
align-items: flex-start;
justify-content:flex-start;
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#4d3f20;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 999;
  border: 2px solid #fff;
}
@media only screen and (max-width: 480px) {
.openbtn4{
  top:5px;
}
}
/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
left: 50%; /* ここを50%に変更 */
  transform: translateX(-50%); /* これを追加 */
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
left: 50%; /* ここを50%に変更 */
  transform: translateX(-50%); /* これを追加 */
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg) translateY(20px); /* ここを12pxに調整 */
  font-size: 0.8rem;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
}
#photo img{
max-width: 100%;
top:0;
left:0;
z-index: 9997;
}
#photo img.bno,#photo img.bno2{
display: none;
}
@media only screen and (max-width: 640px) {
#photo img,#photo img.bno2{
display: none;
}
#photo img.bno{
display: inherit;
}
}
@media only screen and (max-width: 480px) {
#photo img,#photo img.bno{
display: none;
}
#photo img.bno2{
display: inherit;
}
}

#photo h1{
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 50px;
line-height: 150%;
z-index: 9998;
position: absolute;
left: 3%;
bottom:40%;
font-weight: 500;
text-shadow: 2px 2px 5px #333;
font-family: "Noto Serif JP",sans-serif,'Noto Sans JP';
}
#photo p{
margin: 0;
color: #fff;
font-size: 25px;
line-height: 150%;
text-shadow: 2px 2px 5px #333;
position: absolute;
left: 3%;
bottom:20%;
text-align: left;
}
@media only screen and (max-width: 1080px) {
#photo h1{
font-size: 40px;
line-height: 150%;
bottom:35%;
}
#photo p{
font-size: 20px;
line-height: 150%;
bottom:15%;
}
}
@media only screen and (max-width: 835px) {
#photo h1{
font-size: 35px;
line-height: 130%;
bottom:40%;
}
#photo p{
font-size: 20px;
bottom:15%;
}
}
@media only screen and (max-width: 640px) {
#photo h1{
font-size: 32px;
line-height: 130%;
bottom:25%;
}
#photo p{
font-size: 20px;
line-height: 150%;
bottom:10%;
}
}
@media only screen and (max-width: 480px) {
#photo h1{
width: 100%;
font-size: 38px;
line-height: 130%;
bottom:35%;
left: auto;
text-align:center;
}
#photo p{
width: 100%;
font-size: 22px;
line-height: 150%;
bottom:10%;
left: auto;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
#photo h1{
font-size: 32px;
}
#photo p{
font-size: 18px;
}
}

main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#top-about{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 100px 10%;
background: url(image/top-about2.png) no-repeat right bottom/15% 20%,url(image/top-about1.png) no-repeat left top/30% 60%;
}
@media only screen and (max-width: 1280px) {
#top-about{
margin: 0 0 80px;
padding: 80px 5%;
background: url(image/top-about2.png) no-repeat right bottom/15% 20%,url(image/top-about1.png) no-repeat left top/25% 60%;
}
}
@media only screen and (max-width: 1080px) {
#top-about{
margin: 0 0 80px;
padding: 70px 5%;
background: url(image/top-about2.png) no-repeat right bottom/25% 25%,url(image/top-about1.png) no-repeat left top/30% 80%;
}
}
@media only screen and (max-width: 835px) {
#top-about{
margin: 0 0 80px;
padding: 70px 5% 40px;
background: url(image/top-about2.png) no-repeat right bottom/25% 25%,url(image/top-about1.png) no-repeat left top/30% 80%;
}
}
@media only screen and (max-width: 640px) {
#top-about{
margin: 0 0 60px;
}
}
@media only screen and (max-width: 480px) {
#top-about{
margin: 0 0 30px;
}
}

#top-about h2,#top-tokucyo h2,#our h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 70px;
padding: 0;
text-align: center;
line-height: 150%;
color: #6a513e;
font-size: 50px;
font-weight: 500;
font-family: "Kiwi Maru", serif;
}
#top-about h2 span,#top-tokucyo h2 span,#our h2 span{
font-size: 20px;
line-height: 150%;
}
@media only screen and (max-width: 1280px) {
#top-about h2,#top-tokucyo h2,#our h2{
margin: 0 0 60px;
font-size: 45px;
}
}
@media only screen and (max-width: 835px) {
#top-about h2,#top-tokucyo h2,#our h2{
margin: 0 0 60px;
font-size: 40px;
}
#top-about h2 span,#top-tokucyo h2 span,#our h2 span{
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#top-about h2,#top-tokucyo h2,#our h2{
margin: 0 0 40px;
}
}
@media only screen and (max-width: 480px) {
#top-about h2,#top-tokucyo h2,#our h2{
margin: 0 0 30px;
font-size: 35px;
}
#top-about h2 span,#top-tokucyo h2 span,#our h2 span{
font-size: 14px;
}
}

#top-about img{
max-width: 40%;
border-radius: 15px;
}
@media only screen and (max-width: 1080px) {
#top-about img{
max-width: 60%;
}
}
@media only screen and (max-width: 835px) {
#top-about img{
max-width: 80%;
}
}
@media only screen and (max-width: 640px) {
#top-about img{
max-width: 90%;
}
}

#top-about-box{
float: right;
width: 60%;
padding: 0 0 0 8%;
text-align: left;
}
@media only screen and (max-width: 1080px) {
#top-about-box{
clear: both;
float: left;
width: 100%;
padding: 60px 0 0;
text-align: left;
}
}
@media only screen and (max-width: 480px) {
#top-about-box{
padding: 40px 0 0;
}
}

#top-about h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
line-height: 130%;
font-size: 40px;
color: #8a7354;
font-weight: 500;
font-family: "Kiwi Maru", serif;
}
#top-about p{
margin: 0 0 40px;
text-align: left;
font-size: 20px;
line-height: 200%;
}
@media only screen and (max-width: 640px) {
#top-about h3{
margin: 0 0 40px;
font-size: 32px;
}
#top-about p{
font-size: 17px;
text-align: justify;
}
}
@media only screen and (max-width: 480px) {
#top-about p{
font-size: 16px;
line-height: 180%;
margin: 0 0 30px;
}
}

#top-about a:link,#top-about a:visited{
display: block;
width: 50%;
padding: 20px 0;
text-align: center;
font-size: 20px;
color: #8a7354;
text-decoration: none;
border: 1px solid #8a7354;
border-radius: 100px;
background: url(image/top-about-ar.png) no-repeat 80% 50%;
}
#top-about a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%,#f7f4eb;
}
@media only screen and (max-width: 835px) {
#top-about a:link,#top-about a:visited{
width: 60%;
padding: 15px 0;
font-size: 17px;
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px;
}
#top-about a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#f7f4eb;
}
}
@media only screen and (max-width: 640px) {
#top-about a:link,#top-about a:visited{
width: 70%;
font-size: 16px;
}
#top-about a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#f7f4eb;
}
}
@media only screen and (max-width: 480px) {
#top-about a:link,#top-about a:visited{
width: 80%;
padding: 10px 0;
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#fff;
}
#top-about a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#f7f4eb;
}
}
@media only screen and (max-width: 414px) {
#top-about a:link,#top-about a:visited{
width:90%;
font-size: 15px;
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#fff;
}
#top-about a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#f7f4eb;
}
}

#top-tokucyo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 10% 50px;
background: url(image/top-tokucyo.png) no-repeat left bottom/95% 60%;
}
@media only screen and (max-width: 1280px) {
#top-tokucyo{
padding: 0 5% 50px;
}
}
@media only screen and (max-width: 1080px) {
#top-tokucyo{
background: url(image/top-tokucyo-sm.png) no-repeat left bottom/90% 80%;
}
}
@media only screen and (max-width: 835px) {
#top-tokucyo{
padding: 0 5% 60px;
background: url(image/top-tokucyo-sm.png) no-repeat left bottom/95% 80%;
}
}

#tokucyo-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
display: flex;
}
@media only screen and (max-width: 1080px) {
#tokucyo-area{
display: inherit;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 480px) {
#tokucyo-area{
margin: 0 0 10px;
}
}

.tokucyo-box{
flex: 1;
margin: 0 2%;
flex-basis:46%;
text-align: center;
position: relative;
}
.tokucyo-box img{
max-width: 100%;
border-radius: 15px;
}
@media only screen and (max-width: 1080px) {
.tokucyo-box{
margin: 0 0 30px;
flex-basis:100%;
}
.tokucyo-box img{
max-width: 70%;
}
}
@media only screen and (max-width: 835px) {
.tokucyo-box img{
max-width: 80%;
}
}
@media only screen and (max-width: 640px) {
.tokucyo-box img{
max-width: 90%;
}
}

.tokucyo-box span{
font-family: "Kiwi Maru", serif;
color: #fff;
opacity: 0.5;
font-size: 120px;
text-align: right;
position: absolute;
right: 0;
bottom:30%;
}
@media only screen and (max-width: 1280px) {
.tokucyo-box span{
font-size: 100px;
bottom:35%;
}
}
@media only screen and (max-width: 1080px) {
.tokucyo-box span{
font-size: 100px;
bottom:auto;
right:15%;
top:80%;
}
}
@media only screen and (max-width: 835px) {
.tokucyo-box span{
font-size: 90px;
right:5%;
top:280px;
}
}
@media only screen and (max-width: 640px) {
.tokucyo-box span{
font-size: 80px;
right:4%;
top:230px;
}
}
@media only screen and (max-width: 480px) {
.tokucyo-box span{
font-size: 70px;
top:200px;
}
}
@media only screen and (max-width: 414px) {
.tokucyo-box span{
font-size: 60px;
top:165px;
}
}

.tokucyo-box p{
margin: 40px 0 0;
text-align: center;
color: #fff;
font-size: 25px;
line-height: 150%;
}
@media only screen and (max-width: 1080px) {
.tokucyo-box p{
margin: 20px 0 0;
}
}
@media only screen and (max-width: 640px) {
.tokucyo-box p{
font-size: 20px;
}
}

#top-tokucyo a:link,#top-tokucyo a:visited{
clear: both;
display: block;
width: 30%;
margin: 0 35%;
padding: 20px 0%;
text-align: center;
font-size: 20px;
color: #fff;
text-decoration: none;
border: 1px solid #fff;
border-radius: 100px;
background: url(image/top-tokucyo-ar.png) no-repeat 80% 50%;
}
#top-tokucyo a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%,#e6e2d9;
color: #8a7256;
}
@media only screen and (max-width: 1080px) {
#top-tokucyo a:link,#top-tokucyo a:visited{
width: 50%;
margin: 0 25%;
padding: 20px 0%;
font-size: 20px;
background: url(image/top-tokucyo-ar.png) no-repeat 80% 50%;
}
#top-tokucyo a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%,#e6e2d9;
color: #8a7256;
}
}
@media only screen and (max-width: 835px) {
#top-tokucyo a:link,#top-tokucyo a:visited{
width: 60%;
margin: 0 20%;
padding: 15px 0%;
font-size: 17px;
background: url(image/top-tokucyo-ar.png) no-repeat 80% 50%/25px;
}
#top-tokucyo a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/25px,#e6e2d9;
color: #8a7256;
}
}
@media only screen and (max-width: 640px) {
#top-tokucyo a:link,#top-tokucyo a:visited{
width: 70%;
margin: 0 15%;
padding: 15px 0%;
font-size: 17px;
background: url(image/top-tokucyo-ar.png) no-repeat 80% 50%/20px;
}
#top-tokucyo a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#e6e2d9;
color: #8a7256;
}
}
@media only screen and (max-width: 480px) {
#top-tokucyo a:link,#top-tokucyo a:visited{
width: 80%;
margin: 0 10%;
padding: 10px 0%;
font-size: 16px;
}
#top-tokucyo a:hover{
background: url(image/top-about-ar.png) no-repeat 80% 50%/20px,#e6e2d9;
color: #8a7256;
}
}

#our{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 80px 10% 50px;
background: #e6e2d9;
}
@media only screen and (max-width: 1280px) {
#our{
margin: 80px 0 0;
padding: 70px 5% 50px;
}
}
@media only screen and (max-width: 1080px) {
#our{
padding: 70px 5% 20px;
}
}
@media only screen and (max-width: 835px) {
#our{
margin: 70px 0 0;
padding: 60px 5% 20px;
}
}
@media only screen and (max-width: 640px) {
#our{
margin: 70px 0 0;
padding: 60px 5% 0;
}
}

#our p{
text-align: center;
font-size: 20px;
line-height: 200%;
margin: 0 0 50px;
}
@media only screen and (max-width: 1080px) {
#our p{
text-align: left;
font-size: 20px;
line-height: 200%;
margin: 0 0 50px;
}
}
@media only screen and (max-width: 640px) {
#our p{
font-size: 17px;
line-height: 200%;
margin: 0 0 40px;
}
}
@media only screen and (max-width: 480px) {
#our p{
text-align: justify;
font-size: 16px;
line-height: 180%;
margin: 0 0 30px;
}
}

#our-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
display: flex;
}
@media only screen and (max-width: 1080px) {
#our-area{
display: inherit;
}
}

.our-box,.our-box2,.our-box3{
flex: 1;
margin: 0 2%;
padding: 30px 3%;
flex-basis:46%;
text-align: center;
position: relative;
background: #fff;
border-radius: 60px 60px 5px 60px;
}
.our-box2{
border-radius: 60px 5px 60px 60px;
}
.our-box3{
border-radius:5px 60px 60px 60px;
}
@media only screen and (max-width: 1440px) {
.our-box,.our-box2,.our-box3{
padding: 30px 2%;
}
}
@media only screen and (max-width: 1080px) {
.our-box,.our-box2,.our-box3{
margin: 0 0 30px;
padding: 30px 10%;
flex-basis:100%;
}
}
@media only screen and (max-width: 640px) {
.our-box,.our-box2,.our-box3{
padding: 30px 5%;
}
}

#our-area img{
max-width: 100%;
border-radius: 15px;
}
#our #our-area p{
text-align: left;
font-size: 20px;
line-height: 200%;
margin: 20px 0 0;
}
@media only screen and (max-width: 1440px) {
#our #our-area p{
font-size: 17px;
line-height:180%;
}
}
@media only screen and (max-width: 1080px) {
#our-area img{
max-width: 80%;
}
}
@media only screen and (max-width: 640px) {
#our-area img{
max-width: 90%;
}
#our #our-area p{
font-size: 16px;
margin: 15px 0 0;
}
}
@media only screen and (max-width: 414px) {
#our #our-area p{
font-size: 15px;
}
}

#banner{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 80px;
padding: 0 10%;
text-align: center;
}
#banner img{
max-width: 80%;
}
#banner img.bno,#banner img.bno2{
display: none;
}
@media only screen and (max-width: 1280px) {
#banner img{
max-width: 90%;
}
}
@media only screen and (max-width: 1080px) {
#banner img{
max-width: 100%;
}
}
@media only screen and (max-width: 835px) {
#banner{
margin: 70px 0 70px;
padding: 0 5%;
}
}
@media only screen and (max-width: 640px) {
#banner img,#banner img.bno2{
display: none;
}
#banner img.bno{
display:inherit;
}
}
@media only screen and (max-width: 480px) {
#banner img,#banner img.bno{
display: none;
}
#banner img.bno2{
display:inherit;
}
}

/* フェードイン(基本) */
.js-fadeUp {
  opacity: 0; 
  transform: translateY(50px);
  transition: opacity .8s, transform 1.2s; 
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; 
}


/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
} 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#8a7354;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#e4a429;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:50px 20%;
background: #e6e2d9;
}

footer img{
max-width: 35%;
}

#footer-left{
clear: both;
float: left;
width: 65%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
footer #footer-left img{
max-width: 100%;
margin: 0 0 15px;
}
footer #footer-left a img{
max-width: 50%;
margin: 0 0 15px;
}
footer #footer-left a img.ftel{
float: right;
max-width: 45%;
margin: 0;
}
#footer-left p{
text-align: left;
width: 55%;
float: left;
margin: 0 0 0;
font-size: 20px;
line-height: 120%;
color: #777;
}

nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0 0;
padding: 0;
}

nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
nav li{
list-style-type: none;
flex: 1 0 auto;
margin: 0 0%;
padding: 0;
text-align: center;
font-size: 17px;
border-right:1px solid #332b0b;
}
nav li:first-child{
border-left:1px solid #332b0b;
}
nav li a:link,nav li a:visited{
color: #332b0b;
}