@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

.section-p10,
.section-10 {
  padding: 5px 0;
}
.section-p20,
.section-20 {
  padding: 10px 0;
}
.section-p30,
.section-30 {
  padding: 15px 0;
}
.section-p40,
.section-40 {
  padding: 20px 0;
}
.section-w900 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.box_bg_yellow {
  background: rgba(248, 246, 179, .7);
}
.section-border-black1 {
  border: 1px solid #333;
}
.section-border-gray10 {
  border: 10px solid #ccc;
}

.border-radius5 {
  border-radius: 5px;
}
.border-radius10 {
  border-radius: 10px;
}
.border-radius15 {
  border-radius: 15px;
}

a.border-radius5,
a.border-radius10,
a.border-radius15 {
  display: block;
}

.hr-black1px {
  border: none;
  border-bottom: 1px solid #333;
}
.hr-gray1px {
  border: none;
  border-bottom: 1px solid #999;
}


@media print, screen and (min-width: 768px){
  .section-p10,
  .section-10 {
    padding: 10px 0;
  }
  .section-p20,
  .section-20 {
    padding: 20px 0;
  }
  .section-p30,
  .section-30 {
    padding: 30px 0;
  }
  .section-p40,
  .section-40 {
    padding: 40px 0;
  }
}

@media print, screen and (min-width: 992px){
  .section-w900 {
    width: 900px;
  }
  .col-lg-4 {
    flex: 0 0 calc(33.333333% - 30px);
    max-width: calc(33.333333% - 30px);
    line-height: 1.3;
  }
}

.nvgrid {
  display: flex;
  flex-wrap: wrap;
}
.nvgrid.justify-content-between {
  justify-content: space-between;
}
.innr {
  margin: 0 10px;
}
@media (min-width: 1341px) {
  .innr {
    width: 1340px;
    margin: 0 auto;
  }
}
@media (min-width: 992px) {
  .nvgrid main.pane-main {
    flex: 0 0 calc(75% - 30px);
    max-width: calc(75% - 30px);
  }
  .nvgrid .col-lg-2 {
    flex: 0 0 calc(16.666667% - 30px);
    max-width: calc(16.666667% - 30px);
  }
}
@media (min-width: 768px) {
  .nvgrid {
    margin: 0 -15px;
  }
  .nvgrid > [class*="col-"] {
    margin: 0 15px 30px;
  }
}
.pane-topic-path {
  width: 1340px;
  max-width: unset;
  padding: 0;
}

/*--------------------------------------------------------------------*/
/* Keitoノート */
/*--------------------------------------------------------------------*/

/*clearfix*/
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

