@charset "UTF-8";
/* ===================================================================
 style info : 特設サイト追記部分
 author     : style.css
=================================================================== */
/*----------------------------------------------------
  全体
----------------------------------------------------*/
/*-------共通箇所*/
body {
  background: none;
}
body::before {
    content: "";
    display: block;
    position: fixed;  /* スマホ用にコレで代替。 */
    top: 0;
    left: 0;
    width: 100%;  /* サイズ指定。 */
    height: 100%;  /* サイズ指定。 */
    padding-bottom: 0;
    z-index: -1;
}
*, *:before, *:after {
    box-sizing : border-box;
}
/*-------clearfix、マージン関連*/
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}
/*-------テキスト*/

.txtCo_pink {
  color: #e40d7c;
}
.c-content p, .c-content h2 {
  font-feature-settings: "palt";
  letter-spacing: .05em;
}
.c-content dd {
  text-align: justify;
  text-justify: inter-ideograph;
  font-feature-settings: "palt";
  letter-spacing: .05em;
}
.comment {
  margin: 0 0 2% 0;
  text-align: justify;
  text-justify: inter-ideograph;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: calc(0.875rem + ((1vw - 3.2px) * 2.2321)); /* 14px @ 320px increasing to 24px @ 768px */
  /* Where: 2.2321 = 100 * font-size_difference / viewport_width_difference */
}
.comment:last-child {
  margin: 0;
}
.commentCenter {
  text-align: center;
  text-justify: inter-ideograph;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: calc(0.875rem + ((1vw - 3.2px) * 2.2321)); /* 14px @ 320px increasing to 24px @ 768px */
  /* Where: 2.2321 = 100 * font-size_difference / viewport_width_difference */
}
.shopList div.attention {
  display: flex;
  justify-content: center;
}
.shopList div.attention p {
  text-align: left;
}
/*-------PCとタブレット・スマホの切り替え*/
.sp {
  display: block;
}
.tab {
  display: block;
}
.pc {
  display: none;
}
@media screen and (min-width: 1200px) {
  .sp {
    display: none;
  }
  .tab {
    display: none;
  }
  .pc {
    display: block;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .sp {
    display: block;
  }
  .tab {
    display: none;
  }
  .pc {
    display: none;
  }
}
img {
    vertical-align : bottom;
}
/*----------------------------------------------------
  a
----------------------------------------------------*/
a {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  color: #000;
  text-decoration: none;
  transition: all 0s;
}
a:active, a:hover, a:focus {
  outline: 0;
}
@media screen and (min-width: 1200px) {
  a {
    transition: all .3s;
  }
}
/*----------------------------------------------------
  h
----------------------------------------------------*/
h2 {
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  margin-bottom: -0.5em;
}
/*----------------------------------------------------
　l-content
----------------------------------------------------*/
#l-content {
  max-width: 100%;
  margin: 0;
  /*margin-top: 115px;*/
}
.c-content {
  width: 100%;
}
.l_content_box {
  overflow: hidden;
}
.l_content_box .inner {
  padding: 15% 8%;
}
/*----------------------------------------------------
　c-mainImg
----------------------------------------------------*/
#c-mainImg {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center;
}
#c-mainImg .inner {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 11.29% 4.6875%;
}
#c-mainImg img {
  width: 100%;
  /* min-width: 100%; */
  height: auto;
  margin: 0 auto;
}
/*----------------------------------------------------
　見出し
----------------------------------------------------*/
.cp_h2title {
  position: relative;
  text-align: center;
  text-justify: inter-ideograph;
  font-size: calc(2rem + ((1vw - 3.2px) * 2.2321)); /* 32px @ 320px increasing to 42px @ 768px */
  /* Note: The calc base value (1.5625rem) MUST be stated in REM to maintain accessibility */
  /* Where: 2.2321 = 100 * font-size_difference / viewport_width_difference */
  font-weight: bold;
  line-height: 1.2em;
  margin: 0 auto 12% auto;
}
.cp_h2title_la {
  position: relative;
  text-align: center;
  text-justify: inter-ideograph;
  font-size: calc(2.1875rem + ((1vw - 3.2px) * 2.2321)); /* 35px @ 320px increasing to 45px @ 768px */
  /* Note: The calc base value (2.3125rem) MUST be stated in REM to maintain accessibility */
  /* Where: 2.2321 = 100 * font-size_difference / viewport_width_difference */
  font-weight: bold;
  line-height: 1.2em;
  margin: 0 auto 9% auto;
}
.cp_h2title:before, .cp_h2title:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 1em;
  height: 1px;
  background-color: #333;
  transform: rotate(-60deg);
}
.cp_h2title_la:before, .cp_h2title_la:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 2em;
  height: 1px;
  background-color: #333;
  transform: rotate(-60deg);
}
.cp_h2title_la span {
  font-size: 50%;
  line-height: 1.2em;
  display: block;
}
/*見出しの長さ*/
.h2title_length01 {
  width: 70%;
}
.h2title_length02 {
  width: 92%;
}
.h2title_length03 {
  width: 100%;
}
/*----------------------------------------------------
　各ボックス
----------------------------------------------------*/
/*flexBox*/
.flexBox {
  display: block;
}
.inside .flexBox {
  margin: 0 0 5% 0;
  display: grid;
}
/*----------------------------------------------------
　参加ショップ
----------------------------------------------------*/
.shopList {
  margin: 6% 0 0 0;
}
.shopList div {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 1% 0;
}
.shopList div:last-child {
  margin: 0;
}
.shopList div dt {
  min-width: 3.8em;
}
.shopList div dd {
  margin: 0;
}
/* #shopList .inside {
  margin: 0;
} */
/* ===============================================================================
　以下ブレークポイント設定*/
/*----------------------------------------------------ブレークポイント・PCサイズ以上*/
@media screen and (min-width: 1200px) {
  /** 全体
----------------------------------------------------*/
  /*-------テキスト*/
  .comment, .commentCenter {
    font-size: 110%;
    margin: 0;
  }
  /** l-content
------------------------------------------------- */
  .l_content_box .inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 100px 0;
  }
  /** c-mainImg
------------------------------------------------- */
  #c-mainImg .inner {
    width: 100%;
    /* max-width: 100%; */
    height: auto;
    margin: 0 auto;
    padding: 60px 0;
  }
  /** 見出し
----------------------------------------------------*/
  .cp_h2title {
    font-size: 271%;
    margin: 0 auto 5% auto;
  }
  .cp_h2title_la {
    font-size: 348%;
    margin: 0 auto 5% auto;
  }
  /*見出しの長さ*/
  .h2title_length01 {
    width: 32%;
  }
  .h2title_length02 {
    width: 42%;
  }
  .h2title_length03 {
    width: 76%;
  }
  /** 各ボックス
----------------------------------------------------*/
  .inside {
    margin: 0 0 40px 0;
  }
  .inside p {
    margin: 0 0 15px 0;
  }
  /*flexBox*/
  .flexBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0;
  }
  /** 参加ショップ
----------------------------------------------------*/
  .shopList {
    margin: 20px 0 0 0;
  }
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ブレークポイント・タブレットサイズ以上PCサイズ以下*/
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /** 全体
----------------------------------------------------*/
  /*-------テキスト*/
  .comment, .commentCenter {
    font-size: calc(0.875rem + ((1vw - 7.68px) * 2.3202)); /* 14px @ 768px increasing to 24px @ 1199px */
    /* Where: 2.3202 = 100 * font-size_difference / viewport_width_difference */
    margin: 0;
  }
  /** c-mainImg
------------------------------------------------- */
  #c-mainImg .inner {
    width: 100%;
    /* max-width: 650px; */
    height: auto;
    margin: 0 auto;
    padding: 7% 0;
  }
  /** 見出し
----------------------------------------------------*/
  .cp_h2title {
    font-size: calc(2.125rem + ((1vw - 7.68px) * 2.3202)); /* 34px @ 768px increasing to 44px @ 1199px */
    /* Note: The calc base value (2.125rem) MUST be stated in REM to maintain accessibility */
    /* Where: 2.3202 = 100 * font-size_difference / viewport_width_difference */
    margin: 0 auto 6% auto;
  }
  .cp_h2title_la {
    font-size: calc(2.3125rem + ((1vw - 7.68px) * 2.3202)); /* 37px @ 768px increasing to 47px @ 1199px */
    /* Note: The calc base value (1.5625rem) MUST be stated in REM to maintain accessibility */
    /* Where: 2.3202 = 100 * font-size_difference / viewport_width_difference */
    margin: 0 auto 6% auto;
  }
  /*見出しの長さ*/
  .h2title_length01 {
    width: 32%;
  }
  .h2title_length02 {
    width: 45%;
  }
  .h2title_length03 {
    width: 72%;
  }
  /** 参加ショップ
----------------------------------------------------*/
  .shopList {
    margin: 25px 0 0 0;
  }
}
/* 以下aiより追加になったデザインのcss */
#c-mainImg {
  background-image: url(../../../img/front/cosmetic/mainBg_sp.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.inner > div {
    text-align: center;
    margin-bottom: 20px;
}
.inner > div.shops > img {
    width: 90%;
}
.inner.oshi-cosmetic > div > img {
    width: 70%;
}
.inner > h2 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.inner > h2 > img {
    height: 23px;
}
.l_content_box .inner.oshi-cosmetic {
    padding-bottom: 0;
}
.oshi-cosmetic h2.cp_h2title {
    margin: 0 auto 6% auto;
}
.border-pink {
    border-bottom: 14px solid #f7c8ce;
}
.cp_h2title:before, .cp_h2title_la:before {
    left: 0;
}
.cp_h2title:after, .cp_h2title_la:after {
    right: 0;
}
.inner > div.banner-link {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-bottom: 0;
}
.banner-link a img {
    width: 100%;
}
.banner-link a:first-child {
    margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  #c-mainImg {
    background-image: url(../../../img/front/cosmetic/mainBg_pc.png);
  }
  .inner > div.shops  > img,
  .inner.oshi-cosmetic > div  > img {
      width: auto;
      height: 50px;
  }
  .inner > h2 > img {
    height: 30px;
}
  .oshi-cosmetic h2.cp_h2title {
      margin-bottom: 3%;
  }
  .border-pink {
      border-bottom: 7px solid #f7c8ce;
  }
  .cp_h2title:before, .cp_h2title_la:before {
      left: 0;
  }
  .cp_h2title:after, .cp_h2title_la:after {
      right: 0;
  }
  .inner > div.banner-link {
      flex-direction: row;
      margin-top: 60px;
  }
  .banner-link a img {
      width: 90%;
  }
  .banner-link a:first-child {
      text-align: left;
  }
  .banner-link a:last-child {
      text-align: right;
  }
}
@media screen and (min-width: 1024px) {
  .cp_h2title:before, .cp_h2title_la:before {
      left: 12%;
  }
  .cp_h2title:after, .cp_h2title_la:after {
      right: 12%;
  }
}

