@charset "UTF-8";

/*CK用all------------------------*/
#Wrap,
.wrapTop,
.wrapBottom {
  width: 100%;
}

#Contents {
  padding-top: 0;
}

#Header,
#Foot {
  width: 1000px;
  margin: 0 auto;
}

#footer {
  position: relative;
  z-index: 1;
}

.LP_page a {
  transition: opacity .3s;
}

/*------------------------CK用all*/

/*lp all----------------------------*/
html {
  font-size: 62.5%;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.LP_page {
  width: 100%;
  background: #fff;
}

.LP_page picture,
.LP_page a {
  display: block;
}

.LP_page img {
  width: 100%;
  height: auto;
}

.LP_page .page_inner {
  margin: 0 auto;
  padding-bottom: 15rem;
  width: 100%;
  background: #7289ab;
}

.LP_page .sp_only {
  display: none;
}

.LP_page .flexBox {
  display: flex;
  flex-wrap: wrap;
}

/*--------------------------// lp all --*/

/*--------anime-------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}


@keyframes tra3 {
  0% {
    transform: translateY(40px);
  }

  100% {
    transform: translateY(0);
  }
}


.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa2 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef.fadein {
  -webkit-mask-image: linear-gradient(-25deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(-25deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: none;
  mask-repeat: none;
  transform: translateZ(0);
  transition: -webkit-mask-position 1.4s linear;
  transition: mask-position 1.4s linear;
  transition: mask-position 1.4s linear, -webkit-mask-position 1.4s linear
}

.ef.fadein.effect {
  mask-position: center 0
}

.ef-top {
  opacity: 0;
  transform: translateY(60px);
}

.ef-top.effect {
  animation: opa1 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

/*-------------z-----//anime---------------*/


.lp_bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: url(../img/bg_pc.jpg) no-repeat;
  background-size: cover;
  z-index: 0;
}

/*------mv_area----------------------------*/
.mv_area {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.mv_area .mv_main,
.mv_main .mv_img {
  width: 100%;
  margin: 0 auto;
}

.mv_main {
  position: relative;
}

.mv_main .mv_ttl {
  position: absolute;
  width: 35%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}

.mv_title {
  padding: 10rem 0 4rem;
  background-color: rgba(134, 159, 196, 0.5);
}

.mv_title .mv_name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
}

.mv_title .mv_name {
  animation: opa2 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) .6s 1 forwards;
}

.mv_title .mv_description {
  animation: opa2 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 1.2s 1 forwards;
}

.mv_title .mv_description {
  margin-top: 2.5rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
  color: #fff;
}

/*---------------------------//mv_area------*/

/*-------------------- items_area --------------------------*/
.sec_items {
  padding: 0 0 10rem;
  position: relative;
}

.sec_items .bg_inner::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(134, 159, 196, 0.5);
}

.sec_items .item_inner {
  justify-content: space-between;
  margin: auto;
  width: 110rem;
  position: relative;
  z-index: 99;
}

.sec_items .item_inner li {
  width: 52rem;
  padding: 3rem 3rem 4rem 3rem;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.9);
}

.sec_items .item_inner li:not(:first-child),
.sec_items .item_inner li:not(:nth-child(2)) {
  margin-top: 6rem;
}

.item_inner li .brand {
  font-family: 'Bodoni Moda', serif;
  font-style: normal;
  font-weight: bold;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: #12244A;
  text-align: center;
}

.item_inner li .item_img {
  width: 32rem;
  margin: 1rem auto 1.5rem;
}

.itemTxt_inner {
  max-width: 46rem;
  width: 100%;
}

.item_inner li .name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: #12244A;
  text-align: center;
}

.item_inner li .price {
  margin-top: 0.5rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  color: #12244A;
}

.item_inner li .price span {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

.more__content .ttl {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.05em;
  color: #212121;
}

.more__content .item_txt {
  margin-top: 0.8rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.05em;
  color: #212121;
}

/*-------------------もっと見る---------------*/
.more_box *,
.more_box *:before,
.more_box *:after {
  box-sizing: border-box;
}

.more_box {
  position: relative;
  margin: 2rem auto 0;
  padding: 2rem;
  max-width: 46rem;
  width: 100%;
  border-radius: 5px;
  background: #F4F6FA;
}

.more_box .ttl {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 2.5rem;
  color: #212121;
}

.more_box .item_txt {
  margin-top: 0.8rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 2.4rem;
  color: #212121;
}

.more_box label {
  position: absolute;
  z-index: 1;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) -100%, rgb(243 246 250) 70%);
  border-radius: 0 0 1rem 1rem;
}

