@charset "UTF-8";

/* =============================================================
    Base
============================================================= */
:root {
  /* color site */
  --color-main: #484848;
  --color-primary: #E60012;
  --color-warning: #E60012;
  --color-danger: #E60012;
  --color-light: #FFF8F4;
  --color-dark: #FAFAFA;
  --color-black: #484848;
  /* color gray */
  --color-gray: #FFF8F4;
  --color-gray-dark: #D8D8D8;
  --color-gray-middle: #7B7B7B;
  
  /* font */
  --font-ja: "Montserrat", "Zen Kaku Gothic New", sans-serif;
  --font-en: "Montserrat", "Zen Kaku Gothic New", sans-serif;
}


@media screen and (min-width: 768px) {
  :root {
    --container-default: 120rem;
  }
}



body {
  font-family: var(--font-ja);
  word-break: break-all;
}

@media (hover: hover) {
  a{
    transition: opacity var(--transition-default);
  }
  a:hover{
    opacity: .6;
  }
}



@media screen and (max-width: 767px) {
  .l-container-wrap{
    display: block;
  }
  .l-container-wrap__body{
    padding-top: 0.7rem;
  }
}



.m-toast{
  z-index: 10000;
}

/* =============================================================
    btn
============================================================= */
.c-btn-progress{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 3rem 1rem 3rem;
  width: 100%;
  min-height: 6.6rem;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0.4rem 1.4rem 0.4rem 1.4rem;
  color: var(--color-white) !important;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.07em;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-default),color var(--transition-default),border var(--transition-default);
}


.c-btn-progress > span{
  display: block;
  width: 100%;
  color: #FFFFFF;
}

.c-btn-progress::after{
  content: '';
  display: block;
  height: 1rem;
  width: 1rem;
  mask-image: url("../img/common/custom/icon_next_white.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/common/custom/icon_next_white.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: #FFFFFF;
  position: absolute;
  right: 3rem;
  top: calc(50% - 0.5rem);
  z-index: 1;
  transition: background var(--transition-default);
}

@media (hover: hover) {
  .c-btn-progress:hover {
    opacity: 1;
    background-color: #FFFFFF;
    color: var(--color-primary)!important;
  }
  .c-btn-progress:hover::after {
    background-color: var(--color-primary);
  }
  .c-btn-progress:hover > span{
    color: var(--color-primary);
  }
}


.c-btn-progress.c-btn-progress--border{
  border-color: var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}

.c-btn-progress.c-btn-progress--border > span{
  color: var(--color-primary);
}

.c-btn-progress.c-btn-progress--border::after{
  background: var(--color-primary);
}

.c-btn-progress.c-btn-progress--white{
  border-color: var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}

.c-btn-progress.c-btn-progress--white > span{
  color: var(--color-primary);
}

.c-btn-progress.c-btn-progress--white::after{
  background: var(--color-primary);
}

 

@media (hover: hover) {
  .c-btn-progress.c-btn-progress--border:hover,
  .c-btn-progress.c-btn-progress--white:hover{
    opacity: 1;
    background-color: #F3EEE7;
    border-color: #F3EEE7;
    color: var(--color-primary)!important;
  }
}

.c-btn-progress:disabled{
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white)!important;
  pointer-events: none;
  opacity: .6;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}


