:root {
  --yellow: #fff68c;
  --blue: #85bae5;
  --orange: #f9c27b;
  --pink: #f4b4d0;
  --main-font-color: #40220f;
}

.foundation img,
.foundation picture{
  display: inline-block;
}

.foundation {
  margin:0 auto;
  width: 100%;
  color: var(--main-font-color);
  background-color: #fff;
}

.foundation img {
  max-width: 100%;
  height: auto;
}

.foundation .btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-weight: bold;
  border-radius: 50vw;
  color: var(--main-font-color);
}

.foundation .btn-cart.-yellow {
  background-image: linear-gradient( 90deg, #fad8dd 0%, #fbdab0 100%);
}

.foundation .btn-cart.-blue {
  background-image: linear-gradient( 90deg, #c2dfea 0%, #e4d9f1 100%);
}

.foundation .btn-cart:hover {
  color: unset;
  opacity: 0.7;
  transition: 0.3s ease;
}

@media screen and (min-width:641px) {
  .foundation {
    max-width: 192rem;
  }

  .foundation .btn-cart {
    width: 20rem;
    max-width: 100%;
    height: 4.4rem;
    font-size: 1.8rem;
  }

  .foundation .sp-only {
    display: none;
  }
}


@media screen and (max-width:640px) {
  .foundation .btn-cart {
    width: calc(340 / 750 * 100vw);
    max-width: 100%;
    height: calc(80 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
  }
}

/* nav */
.content-nav ul {
  display: flex;
  flex-wrap: wrap;
}
.content-nav ul li {
  width: 50%;
  text-align: center;
}
.content-nav .yellow.luster {
  background-color: var(--yellow);
}
.content-nav .blue.luster {
  background-color: var(--pink);
}
.content-nav .yellow.matte {
  background-color: var(--orange);
}
.content-nav .blue.matte {
  background-color: var(--blue);
}

@media screen and (min-width:641px) {
  .content-nav {
    display: none;
  }
}

@media screen and (max-width:640px) {
  .content-nav {
    margin-bottom: calc(90 / 750 * 100vw);
  }
  .content-nav ul li a {
    position: relative;
    display: block;
    padding: calc(30 / 750 * 100vw) 0;
    width: 100%;
    box-sizing: border-box;
  }
  .content-nav ul li a::after {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: .4rem solid transparent;
    border-left: .4rem solid transparent;
    border-top: .8rem solid #40220f;
    border-bottom: 0;
    transform: translateY(-50%);
  }
  .content-nav ul li a span {
    font-size: calc(40 / 750 * 100vw);
    font-weight: bold;
    line-height: 1;
  }
}

/* goods */
.goods-content.yellow .title-wrap {
  background-color: var(--yellow);
}
.goods-content.blue .title-wrap {
  background-color: var(--blue);
}
.goods-content .content-title {
  color: #40220f;
  font-weight: bold;
  text-align: center;
}
.goods-cart {
  text-align: center;
}
.goods-cart .goods-price {
  font-weight: bold;
}

@media screen and (min-width:641px) {
  .section-goods {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .goods-content {
    width: 60rem;
  }
  .goods-content .title-wrap {
    margin-bottom: 6rem;
  }
  .goods-content.yellow .title-wrap {
    margin-left: calc(50% - 50vw);
  }
  .goods-content.blue .title-wrap {
    margin-right: calc(50% - 50vw);
  }
  .goods-content .content-title {
    padding: 2rem 0;
    width: 60rem;
    font-size: 3rem;
  }
  .goods-content.yellow .content-title {
    margin-left: auto;
  }
  .goods-content.blue .content-title {
    margin-right: auto;
  }
  .goods-group {
    display: flex;
    align-items: stretch;
    padding-bottom: 8rem;
  }
  .goods-content.yellow .goods-group {
    padding-right: 4rem;
  }
  .goods-content.blue .goods-group {
    padding-left: 4rem;
  }
  .goods-group .goods-image {
    width: 32.2rem;
  }
  .goods-cart {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    width: 20rem;
  }
  .goods-cart .item:nth-child(2) {
    margin-top: auto;
  }
  .goods-cart .goods-price {
    margin-top: .5rem;
    font-size: 2rem;
  }
  .goods-cart .goods-price .tax {
    font-size: 1.2rem;
  }
  .goods-group .goods-cart .goods-info {
    margin-top: .5rem;
  }
  .goods-cart .btn-cart {
    margin: 1rem auto 0;
  }
}

@media screen and (max-width:640px) {
  .goods-content {
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .goods-content .title-wrap {
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .goods-content .content-title {
    padding: calc(40 / 750 * 100vw) 0;
    font-size: calc(40 / 750 * 100vw);
    line-height: 1;
  }
  .goods-group .goods-image {
    margin:0 auto calc(70 / 750 * 100vw);
    width: calc(474 / 750 * 100vw);
  }
  .goods-cart {
    display: flex;
    justify-content: center;
  }
  .goods-cart .item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(340 / 750 * 100vw);
  }
  .goods-cart .item:nth-child(2) {
    margin-left: calc(30 / 750 * 100vw);
  }
  .goods-cart .goods-price {
    margin-top: calc(20 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
  }
  .goods-cart .goods-price .tax {
    font-size: calc(20 / 750 * 100vw);
  }
  .goods-group .goods-cart .goods-info {
    margin: calc(10 / 750 * 100vw) auto calc(15 / 750 * 100vw);
    font-size: calc(20 / 750 * 100vw);
  }
  .goods-cart .btn-cart {
    margin-top: auto;
  }
}

/* intro */
.intro-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient( 90deg, rgb(246,190,200) 0%, rgb(221,209,231) 50%, rgb(136,179,224) 100%);
}
.intro-area .intro-01 {
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: bold;
}
.intro-area .intro-01::before {
  content: '';
  display: inline-block;
  background: url(../../../../img/usr/freepage/foundation/line.png) no-repeat;
  background-size: contain;
}
.intro-area .intro-01::after {
  content: '';
  display: inline-block;
  background: url(../../../../img/usr/freepage/foundation/line.png) no-repeat;
  background-size: contain;
  transform: scale(-1, 1);
}
.intro-area .intro-balloon {
  display: flex;
  align-items: center;
}
.intro-area .intro-balloon .balloon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../../../../img/usr/freepage/foundation/bg-balloon.png) no-repeat;
  background-size: contain;
  font-weight: bold;
  text-align: center;
}
.intro-area .intro-02 {
  color: #fff;
  background-color: var(--blue);
  font-weight: bold;
  line-height: 1;
}
.intro-area .intro-03 {
  font-weight: bold;
  text-align: center;
}
.intro-area .intro-03 .bg {
  padding: 0 .5rem;
  background-color: #fff;
}

@media screen and (min-width:641px) {
  .intro-area {
    padding: 10rem 0 5rem;
  }
  .intro-area .intro-01 {
    margin-bottom: 3rem;
    font-size: 5.6rem;
  }
  .intro-area .intro-01 .small {
    font-size: 3.3rem;
  }
  .intro-area .intro-01::before {
    margin-right: 4rem;
    width: 4rem;
    height: 5.6rem;
  }
  .intro-area .intro-01::after {
    margin-right: 2.5rem;
    width: 4rem;
    height: 5.6rem;
  }
  .intro-area .intro-balloon {
    margin-bottom: 3rem;
  }
  .intro-area .intro-balloon .balloon {
    width: 32.3rem;
    height: 18rem;
    font-size: 2.2rem;
  }
  .intro-area .intro-balloon .balloon:not(:last-child) {
    margin-right: 1rem;
  }
  .intro-area .intro-balloon .balloon p {
    margin-top: -1.5rem;
  }
  .intro-area .intro-02 {
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    font-size: 3.4rem;
  }
  .intro-area .intro-03 {
    font-size: 2.2rem;
    line-height: 1.8;
  }
  .intro-area .intro-04 {
    margin-top: 2rem;
    font-size: 1.4rem;
  }
}

@media screen and (max-width:640px) {
  .intro-area {
    display: block;
    padding: calc(80 / 750 * 100vw) 0 calc(70 / 750 * 100vw);
    text-align: center;
  }
  .intro-area .intro-01 {
    position: relative;
    flex-direction: column;
    margin-bottom: calc(30 / 750 * 100vw);
    font-size: calc(60 / 750 * 100vw);
  }
  .intro-area .intro-01 .small {
    font-size: calc(40 / 750 * 100vw);
  }
  .intro-area .intro-01::before {
    position: absolute;
    bottom: 0;
    left: calc(-80 / 750 * 100vw);
    width: calc(61 / 750 * 100vw);
    height: calc(106 / 750 * 100vw);
  }
  .intro-area .intro-01::after {
    position: absolute;
    bottom: 0;
    right: calc(-50 / 750 * 100vw);
    width: calc(61 / 750 * 100vw);
    height: calc(106 / 750 * 100vw);
  }
  .intro-area .intro-balloon {
    flex-wrap: wrap;
    justify-content: center;
  }
  .intro-area .intro-balloon .balloon {
    margin-bottom: calc(40 / 750 * 100vw);
    width: calc(355 / 750 * 100vw);
    height: calc(198 / 750 * 100vw);
    font-size: calc(26 / 750 * 100vw);
  }
  .intro-area .intro-balloon .balloon:nth-child(1) {
    order: 2;
  }
  .intro-area .intro-balloon .balloon:nth-child(2) {
    order: 1;
    margin-bottom: 0;
    width: 100%;
    background-position: top center;
  }
  .intro-area .intro-balloon .balloon:nth-child(3) {
    order: 3;
  }
  .intro-area .intro-balloon .balloon p {
    margin-top: calc(-15 / 750 * 100vw);
  }
  .intro-area .intro-02 {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 calc(6 / 750 * 100vw);
    font-size: calc(42 / 750 * 100vw);
    line-height: 2;
  }
  .intro-area .intro-03 {
    margin: calc(30 / 750 * 100vw) auto calc(25 / 750 * 100vw);
    line-height: 1.8;
    font-size: calc(26 / 750 * 100vw);
  }
  .intro-area .intro-04 {
    margin: 0 calc(40 / 750 * 100vw);
    text-align: left;
  }
}

/* reccomend */
.reccomend-item.yellow {
  background-image: linear-gradient( 90deg, rgb(255,255,251) 0%, rgb(255,252,217) 100%);
}
.reccomend-item.blue {
  background-image: linear-gradient( 90deg, rgb(221,241,252) 0%, rgb(255,255,251) 100%);
}
.reccomend-item .content-title {
  text-align: center;
  font-weight: bold;
}
.reccomend-item.yellow .content-title {
  background-color: var(--yellow);
}
.reccomend-item.blue .content-title {
  background-color: var(--blue);
}

@media screen and (min-width:641px) {
  .reccomend-area {
    display: flex;
    justify-content: center;
  }
  .reccomend-item.yellow {
    margin-left: calc(50% - 50vw);
  }
  .reccomend-item.blue {
    margin-right: calc(50% - 50vw);
  }
  .reccomend-item-inner {
    width: 60rem;
    box-sizing: border-box;
  }
  .reccomend-item.yellow .reccomend-item-inner {
    margin-left: auto;
    padding: 6rem 4rem 6rem 0;
  }
  .reccomend-item.blue .reccomend-item-inner {
    margin-right: auto;
    padding: 6rem 0 6rem 4rem;
  }
  .reccomend-item .content-title {
    padding: 1rem 0;
    font-size: 2.2rem;
    line-height: 1;
  }
  .reccomend-item .group {
    display: flex;
    margin-top: 3.2rem;
  }
  .reccomend-movie {
    width: 28rem;
  }
  .reccomend-cart {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    width: 24rem;
  }
  .reccomend-cart .goods-cart {
    margin-top: auto;
    height: 42rem;
    width: unset;
  }
  .reccomend-cart .item {
    width: 21.9rem;
  }
  .reccomend-cart .btn {
    margin-top: 2rem;
  }
}

@media screen and (max-width:640px) {
  .reccomend-item-inner {
    padding: calc(80 / 750 * 100vw) 0;
  }
  .reccomend-title {
    margin: 0 auto calc(30 / 750 * 100vw);
    width: calc(672 / 750 * 100vw);
    text-align: center;
  }
  .reccomend-movie {
    margin: 0 auto calc(40 / 750 * 100vw);
    width: calc(404 / 750 * 100vw);
  }
  .reccomend-item .content-title {
    margin-bottom: calc(45 / 750 * 100vw);
    padding: calc(30 / 750 * 100vw) 0;
    font-size: calc(40 / 750 * 100vw);
    line-height: 1;
  }
  .reccomend-cart .goods-cart img {
    margin-bottom: calc(30 / 750 * 100vw);
  }
}

/* choose */
.choose-area {
  overflow: hidden;
}
.choose-area .choose-title {
  background-image: linear-gradient( 90deg, rgb(246,190,200) 0%, rgb(221,209,231) 50%, rgb(136,179,224) 100%);
  text-align: center;
}
.choose-image {
  text-align: center;
}
.choose-image > picture{
  max-width: 100.3rem;
  margin: 0 auto;
}

.choose-cart {
  margin: 0 auto;
  background: url(../../../../img/usr/freepage/foundation/img-choose_02.jpg) no-repeat;
  background-size: contain;
}

@media screen and (min-width:641px) {
  .choose-area .choose-title {
    margin: 0 calc(50% - 50vw) 6rem;
    padding: 3.3rem 0;
    width: 100vw;
  }
  .choose-area .choose-title img {
    width: 72.3rem;
  }
  .choose-image {
    margin-bottom: 6rem;
  }
  .choose-cart {
    position: relative;
    margin-bottom: 9rem;
    width: 55.7rem;
    height: 52.6rem;
  }
  .choose-cart .btn-cart {
    position: absolute;
  }
  .choose-cart .btn-cart.-yellow.-luster {
    top: 17.2rem;
    left: 7.3rem;
  }
  .choose-cart .btn-cart.-yellow.-matte {
    top: 17.2rem;
    right: .3rem;
  }
  .choose-cart .btn-cart.-blue.-luster {
    bottom: 5.7rem;
    left: 7.3rem;
  }
  .choose-cart .btn-cart.-blue.-matte {
    bottom: 5.7rem;
    right: .3rem;
  }
}

@media screen and (max-width:640px) {
  .choose-area .choose-title {
    margin-bottom: calc(60 / 750 * 100vw);
    padding: calc(40 / 750 * 100vw) 0;
    text-align: center;
  }
  .choose-area .choose-title img {
    width: calc(686 / 750 * 100vw);
  }
  .choose-image {
    margin: 0 auto calc(60 / 750 * 100vw);
    width: calc(550 / 750 * 100vw);
  }
  .choose-cart {
    position: relative;
    margin: 0 auto calc(90 / 750 * 100vw);
    width: calc(702 / 750 * 100vw);
    height: calc(683 / 750 * 100vw);
  }
  .choose-cart .btn-cart {
    position: absolute;
    width: calc(300 / 750 * 100vw);
    height: calc(80 / 750 * 100vw);
  }
  .choose-cart .btn-cart.-yellow.-luster {
    top: calc(209 / 750 * 100vw);
    left: calc(57 / 750 * 100vw);
  }
  .choose-cart .btn-cart.-yellow.-matte {
    top: calc(209 / 750 * 100vw);
    right: calc(-8 / 750 * 100vw);
  }
  .choose-cart .btn-cart.-blue.-luster {
    bottom: calc(50 / 750 * 100vw);
    left: calc(57 / 750 * 100vw);
  }
  .choose-cart .btn-cart.-blue.-matte {
    bottom: calc(50 / 750 * 100vw);
    right: calc(-8 / 750 * 100vw);
  }
}

/* texture */
.texture-item.luster {
  background-color: #fdf4f8;
}
.texture-item.matte {
  background-color: #fef6eb;
}
.texture-item .goods-cart {
  flex-direction: row;
  width: unset;
}
.texture-item .goods-cart.yellow .cart {
  background-color: #fffde8;
}
.texture-item .goods-cart.yellow .image {
  background-color: #fff68c;
}
.texture-item .goods-cart.blue .cart {
  background-color: #e7f1fa;
}
.texture-item .goods-cart.blue .image {
  background-color: #85bae5;
}
.texture-item .goods-cart .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (min-width:641px) {
  .texture-item {
    display: flex;
    justify-content: center;
    padding: 8rem 0;
  }
  .texture-item.matte {
    flex-direction: row-reverse;
  }
  .texture-item .goods-image {
    width: 56.9rem;
  }
  .texture-item.luster .goods-wrap {
    margin-left: 6rem;
  }
  .texture-item.matte .goods-wrap {
    margin-right: 6rem;
  }
  .texture-item .goods-cart .item {
    width: 29rem;
    height: 29rem;
  }
  .texture-item .goods-cart.yellow .image img {
    width: 21.1rem;
    height: 28.2rem;
  }
  .texture-item .goods-cart.blue .image img {
    width: 22.6rem;
    height: 26.9rem;
  }
  .texture-item .goods-cart .cart img {
    width: 21.9rem;
    height: 11.5rem;
  }
  .texture-item .goods-cart .cart .btn {
    margin-top: 2rem;
  }
}

@media screen and (max-width:640px) {
  .texture-item .goods-image {
    margin: 0 auto;
    padding: calc(88 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
    width: calc(683 / 750 * 100vw);
  }
  .texture-item .goods-cart .item {
    width: 50%;
    aspect-ratio: 1;
  }
  .texture-item .goods-cart .item:nth-child(2) {
    margin-left: 0;
  }
  .texture-item .goods-cart.yellow .image img {
    width: calc(253 / 750 * 100vw);
    height: calc(339 / 750 * 100vw);
  }
  .texture-item .goods-cart.blue .image img {
    width: calc(271 / 750 * 100vw);
    height: calc(322 / 750 * 100vw);
  }
  .texture-item .goods-cart .cart img {
    width: calc(300 / 750 * 100vw);
    height: calc(176 / 750 * 100vw);
  }
  .texture-item .goods-cart .btn-cart {
    margin-top: calc(40 / 750 * 100vw);
  }
  .texture-item .goods-cart .cart .btn {
    width: calc(300 / 750 * 100vw);
  }
}