@charset "UTF-8"; /**/
#info_contents {
  margin-bottom: 0 !important;
}
#sea_stick {
  /*text-align: center; margin: 0 auto; padding-bottom:40px; background-color:#FFFBEA;*/
}

.charm {
  background: url(../images/charm_bg.jpg);
  background-size: 100% auto;
}

/* スペース調整 */
.mTB5 {
  margin: 5% auto;
}
.mT3 {
  margin-top: 3%;
}
.mT5 {
  margin-top: 5%;
}
.mB5 {
  margin-bottom: 5%;
}
.mB10 {
  margin-bottom: 10%;
}
.mT10 {
  margin-top: 10%;
}
.pT5 {
  padding-top: 5%;
}
.pB5 {
  padding-bottom: 5%;
}

/*透過png配置 */
#sea_stick .mainArea,
#sea_stick .btnArea,
#sea_stick .recoArea,
#sea_stick .seaArea {
  position: relative;
}
#sea_stick .sea_link,
#sea_stick .sea_btn,
#sea_stick .reco01,
#sea_stick .reco02,
#sea_stick .reco03,
#sea_stick .reco04,
#sea_stick .sea00,
#sea_stick .sea01,
#sea_stick .sea02,
#sea_stick .sea03 {
  position: absolute;
  display: block;
}

/* Area */
#sea_stick .sea_link {
  width: 330px;
  height: 552px;
  top: 15.93%;
  left: 27.91%;
}
#sea_stick .sea_btn {
  width: 600px;
  height: 92px;
  top: 45.8%;
  left: 8.33%;
}
#sea_stick .reco01 {
  width: 720px;
  height: 50px;
  top: 44.53%;
  left: 0%;
}
#sea_stick .reco02 {
  width: 720px;
  height: 50px;
  top: 56.53%;
  left: 0%;
}
#sea_stick .reco03 {
  width: 720px;
  height: 50px;
  top: 68.53%;
  left: 0%;
}
#sea_stick .reco04 {
  width: 720px;
  height: 50px;
  top: 80.53%;
  left: 0%;
}
#sea_stick .sea00 {
  width: 640px;
  height: 242px;
  top: 30.41%;
  left: 5.55%;
}
#sea_stick .sea01 {
  width: 290px;
  height: 252px;
  top: 3.05%;
  left: 30.27%;
}
#sea_stick .sea02 {
  width: 290px;
  height: 252px;
  top: 56.38%;
  left: 5.55%;
}
#sea_stick .sea03 {
  width: 290px;
  height: 252px;
  top: 56.38%;
  left: 54.16%;
}

.include01 li {
  /*background:#FFF; border-radius:10px;*/
}
.include01 .display_exact .goods_set {
  margin-bottom: 0;
}
.include01 .img_box {
  float: left;
  margin-bottom: 0;
}
.include01 .name {
  font-weight: normal;
}
.include01 .copy {
  display: none;
}
.include01 .c-panel__action {
  margin-top: 10px;
  text-align: right;
  width: 100%;
  text-align: right;
}

/* 動画部分 */
.movie_box {
  margin-bottom: 0%;
  padding-top: 0;
}

/* 動き */
/*translateX(-50px)  X軸（左横に）方向に50px */
/*translateY(50px)  Y軸（上縦に）方向に50px */
/*translateY(-50px)  Y軸（下縦に）方向に50px */

/* ふわっとアニメ */
/* 動作を適用する箇所 */
.fuwatAnime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2s; /* アニメ時間 */
  -ms-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-transition-delay: 0.5s; /* 開始時間 */
  -ms-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-animation-name: fuwatAnime; /* アニメ名 */
  -ms-animation-name: fuwatAnime;
  animation-name: fuwatAnime;
  visibility: visible !important;
}

.fuwatAnime2 {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2.5s; /* アニメ時間 */
  -ms-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-transition-delay: 1.5s; /* 開始時間 */
  -ms-transition-delay: 1.5s;
  transition-delay: 1.5s;
  -webkit-animation-name: fuwatAnime2; /* アニメ名 */
  -ms-animation-name: fuwatAnime2;
  animation-name: fuwatAnime2;
  visibility: visible !important;
}

.fadeIn_r_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s; /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: 0s; /* 開始時間 */
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation-name: fadeIn_r_Anime; /* アニメ名 */
  -ms-animation-name: fadeIn_r_Anime;
  animation-name: fadeIn_r_Anime;
  visibility: visible !important;
}

.fadeIn_l_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s; /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: 0s; /* 開始時間 */
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation-name: fadeIn_l_Anime; /* アニメ名 */
  -ms-animation-name: fadeIn_l_Anime;
  animation-name: fadeIn_l_Anime;
  visibility: visible !important;
}

.fadeIn_ru_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s; /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: -0.5s; /* 開始時間 */
  -ms-transition-delay: -0.5s;
  transition-delay: -0.5s;
  -webkit-animation-name: fadeIn_ru_Anime; /* アニメ名 */
  -ms-animation-name: fadeIn_ru_Anime;
  animation-name: fadeIn_ru_Anime;
  visibility: visible !important;
}

