/**
 * Theme Name: suzukimoeko
 * Description: suzukimoekoサイトのオリジナルテーマ
 * Author: yutaka yamakuma.
 * Version: 1.0.0
 */

/*==========================
common
==========================*/
.html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
.body {
  color: #FFFDF9; /* RGB */
  font-weight: 300;
  text-align: center;
}

.none {
	display: none;
}

.header {
	width: 100%;
	position: fixed;
	top: 24px;
	z-index: 999;
}


.logo {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 16px;
}

.logo img{
	width:327px;
	height: auto;
	margin: auto;
}

/*.navi {
margin-bottom: 20px;
}
.navi__list {
	width: 327px;
	height: auto;
	margin: auto;
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding: 0px;
}
.navi__list a {
	font-size: 10px;
	font-family: 'open sans',sans-serif;
	text-decoration: none;
	color: #242424;
}*/

.navi {
	margin-bottom: 20px;
	}
	.navi-list {
		width: 327px;
		height: auto;
		margin: auto;
		list-style: none;
		display: flex;
		justify-content: space-between;
		padding: 0px;
	}
	.navi-list a {
		font-size: 10px;
		font-family: 'open sans',sans-serif;
		text-decoration: none;
		color: #242424;
	}

	.current a {
		color: #C11414 ;
	}

.navi-snsicon {
	display: none;
}


@media screen and (min-width: 1196px) {
	
	body::-webkit-scrollbar{display:none;}  /*スクロールバー非表示（Chrome・Safari）*/
	
.min-contents {
		display: flex;}

.header {
	width: 327px;
	height: 720px;
	margin: 0;
	position: fixed;
	top: 64px;
	left:160px;
}
	

.logo {
	margin: 0;
}
	
.logo img{
	width:327px;
	height: auto;
	margin: auto;
}
	
/*.navi {
	margin: 0;}
	
.navi__list {
	width: 327px;
	margin: auto;
	display: block;
	list-style: none;
	position: absolute;
	top:200px;
	}

	
.navi__list li {
	margin: 0;
	line-height: 40px;
	}

.navi__list a {
	font-size: 14px;
	font-family: 'open sans',sans-serif;
	text-decoration: none;
	color: #242424;
}*/

.navi {
	margin: 0;}
	
.navi-list {
	width: 327px;
	margin: auto;
	display: block;
	list-style: none;
	position: absolute;
	top:200px;
	}

	
.navi-list li {
	margin: 0;
	line-height: 40px;
	}

.navi-list a {
	font-size: 14px;
	font-family: 'open sans',sans-serif;
	text-decoration: none;
	color: #242424;
}

.current a {
  color: #C11414 ;
}
	
.navi-snsicon {display: block;
	position: absolute;
	top:648px;}
}


/*index------------------------------*/

.index-main {
    margin-top: 124px;
}

.index-main-img {
	width: 327px;
	margin: auto;
}

.flexslider {
	position: relative;
}

.flex-control-nav {
	position: absolute;
	top: 508px;
	width: 327px!important;
	padding-left: 230px!important;
}


.snsicon-list {
width: 327px;
margin: auto;
list-style: none;
display: flex;
gap: 20px;
}


.footer {
	margin-top: 20px;
	margin-bottom: 80px;}


@media screen and (min-width: 1196px) {	
.index-main {
	margin-top: 200px;
	margin-left: 56%;}
	
.index-main-img {
	width: 327px;
	margin: auto;
}



.flexslider {
	position: relative;
}

.flex-control-nav {
	position: absolute;
	top: 520px;
	width: 327px!important;
  padding-left: 0px!important;
}


.footer	{
display: none;
	}		
}


/*indexend------------------------------*/



