@charset "UTF-8";

body {
	font-family: 'Noto Serif Japanese', serif, sans-serif;
	background: url("../images/common/bg.png");
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	font-family:"游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	letter-spacing: 0.1em;
	font-weight: normal;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
input, textarea {
	font-weight: normal;
	font-size: 100%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
input, textarea, select {
	font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro";
}
a {
	overflow: hidden;
	outline: none;
	text-decoration: none;
	color: #000;
}
a:hover, a:active {
	text-decoration: underline;
	opacity: 0.8;
}
input[type="text"]:focus {
	outline: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: none;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}
a img {
	border: none;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70); /* ie7 */
	-ms-filter: "alpha(opacity=70)"; /* ie8 */
}


html, body {
	height: 100%;
	margin: 60px 0 0;
}

body {
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}


body.toggle_on,html.toggle_on{
	overflow:hidden;
	height:100%;
}

.device-sp{
	display: block !important;
}
.device-pc{
	display: none !important;
}




.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.device-pc {
	display: none;
}

.fix {
	background: rgba(0, 0, 0, 1);
}
.fix-active {
	background: #00a0e9
}
.fix-pd {}



#fs_Top .fs-l-main {
    margin: 0px auto;
    padding: 30px 0em 0;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



/*ぱんくず*/

.fs-c-breadcrumb ol{
	display: none;
}

.fs-c-breadcrumb ol:first-of-type{
	display: block;
}




/* --------------------------------------------------------------------------------
	審査用　非表示
-------------------------------------------------------------------------------- */
/*
.small-bnr{
	display: none!important;
}

#index .cat-list{
	display: none!important;
}

#index .committed{
	display: none!important;
}


#index .gift-service{
	display: none!important;
}


#index .credit{
	display: none!important;
}

#index .contact .more{
	display: none!important;
}

.h-menu .contents-info{
	display: none!important;
}



*/


.voice{
	display: none!important;
}



/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */


#header a {
	color: #000;
	text-decoration: none;
}
#header {
	position: fixed;
	color: #fff;
	z-index: 9999;
	width: 100%;
	top: 0;
	background: #fff;
	height: 32vw;
	
	
}


#header.fix {
	position: fixed;
	color: #fff;
	z-index: 9999;
	width: 100%;
	top: 0;
	background: #fff;
	height: 18vw;
	
    animation-name: fade-in5;
    animation-duration: 0.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0; 
    animation-iteration-count: 1;
    animation-direction: normal; 
    animation-fill-mode: forwards; 
	
	
	
}

@keyframes fade-in5 {
    0% {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }




.header-inner {
	padding: 10px 1em;
	position: relative;
	display: flex;
	justify-content: space-between;
	
	
}
.header-inner h1 {
	width: 25vw;
	position: fixed;
	left: 0;
	right: 0;
	margin: 0 auto;
}


.header-inner h1 img.hi{
	height: 25vw;
	display: block;
}


.fix .header-inner h1 img.hi{
	display: none;
}


.header-inner h1 img.low{
	display: none;
	
}


.fix .header-inner h1 img.low{
	display: block;
	
}






#header .login {
 
	text-align: center;
}


#header .login .fs-pt-menu__link{
	letter-spacing: -0.12em;
}



.header-inner a{
	font-size: 10px;
	display: block;
}


#header .login a {
	margin: 0;
	padding: 0;
   
}

#header .fs-p-headerUtilityMenu__login a::before {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    background: url(https://kotonowa.itembox.design/item/images/common/h-login.jpg) no-repeat;
   background-size: contain;
    vertical-align: middle;
    margin: 0 auto ;
}


#header .fs-p-headerUtilityMenu__logout a::before {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    background: url(https://kotonowa.itembox.design/item/images/common/h-login.jpg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 auto;
    
}


#header .fs-p-headerUtilityMenu__register{
    
    display: none;
    
    
}

#header .fs-p-headerUtilityMenu__cart a::before {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    background: url(https://kotonowa.itembox.design/item/images/common/h-cart.jpg) no-repeat;
    background-size: contain;
    vertical-align: middle;
	margin: 0 auto;
    
}


.g-nav {
	position: fixed;
	bottom: 0;
	background: #fff;
	z-index: 999;
	width: 100%;
	
}



.g-nav ul.nav-list{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
}


.g-nav ul.nav-list li{
	text-align: center;
	width: 25%;
	border-right: 1px solid #ccc;
}

.g-nav ul.nav-list li:last-child{
	text-align: center;
	width: 25%;
	border-right: 0px solid #ccc;
}


.g-nav ul.nav-list img{
	height: 3em;
	
}




.toggle-txt{
	color: #000;
	margin: 5px 0 0 ;
	font-size: 10px;
	text-align: center;
}



#header .cart-txt{
    font-size: 10px;  
}

.h-contents-box{
	
	padding: 0 10px;
	
}


.toggle-txt{
	color: #000;
	margin: 10px 0 0 ;
	font-size: 10px;
}


