@charset "utf-8";

/*------------- settings ----------------*/


* {
  box-sizing:border-box;
}

a {
  transition: .5s;
}

a:hover {
  transition: .5s;
  opacity:1;
}


img {
  max-width: 100%;
}



.showPC {
  display: block;
}

.showSP {
  display: none;
}

@media (max-width: 767.98px) {

  .showPC {
    display: none;
  }

  .showSP {
    display: block;
  }

}



/*----------------------------------------*/



body {
  width: 100%;
  height: 100%;
  font-size: 13px;
  word-break: break-word;
  letter-spacing: 0;
  line-height:2;
  padding: 0;
  margin: 0;
  background-color: #f9dbdb;
  color: #5a1027;
  font-family: 'Zen Kaku Gothic New', 'Poppins', sans-serif;
}



.loader-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#headerWrap {
  position:fixed;
  z-index:1000;
  width:100%;
}


.headernews--xmas2023 {
  width:100%;
  background: #ff6816;
  text-align: center;
  line-height:0;
}

header {
  position: static;
  background: none;
  line-height:0 !important; 
  height:2.8rem;
  padding:10px 0;
  margin:0 0 0 0;
}


.logo {
  margin:0 auto;
}




/* -------------------------------------

    common parts

------------------------------------- */


.heading__primary--green {
  background: url(img/ico_arrow_green.png) center top no-repeat;
}

.heading__primary--orange {
  background: url(img/ico_arrow_orange.png) center top no-repeat;
}

.heading__primary {
  padding-top: 3.2rem;
  line-height: 1.6;
  text-align: center;
  font-size: .8rem;
  margin-bottom: 2.4rem;
}

.heading__primary span {
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
  display: block;
  font-size: 2rem;
}


/* btn */

.btn--primary {
  margin-top: 2.4rem;
}

.btn--primary a {
  font-weight: bold;
  border-radius: 100px 100px;
  /*  background: #fff;*/
  text-align: center;
  color: #5a1027;
  border: 1px solid #5a1027;
  display: inline-block;
  padding: .4rem 2.4rem;
}


.btn--primary a:hover {
  opacity: 1;
  border: 1px solid #fff;
  background: #5a1027;
  color: #fff;
  transition: .5s;
}

.ico-caret-cicle-right {
  margin-right: .2rem;
  display: inline-block;
  vertical-align: middle;
  color: #5a1027;
  line-height: 1.2;
  position: relative;
  width: .8rem;
  height: .8rem;
  margin-bottom: .1rem;
  background: currentColor;
  border-radius: 50%;
  box-sizing: content-box;
}

.ico-caret-cicle-right::before {
  content: '';
  color: #fff;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.2rem 0.3rem;
  border-left-color: currentColor;
  border-right: 0;
  transform: translateX(15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}




.btn--primary a:hover .ico-caret-cicle-right::before {
  color: #5a1027;
}

.btn--primary a:hover .ico-caret-cicle-right {
  background: #fff;

}

.present-section {
  padding-top:12rem;
}



.present-section .splide__arrow--prev {
  left: 1em;
}


.present-section .splide__arrow--next {
  right: 1em;
}


.present-section .splide__arrow {
  -ms-flex-align: center;
  opacity: .7;
  align-items: center;
  background: #3d151c;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2.4rem;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: calc(50% + 6rem);
  transform: translateY(-50%);
  width: 2.4rem;
  z-index: 1;
}

.present-section .splide__arrow svg {
  fill: #fff;
  height: 1em;
  width: 1em;
}




/* -------------------------------------

    container

------------------------------------- */

#container {
  width: 100%;
}

/* main visual */

.firstview-section {
  padding-top: 40px;
  margin-bottom:8rem;
}

.main__wrap {
  position: relative;
  width:80%;
  max-width:640px;
  margin:0 auto 0;
}


.main__copy { /* Winter Holiday 2023 */
  position:absolute;
  left: 0;
  top:40px;
  font-family: 'Frank Ruhl Libre', serif;  
  font-size:2rem;
}


.main__text {
  width: 70%;
  max-width: 640px;
  margin: 4rem auto 8rem;
}

.main__text p {
  font-size: 1rem;
  margin: .8rem 0;
}

.main__title { 
  position:absolute;
  right:-36px;
  top:36%
}


.main__title h1 { /* アランチェートのプレゼント交換会 */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; 
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .2rem;
}


.main__title--pict {
  padding-left:2rem;
  position:absolute;
  text-align: center;
  padding-top:15%;
}


.main__title--pict img {
  width:80%;
}

.main__title--suffix { 
  position:absolute;
  width:100%; 
  left:0;
  top:30%;
  text-align: center;
  transform-origin: left top;
  transform: rotate(90deg);
}



.main__title--suffix p { /* CHRISTMAS GIFT EXCHANGE */
  font-family: 'Poppins', serif;
  color: #5a0e1b;
  font-size: .8rem;
  letter-spacing: .1rem;
}

.icolist {
  position:relative;
}


.icolist li {
  position: absolute;
  right: 0;
  bottom: 0;
}



