@charset "utf-8";
#container{
    background-size: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
}


/*==========================================
PC >  keyvisual
==========================================*/

#keyvisual{
  position: relative;
  padding: 42.7% 0 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  background-image: url(/dreaming/lp/marui_2019/assets/img/01_keyvisual.jpg) ;
}

#keyvisual div{
  content: "";
  margin: 0 auto;
  position: absolute;
  left: 16%;
  right: 0;
  top: 0;
  bottom: 0;
}

#keyvisual div a{
  width: 14.9%;
  display: block;
}

#keyvisual div a img{
  width: 100%;
}



/*==========================================
PC > overview
==========================================*/

#overview{
  width: 100%;
  background: url(/dreaming/lp/marui_2019/assets/img/02_background.jpg) no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-bottom:4em;
}

#overview{
  padding: 1.8em 1em 1.7em;
}

#overview img{ display: block; margin: 0 auto; }
#overview img:nth-child(2){
  margin-top:2em;
  margin-bottom:2em;
}



/*==========================================
PC > cotents
==========================================*/

#contents .contents_head{
  width: 70%;
  position: relative;
  background:linear-gradient(to right,  rgb(118,225,224) 0%,rgb(125,185,232) 100%);
  padding: 1em 3em 1em 0;
}

#contents .contents_head h3{
  width: 80%;
  float: right;
  text-align: right;
  padding: 0.5em 0;
}

#contents .contents_head h3 img{ vertical-align: middle; }

#contents article{
  margin-bottom: 6em ;
}

#contents .contents_box{
  max-width: 1280px;
  text-align: center;
  margin: 0 auto;
  padding: 0 1em;
}

#contents .article_txt{
  margin: 1.5em 0;
  font-size: 2.9vh;
  font-weight: bold;
  color: #6e6e6e;
  letter-spacing: 2px;
}

#contents .article_txt .txt_sp{ display: none; }

#contents .article_txt p{
  display: inline;
  color: #ff297f;
}

#contents .article_txt span{ font-size: 2.5vh; }

#contents .c-01 .contents_img,
#contents .c-02 .contents_img{
  background: url(/dreaming/lp/marui_2019/assets/img/03_c01_background.png?v=190927) no-repeat center bottom;
  -webkit-background-size: cover;
  background-size: cover;
  text-align: center;
  padding: 2.6em 0;
  margin: 30px 0;
  position: relative;
}

#contents .slider_area{ margin: 1em 0; }


#contents .c-01 .osk_hakata{
  width: 90%;
  max-width: 820px;
  padding: 1.5em 1em;
  margin: 0 auto;
  background: #FFF;
  border: 3px solid #04c5ef;
  text-align: center;
}

#contents .c-01 .osk_hakata p{
  color: #ff297f;
  font-size: 2.7vh;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
}


/* = 01. ====================== */
#contents .contents_panel-logo{
  text-align: center;
  margin: 0 0 2em 0;
}

#contents .contents_panel-logo li{
  width: 19%;
  display: inline-block;
  padding: 0 0.5em;
}

#contents .contents_panel-logo li img{
  max-width: 224px;
  width: 100%;
}



/* = 02.====================== */
#contents article.c-02 .article_txt{
  text-align: center !important;
}

/* = 03. ====================== */
#contents article.c-03 .contents_img{
  background: url(/dreaming/lp/marui_2019/assets/img/03_c03_background.jpg) no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
  position: relative;
  margin: 3em 0 0;
}

#contents article.c-03 hr{
  width: 100%;
  height: 3px;
  border:none;
  margin: 0;
  background:linear-gradient(to right,  rgb(118,225,224) 0%,rgb(125,185,232) 100%);
}

#contents article.c-03 .broadcast{
  width: 1100px;
  margin:0 auto;
  position: relative;
}

#contents article.c-03 .broadcast a{
    width: 80%;
    margin: 1em auto;
    background: #015bab;
    padding: 1.5em 0;
}
#contents article.c-03 .broadcast>div{
  text-align: center;
  width: 51%;
  /*padding: 2.5em 0;*/
  background-color: rgba(255,255,255,0.9);
}

#contents article.c-03 .broadcast .chara{
  position: absolute; right: 0; bottom: 0;
}

