@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;500&display=swap');
body, .hannari, .pop400 {
    font-family: 'Noto Serif JP', serif;
}
#intro_wrap {
   background-image: url(Dup/img/neko3.png);
   background-repeat: no-repeat;
    background-position: 99% 100%;
    background-size: 118px auto;
}
main {
   background: url(Dup/img/nako1.png) no-repeat  5% 100%;
    background-size: 130px auto; 
    overflow: hidden;
}
footer {
    background-image: url(Dup/img/neko2.png);
    background-size: 158px auto;
    background-repeat: no-repeat;
    background-position: 94% 100%;
}
.back1:before, .back2:before {/*★*/
    z-index: -1;
        background-color: #ffffff!important;
background-image: url("Dup/img/ag-square.png");
}
.back1:before, .back2:before {
    z-index: -1;
    background-color: #fffefc!important;
    background-image: url(Dup/img/ag-square.png);
    background: rgb(237,233,224);
background: url(Dup/img/ag-square.png), linear-gradient(117deg, #fffcf5 0%, rgba(255,254,252,1) 100%);
}
#contents11 .bg_color2 {
    background: url(Dup/img/cubes4.png), linear-gradient(to bottom right, #e4e4e4, #fff);
}


.back1:before {
    background-color: rgba(110,93,51,0.1);
    position: fixed;
    width: 50%;
    top: -50%;
    right: 0px;
    z-index: -1;
    height: 50%;
}
.back2:before {
    background-color: rgba(110,93,51,0.1);
    position: fixed;
    width: 50%;
    bottom: 0;
    right: 0px;
    z-index: -1;
    height: 50%;
    top: inherit;
}

/* ----------------------------------------------------------------------------- */
.cms_1-a .cate_box, .cms_3-b .cate_box {
	list-style: none;
	width: 25%;
	padding: 15px;
	position: relative;
	/* アニメーションに関数プロパティ */
	opacity: 0; 	/* フェードインしたいので最初は非表示 */
	bottom: -15px; 	/* 下から上に移動したいので最初はマイナス値 */
	transition: 1s; /* 1秒かけてアニメーション */
}
.cms_1-a .cate_box figure, .cms_3-b .cate_box figure {
	margin: 0;
}
/* スクロールした時に追加されるclass */
.cms_1-a .cate_box.fadein, .cms_3-b .cate_box.fadein {
	opacity: 1;
	bottom: 0;
}	
/* --------------------------------------------------------------------------------- */
#copyright {
    background: transparent;
}
#main_img:after {
content: "";
    display: block;
    height: 126px;
    width: 169px;
    position: absolute;
    bottom: -5px;
    left: 5%;
    background: url(Dup/img/neko4.png) no-repeat;
    background-position: 0 100%;
    background-size: contain;
    box-sizing: border-box;
    z-index: 2;
}
#contents1 figure:before, #contents2 figure:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    border: 20px solid rgba(195,195,195, 1);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1;
    mix-blend-mode: color-burn;
}
.intro_title, #contents3 .con_title {
    background-image: url(Dup/img/haguruma4_2.png), url(Dup/img/haguruma3_2.png);
    background-repeat: no-repeat;
    background-size: auto 61%, auto 87%;
    background-position: 22% 100%, 76% 0;
    padding: 44px 0 18px;
}
#contents1 .con_title, #contents2 .con_title {
    background-image: url(Dup/img/haguruma5_2.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 90% 0;
    padding: 38px 0 26px;  
}
#contents2 .con_title {
    background-image: url(Dup/img/haguruma6_2.png);
}
.intro_title h3, #contents3 h3, #contents1 h3, #contents2 h3 {
text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff,
 -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff,
 0px -1px 1px #ffffff;
}

.overlay {
    background: linear-gradient(
135deg, rgba(184,134,11,0.9) , rgba(102,0,0,0.9) )!important;
}
.pager li a {
    background-color: #6e5d33!important;
}
.cms_2-a .swiper-button-next {
    right: 0px;
}
.cms_2-a .swiper-button-prev {
    left: 0px;
}
#cms_2-a .cate_title {
    position: relative;
    padding: .1em .3em .1em .5em;
    border-top: 0;
    display: block;
    border-bottom: 0;
				border-bottom: 2px solid #d0b471;
}
#cms_2-a .cate_title::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -2px;
    width: 10%;
    height: 2px;
    background-color: #6e5d33;
    z-index: 1;
}