/*about------------------------------*/
.about-navi {color:#C11414 !important;}

.about-main {margin-top: 124px;}

.about-main-img {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 32px;
}

.about-main-text {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 16px;
}


h1 {
font-family: 'Shippori Mincho',serif;
font-size: 20px;
color: #242424;
margin-bottom: 8px;
}

span {
	font-size: 12px;
	color: #242424;
	margin-left: 10px;
}

p {font-family: 'Shippori Mincho',serif;
font-size: 11px;
line-height: 28px;
color: #242424;
}

.snsicon-list {
width: 327px;
margin: auto;
margin-bottom: 80px;
padding: 0px;
list-style: none;
display: flex;
gap: 20px;}




@media screen and (min-width: 1196px) {
.about-main {
	display: flex;
	align-items: flex-start;
	margin-top: 270px;
	margin-left: 32%;}
	
	
.about-main-img {
	width: 327px;
	height: 218px;
	margin: 0;
}
	


.about-main-text {
	width: 480px;
	padding-left: 40px;
	margin: 0px;
	}
	
br {display: none;}
	
p {font-size: 13px;
	line-height: 30px;}

.footer	{
display: none;
	}
}
/*aboutend------------------------------*/







/*painting------------------------------*/
.navi-painting {color:#C11414 !important;}

.painting-main {margin-top: 124px;}

.painting-about-img-list {
list-style: none;
padding: 0px;
margin-top: 32px;
margin-bottom: 56px;
}

.painting-about-img-list li {
 width: 280px;
 height: auto;
 margin:auto;
 margin-bottom: 0px;
}

.painting-about-text {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 72px;
	font-family: 'Shippori Mincho',serif;
	font-size: 13px;
	line-height: 40px;
	color: #242424;
}

.painting-about-text p {
	font-family: 'Shippori Mincho',serif;
	font-size: 13px;
	line-height: 40px;
}

.shop1 {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 24px;
	font-family: 'Shippori Mincho',serif;
	font-size: 11px;
	line-height: 16px;
	color: #242424;
}

.shop1 a {
	text-decoration: none;
	color: #242424;
}

.shop1 span {
	font-size: 20px;
	color: #C11414;
}

.shop2 {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 24px;
	font-family: 'Shippori Mincho',serif;
	font-size: 11px;
	line-height: 16px;
	color: #242424;
}

.shop2 a {
	text-decoration: none;
	color: #242424;
}

.shop2 span {
	font-size: 20px;
	color: #C11414;
}

.viewmore {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 16px;
	text-align: right;
}

.painting-img-area {
	display: flex;
	width: 320px;
	height: auto;
	margin: auto;
	flex-wrap: wrap;}

.img-area-160 img {
 width: 160px;
margin-top: 56px;
margin-bottom: 56px;
}
.img-area-160-2 {
 margin-left: 160px;
}

.img-area-320 img {
 width: 320px;
 margin-top: 124px;
 margin-bottom: 124px;
}

.img-area-160 img  {
	filter:  grayscale(100%);
	animation-name: animation-grayscale-sp;
	animation-timeline: view(block 55% 40%);
	animation-fill-mode: forwards;
	}
	


.img-area-320 img  {
	filter:  grayscale(100%);
	animation-name: animation-grayscale-sp;
	animation-timeline: view(block 55% 40%);
	animation-fill-mode: forwards;
	}


.close-animatedModal {
	margin-top: 16px;
	text-align: right;
	}

	
.close-animatedModal p {
	background-color: #D9D9D9;
	width: 80px;
	height: 24px;
	padding-top: 8px;
	text-align: center;
	color: #ffffff;
	border-radius: 6px;
	margin-left: auto;
	cursor : pointer;
	}
	
.close-animatedModal p:hover {box-shadow: 2px 2px 2px #D9D9D9;}	
	

.modal-content-vertical {
	width: 90%;
	margin: auto;
	margin-top: 24%;
	}
	
.modal-img-vertical {
	width: 100%;
	height: auto;
	}
	
.modal-content-beside {
	width: 100%;
	margin: auto;
	margin-top: 24%;
	transform: rotateZ(90deg); 
	}
	
.modal-img-beside {
	width: 100%;
	height: auto;
	}

.video {
	width: 320px;
	height: auto;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

.snsicon-list {
width: 327px;
margin: auto;
margin-bottom: 80px;
padding: 0px;
list-style: none;
display: flex;
gap: 20px;}



@media screen and (min-width: 1196px) {
.painting-main {
	margin-top: 204px; 
	margin-left: 40%;}
	
	
.painting-about {
	margin-bottom: 280px;
	}
	

.painting-about-img-list {
	margin: 0px;	
	}

.painting-about-img-list img {width:224px;height: auto;}
	
.painting-about-img-text {
	display: flex;
	}

.painting-about-text {
	width: 336px;
	margin-bottom: 96px;
	margin-left: 112px;
	}
	
.painting-about-text p {
	line-height: 40px;
}

.shop-viewmore {
	margin-top: 14px;
	display: flex;
	justify-content: end;
	align-items: flex-end;
	}

.shop1 {
	width: 800px!important;
	margin-bottom: 14px; 
}


.shop2 {
	width: 736px;
	margin-bottom: 348px;}
	
	
.viewmore {
	position: fixed;
	width: 100px!important;
	}


	
.painting-img-area {
    width: 736px;
	height: auto;
	margin: auto;
	display: flex;
	flex-wrap: wrap;}




.img-area-160 {
	width: 736px;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	}

	

	
.img-area-160 img {
 width: 240px;
margin-top: 224px;
margin-bottom: 224px;
}
.img-area-160-2 {
 margin-left: 152px;
}

.img-area-320 img {
 width: 640px;
 margin-top: 264px;
 margin-bottom: 264px;
}
	
.img-area-160 img  {
	filter:  grayscale(100%);
	animation-name: animation-grayscale;
	animation-timeline: view(block 55% 40%);
	animation-fill-mode: forwards;
	}
	
.img-area-160 img:hover {box-shadow: 4px 4px 8px #D9D9D9;}


.img-area-320 img  {
	filter:  grayscale(100%);
	animation-name: animation-grayscale;
	animation-timeline: view(block 55% 40%);
	animation-fill-mode: forwards;
	}

.img-area-320 img:hover {box-shadow: 4px 4px 8px #D9D9D9;}




.close-animatedModal {
	margin-top: 16px;
	text-align: right;
	}
	

.close-animatedModal p {
	background-color: #D9D9D9;
	width: 80px;
	height: 24px;
	padding-top: 8px;
	text-align: center;
	color: #ffffff;
	border-radius: 6px;
	margin-left: auto;
	cursor : pointer;
	}
	
.close-animatedModal p:hover {box-shadow: 2px 2px 2px #D9D9D9;}	
	

.modal-content-vertical {
	width: 33%;
	margin: auto;
	margin-top: 4%;
	}
	
.modal-img-vertical {
	width: 100%;
	height: auto;
	}
	
.modal-content-beside {
	width: 64%;
	margin: auto;
	margin-top: 6%;
	transform: rotateZ(0deg)
	}
	
.modal-img-beside {
	width: 100%;
	height: auto;
	}
	
.video {
	width: 736px;
	height: auto;
	margin: auto;
	margin-top: 184px;
	margin-bottom: 120px;

}
	
	
.video-frame {
	width: 640px;
	height: 396px;
	}



.footer	{
display: none;
	}		
}

@keyframes animation-grayscale-sp{
	0% {filter:  grayscale(100%);}
	25% {filter:  grayscale(75%);}
	50% {filter:  grayscale(50%);}
	75% {filter:  grayscale(25%);}
	100% {filter:  grayscale(0%);}
	100% {box-shadow: 4px 4px 8px #D9D9D9;}
	}



@keyframes animation-grayscale{
	0% {filter:  grayscale(100%);}
	25% {filter:  grayscale(75%);}
	50% {filter:  grayscale(50%);}
	75% {filter:  grayscale(25%);}
	100% {filter:  grayscale(0%);}
	}
/*paintingend------------------------------*/










/*accessories------------------------------*/
.accessories-navi{color:#C11414 !important;}

.accessories-main {margin-top: 124px;}
    
.accessories-about-img-list {
list-style: none;
padding: 0px;
margin-top: 32px;
margin-bottom: 56px;
}

.accessories-about-img-list li {
 width: 280px;
 height: auto;
 margin:auto;
 margin-bottom: 0px;
}

.accessories-about-text {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 72px;
	font-family: 'Shippori Mincho',serif;
	font-size: 13px;
	line-height: 40px;
	color: #242424;
}

.accessories-about-text p {
	font-family: 'Shippori Mincho',serif;
	font-size: 13px;
	line-height: 40px;
}


.shop1 {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 24px;
	font-family: 'Shippori Mincho',serif;
	font-size: 11px;
	line-height: 16px;
	color: #242424;
}

.shop1 a {
	text-decoration: none;
	color: #242424;
}

.shop1 span {
	font-size: 20px;
	color: #C11414;
}

.shop2 {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 24px;
	font-family: 'Shippori Mincho',serif;
	font-size: 11px;
	line-height: 16px;
	color: #242424;
}

.shop2 a {
	text-decoration: none;
	color: #242424;
}

.shop2 span {
	font-size: 20px;
	color: #C11414;
}

.viewmore {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 16px;
	text-align: right;
}

.accessories-img-area {
    width: 320px;
	height: auto;
	margin: auto;
}

.accessories-image {
	width: 320px;
	height: auto;
	margin: auto;
	margin-bottom: 120px;
}

.accessories-list img {
	width: 160px;
	height: auto;
}


.accessories-img-area ul {
	list-style: none;
	padding: 0px;
	margin-bottom: 120px;
}


.accessories-img-area li:nth-child(2) {
	margin-left: 160px;
}

.snsicon-list {
width: 327px;
margin: auto;
margin-bottom: 80px;
padding: 0px;
list-style: none;
display: flex;
gap: 20px;}



@media screen and (min-width: 1196px) {

.accessories-main {
	margin-top: 204px;
	margin-left: 40%;}
	
	
.accessories-about {
	margin-bottom: 360px;
	}
	

.accessories-about-img-list {
	margin: 0px;	
	}

	
.accessories-about-img-text {
	display: flex;
	}

.accessories-about-text {
	width: 336px;
	margin-bottom: 172px;
	margin-left: 120px;
	}
	

.shop-viewmore {
	margin-top: 16px;
	display: flex;
	align-items: flex-end;
	}

.shop1 {
	width: 736px;
	margin-bottom: 14px; }
	
.shop2 {
	width: 736px;
	margin-bottom: 348px;}
	
	
.viewmore {
	position: fixed;
	width: 776px;}


	
.accessories-img-area {
    width: 736px;
	height: auto;
	margin: auto;
}

.accessories-image {
	width: 480px;
	height: auto;
	margin: auto;
	margin-bottom: 240px;
}

.accessories-list img {
	width: 240px;
	height: auto;
}


.accessories-img-area ul {
	list-style: none;
	padding: 0px;
	margin-bottom: 240px;
}


.accessories-img-area li:nth-child(2) {
	margin-left: 240px;
}

.accessories-img-area ul:last-child {
	margin-bottom: 80px;
}



.footer	{
display: none;
	}		
}
/*accessoriesend------------------------------*/










/*shop------------------------------*/
.shop-navi {color:#C11414 !important;}

.shop-main {margin-top: 124px;}


.web-shop {
	width: 240px;
	height: auto;
	margin: auto;
	margin-bottom: 128px;
}

.web-shop h1 {
 font-family: 'Shippori Mincho',serif;
 font-size: 16px;
 color: #242424;
 text-decoration: underline;
 margin-bottom: 40px; 
}

.web-shop ul {
	list-style: none;
}

.webshop-list a {
	width: 240px;
	display: flex;
	margin-bottom: 40px;
	text-decoration: none;
	
}
h2 {
	font-family: 'Shippori Mincho',serif;
    font-size: 13px;
    color: #242424;
}

.webshop-list p {
	display: none;
}



.webshop-list img {
	margin-left: auto;
}

.web-shop p {font-family: 'Shippori Mincho',serif;
    font-size: 13px;
    color: #242424;}


.store-shop {
	width: 240px;
	height: auto;
	margin: auto;
}
.store-shop h1 {
 font-family: 'Shippori Mincho',serif;
 font-size: 16px;
 color: #242424;
 text-decoration: underline;
 margin-bottom: 40px; 
}

.store-shop-list {
	width: 240px;
	margin-bottom: 24px;
	height: auto;
	margin: auto;
	list-style: none;
}

.store-shop-list li {
	margin-bottom: 120px;
}

.store-shop-list li:nth-child(3){
	margin-bottom: 80px;
}


.store-shop-list img {
	width: 240px;
    height: auto;
	margin: auto;
	margin-bottom: 24px;
}

h3 { font-family: 'Shippori Mincho',serif;
 font-size: 16px;
 color: #242424; 
margin-bottom: 16px;}

.store-shop-list p {
font-family: 'Shippori Mincho',serif;
font-size: 10px;
line-height: 40px;
color: #242424;
}

.snsicon-list {
width: 240px;
margin: auto;
margin-bottom: 80px;
padding: 0px;
list-style: none;
display: flex;
gap: 20px;}


@media screen and (min-width: 1196px) {
.shop-main {
	width: 720px;
	margin-top: 216px;
	margin-left: 40%;}

.web-shop {
	width: 720px;
	height: auto;
	margin-bottom: 280px;
}

.web-shop h1 {
 font-family: 'Shippori Mincho',serif;
 font-size: 16px;
 color: #242424;
 text-decoration: underline;
 margin-bottom: 40px; 
}

.web-shop ul {
	list-style: none;
}

.web-shop h2 {
	width: 80px;
	margin-right: 80px;
	}

.web-shop p {
	display: block;
	}

.webshop-list a {
	width: 800px;
	display: flex;
	margin-bottom: 24px;
	text-decoration: none;
	align-items: center;
}

.webshop-list p {
	font-family: 'Shippori Mincho',serif;
    font-size: 13px;
    color: #242424;
}

.webshop-list span {
	display: block;
}


.webshop-list img {
	display: none;
}

.web-shop p {font-family: 'Shippori Mincho',serif;
    font-size: 13px;
    color: #242424;}


.store-shop {
	width: 800px;
	height: auto;
}
.store-shop h1 {
 font-family: 'Shippori Mincho',serif;
 font-size: 16px;
 color: #242424;
 text-decoration: underline;
 margin-bottom: 40px; 
}

.store-shop-list {
	width: 800px;
	height: auto;
	margin: auto;
	list-style: none;
}

.store-shop-list li {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 240px;
}

.store-shop-list li:nth-child(3){
	margin-bottom: 360px;
}

.store-shop-list img {
	width: 240px;
    height: auto;
    margin: 0px;
}

.store-shop-list-text {
   width: 400px;
   margin-right: 160px;
	}

h3 { font-family: 'Shippori Mincho',serif;
 font-size: 18px;
 color: #242424; 
margin-bottom: 8px;}

.store-shop-list p {
font-family: 'Shippori Mincho',serif;
font-size: 13px;
line-height: 40px;
color: #242424;
}




.footer	{
display: none;
	}
}
/*shopend------------------------------*/











/*news-archive------------------------------*/
.archive-main {margin-top: 124px;}


.archive-contents{
	width: 280px;
	height: auto;
	margin: auto;
	margin-bottom: 128px;
}

.entry {
	margin-bottom: 160px;
}

.entry-thumbnail img {
	width: 280px;
	height: auto;
}



@media screen and (min-width: 1196px) {
	.archive-main {
		width: 720px;
		margin-top: 224px;
		margin-left: 50%;}
	
	.archive-contents {
		width: 720px;
		height: auto;
		margin-bottom: 280px;
	}

	.entry {
		margin-bottom: 200px;
	}
	
	.entry-thumbnail img {
		width: auto;
		height: auto;
	}
	
	.footer	{
	display: none;
		}
	}



/**news-archiveend------------------------------*/








/*news-single------------------------------*/

.single-main {margin-top: 124px;}


.single-contents{
	width: 280px;
	height: auto;
	margin: auto;
	margin-bottom: 128px;
}


.post-content img {
	width: 280px;
	height: auto;
	margin-bottom: 80px;
}


.post-atrribute {
	margin-bottom: 24px;
}

.post-header_title {
	margin-bottom: 32px;
}

.post-content p {
	font-size: 13px;
}


@media screen and (min-width: 1196px) {
	.single-main {
		width: 720px;
		margin-top: 224px;
		margin-left: 50%;}
	
	.single-contents {
		width: 720px;
		height: auto;
		margin-bottom: 280px;
	}


	.post-content img {
		width: auto;
		height: auto;
		margin-bottom: 40px;
	}

	.post-atrribute {
		margin-bottom: 24px;
	}

	.post-header_title {
		margin-bottom: 32px;
	}
	
	.footer	{
	display: none;
		}
	}

/**news-singleend------------------------------*/













/*contact------------------------------*/

.contact-navi {color:#C11414 !important;}

.contact-main {margin-top: 124px;}

.contact-main-img {
	width: 327px;
	height: auto;
	margin: auto;
	margin-bottom: 32px;
}

.sns-contact {
	width: 327px;
	height: auto;
	margin: auto;
	text-align: left;
}

.contact-list {
	list-style: none;
}

.contact-list a {
	display: flex;
	height: 28px;
	text-decoration: none;
	color: #242424;
	margin-bottom: 32px;
}

.contact-list img {
	width: auto;
	height: 28px;
	margin-right: 32px;
}

.contact-list p {
	
	font-size: 12px;
	line-height: 28px;
}

.wpcf7  {
	width: 327px;
	margin: auto;
}

.wpcf7-textarea {
	width: 312px;

}




.sns-contact-text {
	width: 327px;
	height: auto;
	margin: auto;
	font-family: 'Shippori Mincho',serif;
	font-size: 11px;
	line-height: 32px;
	color: #242424;
}

.snsicon-list {
width: 327px;
margin: auto;
margin-bottom: 80px;
padding: 0px;
list-style: none;
display: flex;
gap: 20px;}

@media screen and (min-width: 1196px) {
.contact-main {
	width: 654px;
	margin-top: 280px;
	margin-left: 40%;}
	
	/*.contact-main-img-list {
		display: flex;
		flex-direction: row-reverse;
	}*/
	
	.contact-main-img {
		width: 327px;
	    height: 218px;
	    margin: auto;
		  margin-bottom: 40px;}
	
    .contact-list {
		width: 327px;
		margin-bottom: 80px;
	  }
	
	.contact-list a  {
		margin-bottom: 40px;
	}

	.wpcf7  {
		width: 327px;
		margin:auto;
	}


	.wpcf7-textarea {
		width: 312px;
	
	}
	
	.sns-contact-text {
		width: 362px;
		margin-top: 16px;
		margin-bottom: 104px;
	}
	
	.sns-contact-text br {
		display: none;
	}
	
	.sns-contact-text P {
		font-size: 13px;
	}

}
/*contactend------------------------------*/