nav.h-menu {
	display: none;
	background-color: rgba(255, 255, 255, 1);
	left: 0;
	position: fixed;
	overflow-y: scroll;
	z-index: 9998;
	top: 0px;
	width: 100%;
	height: 100vh;
	-webkit-overflow-scrolling: touch;
}


#nav_toggle {
	display: block;
	width: 30px;
	height: 20px;
	position: relative;
	top: 10px;
	z-index: 9999;
	right: 0;
	margin: 0 auto;
}
#nav_toggle div {
	position: relative;
}
#nav_toggle span {
	display: block;
	height: 1px;
	background: #000;
	position: absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
#nav_toggle span:nth-child(1) {
	top: 0px;
}
#nav_toggle span:nth-child(2) {
	top: 5px;
}
#nav_toggle span:nth-child(3) {
	top: 10px;
	
}

.open #nav_toggle span:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav_toggle span:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
	width: 30px
}

.drawer-nav a {
	color: #fff;
}
.drawer-nav .drawer-menu {
	padding: 80px 0 40vw;
}
.drawer-nav .menu-inner {
	padding: 0 1em;
}


.drawer-nav .menber-info ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.drawer-nav .menber-info ul a{
	
	
}

.drawer-nav .menber-info ul li {
	width: 48% !important;
	margin: 0 0 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #eee;
	text-align: center;
	
}



#header .drawer-nav .fs-p-headerUtilityMenu__logout a::before {
    display: none;
}

#header .drawer-nav .fs-p-headerUtilityMenu__login a::before {
    display: none;
}



.drawer-nav .menber-info ul li ul li {
	width: 100% !important;
	
}


.drawer-nav .menber-info ul li ul li:last-child {
	border-right: 1px solid #fff !important;
	
}



.drawer-nav .menber-info .fs-p-headerUtilityMenu ul li {
	width: 100%;
	border: 0;
	border: 5px;
	margin: 0;
	padding: 0.5em 1em 0.5em 1em;
}

.drawer-nav .menber-info ul li.to-home {
	
	padding: 0.5em 1em 0.5em 1em;
}

.drawer-nav .menber-info ul li.to-register {
	width: 100%!important;
	padding: 0.5em 1em 0.5em 1em;
}

.fs-p-headerUtilityMenu__list > li + li {
	margin-left: 10px;
}
.fs-p-headerUtilityMenu__list a {
	display: block;
	
}
.fs-p-headerUtilityMenu__list a:link {
	
}
.fs-p-headerUtilityMenu__list a:visited {
	
}
.fs-pt-menu__link::before, .fs-pt-menu__link::after {
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 14px;
}
.fs-p-headerUtilityMenu__list a::before {
	content: "";
	border: 0px solid transparent;
	border-right-width: -px;
	border-left-color: currentColor;
	display: inline-block;
	height: 0;
	width: 0;
}
.drawer-nav .fs-p-headerUtilityMenu__list {
	margin: 0;
	padding: 0;
	display: block;
	font-size: 14px;
}




.drawer-nav .menber-info .point {
	border: 2px solid #000;
	background: #fff;
	padding: 2em 1em;
	text-align: center;
	margin: 0 0 2em;
}

.drawer-nav .menber-info .point a{
	color: #fff!important;
}
.drawer-nav .menber-info .point p {
	color: #000;
	font-size: 18px;
}
.drawer-nav .menber-info .point span {
	color: #000;
	display: block;
	margin: 0 0 0.5em;
	font-size: 80%;
}
.drawer-nav .menber-info .point .btn-point {
	background: #c50e20;
	border-radius: 7px;
	margin: 0.5em 0 1em;
}
.drawer-nav .menber-info .point .btn-point a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0.5em
}
.drawer-nav .cols {
	margin: 2em 0 0;
	
}
.drawer-nav .cols a {
	color: #000;
}
.drawer-nav .cols h2 {
	font-size: 14px;
	color: #fff;
	background: #000;
	background-size: 1em;
	padding: 0.5em 1em;
	margin: 0 0 1em;
}
.drawer-nav .cols h3 {
	font-size: 14px;
	color: #000;
	border-bottom: 1px solid #000;
	margin: 0 0 1em;
	padding: 0 0 10px;
}



.drawer-nav .cols a {
	font-size: 12px!important;

}


.drawer-nav .cols ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}



.drawer-nav .cols ul li {
	width: 50% !important;
	font-size: 14px;
	padding: 1em 12px 1em 5px;
	position: relative;
	border-bottom: 1px solid #ccc;
	border-right: 0!important;
}

.drawer-nav .cols ul li a {
	padding: 0 0 0 1em;
	justify-content:flex-start!important;
	flex-direction: initial!important;
}


.drawer-nav .cols ul li::before, .drawer-nav .cols ul li::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.drawer-nav .cols ul li::before {
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #c48d2b;
}
.drawer-nav .cols ul li::after {
	left: 3px;
	width: 3px;
	height: 3px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}




.drawer-nav .cols dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	
}


