@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-thin.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-thin.ttf") format("truetype");
  font-weight: 200; }
@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-light.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-light.ttf") format("truetype");
  font-weight: 300; }
@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-regular.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-regular.ttf") format("truetype");
  font-weight: 400; }
@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-medium.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-medium.ttf") format("truetype");
  font-weight: 500; }
@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-bold.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-bold.ttf") format("truetype");
  font-weight: 700; }

@font-face {
  font-family: "hanazono";
  src: url("/product/closeup/assets/font/hanazono/HanaMinA.woff") format("woff"), url("/product/closeup/assets/font/hanazono/HanaMinA.ttf") format("truetype");
  font-weight: 400; }
.hanazono {font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;}



@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /*inherit*/
  line-height: 1; /*inherit*/
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
     -moz-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
  .landscape { display: block !important; }
  .portrait { display: none !important; }
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
  .landscape { display: none !important; }
  .portrait { display: block !important; }
}


.negativemargin_main { margin-top: -90px;}
@media screen and (max-width:64em){
.negativemargin_main { margin-top: -60px;}  
}
header{ transition: .3s; }
header.hide{ transform: translateY(-100%); }

  .archive-content .divider{height: 1px !important; background: #000 !important;}
  .archive-content p {color: #fff !important;}
  .archive-content p a {color: #fff !important;}
  .archive-content p a:hover { text-decoration: underline !important;}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
}

*:focus {
  outline: none;
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('/product/closeup/assets/slick/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('/product/closeup/assets/slick/fonts/slick.eot');
    src: url('/product/closeup/assets/slick/fonts/slick.eot?#iefix') format('embedded-opentype'), url('/product/closeup/assets/slick/fonts/slick.woff') format('woff'), url('/product/closeup/assets/slick/fonts/slick.ttf') format('truetype'), url('/product/closeup/assets/slick/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;

    cursor: pointer;

    color: #000; /*color: transparent;*/
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: #f00; /*color: transparent;*/
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: ;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute; left: 40px;
    z-index: 200;
}
.slick-next:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: ;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute; right: 40px;
    z-index: 200;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

.fuwafuwaA {
-webkit-animation:fuwafuwaA 5s infinite linear alternate;
animation:fuwafuwaA 5s infinite linear alternate;
}
@-webkit-keyframes fuwafuwaA {
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(0, -10px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@keyframes fuwafuwaA {
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(0, -10px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}

.fuwafuwaB {
-webkit-animation:fuwafuwaB 7s infinite linear alternate;
animation:fuwafuwaB 7s infinite linear alternate;
}
@-webkit-keyframes fuwafuwaB {
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(0, 8px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(-7deg);}
}
@keyframes fuwafuwaB {
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(0, 8px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(-7deg);}
}

.bg_LP {
  background: url("/product/closeup/assets/img/fja/bg_LP.jpg") no-repeat center center;
  bottom: -5%;
  background-size: cover;
  position: absolute;
  width: 110%;
  left: -5%;
  top: -5%;
}
.bg_LB {
  background: url("/product/closeup/assets/img/fja/bg_LB.jpg") no-repeat center center;
  bottom: -5%;
  background-size: cover;
  position: absolute;
  width: 110%;
  left: -5%;
  top: -5%;
}

.intro_products { position: relative; width: 100%;}

.color_LP { color: #e40063;}
.color_LB { color: #e50012;}

@media screen and (orientation: landscape) {  

.intro_caption { position: absolute; top: 55%; left: 15%; text-align: left; font-size: 2.2rem; line-height: 1.5; font-weight: 700; text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }

.intro_cup { position: absolute; top:35%; left:10%; width: 20%;}
.intro_straw { position: absolute; top:10%; left:70%; width: 20%;}
.intro_name_caption { position: absolute; top: 90%; left: 30%; text-align: left; font-size: 1.8rem; line-height: 1.5; font-weight: 700; text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }
.intro_straw_caption { position: absolute; top: 72%; right: 15%; text-align: left; font-size: 1.8rem; line-height: 1.5; font-weight: 700; text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }

.intro_name { position: relative; float: left; width: 50%; padding: 5% 2% 5% 10%; background: rgba(52, 225, 170, 0);}
.intro_open { position: relative; float: left; width: 50%; padding: 5% 15% 5% 7%; margin: 0 0 5% 0; background: rgba(225, 197, 52, 0);}

.pro_left {
  width: ; height: ; background: rgba(246, 220, 232, 1);
}
.pro_right {
  width: ; height: ; background: rgba(171, 210, 240, 1);
}
.boysgirls { width:30%; margin: 5% 35%;}
.products { width:100%; padding: 5% 15%;}

.colors { position: absolute; width: 13%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.pro_link { width:20%; margin: 5% 40%;}

}

@media screen and (orientation: portrait) {  

.intro_caption { position: relative; width: 100%; top: ; left: ; text-align: center; font-size: 1.5rem; line-height: 1.2; font-weight: 700; text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }

.intro_cup { position: absolute; top:15%; left:68%; width: 35%;}
.intro_straw { position: absolute; top:30%; left:-2%; width: 35%;}
.intro_name_caption { position: relative; width: 100%; top: ; left: ; text-align: center; font-size: 1.4rem; line-height: 1.2; font-weight: 700; text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }
.intro_straw_caption { position: relative; width: 100%; top: ; right: ; text-align: center; font-size: 1.4rem; line-height: 1.2; font-weight: 700; text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }

.intro_name { position: relative; float: left; width: 100%; padding: 5% 10% 5% 10%; margin: 10% 0 5% 0; background: rgba(52, 225, 170, 0);}
.intro_open { position: relative; float: left; width: 100%; padding: 5% 15% 5% 15%; margin: 0 0 5% 0; background: rgba(225, 197, 52, 0);}

.pro_left {
  width: ; height: ; background: rgba(246, 220, 232, 1);
}
.pro_right {
  width: ; height: ; background: rgba(171, 210, 240, 1);
}
.boysgirls { width:30%; margin: 5% 35%;}
.products { width:100%; padding: 5% 15%;}

.colors { position: absolute; width: 13%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.pro_link { width:20%; margin: 5% 40%;}

}


@media screen and (orientation: landscape) and (min-width: 1300px) {
.intro_caption { font-size: 2.4rem; line-height: 1.5;}
.intro_name_caption { font-size: 2rem; line-height: 1.5;}
.intro_straw_caption { font-size: 2rem; line-height: 1.5;}
}

@media screen and (orientation: landscape) and (min-width: 1600px) {
.intro_caption { font-size: 2.7rem; line-height: 1.5;}
.intro_name_caption { font-size: 2.4rem; line-height: 1.5;}
.intro_straw_caption { font-size: 2.4rem; line-height: 1.5;}
}

@media screen and (orientation: landscape) and (min-width: 1900px) {
.intro_caption { font-size: 3.2rem; line-height: 1.5;}
.intro_name_caption { font-size: 2.9rem; line-height: 1.5;}
.intro_straw_caption { font-size: 2.9rem; line-height: 1.5;}
}

@media screen and (orientation: landscape) and (min-width: 2500px) {
.intro_caption { font-size: 4rem; line-height: 1.5;}
.intro_name_caption { font-size: 3.6rem; line-height: 1.5;}
.intro_straw_caption { font-size: 3.6rem; line-height: 1.5;}
}

@media screen and (orientation: portrait) and (min-width: 480px) {
.intro_caption { font-size: 2rem; line-height: 1.3;}
.intro_name_caption { font-size: 1.8rem; line-height: 1.3;}
.intro_straw_caption { font-size: 1.8rem; line-height: 1.3;}
}

@media screen and (orientation: portrait) and (min-width: 600px) {
.intro_caption { font-size: 2.2rem; line-height: 1.4;}
.intro_name_caption { font-size: 2rem; line-height: 1.4;}
.intro_straw_caption { font-size: 2rem; line-height: 1.4;}
}

@media screen and (orientation: portrait) and (min-width: 760px) {
.intro_caption { font-size: 2.5rem; line-height: 1.5;}
.intro_name_caption { font-size: 2.3rem; line-height: 1.5;}
.intro_straw_caption { font-size: 2.3rem; line-height: 1.5;}
}