#contents article.c-03 .contents_box{
  width:100%;
  max-width: 100% !important;
  background: url(/dreaming/lp/marui_2019/assets/img/02_background.jpg) no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  padding: 2.5em 0 1.5em;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  border-bottom: 3px solid #FFF;
}

#contents article.c-03 .contents_box ul{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

#contents article.c-03 .contents_box ul li{
  display: inline-block;
  width: 45%;
  padding: 0 1em;
}

#contents article.c-03 .contents_box a{
  width: 100%;
  margin: 1em auto;
  background: #04c5ef;
}

/*==========================================
PC >  goods
==========================================*/

#goods{
  margin: 5em 0;
  background: url(/dreaming/lp/marui_2019/assets/img/05_background_02.jpg) no-repeat top center;
  background-size: cover;
  -moz-box-shadow: 0px 0px 3px 0px rgba(195, 195, 195, 0.8);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(195, 195, 195, 0.8);
  -ms-box-shadow: 0px 0px 3px 0px rgba(195, 195, 195, 0.8);
  box-shadow: 0px 0px 3px 0px rgba(195, 195, 195, 0.8);
  padding: 3em 0;

}
#goods article{
  width: 90%;
  max-width: 930px;
  margin:0 auto;
  padding:2em 0;
  text-align: center;
  color: #555;
  font-weight: bold;
  background-color: rgba(255,255,255,0.9);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);


}

#goods article div{
}

#goods article div p{
  font-size: 2vh;
  margin: .2em 0;
}

#goods article div a{
  width: 70%;
  display: block;
  background: #ff297f;
  margin: 1em auto;
  padding: 1.5em 0 !important;
}

/*追加 11/23*/
#goods article h3{ margin: 2em 0 1em; }
#goods article h3 img{ width: 450px; }
#goods article .benefits_img{
  width: 500px;
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);

}


/*==========================================
PC > eposcard
==========================================*/

#eposcard{margin: 5em 0 8em;}
#eposcard h3{
  width: 90%;
  max-width: 850px;
  margin: 1.5em auto;
  font-size: 2.5vh;
  line-height: 4vh;
  text-align: center;
}

#eposcard h3 span {
    font-size: 2.5vh;
}

#eposcard .guidance{
  max-width: 900px !important;
  margin: 0 auto
}

.eposcard_benefits{
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
}

.eposcard_benefits li{
  width: 45%;
  margin: 1em .5em;
  display: inline-block;
  background: #FFF;
  font-weight: bold;
  padding: 1em 1em 1.5em;
}

.eposcard_benefits p{
  margin: 0.5em 0;
}

.eposcard_benefits p span{
  color: #F00;
  font-size: 1.5vh;
}
.eposcard_benefits li img:nth-child(1){ width: 100px; }
.eposcard_benefits li:nth-child(1){ border: 3px solid #a08228; }
.eposcard_benefits li:nth-child(2){ border: 3px solid #a5001e; }
.eposcard_benefits li:nth-child(3){ border: 3px solid #DDD; }
.eposcard_benefits li:nth-child(4){ border: 3px solid #DDD; }
.epos_entry h4{
  width: 500px;
  color: #FFF;
  background: #a5001e;
  text-align: center;
  padding: 0.5em;
  margin: 3em auto 1em;
  font-size: 2.5vh;
}

.epos_entry{ text-align: center; }
.epos_entry p span{ font-weight: bold; }
.epos_entry img{
  margin: 1.5em auto;
  display: block;
}

#eposcard .attention{
  width: 95%;
  max-width: 920px;
  margin: 0 auto;
  font-size: 1.5vh;
}

.b_c li{
  border: 3px solid #DDD !important;
}

.eposcard_benefits h4{
  width: 80%;
  margin: .5em auto;
  background: #ff297f;
  color: #FFF;
}


/*==========================================
PC > access
==========================================*/

#access article{
  background: url(/dreaming/lp/marui_2019/assets/img/access_bg.jpg) repeat-y center;
  background-position: top;
  margin: 2em auto 0;
  padding: 2em 0;
}

#access ul{
  width: 1140px;
  margin: 0 auto;
  text-align: center;
  color: #FFF;
}

#access ul li{
  width: 47%;
  display: inline-block;
  margin: 1em .5em;
  text-align: left;
  padding: 0 1em;
}
#access ul li .googlemap{
  width: 100%;
  position: relative;
  padding-bottom: 40%;
  padding-top: 5em;
  height: 0;
  overflow: hidden;
}