/* 以下11月分 */
.l_content_box .shops_inner {
  padding: 15% 8% 0;
  margin-bottom: 35px;
}
.l_content_box .cosmetics_inner {
  padding: 0% 5% 0;
}
.l_content_box .in-store-event {
  padding: 8% 5% 0;
  margin-bottom: 50px;
}
.cp_h2title_shops:before {
  left: 35px;
}
.cp_h2title_shops:after {
  right: 35px;
}
.cp_h2title_cosme:before {
  left: -25px;
}
.cp_h2title_cosme:after {
  right: -25px;
}
.cp_h2title_event:before {
  left: 13px;
}
.cp_h2title_event:after {
  right: 13px;
}
.cosmetics_inner > .cosmetic-sample {
  margin-bottom: 7px;
}
.cosmetics_inner > h2 > img {
  height: 25px;
}
.cosmetics_inner > .cosmetic-sample > img {
  height: 22px;
}
.cosmetics_inner > div.banner-link {
  margin: 30px 0px 50px;
}
.banner-link a:first-child {
  margin-bottom: 0;
}
.cp_h2title_cosme,
.cp_h2title_event {
  margin-bottom: 8%;
}
@media screen and (min-width: 768px) {
  .sp-br {
    display: none;
  }
  .l_content_box .in-store-event {
    margin-bottom: 80px;
  }
  .cosmetics_inner > div.banner-link {
    justify-content: center;
  }
  .cosmetics_inner .banner-link a {
    text-align: unset;
  }
  .cosmetics_inner .banner-link a img {
    width: 50%;
  }
  .cosmetics_inner > div.banner-link {
    margin: 50px 0px 80px;
  }
  .cp_h2title_cosme:before {
    left: -70px;
  }
  .cp_h2title_cosme:after {
    right: -70px;
  }
  .cp_h2title_event:before {
    left: -10px;
  }
  .cp_h2title_event:after {
    right: -10px;
  }
  .cp_h2title_cosme,
  .cp_h2title_event {
    margin-bottom: 5%;
  }
  .cosmetics_inner > .cosmetic-sample {
    margin-bottom: 15px;
  }
  .cosmetics_inner > h2 > img {
    height: 30px;
  }
  .cosmetics_inner > .cosmetic-sample > img {
    height: 18px;
  }
}
@media screen and (min-width: 1024px) {
  .l_content_box .cosmetics_inner {
    padding: 0% 5% 0;
  }
  .l_content_box .in-store-event {
    padding: 4% 5% 0;
    margin-bottom: 110px;
  }
  .cosmetics_inner > div.banner-link {
    margin: 65px 0px 110px;
  }
}
@media screen and (min-width: 1200px) {
  .l_content_box .shops_inner {
    padding: 100px 0 0;
    margin-bottom: 70px;
  }
}