* {
	margin: 0;
	padding: 0;
}
img,video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.ie8 img{
  width: 100%;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	line-height: 1.3;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
em {
	font-style: normal;
}
.brand-keito small,
.brand-keito .small {
  font-size: 85%;
}


/* 新タウン追記
--------------------------------------------------------------------*/
.pane-main {
}
/*.block-globalnav,*/
.block-category-globalnav,
.block-category-list--header,
.block-category-list--comment,
.block-category-list--goods {
	display: none;
}
.wrapper {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.pane-main .container {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.freespace {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/*layout
--------------------------------------------------------------------*/

#article {
  padding: 30px 0;
}

@media print, screen and (min-width: 768px) {
  #article {
  }
}


/* Index
--------------------------------------------------------------------*/
.article-list {
	
}
.article-list li .article-thumb {
	margin-bottom: 10px;
}
.article-list li .article-date {
	font-size: .875em;
	margin: 0 0 .5em;
  padding: 0;
}
.article-list li .article-series {
	color: var(--color-main);
	font-size: 1em;
	font-weight: bold;
	margin: 0 0 .5em;
  padding: 0;
}
.article-list li .article-series .cate-icon {
  display: inline-block;
  margin-right: .75em;
}


/* article
--------------------------------------------------------------------*/
.article-header {
	border-bottom: 1px solid #999;
	margin-bottom: 30px;
	padding-bottom: 30px;
}
.article-header .article-date {
	font-size: .875em;
	margin: 0 0 .75em;
  padding: 0;
}
.article-header .article-series {
	color: #587026;
	font-size: 1.25em;
	font-weight: bold;
	margin: 0 0 .5em;
  padding: 0;
}
.article-header .article-series-caption {
	font-size: .875em;
	margin: 0 0 1em;
  padding: 0;
}
.article-header .article-author {
	text-align: right;
  padding: 0;
}

.article-body {
	
}
.article-body .article-text {
	line-height: 2.25;
	margin-bottom: 1.25em;
}

.article-body h4 {
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: 1em;
}
.article-body .section-header {
	font-size: 1.75em;
}

.article-items li {
	background: #fff;
}
.article-items li a {
	display: block;
	padding: 15px;
	text-decoration: none;
}
.article-items li a .item-photo {
	margin-bottom: 10px;
}
.article-items li a .item-name {
	line-height: 1.3;
}

.article-photo {
  
}
.article-photo img {
}
.article-photo figcaption {
  font-size: .9em;
  line-height: 1.3;
  padding-top: .5em;
}

@media print, screen and (min-width: 768px) {
  .article-photo figcaption {
    text-align: center;
  }
}

.article-talk dl {
  
}
.article-talk dl dt {
  font-weight: normal;
  line-height: 1.2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5em;
}
.article-talk dl dt::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin-right: 0.5em;
  background-size: contain;
}
.article-talk dl dd {
  text-align: justify;
  align-self: center;
  width: auto;
  margin-bottom: 1em;
  padding: 0;
  white-space: normal;
}

@media print, screen and (min-width: 768px) {
  .article-talk dl {
    display: flex;
    flex-wrap: wrap;
  }
  .article-talk dl dt {
    font-weight: bold;
    text-align: center;
    flex-direction: column;
    width: calc(60px + 2em);
    margin-bottom: 1em;
    padding-right: 2em;
  }
  .article-talk dl dt::before {
    width: 60px;
    height: 60px;
    margin-right: 0;
  }
  .article-talk dl dd {
    text-align: left;
    width: calc(100% - calc(60px + 2em));
  }
  .article-talk dl dd + dd {
    padding-left: calc(60px + 2em);
  }
}

.article-talk dl dt.person_usanko {
  color: #0f5d35;
}
.article-talk dl dt.person_usanko::before {
  background-image: url("/img/usr/articles/icon_person_usanko.png");
}
.article-talk dl dd.talk_usanko {
  color: #0f5d35;
}
.article-talk dl dt.person_ranko {
  color: #2c1d98;
}
.article-talk dl dt.person_ranko::before {
  background-image: url("/img/usr/articles/icon_person_ranko.png");
}
.article-talk dl dd.talk_ranko {
  color: #2c1d98;
}
.article-talk dl dt.person_kawajiri {
  color: #0f5d35;
}
.article-talk dl dt.person_kawajiri::before {
  background-image: url("/img/usr/articles/icon_person_kawajiri.png");
}
.article-talk dl dd.talk_kawajiri {
  color: #0f5d35;
}
.article-talk dl dt.person_kawagoe {
  color: #2c1d98;
}
.article-talk dl dt.person_kawagoe::before {
  background-image: url("/img/usr/articles/icon_person_kawagoe.png");
}
.article-talk dl dd.talk_kawagoe {
  color: #2c1d98;
}
.article-talk dl dt.person_kawajirikawagoe::before {
  background-image: url("/img/usr/articles/icon_person_kawajirikawagoe.png");
}

.article-profile {
  background: #fefbd6;
}
.article-profile p,
.article-profile ul {
  margin-bottom: .75em;
}
.article-profile .profile-header {
  font-size: 1.125em;
  font-weight: bold;
  margin: 1em 0 .5em;
}
.article-profile .profile-name {
  font-size: 1.25em;
  font-weight: bold;
}
.article-profile .profile-link {
  font-size: .875em;
}
.link-instagram::before {
	content: "\f16d";
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	margin-right: .3em;
}
.link-twitter::before {
	content: "\f099";
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	margin-right: .3em;
}
.link-x::before {
	content: "\e61b";
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	margin-right: .3em;
}
.link-facebook::before {
	content: "\f09a";
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	margin-right: .3em;
}
.link-youtube::before {
	content: "\f167";
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	margin-right: .3em;
}
.link-website::before {
	content: "\f0ac";
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	margin-right: .3em;
}

.article-content-nav {
  border-top: 1px solid #999;
  margin-top: 30px;
  padding-top: 30px;
}
.article-content-nav .content-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: .75em;
  text-align: center;
}
.article-content-nav .content-nav {
  position: relative;
  width: 100%;
  height: 50px;
}
.article-content-nav .content-nav li {
  position: absolute;
}
.article-content-nav .content-nav .nav-prev {
  top: 0;
  left: 0;
  width: 48%;
}
.article-content-nav .content-nav .nav-prev a::before {
	content: "\f053";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5em;
}
.article-content-nav .content-nav .nav-next {
  top: 0;
  right: 0;
  width: 48%;
}
.article-content-nav .content-nav .nav-next a::after {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: .5em;
}
.article-content-nav .content-nav li a {
  display: block;
  line-height: 50px;
  background: #666;
  color: #fff;
  font-size: 1.125em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}