#contents1 figure img, #contents2 .square_img img, #contents1 .rectangle_img img, #contents2 .rectangle_img img {
    top: inherit;
    left: inherit;
}
#contents1 figure img {
    /*left: -20%;*/
}
.cate_list li a {
    background-color: #d0b471!important;
}
.cate_list li a:hover {
    opacity: 0.8;
}
.catch {
   max-width: 661px;
    margin: 0 auto 35px;filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.4));
}
.button_container {
    top: 45%;
    right: 1%;
}
.button_containerInner:before {
    position: absolute;
    top: -54px;
    right: -58px;
    content: "";
    display: block;
    width: 139px;
    height: 139px;
    background: url(Dup/img/haguruma.png) no-repeat 50% 50%;
    background-size: contain; animation:15s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.video_wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
video {
	min-width: 100%;
	min-height: 100vh;
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#info_contact .con_img:before {
    background-color: rgba(126, 90, 0, 0.26);
}
#contents3 .con_box, #intro_wrap {
    border-top: 1px solid #d3c49f;
    border-bottom: 1px solid #d3c49f;
    background-color: #fff;
}
#pc_nav li a {
    color: #212121;
}
#pc_nav li a::after {
    background: #212121;
}
#contents3_wrap:after {
   background: rgba(255, 255, 255, 0.35)!important;
}
#footer {
    background-color: transparent;
}
#main_img:before {
    background-color: rgba(131, 131, 131, 0.41);
    z-index: 2;

}
header.scr_header {
    background-color: transparent!important;
}

.nav_menu_more:first-of-type a .icon:before {/*★*/
    content: "\f086";
}
.more_btn {/*★*/
background-color: #865a46;
    box-shadow: 0px 6px 0px 0px rgb(98 42 17 / 35%);
}
#page10 .more_btn span {
    position: relative;
}

#page10 .more_btn {border: none;
}
#footer, #footer .tel_bt a, #footer h2 {
    color: #fff;
}
@media screen and (max-width: 768px){
    #intro_wrap {
    background-position: 100% 100%;
    background-size: 114px auto;
}
   .pager li {/*★*/
        margin-right: 0!important;
    }
	.video_wrap {
	position: static;
	overflow: hidden;
	width: 100%;
	height: auto;
	min-width: 100%;
}
video {   
	min-width: auto;
	min-height: auto;
	width: 100%;
	z-index: 1;
	position: static;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(0%, 0%); 
	-ms-transform: translate(0%, 0%);
	transform: translate(0%, 0%); 
vertical-align: bottom;
}
.pager li {/*★*/
        margin-right: 0;
    }
#logo2 {
        max-width: 126px;
    }
	}
	
	
	
/* ----------------------------------------------------------------------- */
	.js-hover span {
    position: relative;
    font-size: 1.4rem;
    color: #fff;
    border-bottom: none;
    overflow: hidden;
}	
		 .js-hover span::before {
    position: absolute;
    bottom: -.2rem;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background-color: #fff;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform 0.8s cubic-bezier(0.45, 0.12, 0.04, 0.96);
}
		  .js-hover span::after {
    position: absolute;
    bottom: 50%;
    left: -2rem;
    width: 1rem;
    height: 1px;
    content: "";
    background-color: #9a8f77;
}
		  .is-hover span::before {
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.45, 0.12, 0.04, 0.96);
}
/* ------------------------------------------------------------------------------- */