.drawer-nav .cols dl a{
	justify-content:flex-start!important;
	flex-direction: initial!important;
	
}


.drawer-nav .cols dl dt {
	width: 100%;
	font-size: 14px;
	padding: 12px 4px 12px 25px;
	background: #000;
	margin: 0 0 15px;
	border-radius: 4px;
	position: relative;
}


.drawer-nav .cols dl dt::before, .drawer-nav .cols dl dt::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.drawer-nav .cols dl dt::before {
	width: 14px;
	height: 14px;
	
	
}
.drawer-nav .cols dl dt::after {
	left: 10px;
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid #ffeb33;
	border-right: 1px solid #ffeb33;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


.drawer-nav .cols dl dd {
	width: 49%;
	font-size: 14px;
	padding: 12px 4px 12px 25px;
	background: #eee;
	margin: 0 0 15px;
	border-radius: 4px;
	position: relative;
}


.drawer-nav .cols dl dd::before, .drawer-nav .cols dl dd::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.drawer-nav .cols dl dd::before {
	width: 14px;
	height: 14px;
	
	
}
.drawer-nav .cols dl dd::after {
	left: 10px;
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid #ffeb33;
	border-right: 1px solid #ffeb33;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


.drawer-nav .cols dl dt a{
	color: #fff !important;
}


.drawer-nav .cols ul li a span {
	padding: 0 7px 0 0;
}

.drawer-nav .cols .info {
	text-align: center;
	color: #000;
	
}


.drawer-nav .cols .f-logo {
	margin: 2em 0 0;
	text-align: center;
}


.drawer-nav .cols .f-logo img {
	width: 10em;
}



.drawer-nav .cols .info .tel a {
	font-size: 30px !important;
	background: url(https://kotonowa.itembox.design/item/images/common/i-tel.png) no-repeat 0 50%;
	display: inline-block;
    background-size: 1.5em;
    padding: 0 0 0 1.7em;
	
}

.drawer-nav .copy p{
	margin: 20px 0 0;
	font-size: 12px;
	
}


.drawer-nav .contents-info {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
	margin: 2em 0 0;
	
   
}


.drawer-nav .contents-info .bnr{
	width: 48%;
	margin: 0 1% 5px;

}

.drawer-nav .contents-info .bnr.full{
	width: 100%;
	margin: 0 1% 5px;

}


.drawer-nav .contents-info ul{
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin: 10px 0 0;
	flex-wrap: wrap;

}

.drawer-nav .contents-info ul li{
	padding: 0.5em;
	width: 28%;
	text-align: center;

}


.drawer-nav .search{
    width: 100%;
}

.drawer-nav .search-box {
    border: 1px solid #ccc;
    border-radius: 7px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    
}

.drawer-nav .search-text input {
    border: none;
    height: 36px;
    font-size: 14px;
}

.drawer-nav .btn-search input {
    width: 16px;
	padding: 3px 0 0 ;
}





header .info p{
	font-size: 12px;
}









.h-info{
	padding:0.5em 0;
	border-top: 2vw solid #eee;
	border-bottom: 2vw solid #eee;
	color: #000;
	text-align: center;
	font-size: 12px;
	
	
}



/* --------------------------------------------------------------------------------
	sub1
-------------------------------------------------------------------------------- */

#sub1 {
	display: none;
	
}


/* --------------------------------------------------------------------------------
	f-store
-------------------------------------------------------------------------------- */
#f-store {
    margin-bottom: 0;
}
#f-store .inner {
  padding: 4em 1em;
}
#f-store h2 {
    font-size: 26px;
    border-bottom: solid 1px;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
#f-store .store-box {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    padding: 0 10px;
    gap: 50px;
    flex-direction: column;
}
#f-store .name {
    color: #c48d2b;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0;
    line-height: 25px;
    letter-spacing: 1px;
}
#f-store .address span {
  font-weight: bold;
}
#f-store .att {
    border: solid 1px #525252;
    padding: 13px 0;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}


/* --------------------------------------------------------------------------------
	f-info
-------------------------------------------------------------------------------- */




#haisou {
	/*display: none;*/

	text-align: center;
	margin: 30px 0 0 ;
	background: #fff;
	
}

#haisou h2{
	color: #fff !important;
	margin: 0 0 10px !important;
	font-size: 18px!important;
	text-align: center;
	background: #CC131D;
	padding: 5px 0;
	border-radius: 15px 15px 0 0;
	
}

#haisou span {
    /*font-size: 20px;*/
}
#haisou .senddate {
   color: #c48d2b;;
}


#haisou .haisou-inner {
    padding: 10px;
	background: #000;
	color: #fff;
	font-size: 16px;
}



div.sokujitu-info {
    margin: 0 0 20px 0;
    padding: 10px;
    border: 2px solid #c12a1c;
    border-radius: 2px;
}
div.sokujitu-info .sokujitu-title {
    font-size: 140%;
	color: #c12a1c;
	font-weight: bold;
	text-align: center;
}






/*calendar*/

