@charset "utf-8";


/* color --------------*/
:root {
  --brown: #a07846;
  --brown-light: #faf5f0;
  --red: #f5a096;
  --blue: #64cdf5;
  --yellow-dark: #ff9600;
  --blue-dark: #115bc1;
}


/* figure menu ----------------------- */
.figure-menu-list.category_a { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_01.png); }
.figure-menu-list.category_b { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_02.png); }
.figure-menu-list.category_c { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_03.png); }
.figure-menu-list.category_d { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_04.png); }

.figure-menu-list.category_a:hover { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_01-hover.png); }
.figure-menu-list.category_b:hover { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_02-hover.png); }
.figure-menu-list.category_c:hover { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_03-hover.png); }
.figure-menu-list.category_d:hover { background-image: url(/html/user_data/assets/img/lp/aw-bag/categories_04-hover.png); }
@media screen and (max-width: 414px) {
.figure-menu-list.category_a:hover,
.figure-menu-list.category_b:hover,
.figure-menu-list.category_c:hover,
.figure-menu-list.category_d:hover { background-image: none; }
}


/* button ----------------------- */
.button-wrap {
  gap: 1em;
  justify-content: center;
}

.button-border { background-color: var(--brown); }
.button-border:hover {
  background-color: #fff;
  border-color: var(--brown);
}
.button-border:hover .button-inner,
.button-border:hover:after { color: var(--brown); }
.headline-underline-half-inner {
  text-decoration-color: var(--brown);
  color: var(--brown);
}


