@charset "utf-8";

/* site color ----------------- */
:root {
  --red: #d75674;
  --navy: #6478be;
  --skyblue: #54bbce;
  --blue: #209cce;
  --orange: #fa8c2d;
  --purple: #aa78c8;
  --gray: #8d8d8d;
  --green: #00a584;
  --yellow: #f9bb2c;
  --lightgreen: #8ac657;
  --pink: #eb87d2;
  --darkblue: #115bc1;
  --darkyellow: #ff9600;
  --baseblue: #1a5098;
}



/* figure menu ----------------- */
.figure-menu-list.navi-a { background-image: url(/html/user_data/assets/img/lp/msec-48th/categories_01.png); }
.figure-menu-list.navi-n { background-image: url(/html/user_data/assets/img/lp/msec-48th/categories_02.png); }
.figure-menu-list.navi-c { background-image: url(/html/user_data/assets/img/lp/msec-48th/categories_03.png); }

.figure-menu-list.navi-a:hover { background-image: url(/html/user_data/assets/img/lp/msec-48th/categories_01-hover.png); }
.figure-menu-list.navi-n:hover { background-image: url(/html/user_data/assets/img/lp/msec-48th/categories_02-hover.png); }
.figure-menu-list.navi-c:hover { background-image: url(/html/user_data/assets/img/lp/msec-48th/categories_03-hover.png); }
@media only screen and (max-width: 667px) {
.figure-menu-list.navi-a:hover,
.figure-menu-list.navi-n:hover,
.figure-menu-list.navi-c:hover { background-image: none; }
}



/* headline ----------------- */
.headline-underline-half-inner {
  text-decoration-color: var(--baseblue);
  color: var(--baseblue);
}
.color-darkblue .headline-underline-half-inner {
  text-decoration-color: var(--darkblue);
  color: var(--darkblue);
}

.headline-frame.color-red { background-color: var(--red); }
.headline-frame.color-navy { background-color: var(--navy); }
.headline-frame.color-skyblue { background-color: var(--skyblue); }
.headline-frame.color-blue { background-color: var(--blue); }
.headline-frame.color-orange { background-color: var(--orange); }
.headline-frame.color-purple { background-color: var(--purple); }
.headline-frame.color-gray { background-color: var(--gray); }
.headline-frame.color-green { background-color: var(--green); }
.headline-frame.color-yellow { background-color: var(--yellow); }
.headline-frame.color-lightgreen { background-color: var(--lightgreen); }
.headline-frame.color-pink { background-color: var(--pink); }
.headline-frame.color-darkblue { background-color: var(--darkblue); }
.headline-frame.color-darkyellow { background-color: var(--darkyellow); }
.headline-frame.color-baseblue { background-color: var(--baseblue); }

.headline-leftline.color-red { border-color: var(--red); }
.headline-leftline.color-navy { border-color: var(--navy); }
.headline-leftline.color-skyblue { border-color: var(--skyblue); }
.headline-leftline.color-blue { border-color: var(--blue); }
.headline-leftline.color-orange { border-color: var(--orange); }
.headline-leftline.color-purple { border-color: var(--purple); }
.headline-leftline.color-gray { border-color: var(--gray); }
.headline-leftline.color-green { border-color: var(--green); }
.headline-leftline.color-yellow { border-color: var(--yellow); }
.headline-leftline.color-lightgreen { border-color: var(--lightgreen); }
.headline-leftline.color-pink { border-color: var(--pink); }
.headline-leftline.color-darkblue { border-color: var(--darkblue); }
.headline-leftline.color-darkyellow { border-color: var(--darkyellow); }
.headline-leftline.color-baseblue { border-color: var(--baseblue); }

.color-red .headline-leftline-inner { color: var(--red); }
.color-navy .headline-leftline-inner { color: var(--navy); }
.color-skyblue .headline-leftline-inner { color: var(--skyblue); }
.color-blue .headline-leftline-inner { color: var(--blue); }
.color-orange .headline-leftline-inner { color: var(--orange); }
.color-purple .headline-leftline-inner { color: var(--purple); }
.color-gray .headline-leftline-inner { color: var(--gray); }
.color-green .headline-leftline-inner { color: var(--green); }
.color-yellow .headline-leftline-inner { color: var(--yellow); }
.color-lightgreen .headline-leftline-inner { color: var(--lightgreen); }
.color-pink .headline-leftline-inner { color: var(--pink); }
.color-darkblue .headline-leftline-inner { color: var(--darkblue); }
.color-darkyellow .headline-leftline-inner { color: var(--darkyellow); }
.color-baseblue .headline-leftline-inner { color: var(--baseblue); }