#f-info .calendar{
	text-align:center;
}


#f-info .calendar span.Today
{
	display: block;
	cursor: pointer;
	font-weight: bold;
	color: #000;
	background-color: #ffeeee;
}

#f-info .calendar li.deli
{
	color: #000;
	background-color: #090;
}

#f-info .calendar li.openingsale
{
	color: #000;
	font-weight: bolder;
	background-color: #F00;
}

#f-info .calendar li.holyday
{
	color: #000;
	background-color: #fffec6;
}
#f-info .calendar li.holyday2
{
	color: #000;
	background-color: #4196bb;
}

#f-info .calendar li.Sun
{
	color: #F00;
	font-weight: bold;
}

#f-info .calendar li.Sat
{
	font-weight: bold;
}

#f-info .calendar li.undefined
{
	cursor: pointer;
}

/*ui*/

#f-info .calendar div.cal_wrapper
{
	color: #666;
	width: 300px;
	margin: 0 auto;
}

#f-info .calendar ul.cal_ui
{
	float: right;
	width: 60px;
	margin: 3px 0 0;
	padding: 0;
}

#f-info .calendar ul.cal_ui li
{
	float: left;
	cursor: pointer;
	width: 20px;
	height: 15px;
	font-size: 10px;
	list-style: none;
	background-repeat: no-repeat;
}

#f-info .calendar li.cal_prev
{
	background-image: url(https://kani7253.itembox.design/item/cal/cal_01.gif);
}

#f-info .calendar li.cal_to
{
	background-image: url(https://kani7253.itembox.design/item/cal/cal_02.gif);
}

#f-info .calendar li.cal_next
{
	background-image: url(https://kani7253.itembox.design/item/cal/cal_03.gif);
}

#f-info .calendar div.cal_base
{
}

#f-info .calendar div.cal_base p
{
	margin: 0;
	text-align:center;
	padding: 5px;
	font-size: 12px;
	font-weight: bold;
	border-bottom: #ccc solid 1px;
}

#f-info .calendar ul.cal_main
{
	clear: both;
	width: 300px;
	margin: 0 auto 5px;
	padding: 0;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

#f-info .calendar ul.cal_main:after
{
	content: " ";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}

#f-info .calendar ul.cal_main li
{
	float: left;
	overflow: hidden;
	width: 14%;
	padding: 0.1em;
	text-align: center;
	list-style: none;
	font-size: 12px;
	border-bottom: #CCC solid 1px;
}

#f-info .calendar ul.cal_main li span
{
	display: block;
	padding: 3px;
}

#f-info .calendar li.cal_headline
{
}

#f-info .calendar .dayoff{
	font-size: 12px;
	padding: 5px 0;
}
#f-info .calendar .dayoff span{
	color: #fffec6;
}

#f-info .calendar .Today{
	font-size: 12px;
}

#f-info .calendar .Today span{
	color: #ffeeee;
}

#f-info .calendar .dayoff2{
	font-size: 12px;
	padding: 0 0 5px;
}


#f-info h2 {
	font-size: 20px;
    font-weight: normal;
    margin: 0 0 30px;
	text-align: center;
}


#f-info .inner {
	padding: 40px 1em ;
}

#f-info .calendar {
	margin: 0 auto;
	
}


#f-info .delivery-map {
	margin: 30px 0 0;
}

#f-info .delivery-map p{
	margin: 0 0 20px;
	font-size: 12px;
	
}

#f-info .delivery-map p span{
	color: #cc3333;
	display: block;
	margin: 0 0 20px;

}

#f-info .delivery-map h3{
	text-align: center;
	font-size: 16px;
	text-decoration: underline;
	letter-spacing: -0.05em;
	

}



/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
#footer {
	background: #eee;
	padding: 0 0 4em;

}


#footer .f-nav{
	padding: 0 1em;

}


#footer .f-nav ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	
}

#footer .f-nav ul li {
	width: 50% !important;
	font-size: 14px;
	padding: 1em 12px 1em 5px;
	border-bottom: 1px solid #ccc;
	border-right: 0!important;
	position: relative;
	
}

#footer .f-nav ul li a {
	padding: 0 0 0 1em;
	justify-content:flex-start!important;
	flex-direction: initial!important;
	letter-spacing: -0.05em;
}


#footer .f-nav ul li::before, #footer .f-nav ul li::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
#footer .f-nav ul li::before {
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #c48d2b;
}
#footer .f-nav ul li::after {
	left: 3px;
	width: 3px;
	height: 3px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}





#footer .inner {
	text-align: center;
	padding: 20px 1em;
	
}




#footer .f-logo {
	margin: 2em 0 0;
	text-align: center;
}


#footer .f-logo img {
	width: 10em;
}



#footer .tel a {
	font-size: 30px !important;
	background: url(https://kotonowa.itembox.design/item/images/common/i-tel.png) no-repeat 0 50%;
	display: inline-block;
    background-size: 1.5em;
    padding: 0 0 0 1.7em;
	
}

