@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap');
#main_nav {
	background-color: #926c4e;
    background-image: url(https://www.transparenttextures.com/patterns/black-paper.png);
}
#intro, #top_cms .top_cms_box .top_cms_title {
background-color: #926c4e;
background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");

}

body {
    background: #f5f0ea;
    /* background-color: #fffaf7; */
    background-image: url(https://www.transparenttextures.com/patterns/dust.png);
}
#intro {
	background-color: #926c4e;
}
.catch {
top: 19%;
    left: 18%;
    width: 50%;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.4));
}
#contents1 {
    background-image: url(Dup/img/usi.png), url(Dup/img/washi.jpg);
	background-repeat:no-repeat;
	background-position:92% 58%, 50% 100%;
    background-size: 300px auto, 289% auto;
	position: relative;
}
#contents1:before {
    position: absolute;
    top: 0;left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 40%;
    background: rgb(255,255,255);
    background: linear-gradient(
0deg
, rgba(255,255,255,0) 0%, rgba(245,240,234,1) 52%, rgba(245,240,234,1) 100%);
    z-index: 4;
}
#contents1 .width_1280-max {
	z-index: 10;position: relative;
}

#contents2::after {
    background-image: url(./Dup/img/oumi.png);
    background-size: 400px;
    background-position: left 30% top 50%;
    background-repeat: no-repeat;
}
#contents3 {
	background-image: url(https://www.transparenttextures.com/patterns/arches.png);
}
#contents3::after {
    content: "";
    width: 100%;
    height: 40%;
    background: rgb(255,255,255);
background: linear-gradient( 
0deg
 , rgba(255,255,255,0) 0%, rgba(251, 251, 251, 0.38) 38%, rgba(245, 245, 245, 0.62) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}
#contents3 h3 {
	color: #6d533e;
}
#main_img .down {
	display: none;
}
#sns_links li a {/*見にくいので調整*/
    opacity: 1;
}
#sns_links li a:hover {
    opacity: 0.8;
}
@media(max-width: 768px) {
#contents1 .width_1280-max h2 {
	padding-left: 100px;
}
#contents2 .d_flex {
padding: 10px
}
#contents2::after {
    background-size: 245px;
    background-position: left 19% top 75%;
}
}
@media(max-width: 667px) {
#contents2::after {
    background-size: 155px;
    background-position: left 50% top 88%;
}
#contents1 .width_1280-max h2 {
	padding-left: 160px;
}
#contents1 {
    background-position: 17% 29%, 50% 100%;
    background-size: 188px auto, 289% auto;
}
#page10 ul li {
text-align: center;
}
#page10 ul li a {
    transition: all 0.3s;
    display: block;
    text-align: center;
}
#page10 ul li a span {
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
}
/* --------------------------header------------------------------ */
#header h1 svg {
	width: 150px;
	height: auto;
	transition: all 0.5s;
}
#header h1.active svg {
	width: 126px;
}
@media(max-width: 1348px) {
.catch {
    top: 44%;
    left: 20%;
    width: 62%;
}
#header h1.active svg {
	width: 84px;
}
}
@media(max-width: 768px) {

#header h1 span {
    padding: 9px;
}
#header h1.active svg {
	width: 74px;
	height: auto;
}
}
@media(max-width: 667px) {
	#header h1.active a {
	}
	#header h1.active svg {
    width: 44px;margin-bottom: -7px;
}
	#header h1 span {
    padding: 6px;
}
	#header h1.active img {
		max-width: 55px;
	}
	.catch {
    left: 15%;
    width: 71%;
}
}
/* --------------------------TOP CONTENETS------------------------------ */
#main_img {
	height: auto;
}
#intro h2 span {
	font-size: 24px;
	color: #ffe8d7;
	font-family: ro-nikkatsu-sei-kai-std, serif;

font-weight: 400;

font-style: normal;
}
#intro h2 {
	font-size: 22px;
}
#intro .width_1280-max img {
    width: 29%;
    min-width: 266px;
    display: block;
    margin: 0 auto;
}
.top_cms_title h3 {
    padding: 0 63px;
    background-image: url(Dup/img/cms_title.png);
    background-repeat: no-repeat;
    background-position: 60% 63%;
    background-size: 91px;
}
@media(max-width: 768px) {

}
@media(max-width: 667px) {

}
/* --------------------------CMS と　下層------------------------------ */
#page_title h2 {
    background: url(Dup/img/cms_title.png) no-repeat;
    background-position: 50.5% 61%;
    background-size: 118px;
}
#page_title h3 span {
	font-family: 'Tangerine', cursive;
    font-size: 35px;
    opacity: 0.5;
}
.top_cms_title p {
	font-family: 'Tangerine', cursive;
	font-size: 22px;
	padding-top: 27px;
    margin-bottom: 9px;
}
@media(max-width: 768px) {

}
@media(max-width: 667px) {


}

/* --------------------------footer------------------------------ */
@media(max-width: 768px) {

}
@media(max-width: 667px) {
footer .logo img {
    max-width: 123px;
}
}

/* --------------------------IE------------------------------ */
@media all and (-ms-high-contrast: none) {
}

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

}





/***************************************************
 * Generated by SVG Artista on 4/14/2021, 4:15:02 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.2s ease-in 0s both;
          animation: animate-svg-fill-1 0.2s ease-in 0s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}


@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.2s ease-in 0.1s both;
          animation: animate-svg-fill-2 0.2s ease-in 0.1s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.2s ease-in 0.2s both;
          animation: animate-svg-fill-3 0.2s ease-in 0.2s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.2s ease-in 0.30000000000000004s both;
          animation: animate-svg-fill-4 0.2s ease-in 0.30000000000000004s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.2s ease-in 0.4s both;
          animation: animate-svg-fill-5 0.2s ease-in 0.4s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.2s ease-in 0.5s both;
          animation: animate-svg-fill-6 0.2s ease-in 0.5s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 161, 141);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.2s ease-in 0.6000000000000001s both;
          animation: animate-svg-fill-7 0.2s ease-in 0.6000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(175, 105, 113);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(175, 105, 113);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.2s ease-in 0.7000000000000001s both;
          animation: animate-svg-fill-8 0.2s ease-in 0.7000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.2s ease-in 0.8s both;
          animation: animate-svg-fill-9 0.2s ease-in 0.8s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.2s ease-in 0.9s both;
          animation: animate-svg-fill-10 0.2s ease-in 0.9s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.2s ease-in 1s both;
          animation: animate-svg-fill-11 0.2s ease-in 1s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.2s ease-in 1.1s both;
          animation: animate-svg-fill-12 0.2s ease-in 1.1s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.2s ease-in 1.2000000000000002s both;
          animation: animate-svg-fill-13 0.2s ease-in 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.2s ease-in 1.3s both;
          animation: animate-svg-fill-14 0.2s ease-in 1.3s both;
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(234, 224, 189);
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-fill-15 0.2s ease-in 1.4000000000000001s both;
          animation: animate-svg-fill-15 0.2s ease-in 1.4000000000000001s both;
}