#access div{
  width: 1140px;
  margin: 0 auto;
  position: relative;
  padding: 2em 0;
  font-size: 1.4vh;
}

#access .shibuya dl{
  position: absolute;
  top: 5%;
  left: 50%;
}

#access dt{ margin: 1em 0 0 0; }
#access dd span{ text-decoration: underline;}
#access div .googlemap {
  width: 45%;
  position: relative;
  padding-bottom: 20%;
  padding-top: 5em;
  margin:0 0 0 2em;
  height: 0;
  overflow: hidden;
}

#access .googlemap iframe,
#access .googlemap object,
#access .googlemap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*==========================================
PC > sns
==========================================*/
#sns {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  padding: 5em 0 2em;
}

#sns li{
  width: 15%;
  display: inline-block;
  margin: 0 0.5em;
}

#sns li img{
  width: 100%;
}

/*==========================================
PC > information_area
==========================================*/

#information_area{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2em 1em;
}

#information_area article{ margin: 2em auto; }

#information_area p{
  background: #04c5ef;
  color: #FFF;
  padding: 0.5em 0;
  text-align: center;
  font-weight: bold;
  font-size: 2.9vh;
  line-height: 3.5vh;
  margin: 0 0 0.5em 0;
  letter-spacing: 1px;
}

#information_area span{
  display: block;
  font-weight: bold;
  text-align: center;
  font-size: 1.8vh;
  margin: 1em 0;
}

#information_area .txt_pink{ color: #ff297f; }
#information_area ul{ margin: 0 0 0 1.5em; }
#information_area ul.ls{ margin: 0; }
#information_area ul.ls li{ list-style: none; }
#information_area li{
  line-height: 3.5vh;
  list-style: circle;
  font-size: 1.7vh;
}
#information_area ul.ln li{ list-style: none !important; }

/*==========================================
★PC > goods.php
==========================================*/

#page_head{
  width: 100%;
  background: url(/dreaming/lp/marui_2019/assets/img/02_background.jpg) no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #FFF;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #76e1e0 0%, #5ea1e4 100%);
  border-image-slice: 1;
  padding: 3em 1em 2.5em;
}

#page_head img{width: 14%;}

.information_btn{
  width: 100%;
  max-width: 900px;
  margin: 2em auto 1em;
  text-align: center;
}

.information_btn li{
  display: inline-block;
  width: 45%;
  padding: 0 1em;
}

.information_btn a{
  width: 100%;
  margin: 1em auto;
  background: #04c5ef;
  padding: 0.5em 0;
}


#goods_list ul {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center !important;
}

#goods_list  li{
    width: 21%;
    text-align: left;
    margin: 1em .5em;
}

#goods_list li img{
    width: 100%;
    max-width: 260px;
    border: 2px solid #EEE;
    margin: 0 0 .5em 0;
}

#goods_list li a{
  text-decoration: none;
  color: #555;
}

#goods_list li span{
  background:#0f71c7;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.1em 0.5em;
}

#goods_list li p{
  display: inline-block;
  background: #5ea1e4;
  padding: 0.1em 1em;
  margin: 1em 0 0.5em;
  text-align: left;
}

#goods_list li span,
#goods_list li p{
  color: #FFF;
  font-size: .8em;
}


#goods_list li dl dt{
  font-size: .85em;
  line-height: 1.5em;
  text-align: left;
}

#goods_list li dl dd{
  font-size: .9em;
  text-align: right;
  font-weight: bold;
}

#goods_more{
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 8em 0 5em;
  text-align: center;
}

#benefits h2{
  margin: 5em auto 2em;
}

#benefits article{
  width: 1000px;
  margin:0 auto;
  position: relative;
}

#benefits article img{
  width: 430px;
  border: 3px solid #EEE;
}

#benefits article .benefits_detail{
  width: 570px;
  position: absolute;
  padding: 3%;
  top: 2%;
  right: 0;
}

#benefits .benefits_detail h4{
  font-weight: normal;
  font-size: 2.1vh;
  margin: 0 0 .5em -0.5em;
}

#benefits article li{
  font-size: 1.6vh;
  text-indent: -1vh;
}

#online{
  width: 95%;
  max-width: 1000px;
  margin:5em auto 1em;
  border: 3px solid #DDD;
  background: #FFF;
}