#footer .copy p{
	text-align: center;
	margin: 0 0 20px;
	font-size: 12px;
	
}




/* --------------------------------------------------------------------------------
	slider
-------------------------------------------------------------------------------- */

/**
 * swiper.js
 */

.top-main {
	position: relative;
	height: 70vh;
	width: 100%;
	margin: 0px 0 30px;
}


.top-main h1 {
	position: absolute;
	width: 70%;
	top:15%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 9997;
	font-size: 20px;
	text-align: center;
	text-decoration: underline;
	color: #c58d2b;
	line-height: 1.7;
}


.top-main .swiper-container-top{
	height: 70vh;
	width: 100%;
	overflow: hidden;
}

.top-main .swiper-container-top img{
	height: 70vh;
	width: 100%;
	object-fit: cover;
	display: block;

}



@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.top-main .swiper-container-top img{
  animation: fadeIn 4s ease 0s 1 normal;
}

 

.swiper-pagination {
	width: 100%;
	position: static !important;
	padding: 10px 0 0;
	z-index: 9990;
}


.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000 !important;
}

.swiper-pagination-bullet {
    width: 10px!important;
    height: 10px!important;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2;
	margin: 0 0.3em;
}



section {
	margin: 0 0 30px;
	
}

section h2{
	font-size: 20px;
	margin: 0 0 30px;
	text-align: center;
}

section h2 span{
/*	display: block;
	font-size: 16px;
	color: #000000;
	margin: 5px 0 0;*/
}





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



#index #pickup {
    margin: 60px 0em 40px;
}




#pickup .large-bnr ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 30px;

}

#pickup .large-bnr ul li{
	width: 49%;
	margin: 0 0 5px;
}

#pickup .small-bnr ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

}

#pickup .small-bnr ul li{
	width: 49%;
	margin: 0 0 5px;
}




#pickup .small-bnr .swiper-container{
	width: 980px;
	margin: 0 auto 30px;
}


#pickup .small-bnr .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(https://kani7253.itembox.design/item/images/index/arr-next.png) !important ;
    right: 10px;
    left: auto;
}

#pickup .small-bnr .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url(https://kani7253.itembox.design/item/images/index/arr-pre.png) !important ;
    left: 10px;
    right: auto;
}




#index section{	
	margin: 60px 1em 40px;
}


#index h2.heading{	
	text-align: center;
    border-bottom: 2px solid #c48d2b;
    font-size: 20px;
    padding: 10px 0;
    color: #c48d2b;
	width: 90%;
	margin: 0 auto;
	letter-spacing: -0.05em;
}



#index .anshin {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 15px 0 0;
}




#index .anshin div{
    width: 50%;
    height: 200px;
    display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 1em;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}


#index .anshin div:nth-child(2n){
    width: 50%;
    height: 200px;
    display: flex;
	align-items: center;
	border-bottom: 1px solid #ccc;
	border-right: 0px solid #ccc;
}


#index .anshin div:nth-child(3){
	border-bottom: 0px solid #ccc;
}


#index .anshin div:nth-child(4){
	border-bottom: 0px solid #ccc;
}




#index .anshin div span{
	display: block;
	text-align: center;
	margin: 20px 0 10px;
}

#index .anshin div span img{
	height: 2.8em;

}


#index .anshin div p{
	padding: 0 0 ;
	font-size: 12px;
	line-height: 1.2;
	width: 80%;
}

#index .anshin div p br{
	display: none;
}

#index .anshin div:nth-child(4) p{
	width: 80%;
}




#index .anshin div p span{
	font-size: 10px;
	margin: 10px 0 0;
}


#index .anshin div p a{
	display: block;
	margin: 20px auto 0;
	padding: 10px;
	border: 1px solid #c48d2b;
	border-radius: 5px;
	text-align: center;
	font-size: 12px;
	color: #c48d2b;
   
}






#index .committed {
	text-align: center;
}

#index .committed h2{
	text-align: center;
}


#index .committed h2 img{
	width: 5em;

}


#index .committed h3{
	display: inline-block;
	text-align: center;
	font-size: 20px;
	border-bottom: 1px solid #000;
	margin: 0 0 30px;
	
}


#index .committed h3:nth-of-type(1){
	display: inline-block;
	text-align: center;
	font-size: 16px;
	border-bottom: 1px solid #000;
	margin: 0 0 30px;
	letter-spacing: -0.1em;
	
}


#index .committed .committed-box{
	display: flex;
	flex-direction: column;
	margin: 0 0 30px;

}




#index .committed .txt{
	text-align: left;
	margin: 0 0 20px;
}


#index .committed .more-btn{
	margin: 50px 0 0;
    
}




#index .committed .more-btn a{
	display: block;
    color: #fff;
    background: #c48d2b;
	padding: 10px 0;
    text-align: center;
    position: relative;
    border-radius: 5px;
	font-size: 14px;
}