.article-content-nav .content-nav li a:hover {
  background: rgba(237, 117, 133, 1);
}

/* tag
--------------------------------------------------------------------*/
.article-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.article-tag .tag-link {
    background-color: var(--color-main);
    color: white;
    display: inline-block;
    padding: 3px 15px;
    border-radius: 100em;
  font-weight: 500;
}


/* Side
--------------------------------------------------------------------*/

.article-sidenav h3 {
  font-size: 1.25em;
  font-weight: bold;
}
.article-sidenav li a {
  display: block;
	text-decoration: none;
}
.article-sidenav li .article-thumb {
	margin-bottom: 10px;
}
.article-sidenav li .article-date {
	font-size: .875em;
	margin-bottom: .25em;
}
.article-sidenav li .article-series {
	color: var(--color-main);
	font-size: .875em;
	font-weight: bold;
	margin: 0 0 .25em;
  padding: 0;
}
.article-sidenav li .article-title {
	font-size: .9em;
	font-weight: bold;
  margin: 0;
  padding: 0;
}


@media print, screen and (min-width: 992px) {
  .article-sidenav li a {
    border-bottom: 1px solid #999;
    padding-bottom: 20px;
  }
}

/*Article
--------------------------------------------------------------------*/
.article-list .article-title {
  display: block;
  /* line-height: 1.2; */
  padding-top: .75em;
  margin: .75em 0;
  font-size: 16px;
}

/* Nav
--------------------------------------------------------------------*/
.genre-nav-wrap {
	margin: 40px 0;
}.fixed-search-close-btn {
    width: 30px;
    aspect-ratio: 1;
    position: absolute;
    top: -35px;
    right: 0;
    outline: 0;
    border: 0;
    background: transparent;
}
.fixed-search-close-btn::before , .fixed-search-close-btn::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 2px;
    background: white;
}
.fixed-search-close-btn::before {
    transform: rotate(45deg);
}
.fixed-search-close-btn::after {
    transform: rotate(-45deg);
}
.nav-search-contents-wrap .nav-search-inner {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: #707070;
}
.nav-search-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.search-keyword-wrap {
    position: relative;
    display: inline-block;
  line-height: 0;
}
.search-keyword-wrap .search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 36px;
    border: 0;
    background: transparent url(../img/common/icon-search02.png) no-repeat center / 23px;
    cursor: pointer;
    font-size: 0;
}
.nav-search-content .title {
    font-weight: bold;
    font-size: 1.3em;
    flex: 1;
    color: #707070;
}
.nav-search-content input[type="text"] {
  width: 100%;
  padding: 6px 4px 6px 40px;
}
.nav-search-contents-wrap .nav-search-inner > * + *,
.nav-search-contents-wrap .nav-search-inner + .submit-btn {
  border-top: 1px solid #E3E3E3;
  margin-top: 20px;
  padding-top: 20px;
}
.nav-search-contents-wrap .submit-btn .btn {
    appearance: none;
    border: 0;
    display: block;
    width: 100%;
    background-color: #E5E5E5;
    padding: 11px 20px;
    border-radius: 0.5em;
    margin: auto;
    color: black;
}
.fixed-search-btn { display: none; }