/* 以下タグによる記事抽出のレイアウト関連 */
/* ====================================================
　category_block
==================================================== */

#category_block {
    margin-top: 0px;
	height: auto;
    padding: 0;
}
#category_block ul {
    width: 340px;
    margin: 0 auto;
}
@media screen and (max-width: 340px) {
    #category_block ul {
        width: 100%;
        padding: 0 1rem;
    }
}
#category_block ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
#category_block ul li a {
    font-size: 19px;
    font-family: 小塚ゴシック Pr6N;
    /* height: 40px; */
    display: flex;
    /* color: transparent; */
    justify-content: center;
    align-items: center;
    /* background-color: #f4dfec; */
    /* border-radius: 10px; */
    /* border: 2px solid #e75297; */
}
#category_block ul li a:hover {
    text-decoration: none;
    cursor: unset;
}

/*----------------------------------------------------
c-block
----------------------------------------------------*/
.c-block {
    width: 100%;
    padding: 0;
}
/* ====================================================
　リスト設定
==================================================== */
.photo-list {
    width: 100%;
    padding: 5% 4% 0 4%;
}
.c-shopList {
    width: 96%;
    margin: 0 2%;
    display: table; /* or inline-table */
    border-collapse: collapse;/*border: 2px solid #2ab7e0;*/
}