.headline-frame-inner { color: #fff; }



/* button basic color ----------------- */
.button-border.color-red { background-color: var(--red); }
.button-border.color-navy { background-color: var(--navy); }
.button-border.color-skyblue { background-color: var(--skyblue); }
.button-border.color-blue { background-color: var(--blue); }
.button-border.color-orange { background-color: var(--orange); }
.button-border.color-purple { background-color: var(--purple); }
.button-border.color-gray { background-color: var(--gray); }
.button-border.color-green { background-color: var(--green); }
.button-border.color-yellow { background-color: var(--yellow); }
.button-border.color-lightgreen { background-color: var(--lightgreen); }
.button-border.color-pink { background-color: var(--pink); }
.button-border.color-darkblue { background-color: var(--darkblue); }
.button-border.color-darkyellow { background-color: var(--darkyellow); }
.button-border.color-baseblue { background-color: var(--baseblue); }

.button-border.color-red:hover { background-color: #fff; border-color: var(--red); }
.button-border.color-navy:hover { background-color: #fff; border-color: var(--navy); }
.button-border.color-skyblue:hover { background-color: #fff; border-color: var(--skyblue); }
.button-border.color-blue:hover { background-color: #fff; border-color: var(--blue); }
.button-border.color-orange:hover { background-color: #fff; border-color: var(--orange); }
.button-border.color-purple:hover { background-color: #fff; border-color: var(--purple); }
.button-border.color-gray:hover { background-color: #fff; border-color: var(--gray); }
.button-border.color-green:hover { background-color: #fff; border-color: var(--green); }
.button-border.color-yellow:hover { background-color: #fff; border-color: var(--yellow); }
.button-border.color-lightgreen:hover { background-color: #fff; border-color: var(--lightgreen); }
.button-border.color-pink:hover { background-color: #fff; border-color: var(--pink); }
.button-border.color-darkblue:hover { background-color: #fff; border-color: var(--darkblue); }
.button-border.color-darkyellow:hover { background-color: #fff; border-color: var(--darkyellow); }
.button-border.color-baseblue:hover { background-color: #fff; border-color: var(--baseblue); }

.button-border.color-red:hover .button-inner, .button-border.color-red:hover:after { color: var(--red); }
.button-border.color-navy:hover .button-inner, .button-border.color-navy:hover:after { color: var(--navy); }
.button-border.color-skyblue:hover .button-inner, .button-border.color-skyblue:hover:after { color: var(--skyblue); }
.button-border.color-blue:hover .button-inner, .button-border.color-blue:hover:after { color: var(--blue); }
.button-border.color-orange:hover .button-inner, .button-border.color-orange:hover:after { color: var(--orange); }
.button-border.color-purple:hover .button-inner, .button-border.color-purple:hover:after { color: var(--purple); }
.button-border.color-gray:hover .button-inner, .button-border.color-gray:hover:after { color: var(--gray); }
.button-border.color-green:hover .button-inner, .button-border.color-green:hover:after { color: var(--green); }
.button-border.color-yellow:hover .button-inner, .button-border.color-yellow:hover:after { color: var(--yellow); }
.button-border.color-lightgreen:hover .button-inner, .button-border.color-lightgreen:hover:after { color: var(--lightgreen); }
.button-border.color-pink:hover .button-inner, .button-border.color-pink:hover:after { color: var(--pink); }
.button-border.color-darkblue:hover .button-inner, .button-border.color-darkblue:hover:after { color: var(--darkblue); }
.button-border.color-darkyellow:hover .button-inner, .button-border.color-darkyellow:hover:after { color: var(--darkyellow); }
.button-border.color-baseblue:hover .button-inner, .button-border.color-baseblue:hover:after { color: var(--baseblue); }



/* button categories image ----------------- */
.button-border.apparel { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_01.png); }
.button-border.rain-goods { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_02.png); }
.button-border.towel { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_03.png); }
.button-border.cool-goods { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_04.png); }
.button-border.bousai-goods { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_05.png); }
.button-border.travel-goods { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_06.png); }
.button-border.mobile-pc { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_07.png); }
.button-border.ecobag { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_08.png); }
.button-border.oshikatsu-goods { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_09.png); }
.button-border.statinery { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_10.png); }
.button-border.mug-bottle { background-image: url(/html/user_data/assets/img/lp/msec-48th/anchor_11.png); }
@media screen and (max-width: 667px) {
.button-border.acrylic-stand,
.button-border.penlight,
.button-border.acrylic-keyholder,
.button-border.kan-badge,
.button-border.trading-cards,
.button-border.stickers,
.button-border.towel,
.button-border.cap,
.button-border.t-shirt,
.button-border.oshikatsu-goods,
.button-border.mug,
.button-border.kitchen-goods,
.button-border.beauty-goods,
.button-border.stationery,
.button-border.sp-pc-goods,
.button-border.seasonal-goods { background-image: none; }
}



/* flex direction ----------------- */
.flex-line-description.color-red { border-color: var(--red); }
.flex-line-description.color-navy { border-color: var(--navy); }
.flex-line-description.color-skyblue { border-color: var(--skyblue); }
.flex-line-description.color-blue { border-color: var(--blue); }
.flex-line-description.color-orange { border-color: var(--orange); }
.flex-line-description.color-purple { border-color: var(--purple); }
.flex-line-description.color-gray { border-color: var(--gray); }
.flex-line-description.color-green { border-color: var(--green); }
.flex-line-description.color-yellow { border-color: var(--yellow); }
.flex-line-description.color-lightgreen { border-color: var(--lightgreen); }
.flex-line-description.color-pink { border-color: var(--pink); }

.flex-line-description-dd.color-red { color: var(--red); }
.flex-line-description-dd.color-navy { color: var(--navy); }
.flex-line-description-dd.color-skyblue { color: var(--skyblue); }
.flex-line-description-dd.color-blue { color: var(--blue); }
.flex-line-description-dd.color-orange { color: var(--orange); }
.flex-line-description-dd.color-purple { color: var(--purple); }
.flex-line-description-dd.color-gray { color: var(--gray); }
.flex-line-description-dd.color-green { color: var(--green); }
.flex-line-description-dd.color-yellow { color: var(--yellow); }
.flex-line-description-dd.color-lightgreen { color: var(--lightgreen); }
.flex-line-description-dd.color-pink { color: var(--pink); }

.flex-line-description-dd.color-red,
.flex-line-description-dd.color-navy,
.flex-line-description-dd.color-skyblue,
.flex-line-description-dd.color-blue,
.flex-line-description-dd.color-orange,
.flex-line-description-dd.color-purple,
.flex-line-description-dd.color-gray,
.flex-line-description-dd.color-green,
.flex-line-description-dd.color-yellow,
.flex-line-description-dd.color-lightgreen,
.flex-line-description-dd.color-pink {
  font-size: 15px;
  line-height: 1.46;
}