.fadeIn_lu_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s; /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: -0.5s; /* 開始時間 */
  -ms-transition-delay: -0.5s;
  transition-delay: -0.5s;
  -webkit-animation-name: fadeIn_lu_Anime; /* アニメ名 */
  -ms-animation-name: fadeIn_lu_Anime;
  animation-name: fadeIn_lu_Anime;
  visibility: visible !important;
}

/* 動作内容 */
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-webkit-keyframes fuwatAnime2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0) scale(0.5);
  }
  70% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
  }
}
@-webkit-keyframes fadeIn_r_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}
@-webkit-keyframes fadeIn_l_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}
@-webkit-keyframes fadeIn_ru_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px) translateY(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}
@-webkit-keyframes fadeIn_lu_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px) translateY(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}

@keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-150px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fuwatAnime2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0) scale(0.5);
    -ms-transform: translateY(0) scale(0.5);
    transform: translateY(0) scale(0.5);
  }
  70% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1.2);
    -ms-transform: translateY(0) scale(1.2);
    transform: translateY(0) scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeIn_r_Anime {
  0% {
    opacity: 0.5; /* 透明 */
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px); /*X軸（右横に）方向に300px */
  }
  100% {
    opacity: 1; /* 不透明 */
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeIn_l_Anime {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeIn_ru_Anime {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(300px) translateY(200px);
    -ms-transform: translateX(300px) translateY(200px);
    transform: translateX(300px) translateY(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeIn_lu_Anime {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(-300px) translateY(200px);
    -ms-transform: translateX(-300px) translateY(200px);
    transform: translateX(-300px) translateY(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.c-panel__body .c-panel__badge {
  display: none;
}

/*   PC　　*/
@media print, screen and (min-width: 768px) {
  #sea_stick {
    width: 720px;
    margin: 0 auto;
  }
  .kaiyuu {
    /*display:none;*/
    margin: 5% 0;
  }

  /* PC表示 */
  .include01 li {
    margin: 20px;
    padding: 15px;
  }
  .include01 .txt_box {
    margin-left: 25%;
    text-align: left;
  }
  .include01 .c-panel__body .c-panel__name {
    font-size: 130%;
    font-weight: 200;
  }
  .include01 .price_box {
    font-size: 140%;
  }
  .include01 .c-panel__header__image {
    width: 200px;
    margin-right: 15px;
  }
  .include01 .goods_set .btn-sm {
    max-width: 220px;
    font-size: 20px;
    font-weight: bold;
  }
  body .include01 .btn-sm {
    min-width: 150px;
    width: 100%;
  }
  .box1 {
    border: 30px solid #c6e7f3;
    margin-top: 0;
  }
}

/*   スマホ　　*/
@media print, screen and (max-width: 768px) {
  #sea_stick {
    margin: auto;
  }

  .contents_main {
    margin: 0;
  }
  #sea_stick .sea_link {
    width: 45.83%;
    height: 64.18%;
  }
  #sea_stick .sea_btn {
    width: 83.33%;
    height: 31.72%;
  }

  #sea_stick .reco01,
  #sea_stick .reco02,
  #sea_stick .reco03,
  #sea_stick .reco04 {
    width: 100%;
    height: 6.66%;
  }
  /* SP表示 */
  .include01 li {
    margin: 3% 3% 3.2% 3%;
  }
  .include01 .txt_box {
    margin-left: 30%;
    text-align: left;
  }
  .include01 .c-panel__name {
    font-size: 88%;
    font-weight: 200;
  }
  .include01 .price_box {
    font-size: 80%;
  }
  .include01 .img_box {
    margin-right: 8px;
    width: 30%;
  }
  .include01 .goods_set .btn-sm {
    margin-top: 10px;
    font-weight: bold;
  }
  * body .include01 .btn img {
    width: 60%;
    height: auto;
  }
  #sea_stick .sea00 {
    width: 88.88%;
    height: 33.61%;
  }
  #sea_stick .sea01,
  #sea_stick .sea02,
  #sea_stick .sea03 {
    width: 40.27%;
    height: 35%;
  }
  .c-panel__action .btn {
    font-size: 1.1rem;
  }
  .box1 {
    border: 18px solid #c6e7f3;
    padding: 3%;
  }
  .kaiyuu {
    margin: 5% 2%;
  }
}

/*^^^^^^^^^^^^^後から追加^^^^^^^^^^^*/
/* 画像位置調整 */
.c-panel__link {
  width: 100%;
  display: inline-flex;
}

/* 商品名、受取方法、価格 */
.c-panel__body {
  width: auto;
  place-content: center;
  place-items: start;
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

/* 価格色調整 */
.c-panel__price-wrapper {
  color: #f25173;
}

/* ボタン調整 */
.c-panel__action .btn {
  width: 61%;
  padding: auto;
  border-radius: 6px;
  border-color: rgb(58, 56, 56);
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  box-shadow: 1px 0.1px 4px rgb(54, 54, 54);
}

.c-panel__header {
  flex: 1;
  padding-right: 3%;
  margin-top: auto;
  margin-bottom: auto;
}

.clear_contents .sample_view .c-panel__action {
  display: none;
}

.c-panel__action {
  display: flex;
  justify-content: flex-end;
}