#article .article-sub-title {
    border-bottom: 1px solid #999;
    margin-bottom: 30px;
    padding-bottom: 10px;
    font-size: 1.75em;
    font-weight: bold;
    text-align: justify;
}
/* ----------------------------------------
    ajax商品一覧
---------------------------------------- */
.article-item-lists .item-list-wrap {
    background: var(--common-gray-color);
    padding: 2em;
}
.article-item-lists .item-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.article-item-lists .item {
    background-color: white;
}
.article-item-lists .item .item-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.article-item-lists .item:not(:first-child:last-child) {
    padding: 1em;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 20px;
}
.article-item-lists .item:first-child:last-child {
    display: flex;
    gap: 20px;
    background-color: white;
    padding: 2em;
}
.article-item-lists .item:first-child:last-child .img-block-wrap {
    width: 50%;
}
.article-item-lists .item:first-child:last-child .item-detail {
    width: 50%;
}
.article-item-lists .article-detail-btn {
    /* margin-top: auto; */
}
.article-detail-btn .block-add-cart--btn {
    width: 100%;
    font-size: 16px;
}
.article-item-lists .img-block {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.article-item-lists .img-block img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: auto;
}
.article-item-lists .item .item-detail .name {
    font-weight: bold;
    font-size: 16px;
}
.article-item-lists .item:first-child:last-child .name {
    font-size: 20px;
}
.article-item-lists .item .item-detail .price {
    text-align: right;
    font-size: 20px;
    margin-top: auto;
}
.article-item-lists .item .item-detail .comment {
    font-size: 16px;
}
.article-detail-btn + .link-btn-wrap {
    margin-top: 10px;
}
.article-detail-btn + .link-btn-wrap .link-btn {
    max-width: none;
    font-size: 16px;
}

@media screen and (max-width: 800px) {
  .pane-topic-path {
    width: 100%;
  }
  body.brand-keito-note-list .pane-topic-path .innr {
    margin: 0;
  }
  body.brand-keito-note-list .block-topic-path {
    padding-inline: 10px;
  }
  #article {
    font-size: 14px;
  }
  #article h1 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 15px;
  }
  .article-list .article-title {
    padding: 0;
    font-weight: bold;
  }
  .article-list .nvgrid > li:not(:last-child) {
    margin: 0 0 15px;
  }
  .fixed-search-btn {
    appearance: none;
    outline: 0;
    border: 0;
    position: fixed;
    bottom: 20px;
    right: 10px;
    background: #F0F0F0;
    aspect-ratio: 1;
    padding: 1em;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 100;
    transition: .3s;
    color: black;
    font-size: 14px;
    font-weight: 500;
  }
  .fixed-search-btn:before {
    content: "";
    width: 30px;
    aspect-ratio: 1;
    background: url(../img/common/icon-search02.png) no-repeat center / 23px;
  }
  .nav-search-contents-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1000;
    background: rgb(0 0 0 / 34%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
  }
  .nav-search-contents-wrap.active {
    opacity: 1;
    visibility: visible;
  }
  .nav-search-contents-wrap .nav-search {
    background-color: white;
    padding: 1.1em 2em;
    width: 90%;
    border-radius: 0.5em;
    position: relative;
  }
  .fixed-search-close-btn {
    width: 30px;
    aspect-ratio: 1;
    position: absolute;
    top: -35px;
    right: 0;
    outline: 0;
    border: 0;
    background: transparent;
  }
  .fixed-search-close-btn::before , .fixed-search-close-btn::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 2px;
    background: white;
  }
  .fixed-search-close-btn::before {
    transform: rotate(45deg);
  }
  .fixed-search-close-btn::after {
    transform: rotate(-45deg);
  }
  .nav-search-contents-wrap .nav-search-inner {
    overflow: auto;
    max-height: 50vh;
    padding-bottom: 10px;
  }
   .nav-search-content {
     font-size: 14px;
  }
   .nav-search-content .title {
    font-size: 18px;
  }
   .nav-search-contents-wrap .submit-btn .btn {
    max-width: 150px;
  }
  
  .brand-keito-note-detail .article-title {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
  }
  .brand-keito-note-detail .article-body .article-text:last-child {
    margin: 0;
  }
  .brand-keito-note-detail .article-detail-contents h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0 15px;
  }
  .container:has(.article-sidenav) {
    margin: 0 0 50px;
  }
  .article-sidenav h3 {
    margin-top: 0;
  }
  .article-sidenav .nvgrid {
    gap: 30px 15px;
  }
  .article-sidenav .nvgrid > li {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
    font-size: 14px;
  }
  .article-sidenav li .article-series,
  .article-sidenav li .article-title {
    font-size: 14px;
  }
  .article-item-lists .article-sub-title {
    margin: 0 0 20px;
  }
  .article-item-lists .item-list-wrap {
    padding: 1.5em 0.8em;
  }
  .article-item-lists .item:first-child:last-child {
    flex-direction: column;
  }
  .article-item-lists .item:first-child:last-child .img-block-wrap,
  .article-item-lists .item:first-child:last-child .item-detail {
    width: auto;
  }
}