﻿

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400&display=swap');
body {
	font-size: 15px;
font-family: 'Shippori Mincho', serif;
font-family: 'Noto Serif JP', serif;

}

#contents1 {
	position: relative;
}
.shopBnr {
	bottom: -33px;
    right: 20px;
	z-index: 10;
	transition: all 0.1s;
}


main .banner a:hover {
    transform:scale(1.05)
}
.background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transition: background-color 1s;
background-color: #fffef1;
}

.background::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-image: linear-gradient(
80deg
,rgba(255,255,255,0) 0,#fff 16.5%,rgba(255,255,255,0) 33%,#fff 49.5%,rgba(255,255,255,0) 66%,#fff 82.5%,rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    transition: opacity .4s;
    -webkit-animation-name: shift;
    animation-name: shift;
    -webkit-animation-duration: 5s;
    animation-duration: 15s;
    -webkit-animation-timing-function: cubic-bezier(.445,.05,.55,.95);
    animation-timing-function: cubic-bezier(.445,.05,.55,.95);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}




@-webkit-keyframes shift {
  0% {
    background-position: 100% 0
  }
}
@keyframes shift {
  0% {
    background-position: 100% 0
  }
}



.fadeinImg{
     opacity: 0;/*
     transform: translateY(20px);*/
     transition: 5.5s;
     transition-property: opacity,transform
}
.fadeinImg.fadetrans{
     opacity: 1;
     transform: none
}
.trans_header .banner {
	right: 80px;
}
.trans_header .banner a {
	height: 80px;
}

figure img {
box-shadow: 1.5625vw 1.5625vw 2.34375vw rgba(53, 53, 53, 0.16);
}
#cms_2-a figure {
	margin: 0 auto 30px;
}
#cms_2-a figure img {
	box-shadow: none;
}

h2, h3, h4 {
font-family: 'Shippori Mincho B1', serif;
}

.youtube_box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube_box iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
/* ----------------video調整------------------- */
@media(max-width: 1494px) {

}
@media screen and (min-width:769px) and ( max-width:1494px) {
  	#main_img {
		overflow: hidden;
	}
	#video video {
		width: inherit!important;
	}  

}
/* --------------------------header------------------------------ */
#header {
	padding: 0 0 0 100px;
}
header .trans_header {
    top: -119px;/*隠れるところ*/
}
#header #logo {
text-align: center;
    padding: 13px 0;
    padding-left: 36px
}
#header #logo img {
	max-width: 388px
}
#logo span {
    width: 41px;
    right: -41px;
}
header .trans_logo {
    height: 56px;
}


@media(min-width: 769px) {
	.trans_logo img {
	max-width: 163px;
	display: none;
}
.scrollheader .trans_logo img {
	display: block;
}
	.shopBnr:hover {
	 transform: translateY(-4px);
}
}




@media(max-width: 768px) {
header .trans_header {
    top: 0;
}
header .trans_logo {
    height: 80px;
}
.trans_logo img {
    max-width: 194px;
    margin-top: 9px;
}
}
@media(max-width: 667px) {
.trans_logo img {
max-width: 194px;
margin-top: 10px;
}
	.trans_header .banner a {
	height: 40px;
}
	.trans_header .banner {
	position: fixed;
    bottom: 0;
    width: 205px;
    left: 0;
    margin: 0;
	}
	#page-top {
		bottom: 0!important;
	}
	.shopBnr {
    bottom: 1px;
    right: 11px;
    width: 181px;
}
	.more {
	width: 156px;
	}
}
/* --------------------------TOP CONTENETS------------------------------ */

main {
	margin-top: -8px;

}
#top_cms .top_cms_bg {
	  background-color: #ffffff;
    background-image: url(Dup/img/ps-neutral.png);
}

.con2_title span, .con3_title span {
	background-color: #c7c7c7;
}
/*.con3_wrap {
	background: url(Dup/img/kazari.png) no-repeat;
    background-position: right 2% bottom 1%;
    background-size: 21%;
}*/
#contents2 figure img {
border-radius: 55% 45% 55% 45% / 47% 51% 49% 53% ;
}
#contents3 figure img {
	border-radius: 40% 60% 47% 53% / 50% 43% 57% 50%;
}

#cms_2-a ul {
	display: none;
}
#cms_2-a .cate {
    margin-bottom: 0px;
}
#cms_2-a .cate_title_wrap {
	display: block;
	border-top: 2px solid #d4caa0;
	border-bottom: 2px solid #d4caa0;
	text-align: center;
	margin-bottom: 25px;
}
#cms_2-a .cate_title {
	position: relative;
	padding-left: 2.6rem;
	padding-right: 10px;
	text-align: center;border: none;
	margin-bottom: 0;
}
#cms_2-a .cate_title:before, #cms_2-a .cate_title:after {
	position: absolute;
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid #d4caa0;
	top: 40%;
	left: 4px;
	transform: rotate(45deg);
}
#cms_2-a .cate_title:after {
	top: 40%;
	left: 11px;
	height: 16px;
	width: 16px;
	transform: rotate(45deg);
	border: none;
	background: #d4caa0
}


#cms_2-a .box_title1 {
	position: relative;
	padding: 0.1em 0.1em 0.1em 0.9em;
	border-left: 10px solid #fdc64b;
}
#cms_2-a .box_title1::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 3px solid #d8d8d8;
}



#cms_2-a .cate_txt1 {
	background: #f7f7f7;
	box-shadow: 10px 10px 10px rgba(171, 171, 171, 0.36);
}

@media screen and (min-width:768px) {
#main_img {
	height: auto!important;
} 

}
@media(max-width: 768px) {
	main {
		margin-top: -9px;
	}
	.con1_right {
	padding-top: 90px;
}

.con3_wrap {
    background-position: right 0% bottom 0%;
    background-size: 19%;
	padding-bottom: 79px;
}
}
@media(max-width: 667px) {
	.con1_left {
		    background-position: center 39%;
	}
		.con3_wrap {
    background-size: 35%;
}
}

/* --------------------------footer------------------------------ */
@media(max-width: 768px) {

}
@media(max-width: 667px) {
	.footer_bottom {
		padding-left: 10px;padding-right: 10px;
		padding-bottom: 58px;
	}
}
/* --------------------------IE------------------------------ */
@media all and (-ms-high-contrast: none) {
	.more a{
		padding-top: 18px!important;
	}

	#page07 h3, #page07 p {
		padding-top: 18px!important;
	}
	.footer_nav a, #page09 a {
		padding-top: 2px;
	}
	#cms_2-a .cate .cate_title {
		padding-top: 11px!important;
	}
	#cms_2-a .box_title1 {
	padding: 0.1em 0.1em 0.5em 0.9em;	
	}
}