@media (max-width: 767.98px) {



.main__copy {  /* Winter Holiday 2023 */
  position:absolute;
  width:100%;
  top:2.4rem;
  text-align: center;
  font-family: 'Frank Ruhl Libre', serif;  
  font-size:1.6rem;
}

.main__title {
      left: -57px;
    right: 0;
    top: 74%;
}




.main__title h1 { /* アランチェートのプレゼント交換会 */
  text-align: center;
  -ms-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb; 
  font-size: 1rem;
}





.main__text {
  width: 86%;
  margin-top:2rem;
  margin-left: auto;
  margin-right: auto;
}





.main__title--suffix {
  display:none;
}





.main__title--pict {
  padding-left:1rem;
  padding-top:12%;
}


.main__wrap--outer {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

.main__wrap--inner {
  width: 80%;
  max-width: 640px;
}




}



/* 参加スタッフ  */

.staff-section {
  width: 86%;
  max-width: 1216px;
  margin: 0 auto;
}

.splide-track {
  width: 90%;
  overflow: visible;
}

.staff-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-row-gap: 1.6rem;
  grid-column-gap: 1.6rem;
}


.staff-card a {
  color: #5a0e1b;
}

.staff-card {
  padding: .8rem;
}

.staff-card__pict {
  text-align: center;
  line-height: 1;
}

.staff-card__pict img {
  width: 40%;
  min-width: 80px;
  border-radius: 50%;
}

.staff-card__name {
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.staff-card__name span {
  font-size: .8rem;
  line-height: 1;
}

.staff-card__profile p {
  line-height: 1.8;
}


@media (min-width: 767.98px) and (max-width: 1023px) {

  .staff-group {
    width:86%;
    margin-left:auto;
    margin-right:auto;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
  }

}



@media (max-width: 767.98px) {

  .firstview-section {
    padding-top: 24px;
  }


  .staff-section {
    width: 86%;
    margin: 0 auto;
  }


  .staff-card {
    padding: 0;
  }


  .staff-group {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
  }



}




/* gift */


.present-card {
  position: relative;
  font-family: 'Poppins', sans-serif;
/*  min-height: 640px;*/
  width: 100%;
  min-width: 400px;
}

.present-heading__wrap {
  position: absolute;
  width: calc(100% - 3.2rem);
}


.present-heading__wrap--from {
  left: 1.6rem;
  top: 1.6rem;
}

.present-heading__wrap--to {
  right: 1.6rem;
  bottom: 1.6rem;
}


.present-card a .present-card__pict {
  transition: .5s all;
}


.present-card a:hover .present-card__pict {
  transform: scale(1.1, 1.1);
  transition: .5s all;
}




.present-heading {
  display: grid;
  grid-column-gap: .8rem;
  grid-template-columns: auto 100%;
  align-items: center;
  justify-items: start;
  text-transform: uppercase;
  text-align: left;
}

.present-heading__wrap--to .present-heading {
  direction: rtl;
}

.present-heading__wrap--to .present-heading__name {
  text-align: right;
}



.present-heading__name span {
  display: block;
  font-weight: 900;
  font-size: .8rem;
}

.present-heading__name {
  color: #5a1027;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  font-size: 1.6rem;
}

.present-heading__wrap--from .present-heading__name span {
  color: #f34219;
}

.present-heading__wrap--to .present-heading__name span {
  color: #005552;
}

.--green .present-heading__name,
.--green .present-heading__name span {
  color: #fff;
}

.--orange .present-heading__name,
.--orange .present-heading__name span {
  color: #5a1027;
}


.present-heading__pict img {
  width: 16%;
  min-width: 56px;
  border-radius: 50%;
}

.present-card__meta {
  width: 100%;
  text-align: center;
  transform-origin: center;
  position: absolute;
  top: 50%;
  bottom: 50%;
  line-height: 0;
  letter-spacing: .15rem;
  color: #fff;
  font-weight: normal;
}

.present-card__productNum {
  right: 42%;
  transform: rotate(90deg);
}

.present-card__productBrand {
  left: 42%;
  transform: rotate(90deg);
}



.--orange {
  background-color: #f34219;
}

.--green {
  background-color: #005552;
}

.--gold {
  background-color: #a99151;
}

.--pink {
  background-color: #f88f8d;
}




/* -------------------------------------

    second

------------------------------------- */


section.content {
  width: 90%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}



.present-section--frist {
  margin-bottom: 3.2rem;
  width: 90%;
  max-width: 640px;
/*  text-align: center;*/
  margin-left: auto;
  margin-right: auto;
}


.present-section--frist img {
  width:80%;
}








.present-card--first {
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  position: relative;
  line-height:0; 
}




/* presentdetail */
.item-section {
  margin-bottom: 8rem;
}



.item {
  margin: 0 0 4rem 0;
}


.item-tag {
  display: inline-block;
  /*  border:1px solid #f34219;*/
  background: #fff;
  line-heigh: 1;
  padding: 0 .8rem 0;
  margin-bottom: 1.6rem;
  border-radius: .8rem;
  font-size: .8rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #f34219;
}

.item-heading {
  margin-bottom: 1.6rem;
}

.item-heading__brandname {
  margin-bottom: 1.4rem;
  line-height: 1.4;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}


.item-heading__brandname span {
  font-size: .8rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  display: block;
}


.item-heading__name {
  line-height: 1.4;
  font-size: 1.5rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight:bold;
}


.comment-heading {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-column-gap: .8rem;
  justify-items: start;
  align-items: end;
}


.item-detail {
  font-size: 1rem;
}


.comment-section {
  margin-bottom: 8rem;
}

.comment {
  margin-bottom: 4rem;
}


.comment-heading__pict {
  /*  width:20%;*/
  min-width: 80px;
  max-width: 100px;
}

.comment-heading__pict img {
  border-radius: 50%;
}

.comment-heading__name {
  padding-bottom: .8rem;
  text-transform: uppercase;
}


.comment-heading__name h3 {
  line-height: 1.2;
  font-size: 1.4rem;
  font-family: 'Poppins', sans-serif;
}

.comment-heading__name p {
  margin-left: -.4rem;
}


.comment-from .comment-heading__name h3 span {
  padding-right: .8rem;
  font-weight: 800;
  color: #f34219;
}

.comment-to .comment-heading__name h3 span {
  padding-right: .8rem;
  font-weight: 800;
  color: #005552;
}

.comment-txt {
  font-size: 1rem;
}

.comment-txt p {
  font-size: 1rem;
  margin: .8rem 0;
}


.comment-txt p.comment-txt__maincopy {
  font-weight: bold;
  font-size: 1.1rem;
}

/* -------------------------------------

    recommend

------------------------------------- */

.recommended-item__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: .8rem;
  grid-row-gap: .8rem;
}