/* =============================================================
    linkBtn
============================================================= */
a.linkBtn{
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 1rem;
  min-height: 2.4rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.428571428571429;
  color: #E60012;
  position: relative;
  
  background-image: radial-gradient(circle at right calc(2.4rem / 2) top 50%, #E50013 calc(2.4rem / 2 - 1px), transparent calc(2.4rem / 2));
}

a.linkBtn::after{
  content: '';
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("../img/common/custom/icon_next_white.svg") center center no-repeat;
  background-size: 0.64rem auto;
  transition: transform var(--transition-default);
}


a.linkBtn[target = "_blank"]{}

a.linkBtn[target = "_blank"]::before{
  content: '';
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background: url("../img/common/custom/icon_blank.svg") center center no-repeat;
  background-size: 100% auto;
}


@media (hover: hover) {
  a.linkBtn:hover{opacity: 1;}
  a.linkBtn:hover::after{transform: translate(1px,-1px);}
}


/* =============================================================
    m-breadcrumb
============================================================= */
@media screen and (min-width: 768px) {
  .l-container:has(> .m-breadcrumb){
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .m-breadcrumb{
    margin-top: 1rem;
  }
}


/* =============================================================
modalBox
============================================================= */
.m-modalBox{
  z-index: 10000;
  background: rgba(0,0,0,.6);
}

.m-modalBox__outer{
  width: 100%;
  max-width: 90rem;
  background: #FFF8F4;
}

.m-modalBoxHeding{
  background-color: inherit;
  padding: 3rem 0 2rem;
}

.m-modalBoxHeding__title{
  padding: 0;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  line-height: 1.461538461538462;
}


.m-modalBoxHeding__closeBtn{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  position: absolute;
  right: 1rem;
  top: 1.2rem;
}

.m-modalBoxHeding__closeBtn::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/common/custom/btn_modal_close.svg") center center no-repeat;
  background-size: 100% auto;
  
  margin-right: 0;
  padding: 0;
  transform: rotate(0);
}

.m-modalBoxHeding__closeBtn > span{display: none;}

@media screen and (max-width: 767px) {
  .m-modalBox{
    padding: 1rem 1rem;
  }
  
  .m-modalBox__outer{
    min-height: 80svh;
    border-radius: none;
  }
}


/* =============================================================
    snsbtn
============================================================= */
ul.m-socialLogin__list > li.guestEntry{display: none;}
ul.m-socialLogin__list > li.newEntry{display: none;}

.c-btn-socialLogin.c-btn-socialLogin--home{
  background: var(--color-primary);
  color: #FFFFFF;
}
.c-btn-socialLogin.c-btn-socialLogin--guest{
  background: #787878;
  color: #FFFFFF;
}

.c-btn-socialLogin.c-btn-socialLogin--guest button{
  width: 100%;
  margin: 0;
  padding-right: 1rem;
  height: 5rem;
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  gap: 0 0;
}

@media (hover: hover) {
  .c-btn-socialLogin.c-btn-socialLogin--guest button:hover{
    opacity: .6;
  }
}

/* =============================================================
breadcrumb-list
============================================================= */
.c-breadcrumb-list{
  font-size: 1rem;
  line-height: 1;
  color: #787878;
}
.c-breadcrumb-item{}
.c-breadcrumb-item:not(:last-child):after {
    content: "";
    padding-right: 0.4rem;
    margin-left: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../../assets/img/common/custom/icon_arrow_breadcrumb.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
a.c-breadcrumb-item__link{
  margin-top: 0;
  color: #787878;
}

.c-breadcrumb-item:last-child{
  color: #484848;
}
.c-breadcrumb-item__current{
  margin-top: 0;
  color: #484848;
}


/* =============================================================
input
============================================================= */
input[type=text],
input[type=password],
input[type=tel],
input[type=email],
input[type=text],
input[type=number],
textarea{
  background-color: #FFFFFF;
}

.c-form-errorMsg{
  display: block;
  width: 100%;
  padding: 2rem 4rem;
  border: 1px solid #E60012;
  background: #FFFFFF;
  border-radius: 5px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.714285714285714;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-form-errorMsg{
    padding: 2rem 1.5rem;
    font-size: 1.4rem;
  }
}


/* =============================================================
search
============================================================= */
.c-freeWordSearchBox{
}

.c-freeWordSearchBox .poplink:not(.poplink_invisible){
  transform: translate(0,3.5rem);
}


.c-freeWordSearchBox .poplink{
  overflow-y: auto!important;
  max-height: 50dvh!important;
  max-width: 100%!important;
}

div.poplink > div.poplink_suggest{
    border: 1px solid #D8D8D8!important;
    color: #484848!important;
    background-color: #F3EEE7!important;
}

div.poplink > div.poplink_suggest > div.word {
  padding: 0.5rem 1rem!important;
  font-size: 1.1rem!important;
  font-weight: 500!important;
}

div.poplink > div.poplink_suggest > div.word:not(:nth-of-type(1)){
  border-top: 1px solid #D8D8D8;
}

div.poplink > div.poplink_search {
  border: none!important;
  color: #484848!important;
  background-color: #fff!important;
}

div.poplink > div.poplink_search > div.header{
  color: #484848!important;
  background-color: #FFFFFF!important;
  padding: 0.6rem 1rem!important;
  font-size: 1.2rem!important;
  font-weight: 500!important;
}

div.poplink > div.poplink_search > div.item{
  border-top:  1px solid #D8D8D8!important;
  padding: 0.6rem 1rem!important;
}


div.poplink > div.poplink_search > div.item a {
  display: flex!important;
  justify-content: space-between;
  align-items: center;
}

div.poplink > div.poplink_search > div.item a > div.item_left{
  float: none!important;
}


div.poplink > div.poplink_search > div.item a > div.item_left > div.image_box {
  display: block!important;
  width: 6rem!important;
  height: 6rem!important;
  overflow: hidden!important;
}

div.poplink > div.poplink_search > div.item a > div.item_left > div.image_box > img {
  display: block!important;
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
  max-width: none!important;
  max-height: none!important;
}


div.poplink > div.poplink_search > div.item a > div.item_right {
  margin-left: 1rem!important;
  overflow: hidden!important;
}



div.poplink > div.poplink_search > div.item a > div.item_right > div.title {
  font-size: 1.1rem!important;
  font-weight: 500!important;
  margin-bottom: 0.4rem!important;
  line-height: 1.454545454545455!important
  overflow: hidden!important;
  
  display: -webkit-box!important;
  text-overflow: ellipsis!important;
  -webkit-box-orient: vertical!important;
  -webkit-line-clamp: 2!important;
  white-space: inherit!important;
}

div.poplink > div.poplink_search > div.item a > div.item_right > div.summary {
  display: none;
}

div.poplink > div.poplink_search > div.item a > div.item_right > div.any1 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem!important;
  color: #787878!important;
  margin-bottom: 0.2rem!important;
}
div.poplink > div.poplink_search > div.item a > div.item_right > div.any2{
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem!important;
  color: #787878!important;
  margin-bottom: 0.2rem!important;
}

div.poplink > div.poplink_search > div.item a > div.item_right > div.any3 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  color: #484848!important;
  font-size: 1.1rem!important;
  margin-bottom: 0!important;
  font-weight: 700!important;
}