#index .committed .sec-bg{
	background-image: url(https://kotonowa.itembox.design/item/images/index/bg-img.jpg) ;
	background-size:contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 180px;
	margin: 0 0 60px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	
}


#index .committed .sec-bg h4{
	font-size: 14px;
    padding: 0 0 40px;
    line-height: 1.8;
}








#index section.seen {
    margin: 60px 0em 40px;
}


#index .seen h2{
	display: flex;
	/* padding: 60px 0; */
	padding: 20px 20px 20px 0;
	justify-content: flex-end;
	align-items: center;
	background: url(../images/index/scene-bg-sp.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

#index .seen h2 span{
	color: #000;
	padding: 20px 0em;
	text-align: left;
	font-size: 19px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 45px 0;
}

#index .seen ul{
	display: flex;
	justify-content:center;
	padding: 0 1em;

}

#index .seen ul li{
	padding: 0 4px;
	width: 33%;
}


#index .seen h3{
	font-size: 16px;
	text-align: center;
	margin: 20px 0 0;
	line-height: 2;
}



#index .voice {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}



#index .voice h2{
	font-size: 24px;
	text-align: center;
	background: #000;
	border-radius: 20px;
	color: #fff;
	padding: 10px 0;
	width: 100%;
	margin: 0 0 40px;

}


#index .voice-box {
    display: flex;
    justify-content: space-between;
    margin: 0 0 30px;
	padding: 0 0 30px;
	width: 100%;
	border-bottom: 1px solid #ccc;
}


#index .voice-box .img{
	width: 40%;
   
}

#index .voice-box .txt{
	width: 55%;
   
}

#index .voice-box .age{
	font-size: 18px;
	margin: 0 0 10px;
}

#index .voice-box p{
	font-size: 14px;
	
}






#index #haisou .haisou-inner{
	font-size: 16px;
}


#index .ranking h2{
	text-align: center;
}



#index .ranking .rank1 a{
	/*display: flex;
	justify-content: space-between;*/
	margin: 0 0 25px;
}


#index .ranking .rank1 .img{
	position: relative;
}

/*#index .ranking  .rank{
	position: absolute;
	top :0px;
	left: 0px;
	background: #000;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5em;
	height: 2.5em;

}*/



#index .ranking  .rank{
	position: absolute;
    top: -30px;
    right: 0px;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #000;
    font-size: 15px;

}



#index .ranking .rank1 .thumbnail img{
	
}

#index .ranking .rank1 .txt{
	
	font-size: 16px;
}


#index .ranking ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20px 0 0 ;
	
}

#index .ranking ul li{
	width: 48%;
	font-size: 14px;
	margin: 35px 0 20px;

}

#index .ranking ul li:first-child{
	width: 100%;
	font-size: 14px;
	margin: 35px 0 20px;

}


#index .ranking ul li .img{
	
	position: relative;
	margin: 0 0 10px;
}


#index .ranking p{
	font-weight: bold;
	
}


#index .cat-list h2 {
	text-align: center;
}



#index .cat-list ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}


#index .cat-list ul li{
	width: 48%;
	margin: 0 0 25px;

}



#index .cat-list .img{
	margin: 0 0 10px ;
}


#index .cat-list .txt{
	text-align: center;
	font-size: 14px;
}


/*#index .more{
	text-align: center;
}


#index .more a{
	display: inline-block;
    padding: 7px;
    border: 1px solid #000;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    width: 200px;
}
*/




#index .choice-price{
		
}

#index .choice-price ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
		
}
#index .choice-price ul li{
	width: 49%;
	border-bottom: 1px solid #000;
	
}

#index .choice-price ul li:nth-child(1){
	border-top: 1px solid #000;
	
}

#index .choice-price ul li:nth-child(2){
	border-top: 1px solid #000;
	
}

#index .choice-price ul li a{
	font-size: 18px;
	padding: 20px 1px;
	display: block;
	
}






#index .gift-service h2{
	text-align: center;
}


#index .gift-service ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}


#index .gift-service ul li{
	display: flex;
	justify-content: space-between;
	margin: 0 0 40px;
}


#index .gift-service ul li .img{
	width: 40%;
}

#index .gift-service ul li .txt{
	width: 55%;
}

#index .gift-service ul li .txt h4{
	font-size: 14px;
	margin: 0 0 10px;
}
	

#index .gift-service ul li .txt p{
	font-size: 	12px;
	line-height: 1.2;
	
}


#index .gift-service .att{
	background: #cc3333;
	text-align: center;
	font-size: 	12px;
	color: #fff;
	padding: 15px;
	border-radius: 10px;

}



#index .news h2{
	text-align: center;
		
}

#index .news ul li{
	border-bottom: 1px solid #ccc;
	padding:0 10px;
	font-size: 14px;
	margin: 0 0 10px;
}


#index .news ul li .date{
	color: #ccc;
}




#index .contents-info {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
	margin: 2em 0 0;
	
   
}


#index .contents-info .bnr{
	width: 48%;
	margin: 0 1% 5px;

}

#index .contents-info .bnr.full{
	width: 100%;
	margin: 0 1% 5px;

}