#online h3{
  color: #FFF;
  background: #017dc5;
  border-bottom: 2px solid #EEE;
  padding: 1.5em 0 1em;
  letter-spacing: 1px;
  text-align: center;
}

#online h3 img{ vertical-align: sub; }

#online p{
  width: 95%;
  text-align: center;
  margin: 2em auto 1em;
}

#online table{
  width: 95%;
  max-width: 800px;
  border: 1px solid #EEE;
  text-align: left;
  margin:0 auto 5%;
  border-bottom: 1px solid #EEE;
}

#online table th,
#online table td{
  padding: 1em;
  border-bottom: 1px solid #EEE;
  vertical-align: middle;
}

#online table tr:last-child th,
#online table tr:last-child td{
  border-bottom: none;
}

#online table th{
  width: 20%;
  background: #017dc5;
  border-bottom: 1px solid #EEE;
  font-weight: bold;
  letter-spacing: 1px;
  color: #FFF;
}

#online table td{
  background: #FFF;
}

#online a{
  width: 90%;
  max-width: 660px;
  margin: 0 auto 3em;
  text-align: center;
  background: #ff297f;
  padding: 1.5em;
}

#guidance{
  width: 95%;
  max-width: 800px;
  padding: 1em;
  font-size: 1.4em;
  margin: 2em auto;
  background: #FFF;
  border: 3px solid #F00;
  text-align: center;
}

#guidance p{ font-weight: bold; }

#guidance span{
  font-weight: bold;
  color: #F00;
}


/*==========================================
SP
==========================================*/
@media screen and (max-width: 768px) {

#guidance{
  font-size: 1em;
}

#keyvisual{
  padding: 140.9% 0 0;
  width: 100%;
  background-image: url(/dreaming/lp/marui_2019/assets/img/sp/01_keyvisual.jpg);
}
#keyvisual div{
  width: 70%;
  bottom: 0;
  left: 0;
}

#keyvisual div a{
  width: 100%;
  display: block;
}

#keyvisual div a img{
  width: 100%;
  position: absolute;
  bottom: 1em;
}

/*==========================================
SP > overview
==========================================*/
#overview{
  margin: 0 0 2em 0;
  padding: 1em;
}
/*==========================================
SP > cotents
==========================================*/

#contents article { margin-bottom: 3em; }
#contents .contents_head{ width: 95%; padding: 0.5em; }
#contents .contents_head h3{ width: 100%; }
#contents .contents_box{ padding: 0 0.5em; }
#contents .article_txt{ margin: 1em 0; }
#contents .article_txt .txt_sp{
  display: inherit;
  text-align: left;
  line-height: 4.5vh;
}
#contents .article_txt .txt_pc{ display: none; }
#contents .contents_img{ padding: 1em 0 !important; }
#contents .contents_img p{
  width: 35%;
  margin: 0 auto;
}
#contents .slider_area{ margin: .5em 0; }
#contents .slider_area img{ width: 90%; }
#contents .contents_panel-logo { margin: 0 0 2em 0; }
#contents .contents_panel-logo li{
  width: 32%;
  padding: 0 0.2em;
  margin: 0 0 1em;
}

#contents .c-01 .osk_hakata{
  width: 95%;
  font-size: 2vh;
  text-align: left;
}

#contents .c-01 .osk_hakata p{
  letter-spacing: 1px;
  text-align: center;
}

/* = 02. ====================== */
#contents article.c-02 .contents_img p{ width: 70%; }
#contents article.c-02 .txt_sp{ text-align: center; }
/* = 03. ====================== */
#contents article.c-03 .contents_img{ background-position: right top; }
#contents article.c-03 .broadcast { width: 100%; }
#contents article.c-03 .broadcast>div{ width: 100%; }
#contents article.c-03 .broadcast>div img{ width: 80%; }
#contents article.c-03 .broadcast .chara{ display: none; }
#contents article.c-03 .broadcast span{ padding: 1em; }
#contents article.c-03 .contents_box{padding: 2.5em 5px;}
#contents article.c-03 .contents_box ul li{
  width: 100%;
}

/*==========================================
SP > goods
==========================================*/
#goods article{
  width: 95%;
  padding: .5em 0;
}

#goods article img{
  width: 80% !important;
  display: block !important;
  margin: 0 auto !important;
}