.more_box input:checked+label {
  background: inherit;
  /* 開いた時にグラデーションを消す */
  height: auto;
}

.more_box label:after {
  position: absolute;
  z-index: 2;
  bottom: 32px;
  transform: translate(-50%, 0);
  content: 'Read More';
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: #12244A;
  text-decoration: underline;
}

.more_box input {
  display: none;
}

.more_box .more_container {
  overflow: hidden;
  height: 21rem;
  /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}

.more_box input:checked+label {
  /* display: none ; 閉じるボタンを消す場合解放 */
}

.more_box input:checked+label:after {
  content: 'Close';
  bottom: 20px;
}

.more_box input:checked~.more_container {
  height: auto;
  padding-bottom: 40px;
  /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}

/*-------------------//もっと見る---------------*/

/*----------------------// items_area --------------*/
.item_inner .item_btn a {
  margin: 2.5rem auto 0;
  width: 32rem;
  height: 6rem;
}

.item_inner .item_btn a:hover {
  opacity: 0.7;
}

/*----------------------profile_inner--------------*/
.profile_inner {
  margin: 10rem auto 0;
  padding: 4rem 6rem;
  align-items: center;
  width: 110rem;
  background: #6985ab;
  color: #ffffff;
}

.profile_inner .profile_img {
  margin-right: 3rem;
  width: 16rem;
}

.profile_inner .profile_txt {
  max-width: 79rem;
  width: 100%;
}

.profile_inner .profile_txt .ttl {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 2.2rem;
}

.profile_inner .profile_txt .ttl span {
  display: inline-block;
  margin-left: 1rem;
  font-size: 1.8rem;
}

.profile_inner .description {
  margin-top: 1.5rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
}

/*----------------------//profile_inner--------------*/


/*----------------------column_btn--------------*/
.column_btn a {
  margin: 3rem auto 0;
  width: 110rem;
}

/*----------------------//column_btn--------------*/