/**********/
div.poplink > div.poplink_recommend {
  border: none!important;
  color: #484848!important;
  background-color: #fff!important;
}

div.poplink > div.poplink_recommend.poplink_invisible{
  display: none!important;
}


div.poplink > div.poplink_recommend > div.header{
  color: #484848!important;
  background-color: #FFFFFF!important;
  padding: 0.6rem 1rem!important;
  font-size: 1.2rem!important;
  font-weight: 500!important;
}

div.poplink > div.poplink_recommend > div.item{
  border-top:  1px solid #D8D8D8!important;
  padding: 0.6rem 1rem!important;
}


div.poplink > div.poplink_recommend > div.item a {
  display: flex!important;
  justify-content: space-between;
  align-items: center;
}

div.poplink > div.poplink_recommend > div.item a > div.item_left{
  float: none!important;
}


div.poplink > div.poplink_recommend > div.item a > div.item_left > div.image_box {
  display: block!important;
  width: 6rem!important;
  height: 6rem!important;
  overflow: hidden!important;
}

div.poplink > div.poplink_recommend > div.item a > div.item_left > div.image_box > img {
  display: block!important;
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
  max-width: none!important;
  max-height: none!important;
}


div.poplink > div.poplink_recommend > div.item a > div.item_right {
  margin-left: 1rem!important;
  overflow: hidden!important;
}



div.poplink > div.poplink_recommend > div.item a > div.item_right > div.title {
  font-size: 1.1rem!important;
  font-weight: 500!important;
  margin-bottom: 0.4rem!important;
  line-height: 1.454545454545455!important
  overflow: hidden!important;
  
  display: -webkit-box!important;
  text-overflow: ellipsis!important;
  -webkit-box-orient: vertical!important;
  -webkit-line-clamp: 2!important;
  white-space: inherit!important;
}

div.poplink > div.poplink_recommend > div.item a > div.item_right > div.summary {
  display: none;
}

div.poplink > div.poplink_recommend > div.item a > div.item_right > div.any1 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem!important;
  color: #787878!important;
  margin-bottom: 0.2rem!important;
}
div.poplink > div.poplink_recommend > div.item a > div.item_right > div.any2{
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem!important;
  color: #787878!important;
  margin-bottom: 0.2rem!important;
}

div.poplink > div.poplink_recommend > div.item a > div.item_right > div.any3 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  color: #484848!important;
  font-size: 1.1rem!important;
  margin-bottom: 0!important;
  font-weight: 700!important;
}





/* =============================================================
categoryHeadHTML
============================================================= */
.categoryHeadHTML{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.categoryHeadHTML picture{
  display: block;
  width: 100%;
}

.categoryHeadHTML-caution{
  display: block;
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
}