#goods article h2{ margin-bottom: 1em; }
#goods article div{ padding: .5em; font-size: 2.6vh; }
#goods article div a{
  width: 95%;
  margin: 1em auto;
  padding: 1em 0 !important;
}

#goods article div .benefits_img{ margin: 1em auto !important; }
#goods article p br{ display: none; }

/*==========================================
SP > access
==========================================*/
#access article{
  margin: 1em auto 0;
  padding: 1em;
  font-size: 2.3vh;
}
#access ul{ width: 100%; }
#access ul li{
  width: 100%;
  margin: 0 0 1em;
  padding: 0;
}

#access div.shibuya{
  width: 100%;
  padding: 1.5em 1em;
  font-size: 1.8vh;
}

#access div.shibuya .googlemap {
  width: 100%;
  position: relative;
  padding-bottom: 40%;
  padding-top: 5em;
  margin: 0;
  height: 0;
  overflow: hidden;
}

#access .shibuya dl{
  width: 100%;
  position: static;
}

/*==========================================
SP > eposcard
==========================================*/

#eposcard h2{
  width: 95%;
  margin: 0 auto 1em;
}

#eposcard h3{ margin: 1em auto; }
.eposcard_benefits li{ width: 90%; }

#eposcard .attention{
  width: 95%;
  margin: 0 auto;
  font-size: 2vh;
}
.epos_entry h4{ width: 90%; }
.epos_entry p span{ display: block; }
.epos_entry{
  width: 95%;
  margin: 0 auto;
  text-align: center;
  font-size: 2.5vh;
}
.epos_entry img{
  margin: 1.5em auto;
  display: block;
}

/*==========================================
SP > information_area
==========================================*/
#information_area{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2em 0.5em;
}

#information_area article{
  margin: 2em auto;
}

#information_area p{
  padding: 0.5em 0;
  font-size: 2.8vh;
  line-height: 5vh;
  margin: 0 0 0.5em 0;
}

#information_area span{
  font-size: 2.5vh;
}
#information_area li{
  line-height: 4vh;
  padding: .2em 0;
  font-size: 2.1vh;
}

#information_area ul.ln li{ list-style: none !important; }
#sns { padding: 3em 0; }

/*==========================================
SP > goods.php
==========================================*/

#page_head{ padding: 2em 0 1.5em; }
#page_head img{ width: 50%; }
.information_btn li{ width: 100%; }
.information_btn a{ padding: 1em 0; }

#goods_list li{
  width: 42%;
  height: 100%;
  margin: .8em;
}
#goods_list li p { font-size: 10px; }
#goods_list h3 {
  width: 90%;
  margin:10em auto;
  line-height: 5vh;
  padding: .5em 0;
}

#goods_list h3 br{ display: none; }
#goods_more{ padding: 3em 0; }

#benefits article{
  width: 100%;
  text-align: center;
}

#benefits h2{
  width: 90%;
  margin: 5em auto 1em;
}

#benefits article img{
  width: 70%;
  margin:0 auto;
}

#benefits article .benefits_detail{
  width: 100%;
  position: static;
}

#benefits .benefits_detail h4{
  font-weight: bold;
  text-align: center;
  font-size: 2.8vh;
  padding: 0 .5em;
}

#benefits .benefits_detail h4 br{ display: none; }

#benefits article li{
  text-align: left;
  font-size: 2vh;
}

#online{
  width: 98%;
  border: 2px solid #015bab;
}
#online h3{ padding: 5% }
#online p{
  width: 95%;
  margin: 1em auto;
  font-size: 2.2vh;
}

#online table{
  width: 100%;
  max-width: 100%;
  font-size: 2.2vh;
}

#online table th{
  background: #DDD;
  color: #555;
  text-align: center;
  padding: 0.5em 1em !important;
}

#online table th,
#online table td{
  width: 100%;
  display: block;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;

}
#online table td{
  padding: 1em 0.8em !important;
}
#online a{ margin-top:3em; }


}

.btn{
  color: #FFF !important;
  font-weight: bold;
  border: 3px solid #FFF;
  display: block;
  padding: 1em 1.5em;
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.26);
  letter-spacing: 1px;
  font-size: 1em;
  transition: 0.2s ;
}

.btn:hover{
  text-decoration: none;
  opacity: 0.5 ;
}

.back_toppage{
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: #DDD;
  color: #555 !important;
  padding: 1.5em;
}