/*Smart phone---------------------------------------------*/
@media screen and (max-width:767px) {
  .LP_page .pc_only {
    display: none;
  }

  .LP_page .sp_only {
    display: block;
  }

  .LP_page {
    overflow: hidden;
  }

  .LP_page .page_inner {
    padding-bottom: calc(100* (100vw / 375));
  }

  .LP_page .flexBox {
    flex-wrap: wrap;
  }

  #share {
    z-index: 99 !important;
  }

  /*------lp_area----------------------------*/
  .lp_bg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url(../img/bg_sp.jpg) no-repeat;
    background-size: cover;
    z-index: 0;
  }

  /*------mv_area----------------------------*/
  .mv_main .mv_ttl {
    position: absolute;
    width: calc(320* (100vw / 375));
  }

  .mv_title {
    padding: calc(60* (100vw / 375)) 0;
  }

  .mv_title .mv_name {
    font-size: calc(18* (100vw / 375));
  }

  .mv_title .mv_description {
    margin: calc(15* (100vw / 375)) auto 0;
    max-width: calc(335* (100vw / 375));
    width: 100%;
    font-size: calc(14* (100vw / 375));
    text-align: left;
  }

  /*---------------------------//mv_area------*/


  /*-------------------- items_area --------------------------*/
  .sec_items {
    padding: 0 0 calc(60* (100vw / 375));
  }

  .sec_items .item_inner {
    justify-content: inherit;
    margin: auto;
    width: calc(335* (100vw / 375));
  }

  .sec_items .item_inner li {
    width: calc(335* (100vw / 375));
    padding: calc(20* (100vw / 375)) calc(15* (100vw / 375)) calc(30* (100vw / 375)) calc(15* (100vw / 375));
    border-radius: calc(15* (100vw / 375));
  }

  .sec_items .item_inner li:not(:nth-child(2)) {
    margin: 0;
  }

  .sec_items .item_inner li:not(:first-child) {
    margin-top: calc(20* (100vw / 375));
  }

  .item_inner li .brand {
    font-size: calc(20* (100vw / 375));
  }

  .item_inner li .item_img {
    width: calc(240* (100vw / 375));
    margin: calc(10* (100vw / 375)) auto;
  }

  .itemTxt_inner {
    max-width: calc(305* (100vw / 375));
    width: 100%;
  }

  .item_inner li .name {
    font-size: calc(16* (100vw / 375));
    line-height: calc(26* (100vw / 375));
    text-align: center;
  }

  .item_inner li .price {
    margin-top: calc(5* (100vw / 375));
    font-size: calc(15* (100vw / 375));
    text-align: center;
  }

  .item_inner li .price span {
    font-size: calc(12* (100vw / 375));
  }

  .more__content .ttl {
    font-size: calc(14* (100vw / 375));
    line-height: calc(22* (100vw / 375));
  }

  .more__content .item_txt {
    margin-top: calc(5* (100vw / 375));
    font-size: calc(13* (100vw / 375));
    line-height: calc(21* (100vw / 375));
  }

  /*-------------------もっと見る---------------*/
  .more_box {
    position: relative;
    margin: calc(15* (100vw / 375)) auto 0;
    padding: calc(15* (100vw / 375));
    max-width: calc(305* (100vw / 375));
    width: 100%;
    border-radius: calc(10* (100vw / 375));
  }

  .more_box .ttl {
    font-size: calc(14* (100vw / 375));
    line-height: calc(22* (100vw / 375));
  }

  .more_box .item_txt {
    margin-top: calc(5* (100vw / 375));
    font-size: calc(13* (100vw / 375));
    line-height: calc(21* (100vw / 375));
  }

  .more_box label {
    height: 60px;
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) -100%, rgb(243 246 250) 50%);
    border-radius: 0 0 calc(10* (100vw / 375)) calc(10* (100vw / 375));
  }

  .more_box label:after {
    bottom: 20px;
    font-size: calc(13* (100vw / 375));
  }

  .more_box .more_container {
    height: calc(170* (100vw / 375));
  }

  .more_box input:checked~.more_container {
    padding-bottom: 30px;
  }

  /*-------------------//もっと見る---------------*/

  /*----------------------// items_area --------------*/
  .item_inner .item_btn a {
    margin: calc(20* (100vw / 375)) auto 0;
    width: calc(240* (100vw / 375));
    height: calc(50* (100vw / 375));
  }

  /*----------------------profile_inner--------------*/
  .profile_inner {
    margin: calc(60* (100vw / 375)) auto 0;
    padding: calc(35* (100vw / 375)) calc(25* (100vw / 375));
    width: calc(335* (100vw / 375));
  }

  .profile_inner .profile_pho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: calc(285* (100vw / 375));
    width: 100%;
  }

  .profile_inner .profile_pho .profile_img {
    margin-right: 0;
    width: calc(130* (100vw / 375));
  }

  .profile_inner .profile_pho .ttl {
    font-size: calc(18* (100vw / 375));
  }

  .profile_inner .profile_pho .ttl span {
    display: block;
    margin: calc(15* (100vw / 375)) 0 0 0;
    font-size: calc(15* (100vw / 375));
  }

  .profile_inner .profile_txt {
    max-width: calc(285* (100vw / 375));
    width: 100%;
  }

  .profile_inner .description {
    margin-top: calc(20* (100vw / 375));
    font-size: calc(14* (100vw / 375));
    line-height: calc(24* (100vw / 375));
  }

  /*----------------------//profile_inner--------------*/

  /*----------------------column_btn--------------*/
  .column_btn a {
    margin: calc(20* (100vw / 375)) auto 0;
    width: calc(335* (100vw / 375));
  }

  /*----------------------//column_btn--------------*/

}




/*---------------------------------------------Smart phone*/

/*pcのみ--------------------------------------------------*/
@media screen and (min-width:767px) {
  .only_sp {
    display: none;
  }
}

/*--------------------------------------------------pcのみ*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1200px) {
  html {
    font-size: calc(10 * (100vw / 1200));
  }
}

/*-------------------------------レスポンシブ＆タブレット対応*/