/* entry & login button ----------------------- */
.entry-button { background-color: #ff9600; }
.entry-button:hover {
  background-color: #fff;
  border-color: #ff9600;
}
.entry-button:hover .button-inner,
.entry-button:hover:after { color: #ff9600; }
.login-button { background-color: #115bc1; }
.login-button:hover {
  background-color: #fff;
  border-color: #115bc1;
}
.login-button:hover .button-inner,
.login-button:hover:after { color: #115bc1; }
.entry-button:before { color: #ff9600; }
.login-button:before { color: #115bc1; }


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

.headline-underline-half-inner .color-blue { color: var(--blue); }
.headline-underline-half-inner .color-red { color: var(--red); }


/* headline frame ----------------------- */
.headline-frame { background-color: var(--brown); }
.headline-frame-inner { color: #fff; }


/* headline leftline ----------------------- */
.headline-leftline { border-left-color: var(--brown); }
.headline-leftline-inner { color: var(--brown); }


/* section-contents-frame ----------------------- */
.section-contents-frame { background-color: var(--brown-light); }


/* product-list-header ----------------------- */
.product-list-header { background-color: var(--brown-light); }



/* bag-season  --------------*/
.bag-season {
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  padding: 20px 0;
}
@media screen and (max-width: 1366px) {
.bag-season { flex-wrap: wrap; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.bag-season { gap: 2em 0; }
}
@media screen and (min-width: 1367px) {
.bag-season { justify-content: center; }
}

.bag-season_contents {
  padding: 0 15px;
  width: 100%;
}
@media screen and (max-width: 414px) {
.bag-season_contents {
  margin: 0 auto;
  padding: 20px 0;
  width: 90%;
}
.bag-season .bag-season_contents:nth-child(n+2) {
  background-image: radial-gradient(circle, #000000 .5px, transparent .5px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 4px 1px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.bag-season_contents {
  padding-left: 0;
  width: 50%;
}
.bag-season_contents:nth-child(even) {
  background-image: radial-gradient(circle, #000000 .5px, transparent .5px);
  background-position: left top;
  background-repeat: repeat-y;
  background-size: 1px 4px;
}
}
@media screen and (min-width: 1367px) {
.bag-season_contents {
  min-height: 265px;
  width: 215px;
}
.bag-season_contents:nth-child(n+2) {
  background-image: radial-gradient(circle, #000000 .5px, transparent .5px);
  background-position: left top;
  background-repeat: repeat-y;
  background-size: 1px 4px;
}
}

.bag-season_contents h3 {
  color: var(--brown);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
}

.bag-season_contents h3 span {
  color: #000;
  display: block;
  font-size: .8em;
  margin-top: .5em;
}

.bag-season_contents p {
  border: 1px solid var(--brown);
  border-radius: 5px;
  color: var(--brown);
  font-size: 15px;
  line-height: 1.46;
  margin: 1em 0 0;
  padding: 6px 0;
  position: relative;
  text-align: center;
  width: 80%;
}
@media screen and (max-width: 1366px) {
.bag-season_contents p { margin: 1em auto 0; }
}
@media screen and (min-width: 1367px) {
.bag-season_contents p { width: 185px; }
}

.bag-season_contents p:before,
.bag-season_contents p:after {
  aspect-ratio: 1;
  content: '';
  clip-path: polygon(0 0, 100% 0, 0 100%);
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.bag-season_contents p:before {
  background-color: var(--brown);
  bottom: -.8em;
  width: .8em;
}
.bag-season_contents p:after {
  background-color: #fff;
  bottom: -.6em;
  width: .65em;
}

.bag-season_contents ul {
  display: block;
  list-style-type: none;
  margin: 1em 0 0;
  padding: 0;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.bag-season_contents ul {
  margin: 1em auto 0;
  width: 80%;
}
}

.bag-season_contents ul li {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  padding: 0 0 0 1.2em;
  position: relative;
}

.bag-season_contents ul li:before {
  content: '⚫︎';
  font-size: 1.2em;
  left: 0;
  line-height: 1.2;
  position: absolute;
  top: 0;
}

.bag-season_contents ul li:nth-child(1):before { color: var(--brown); }
.bag-season_contents ul li:nth-child(2):before { color: var(--red); }
.bag-season_contents ul li:nth-child(3):before { color: var(--blue); }

.bag-season_supplement {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  margin: 1em 0 0;
  padding: 0;
  text-align: center;
}

.bag-season_supplement .color-brown { color: var(--brown); }
.bag-season_supplement .color-red { color: var(--red); }
.bag-season_supplement .color-blue { color: var(--blue); }

.bag-season_supplement .supplement {
  display: inline-block;
  margin-left: 1em;
  padding-left: 1em;
  position: relative;
}
.bag-season_supplement .supplement:before {
  content: '※';
  left: 0;
  position: absolute;
  top: 0;
}



/* how to use --------------*/
@media screen and (min-width: 415px) and (max-width: 1366px) {
.how-to-use { gap: 2em 0; }
}

.how-to-use-introduction {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 414px) {
.how-to-use-introduction { text-align: left; }
}

.how-to-use {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 34px auto 0;
}
@media screen and (max-width: 414px) {
.how-to-use { gap: 1em; }
}

.how-to-use-contents {
  background-color: #fff;
  border-radius: 10px;
  text-decoration: none;
  width: 48.3725%;
}
@media screen and (max-width: 414px) {
.how-to-use-contents { width: 100%; }
}
@media screen and (min-width: 1367px) {
.how-to-use-contents { width: 268px; }
}

a.how-to-use-contents:hover {
  opacity: .7;
  text-decoration: none;
}
a.how-to-use-contents:active,
a.how-to-use-contents:visited { text-decoration: none; }

.how-to-use-contents figure {
  border-radius: 10px 10px 0 0;
  display: block;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.how-to-use-contents figure img {
  display: block;
  height: auto;
  width: 100%;
}

.how-to-use-contents h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  margin: 1em auto 0;
  padding: 0;
  width: 90%;
}
@media screen and (max-width: 414px) {
.how-to-use-contents h3 { font-size: 18px; }
}

.how-to-use-contents h3 span {
  display: block;
  font-size: 18px;
  line-height: 1.33;
  padding: 0 0 .4em;
}
@media screen and (min-width: 1367px) {
.how-to-use-contents h3 span {
  align-items: center;
  display: flex;
  height: 3em;
}
}

.how-to-use-contents:nth-of-type(1) h3 span { color: var(--brown); }
.how-to-use-contents:nth-of-type(2) h3 span { color: var(--red); }
.how-to-use-contents:nth-of-type(3) h3 span { color: var(--blue); }

.how-to-use-contents h4 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  margin: 1.5em auto 0;
  padding: 0;
  width: 90%;
}

.how-to-use-contents:nth-of-type(1) h4 { color: var(--brown); }
.how-to-use-contents:nth-of-type(2) h4 { color: var(--red); }
.how-to-use-contents:nth-of-type(3) h4 { color: var(--blue); }

.how-to-use-contents h4 + p {
  font-size: 15px;
  line-height: 1.8;
  margin: .5em auto 0;
  padding: 0;
  width: 90%;
}

.how-to-use-contents .how-to-use-contents_ul {
  list-style-type: none;
  margin: .5em auto 0;
  padding: 0;
  width: 90%;
}

.how-to-use-contents .how-to-use-contents_ul li {
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.8;
  display: block;
  margin: 0;
  padding: 0 0 0 1.5em;
  position: relative;
}

.how-to-use-contents .how-to-use-contents_ul li:before {
  content: '⚫︎';
  display: block;
  font-size: 1.5em;
  line-height: 1.3;
  left: 0;
  position: absolute;
  top: 0;
}

.how-to-use-contents:nth-of-type(1) .how-to-use-contents_ul li:before { color: var(--brown); }
.how-to-use-contents:nth-of-type(2) .how-to-use-contents_ul li:before { color: var(--red); }
.how-to-use-contents:nth-of-type(3) .how-to-use-contents_ul li:before { color: var(--blue); }

.how-to-use-contents_link {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
  margin: .5em auto 0;
  padding: 0 0 30px;
  width: 90%;
}
@media screen and (max-width: 414px) {
.how-to-use-contents_link { gap: .5em; }
}

.how-to-use-contents_link li { display: inline-block; }

.how-to-use-contents_link li a {
  align-items: center;
  border-radius: 14px;
  color: #fff;
  display: flex;
  font-size: 12px;
  line-height: 28px;
  justify-content: space-between;
  padding: 0 1.8em 0 1.2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.how-to-use-contents:nth-of-type(1) .how-to-use-contents_link li a { background-color: var(--brown); }
.how-to-use-contents:nth-of-type(2) .how-to-use-contents_link li a { background-color: var(--red); }
.how-to-use-contents:nth-of-type(3) .how-to-use-contents_link li a { background-color: var(--blue); }

.how-to-use-contents_link li a:hover { opacity: .7; }
.how-to-use-contents_link li a:hover,
.how-to-use-contents_link li a:active,
.how-to-use-contents_link li a:visited {
  color: #fff;
  text-decoration: none;
}

.how-to-use-contents_link li a:after {
  background-color: #fff;
  border-radius: 5px;
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-size: .8em;
  font-weight: 900;
  line-height: 10px;
  position: absolute;
  right: .5em;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}

.how-to-use-contents:nth-of-type(1) .how-to-use-contents_link li a:after { color: var(--brown); }
.how-to-use-contents:nth-of-type(2) .how-to-use-contents_link li a:after { color: var(--red); }
.how-to-use-contents:nth-of-type(3) .how-to-use-contents_link li a:after { color: var(--blue); }



/* item-guide-card --------------*/
.item-guide-card {
  display: flex;
  margin-top: 30px;
  width: 100%;
}
@media screen and (max-width: 1366px) {
.item-guide-card { flex-wrap: wrap; }
}

.product-wrap-rows2 .item-guide-card { margin-top: 0; }

.item-guide-card figure {
  border-radius: 10px 0 0 10px;
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
@media screen and (max-width: 1366px) {
.item-guide-card figure {
  border-radius: 10px 10px 0 0;
  width: 100%;
}
}
@media screen and (min-width: 1367px) {
.item-guide-card figure { width: 358px; }
.product-wrap-rows2 .item-guide-card figure { width: 253px; }
}

.item-guide-card img {
  display: block;
  height: auto;
  width: 100%;
}

.item-guide-card_inner {
  align-items: center;
  border: 2px solid var(--brown);
  border-radius: 0 10px 10px 0;
  display: flex;
  gap: 1em;
  padding: 19px;
}
@media screen and (max-width: 1366px) {
.item-guide-card_inner {
  border-radius: 0 0 10px 10px;
  flex-wrap: wrap;
  min-height: 150px;
  width: 100%;
}
}
@media screen and (min-width: 1367px) {
.item-guide-card_inner {
  height: 150px;
  width: 682px;
}
.product-wrap-rows2 .item-guide-card_inner { width: 253px; }
}

.item-guide-card_inner > p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

.item-guide-card_offer {
  background-image: radial-gradient(circle, #000000 .5px, transparent .5px);
  background-position: left top;
  background-repeat: repeat-y;
  background-size: 1px 4px;
  padding-left: 20px;
}
@media screen and (max-width: 414px) {
.item-guide-card_offer {
  background-repeat: repeat-X;
  background-size: 4px 1px;
  padding: 20px 0 0;
  width: 100%;
}
}

.item-guide-card_offer p.small-title {
  color: var(--brown);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.item-guide-card_offer ul {
  display: block;
  list-style-type: none;
  margin: .5em 0 0;
  padding: 0;
}

.item-guide-card_offer li {
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.item-guide-card_offer li { font-size: 12px; }
}

.item-guide-card_offer li:last-child { margin-top: .5em; }



/* design-attention --------------*/
.design-attention {
  align-items: center;
  background-color: var(--brown-light);
  border-radius: 10px;
  display: flex;
  gap: 1em;
  margin-top: 30px;
  padding: 20px;
  width: 100%;
}
@media screen and (max-width: 414px) {
.design-attention { flex-wrap: wrap; }
}

.design-attention figure {
  display: block;
  margin: 0;
  width: 100%;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.design-attention figure { width: 30%; }
}
@media screen and (min-width: 1367px) {
.design-attention figure { width: 338px; }
}

.design-attention figure img {
  display: block;
  height: auto;
  width: 100%;
}

.design-attention div { width: 100%; }
@media screen and (min-width: 415px) and (max-width: 1366px) {
.design-attention div { width: 65%; }
}
@media screen and (min-width: 1367px) {
.design-attention div { width: 627px; }
}

.design-attention div p.small-title {
  color: var(--brown);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.design-attention div p.design-attention_text {
  font-size: 13px;
  line-height: 1.7;
  margin: .5em 0 0;
}



/* legal-amendment --------------*/
.legal-amendment {
  align-items: center;
  border: 2px solid var(--brown);
  border-radius: 10px;
  display: flex;
  gap: 1em;
}
@media screen and (max-width: 1366px) {
.legal-amendment {
  flex-wrap: wrap;
  padding: 20px;
}
}
@media screen and (min-width: 1367px) {
.legal-amendment { height: 150px; }
}

.legal-amendment figure {
  border-radius: 10px;
  display: block;
  margin: 0;
}
@media screen and (max-width: 1366px) {
.legal-amendment figure {
  margin: 0 auto;
  width: 50%;
}
}
@media screen and (min-width: 1367px) {
.legal-amendment figure { width: 150px; }
}

.legal-amendment figure img {
  display: block;
  height: auto;
  width: 100%;
}

.legal-amendment_inner {
  padding-right: 1em;
  width: 100%;
}
@media screen and (max-width: 414px) {
.legal-amendment_inner { width: 100%; }
}
@media screen and (min-width: 1367px) {
.legal-amendment_inner { width: 336px; }
}

.legal-amendment_inner p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}
.legal-amendment_inner p.color-red { color: #f00; }



/* margin custom --------------*/
.design-attention + .product-wrap,
.item-guide-card + .product-wrap,
.product-wrap-wrap + .product-wrap { margin-top: 2em; }
.product-wrap-rows2 .item-guide-card + .product-wrap { margin-top: 1em; }

.directly-below_text + .headline-leftline,
.directly-below_text + .product-wrap-wrap { margin-top: 20px; }


@media screen and (max-width: 320px) {}
@media screen and (max-width: 414px) {}
@media screen and (min-width: 321px) and (max-width: 414px) {}
@media screen and (min-width: 415px) and (max-width: 768px) {}
@media screen and (min-width: 769px) and (max-width: 1366px) {}
@media screen and (min-width: 1367px) {}