/* grid */
.grid {
    margin: 0 0 0 -20px;
    overflow: hidden;
    background-color: transparent;
}
[class*='col-'] {
    float: left;
    padding-left: 20px;
    padding-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.col-1-2 {
    width : 50%;
}

/*----------------------------------------------------
link_box
----------------------------------------------------*/
.link_box {
    position: relative;
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
}
.photo {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.photo:before {
    content:"";
    display: block;
    padding-top: 100%;
}

.photo p {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.photo .contain {
    position: absolute;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.link_box .secTxt {
    padding: 10px 0 0 0;
}

.link_box .secTxt .category_txt {
    color: #606060;
    font-size : 85%;
    line-height : 1.3;
    vertical-align: middle;
    display: table-cell;
    text-align: left;
    padding: 3px 0 10px 0;
    display: block;
}

.link_box .secTxt .lead {
    width: 100%;
    font-size : 100%;
    line-height: 1.7;
    text-align: left;
    overflow: hidden;
    width: 100%;
    height: 60px;
}
.link_box a:hover {
    text-decoration: none;
}
.link_box a {
    display: block;
    height: 100%;
}
.link_box a .photo .contain {
    width: 100%;
    height: 100%;
}

/* new表記*/
.photo-list a {
    display : block;
    position : relative;
    overflow : hidden;
}
.photo-list a.new:after {
    content : 'NEW';
    display : inline-block;
    position : absolute;
    top : 5px;
    left : -37px;
    background : #e60000;
    color : #fff;
    font-size : 85%;
    font-weight : bold;
    line-height : 1;
    padding : 6px 40px 4px;
    -ms-transform : rotate(-45deg);
    transform : rotate(-45deg);
    transition : none;
}
/*----------------------------------------------------
ページネーション
----------------------------------------------------*/
div.center {
    text-align: center;
}
.pagination {
    *zoom : 1;
    text-align : center;
    margin: 30px 0 51px 0;
    padding: 0;
    letter-spacing: -0.4em;
    font-size: 0;/*safariで余白が詰まってしまうため調整*/
}
.pagination:after {
    content : ' ';
    display : table;
    clear : both;
}
.pagination li {
    display: inline-block;
    margin-left: -1px;
    letter-spacing:normal;
    font-size: 14px;/*safariで余白が詰まってしまうため調整*/
    background : #fff;
}
.pagination li a {
    display: inline-block;
    color: #929292;
    float: left;
    width: 3.0em;
    padding: 7px 0;
    transition: background-color .3s;
    border: 1px solid #b3b3b3;
}
.pagination li.pager-prev,.pagination .pager-next {
    background : none;
}
.pagination li.pager-prev a {
    position : relative;
    text-indent : -999px;
    overflow : hidden;
    border : none;
}
.pagination li.pager-prev a:after {
    content : '';
    display : block;
    position : absolute;
    left : 10px;
    top : 50%;
    margin-top : -6px;
    width : 10px;
    height : 10px;
    border-top : 1px solid #929292;
    border-right : 1px solid #929292;
    -ms-transform : rotate(225deg);
        transform : rotate(225deg);
}
.pagination .pager-next a {
    position : relative;
    text-indent : -999px;
    overflow : hidden;
    border : none;
}
.pagination li.pager-next a:after {
    content : '';
    display : block;
    position : absolute;
    right : 10px;
    top : 50%;
    margin-top : -6px;
    width : 10px;
    height : 10px;
    border-top : 1px solid #929292;
    border-right : 1px solid #929292;
    -ms-transform : rotate(45deg);
        transform : rotate(45deg);
    background : none;
}


/* ====================================================
　以下ブレークポイント設定
==================================================== */
/*----------------------------------------------------ブレークポイント・タブレットサイズ以上*/
@media screen and (min-width: 768px) {
    body::before {
        background: none;
    }
    #l-content {
        max-width : 100%;
        margin-top: 89px;
    }
    #c-mainImg .inner img {
        width: 710px;
        /* min-width: 100%; */
        height: auto;
        margin: 0 auto;
    }
    #category_block {
        width: 700px;
        padding: 0;
        margin: 25px auto 0;
    }
	#category_block ul {
        display: flex;
        width: 100%;
        padding: 0;
    }
    #category_block .bottom {
        width: 100%;
        justify-content: center;
        display: flex!important;
    }
    .photo-list {
        width: 1080px;
        margin: 0 auto 0 auto;
        padding: 50px 0 0 0;
    }
    .c-shopList {
        width: auto;
        margin: 0 -16px 0 0;
    }
    .c-shopList li {
        width: 258px;
        margin: 0 16px 40px 0;
    }

    /* grid */
    .grid {
        margin: 0 auto 0 -20px;
        overflow: hidden;
        background-color: transparent;
    }
    [class*='col-'] {
        float: left;
        padding-left: 20px;
        padding-bottom: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    .col-1-2 {
        width : 25%;
    }

    .link_box a {
        display: block;
        height: 100%;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .link_box a .photo .contain {
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        transform: translateZ(0px);
        -moz-transform: translateZ(0px);
        -webkit-transform: translateZ(0px);
        -o-transform: translateZ(0px);
        -ms-transform: translateZ(0px);
    }
    .link_box a:hover .photo .contain {
        -webkit-transform: scale(1.08);
        -moz-transform: scale(1.08);
        -o-transform: scale(1.08);
        -ms-transform: scale(1.08);
        transform: scale(1.08);
    }
    ul.pagination {
        margin: 30px 0 80px 0;
    }
}
@media screen and (min-width:768px) and (max-width: 1199px) {
    .photo-list {
        width: 90%;
    }
}
#sub_hash_tag {
    margin-top: -50px;
    padding-top: 50px;
}
@media screen and (min-width: 1200px) {
    #sub_hash_tag {
        margin-top: -90px;
        padding-top: 90px;
    }
}
#l-footer {
    margin-top: 0;
}
@media screen and (min-width:768px) and (max-width: 1199px) {
    #c-mainImg .inner img {
        width: 710px;
    }
}