.story__btn {
    max-width: 296px;
    margin: 0 auto 20px;
}
.p-btn, .p-btn--white {
  width: 100%;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .3s;
  transition: .3s;
color: #000;
}
.p-btn:before, .p-btn--white:before, .p-btn:after, .p-btn--white:after, .p-btn .p-btn__inner:before, .p-btn--white .p-btn__inner:before, .p-btn .p-btn__inner:after, .p-btn--white .p-btn__inner:after {
  content: '';
  position: absolute;
  display: block;
  background: #cba248;
  -webkit-transition: .3s;
  transition: .3s
}
.p-btn:before, .p-btn--white:before, .p-btn:after, .p-btn--white:after {
  width: 0;
  height: 2px
}
.p-btn:before, .p-btn--white:before {
  top: 0;
  left: 0
}
.p-btn:after, .p-btn--white:after {
  bottom: 0;
  right: 0
}
.p-btn__inner {
  padding: .68em 2em .68em .8em;
  display: block;
  border: #000 solid 2px
}
.p-btn__inner:before, .p-btn__inner:after {
  width: 2px;
  height: 0
}
.p-btn__inner:before {
  bottom: 0;
  left: 0
}
.p-btn__inner:after {
  top: 0;
  right: 0
}
.p-btn__toggle {
  width: 18px;
  height: 18px;
  top: 50%;
  right: 20px;
  display: block;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: .3s;
  transition: .3s
}
.p-btn__toggle:before, .p-btn__toggle:after {
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  display: block;
  background: #000
}
.p-btn__toggle:before {
  width: 1px;
  height: 100%
}
.p-btn__toggle:after {
  width: 100%;
  height: 1px
}
.p-btn__arrow {
  width: 13px;
  height: 13px;
  top: 50%;
  right: 28px;
  display: block;
  position: absolute;
  border-top: #000 solid 1px;
  border-right: #000 solid 1px;
  -webkit-transform: rotate(45deg) translateY(-65%);
  transform: rotate(45deg) translateY(-65%);
  -webkit-transition: .3s;
  transition: .3s
}
.p-btn__blank {
  top: 50%;
  right: 22px;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}
.p-btn:hover, .p-btn--white:hover {
  color: #cba248;
  opacity: 1
}
.p-btn:hover:before, .p-btn--white:hover:before, .p-btn:hover:after, .p-btn--white:hover:after {
  width: 100%
}
.p-btn:hover .p-btn__inner:before, .p-btn--white:hover .p-btn__inner:before, .p-btn:hover .p-btn__inner:after, .p-btn--white:hover .p-btn__inner:after {
  height: 100%
}
.p-btn:hover .p-btn__toggle:before, .p-btn--white:hover .p-btn__toggle:before, .p-btn:hover .p-btn__toggle:after, .p-btn--white:hover .p-btn__toggle:after {
  background: #cba248
}
.p-btn:hover .p-btn__arrow, .p-btn--white:hover .p-btn__arrow {
  border-color:#cba248
}
.p-btn:hover .p-btn__blank, .p-btn--white:hover .p-btn__blank {
  border-color: #cba248
}
.p-btn:hover .p-btn__blank:after, .p-btn--white:hover .p-btn__blank:after {
  border-color:#cba248
}
.p-btn--white {
  color: #fff;
  border-color: #fff
}
.p-btn--white .p-btn__inner {
  border-color: #fff
}
.p-btn--white:before, .p-btn--white:after, .p-btn--white .p-btn__inner:before, .p-btn--white .p-btn__inner:after {
  background: #c6b084
}
.p-btn--white:hover {
  color: #c6b084
}
.p-btn--white:hover .p-btn__toggle:before, .p-btn--white:hover .p-btn__toggle:after {
  background: #c6b084
}
.p-btn--white:hover .p-btn__arrow {
  border-color: #c6b084
}

@media(max-width: 768px) {
   .catch {
    max-width: 84%;
    margin: 0px auto;
} 
}
@media(max-width: 667px) {
.cms_1-a .cate_box, .cms_3-b .cate_box {
    opacity: 1;
}
    .intro_title, #contents3 .con_title {
    background-size: auto 52px, auto 78px;
    background-position: 0% 100%, 100% 0;
    padding: 10px 0 8px;
}
#contents1 .con_title, #contents2 .con_title {
    background-size: 106px auto;
    background-position: 100% 82%;
    padding: 15px 0 10px;
}
    main {
    background-size: 73px auto;
    background-position: 2% 100%;
}
    #main_img:after {
    width: 66px;
}
footer {
    background-size: 105px auto;
    background-position: 103% 100%;
}
#intro_wrap {
    background-size: 67px auto;
    padding-bottom: 54px;
}
    .page_title_box h2 {
        font-size: 5vw;
    }
    footer #h1txt p {
        font-size: 12px;
    }
   #footer h2 {
       font-size: 18px;
   }
   .button_containerInner:before {
    top: -37px;
    right: -40px;
    width: 104px;
    height: 104px;
}
   .catch {
    max-width: 54%;
} 
}
@media all and (-ms-high-contrast: none) {

#contents1 figure img, #contents2 .square_img img, #contents1 .rectangle_img img, #contents2 .rectangle_img img {
       top: 50%;
    left: 50%; 
}
#contents1 figure:before, #contents2 figure:before {
    display: none;
}
}