#index .contact {
	background: #eee;
	padding: 30px 1em;
}


#index .contact h2{
	font-size: 14px;
	background: #000;
	color: #fff;
	text-align: center;
	padding: 15px 1em;
	margin: 0 0 50px;
	border-radius: 25px;
	
}


#index .contact ul{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#index .contact ul li{
	text-align: center;
	margin: 0 0 20px;
	
}

#index .contact ul li:first-child{
	border-bottom: 1px solid #ccc;
	padding: 0 0 30px;;
}

#index .contact ul li h3{
	font-size: 18px;
	padding: 0 0 5px;
	border-bottom: 1px solid #000;
	margin: 0 0 15px;
	text-align: center;
	
}


#index .contact ul li a{
	display: block;
	font-size: 27px;
	color: #c48d2b;
	background: url("../images/index/i-telno.jpg") no-repeat 0px 50%;
	background-size: 1.5em;
	padding: 0 0 0 50px;
}

#index .contact ul li span{
	display: block;
	font-size: 14px;
	text-align: center;
	
}

#index .contact ul li p{
	font-size: 27px;
	color: #c48d2b;
	background: url("../images/index/i-faxno.jpg") no-repeat 0px 50%;
	padding: 0 0 0 50px;
	background-size: 1.5em;
	
}



#index .contact .credit{
	background: #fff;
	padding: 20px;
	margin: 20px 0;
	text-align: center;
	border: 2px solid #ccc;
	border-radius: 10px;
}


#index .contact .credit h4{
	font-size: 14px;
	background: #999999;
	padding: 10px 0;
	margin: 0 0 20px;
	text-align: center;
	color: #fff;
	letter-spacing: -0.1em;
}


#index .contact .credit ul{
	display: flex;
	justify-content: center;
	flex-direction: initial !important;
}

#index .contact .credit ul li{
	padding: 0 10px;
	width: auto;
	
}

#index .contact .credit ul li:first-child{
	padding: 0 10px;
	border-bottom: 0px solid #ccc;
}



#index .contact .more {
	text-align: center;

}

#index .contact .more a{
	   color: #fff;
    background: #c48d2b;
    padding: 10px 1em;
    text-align: center;
    position: relative;
    border-radius: 5px;
    font-size: 14px;
    display: inline-block;
    width: 100%;
	

}





#index .contents-info {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	margin: 2em 0 0;
	
   
}


#index .contents-info .bnr{
	width: 48%;
	margin: 0 0 10px;

}

#index .contents-info .bnr.full{
	width: 100%;
	margin: 0 0 10px;

}


#index .contents-info ul{
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin: 10px 0 0;
	flex-wrap: wrap;

}

#index .contents-info ul li{
	padding: 0.5em;
	width: 28%;
	text-align: center;
	font-size: 10px;
}












/* --------------------------------------------------------------------------------
	philosophy
-------------------------------------------------------------------------------- */
#philosophy {
	background: url(https://kotonowa.itembox.design/item/images/index/philosophy-bg3.jpg) no-repeat center center;
	background-size: cover;
	background-position: right 30% bottom 0%;
	height: 450px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-left: 1em;

}

#philosophy h2{
	font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #fff;
    font-weight: 600;
    text-align: left;
	margin: 0 0 20px;
	text-shadow:1px 1px 7px #000;
}

#philosophy h3{
    font-size: 18px;
    letter-spacing: 0.15em;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 30px;
    text-indent: 0.15em;
	color: #fff;
	text-align: left;
	text-shadow:1px 1px 7px #000;
}

#philosophy p{
    font-size: 12px;
    line-height: 2.0;
	/* padding: 0 1em; */
    letter-spacing: 0.1em;
	color: #fff;
	text-align: left;
	text-shadow:1px 1px 7px #000;
	
}






#instafeed{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


#instafeed div{
	width: 30%;
	margin: 0 0 30px;
	
}

#instafeed div img{
	width: 228px;
	height: 228px;
	object-fit: cover;
	
}


#index .movie {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
	margin-bottom: 30px;
}

#index .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* 商品ページ　おすすめ商品　*/
.fs-c-featuredProduct {
	padding: 40px 0 0 0;
}
.fs-c-featuredProduct .fs-c-featuredProduct__title {
	border-bottom: 1px solid currentColor;
	color: #000000;
	font-size: 1.4rem;
	padding: 0 0 10px;
	margin: 0 0 20px;
}





/* 塩二郎 */
#salt_category .title {
	margin: 40px 0;
}

#salt_category .title h4 {
	text-align: center;
}

#salt_category .committed {
    text-align: center;
	margin: 0 1rem 60px;
}

#salt_category .committed .committed-box, #salt_category .committed .committed-box2 ,
#salt_category .lineup .flex_box {
    display: flex;
    flex-direction: column;
    margin: 0 0 30px;
}

#salt_category .committed .txt {
    text-align: left;
    margin: 0 0 20px;
}