.recommended-item__list li {
  line-height: 1;
  width: 100%;
}

.recommended-item__item a {
  display: block;
  overflow: hidden;
  margin-bottom: .4rem;
}


.recommended-item__item h3 {
  font-family: 'Poppins', sans-serif;
}

.recommended-item__item a img {
  transition: .5s all;
  height: auto;
}


.recommended-item__item a:hover img {
  transform: scale(1.1, 1.1);
  transition: .5s all;
}






/*-------------------- スマホ --------------------*/

@media (min-width: 767.98px) and (max-width: 1023px) {

  .item-heading__name {
    font-size: 1.3rem;
  }


  .present-section--frist {
    width: 100%;
    margin: 0 auto 2.4rem;
  }


  .present-section--frist img {
    width:90%;
  }



}


@media (max-width: 767.98px) {


  .present-card {
    min-height: 100%;
    width: 100%;
    min-width: 100%;
  }


  .present-section--frist {
    width: 100%;
    margin: 0 auto 2.4rem;
  }


  .present-card--first {
    font-family: 'Poppins', sans-serif;
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }


  .recommended-item__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: .8rem;
    grid-row-gap: .8rem;
  }

  .comment-heading__name h3 span {
    display: block;
  }


.present-section--frist img {
  width:90%;
}


}




/* -------------------------------------

    stickyBnr

------------------------------------- */

.stickyBnr {
  z-index: 100;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  line-height: 0;
  opacity:0;
  width:300px;
}

.stickyBnr--inner {
  position: relative;
  box-shadow: 0 0 7px rgb(0 0 0 / 20%);
  border-radius: .4rem;
  border: 1px solid #ddd;
  background: #f9dbdb;
}


.stickyBnr--inner img {
  max-width:auto;
  border-radius: .4rem;
  transition: .5s;
}


.stickyBnr--inner img:hover {
  opacity: .8;
  transition: .5s;
}


.stickyBnr--close {
  z-index: 101;
  background: #fff;
  display: block;
  position: absolute;
  color: #000;
  border: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50% 50%;
  right: -1rem;
  top: -1rem;
  cursor: pointer;
}


.stickyBnr--close i {
  color:#3d151c;
  }


@media (max-width: 767.98px) {




.stickyBnr {
  width:100%;
  max-width:50%;
}


.stickyBnr--inner img {
  
  max-width:auto;
  height:auto;
}



.stickyBnr--close {
  font-size: .8rem;
  background: #fff;
  display: block;
  position: absolute;
  color: #000;
  border: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50% 50%;
  right: -1rem;
  top: -1rem;
}



}



/* -------------------------------------

    footer

------------------------------------- */

.return {
  text-align: center;
}



footer {
  margin-top: 0;
  background: #3d151c;
  color: #fff;
}

.footer__linkList li a,
.footer__snsList li a {
  color: #fff;
}

/* -------------------------------------

    pagetop

------------------------------------- */
#pagetop--fixed2 {
  width:100%;
  text-align: center;
  background:#5a0e1b;
  transition:.5s;
  padding:.8rem;
}

#pagetop--fixed2:hover {
  opacity:.9;
  transition:.5s;
}

#pagetop--fixed2 a {
  font-family: 'Poppins', sans-serif;
  width:100%;
  padding:.8rem;
  color:#fff;
}


#pagetop--fixed2 .ico-caret-cicle-right {
  transform:rotate(-90deg);
  color: #fff;
}


#pagetop--fixed2 .ico-caret-cicle-right::before {
  color: #5a0e1b;
}