@charset "UTF-8";
/* リセットcss ------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 100%;
  line-height: 1.4;
  text-align: center;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  background-color: yellow;
}

::-moz-selection {
  background-color: yellow;
}

img {
  width: 100%;
  vertical-align: middle;
  border: 0;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

a:focus {
  outline: none;
}

a:active,
a:hover {
  outline: 0;
}

/* リセットcss ここまで ------------------------------------------------- */

/* 共通 ------------------------------------------------- */
.box {
  margin-bottom: 20px;
}
.box:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .box {
    margin-bottom: 30px;
  }
  .box:last-child {
    margin-bottom: 0;
  }
}

/* header ------------------------------------------------- */
.header_wrap {
  background-image: url(../img/bg-header_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
}

.header_inner {
  width: 92%;
  margin: 0 auto;
  position: relative;
}

.tit_header {
  width: 100%;
  padding: 20px 0;
}

@media screen and (min-width: 750px) {
  .header_wrap {
    background-image: url(../img/bg-header_pc.png);
    height: 320px;
  }
  .header_inner {
    max-width: 690px;
  }
  .tit_header {
    width: 486px;
  }
}

.txt_top {
	width: 90%;
	min-width: 280px;
}

/* ピナたんふわふわ */
.header_pina {
  position: absolute;
  right: 0;
  top: 0;
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/pic-header-pina.png) no-repeat center center / 100% auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 30%;
  height: 50%;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

@media screen and (min-width: 750px) {
  .fuwafuwa {
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    background: url(../img/pic-header-pina.png) no-repeat center center / 230px auto;
    width: 33%;
    height: 100%;
  }
}

/* info ------------------------------------------------- */
.info_wrap {
  background-image: url(../img/bg-info.png);
  background-position: center;
}

.info_inner {
  width: 92%;
  margin: 0 auto;
  padding: 30px 0;
}

.days {
  background-color: #0050B4;
  border-radius: 20px 20px 0 0;
  padding: 10px;
}

.days_yume {
  width: 92%;
}

.yume {
  background-color: #ED6D0F;
  border-radius: 0 0 20px 20px;
  padding: 10px;
}

.days_chusen {
  width: 72%;
}

.chusen_entry {
  background-color: #E62E8B;
  border-radius: 0 0 20px 20px;
  padding: 10px;
}

.img_entry {
  width: 80%;
  max-width: 400px;
  margin: 0 auto 10px;
}

.happyday {
  background-color: #E60012;
  border-radius: 20px;
  padding: 10px 15px;
}

.img_happyday {
  margin-bottom: 10px;
}

.days_apioka {
  width: 60%;
}

.apioka {
  background-color: #00A971;
  border-radius: 0 0 20px 20px;
  padding: 10px;
}

.img_apioka {
  width: 75%;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .info_inner {
    max-width: 690px;
    padding: 50px 0;
  }
  .days {
    border-radius: 30px 30px 0 0;
    padding: 15px;
  }
  .days_yume {
    width: 576px;
  }
  .yume {
    border-radius: 0 0 30px 30px;
  }
  .days_chusen {
    width: 373px;
  }
  .img_entry {
    max-width: 580px;
    margin: 0 auto;
  }
  .happyday {
    border-radius: 30px;
  }
  .days_apioka {
    width: 290px;
  }
  .apioka {
    border-radius: 0 0 30px 30px;
  }
  .img_apioka {
    width: 600px;
  }
}

/* ボタン */
.info_btn {
  display: inline-block;
  position: relative;
  background-color: #FFEC00;
  border-radius: 20px;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 5px #0050B4;
  line-height: 0;
  overflow: hidden;
}

.info_btn::after {
	animation: 2s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}

.info_btn:hover {
  transform: translate(0, 5px);
  box-shadow: none;
}

@keyframes shine {
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

.info_btn_yume {
  width: 48%;
  object-fit: contain;
}

.info_btn_apply ,.info_btn_detail {
  width: 38%;
  object-fit: contain;
}

.info_btn_download {
  width: 54%;
  object-fit: contain;
}

.ico {
  position: absolute;
  width: 13px;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
}

@media screen and (min-width: 750px) {
  .info_btn {
    border-radius: 30px;
    width: 400px;
    padding: 15px;
  }
  .info_btn_yume {
    width: 180px;
  }
  .info_btn_apply ,.info_btn_detail {
    width: 140px;
  }
  .info_btn_download {
    width: 200px;
  }
  .ico {
    width: 17px;
    right: 20px;
  }
}

/* sale ------------------------------------------------- */
.sale_wrap {
  background: transparent linear-gradient(180deg, #57D4FF 0%, #00A2DB 51%, #0074CC 100%) 0% 0% no-repeat padding-box;
}

.sale_inner {
  width: 92%;
  margin: 0 auto;
  padding: 30px 0
}

.sale_border {
  border: 4px solid #fff;
  border-radius: 20px;
  padding: 10px;
}

.fashion {
  background-color: rgba(158, 216, 245, .5);
  border-radius: 20px;
}

.gourmet {
  background:repeating-linear-gradient(-45deg,#f8d1e2,#f8d1e2 2px,#F7C9DD 0,#F7C9DD 10px)
}

.goods {
  background-color: #FFFBC7;
}

@media screen and (min-width: 750px) {
  .sale_inner {
    max-width: 690px;
    padding: 50px 0;
  }
  .sale_border {
    border: 6px solid #fff;
    border-radius: 30px;
  }
  .fashion {
    border-radius: 30px;
  }
}

/* footer ------------------------------------------------- */
footer {
  background-color: #0050B4;
  padding: 20px 0;
  color: #fff;
}

footer small {
  font-size: 14px;
}

/* レスポンシブ対応 ------------------------------------------------- */
.view_sp {
  display: block;
}
.view_pc {
  display: none;
}

@media screen and (min-width: 750px) {
  .view_sp {
    display: none;
  }
  .view_pc {
    display: block;
  }
}

/* アニメーション設定 ------------------------------------------------- */

/* スクロールしたら下から表示 */
.scroll_popup {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s;
}

.fadeIn {
  opacity: 1;
  transform: translateY(0);
}

/* スクロールしたら拡大表示 */
.scroll_zoom {
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.7s;
}

.fadeIn_zoom {
  opacity: 1;
  transform: scale(1);
}

.displayed{
   animation: fadeUp 1s forwards;
}

@keyframes fadeUp{
    0%{opacity:0; transform: translateY(0);}
  100%{opacity:1; transform: translateY(-100px);}
}

/* タイトルズームアウト */
.anim-box.zoomin.is-animated {
  animation: zoomIn 1s cubic-bezier(0.25, 1, 0.25, 1) forwards;
}
 
@keyframes zoomIn {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ページトップ */
.pagetop {
  position: fixed;
  z-index: 999;
  right: 10px;
  bottom: 7px;
  width: 30%;
  min-width: 100px;
  max-width: 150px;
  transition: all 0.2s ease-in-out;
  transform: translate(0, 0);
  filter: drop-shadow(0px 0px 2px #0050B4);
}

.pagetop.hover {
  transform: translate(0, -10px);
}

@media screen and (min-width: 750px) {
  .pagetop {
    right: 20px;
    bottom: 14px;
  }
}