#salt_category .center_txt, #salt_category .txt2 {
    margin: 40px 0;
}

#salt_category .txt2 {
    text-align: left;
}

#salt_category .lineup_title {
	font-size: 25px;
    margin: 70px 0 30px;
    text-align: center;
    background-color: black;
    color: white;
    padding: 7px 0;
}

#salt_category .lineup {
    margin: 0 1rem 60px;
}

#salt_category .lineup .flex_box {
    margin: 0 0 50px;
}

#salt_category .flex_box h3 {
	font-size: 28px;
    margin: 20px 0;
}


#salt_category .btn {
    background-color: black;
    color: white;
    font-size: 18px;
    padding: 10px 25px;
    margin: 25px auto;
    width: 210px;
    text-align: center;
}


/* --------------------------------------------------------------------------------
	オリジナルのし
-------------------------------------------------------------------------------- */
#original_noshi #fs_CustomPage .fs-l-main {
	padding-top: 0;
}

#original_noshi .top_title {
	align-items: center;
	flex-direction: column-reverse;
	display: flex;
}

#original_noshi section h2 span {
    font-size: 40px;
}

#original_noshi .about h2 {
    font-size: 30px;
    font-weight: bold;
    text-decoration: underline 1px;
    margin: 25px 0 30px;
    text-underline-offset: 0.2em;
}

#original_noshi .top {
	margin: 0 1rem 0;
}

#original_noshi section {
	margin: 0 1rem 60px;
}

#original_noshi .about_flex .img,  #original_noshi .about_flex p {
  width: 100%;
}

#original_noshi .about_flex {
  flex-direction: column;
}

#original_noshi .about_flex .img {
	margin: 0 0 30px;
}
#original_noshi .lineup_title {
	font-size: 25px;
    margin: 30px 0 30px;
    padding: 10px 10px;
    text-align: center;
    background-color: black;
    color: white;
}

#original_noshi .lineup p, .about {
  font-size: 18px;
}

#original_noshi .lineup p {
	text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-weight: bold;
    margin: 30px 0;
}

#original_noshi .lineup .flex_box {
	display: flex;
    flex-direction: column;
    align-items: center;
}

#original_noshi .lineup p, #original_noshi .about {
	font-family: initial;
}

#original_noshi .s_txt {
	font-weight: bold;
	background: linear-gradient(transparent 50%, yellow 50%);
}

.premium {
	display: block;
}
.premium p {
	width: 100%;
	font-size: initial;
}


/* --------------------------------------------------------------------------------
	photokotonowa
-------------------------------------------------------------------------------- */
#photokotonowa_main, #photokotonowa_service, #photokotonowa_plan{
	display: flex;
	}



/*WEBスキミング用*/

/*お客様情報入力*/
#fs_CustomerDetails .calendar{
	display: none !important;
}

#fs_CustomerDetails .h-contents-box{
	display: none !important;
}


/*ご注文手続き*/
#fs_ShoppingCart .calendar{
	display: none !important;
}

/*ご注文手続き*/
#fs_ShoppingCart .h-contents-box{
	display: none !important;
}


/*お届け先一覧・商品数量指定・商品数量情報更新・配送・包装方法選択(複数お届け)*/
#fs_CheckoutWithMultiAddress .calendar{
	display: none !important;
}

#fs_CheckoutWithMultiAddress .h-contents-box{
	display: none !important;
}

/*マイページ関連*/

#fs_Login .calendar{
	display: none !important;
}

#fs_Login .h-contents-box{
	display: none !important;
}


#fs_MyOrders .calendar{
	display: none !important;
}


#fs_MyOrders .h-contents-box{
	display: none !important;
}


#fs_MyAccountSettings .calendar{
	display: none !important;
}

#fs_MyAccountSettings .h-contents-box{
	display: none !important;
}


#fs_EditAccountSettings .calendar{
	display: none !important;
}

#fs_EditAccountSettings .h-contents-box{
	display: none !important;
}

#fs_DeleteAccount .calendar{
	display: none !important;
}

#fs_DeleteAccount .h-contents-box{
	display: none !important;
}


#fs_Register .calendar{
	display: none !important;
}

#fs_Register .h-contents-box{
	display: none !important;
}


/*パスワード関連*/
#fs_PasswordReminder .calendar{
	display: none !important;
}

#fs_PasswordReminder .h-contents-box{
	display: none !important;
}


#fs_EditPassword .calendar{
	display: none !important;
}

#fs_EditPassword .h-contents-box{
	display: none !important;
}



/* --------------------------------------------------------------------------------
	top-media
-------------------------------------------------------------------------------- */
#top-media {
	margin: 0px 0 70px 0;
	padding-top: 25px;
}
#top-media .media-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 1em;
}
#top-media .media-list li {
	width: 32%;
}
#top-media .media-list img {
	width: 100%;
}
#top-media .media-list li p {
	font-size: 15px;
	text-align: center;
	letter-spacing: 0px;
}
#top-media .media-list li p span {
	font-size: 12px;
}