@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500");
@import url("https://indestructibletype.com/fonts/Jost.css");

/*
 * 大枠、共通設定
 * ヘッダー
 * セクション
 * メインスライダー
 * 連載記事スライダー
 * アイテム一覧
 * VIEW MOREボタン
 * サイドバー 上部のサーチエリア
 * サイドバー HOT KEYWORD
 * サイドバー RANKING
 * サイドバー ボタン
 * サイドバー バナー
 * 一列アイテム一覧
 * ページネーション
 * フッター
 */

/* =========================================================
大枠、共通設定
========================================================= */
figure {
  margin: 0;
  padding: 0;
}
body {
  font: 12px/1.4 "Noto Sans JP", "Yu Gothic", "游ゴシック", "YuGothic",
    "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo,
    メイリオ, Helvetica, Arial, sans-serif;
  font-smoothing: subpixel-antialiased;
  color: #000;
}

.mag-container {
  width: 1140px;
  /*background: #fff;*/
  margin: 0 auto;
}
.mag-main {
  width: 720px;
  float: left;
}
.mag-sub {
  width: 350px;
  float: right;
  background: #fff;
}

/*見出し*/
.mag-page-title {
  text-align: center;
  letter-spacing: normal;
  margin: 0 0 70px;
}
.mag-page-title span {
  display: block;
  font: 500 32px/1.3 "Jost", sans-serif;
  letter-spacing: 0.05em;
  margin: 0 0 5px;
}

.mag-section-title {
  text-align: center;
  letter-spacing: normal;
  margin: 0 0 40px;
}
.mag-section-title span {
  display: block;
  font: 500 26px/1.3 "Jost", sans-serif;
  letter-spacing: 0.05em;
  margin: 0 0 5px;
}

input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}

img {
  vertical-align: top;
}
img[data-original] {
  background: url(/res/s/shared/img/common/icon_load.gif) no-repeat center;
  background-size: 15px;
}

.slick-slider * {
  outline: none;
}

.breadcrumbs {
  width: 990px !important;
}

/*自動読み込み用ボタン*/
.auto-pager-trigger {
  opacity: 0;
}

/* =========================================================
ヘッダー
========================================================= */
.mag-header {
  text-align: center;
}
.mag-header-inr {
  width: 1140px;
  padding: 35px 0;
  margin: 0 auto;
}
.mag-header-logo {
  margin: 0 0 30px;
}
.mag-header-logo a {
  width: 320px;
  height: 0;
  overflow: hidden;
  display: inline-block;
  background: url(/res/p/img/common/2019/logo-usagimagazine.svg) no-repeat;
  background-size: contain;
  padding: 34px 0 0;
}

.mag-header-nav ul li {
  font: 500 17px/1.1 "Jost", sans-serif;
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
.mag-header-nav ul li + li {
  margin: 0 0 0 42px;
}
.mag-header-nav ul li.active::before {
  content: "";
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.mag-header-nav-fashion::before {
  background-color: #f3d5d5;
}
.mag-header-nav-beauty::before {
  background-color: #f2d5f2;
}
.mag-header-nav-sports::before {
  background-color: #d5f2f2;
}
.mag-header-nav-life::before {
  background-color: #f2e4d5;
}
.mag-header-nav-babykids::before {
  background-color: #d5f2d5;
}
.mag-header-nav-event::before {
  background-color: #d5d5f2;
}
.mag-header-nav-food::before {
  background-color: #f2f2d5;
}
.mag-header-nav-ranking::before {
  background-color: #ddd;
}
.mag-header-nav-myclip::before {
  background-color: #ddd;
}

.mag-header-nav ul li a {
  text-decoration: none;
  position: relative;
}
.mag-header-nav ul li a:hover {
  opacity: 0.6;
}

/* =========================================================
セクション
========================================================= */
.section {
  margin: 0 0 80px;
}
.section-main-slider {
  margin: 0 0 110px;
}

/* =========================================================
メインスライダー
========================================================= */
.mag-main-slider {
  width: 720px;
  height: 480px;
  letter-spacing: -0.4em;
  overflow: hidden;
}

.mag-main-slider-item {
  width: 100%;
}
.mag-main-slider-item a {
  width: 360px;
  display: inline-block;
  letter-spacing: normal;
  position: relative;
  overflow: hidden;
}
.mag-main-slider-item a:hover img {
  opacity: 0.6;
}
.mag-main-slider-item-text {
  box-sizing: border-box;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.3s;
  transform: translateY(100%);
}
.mag-main-slider-item a:hover .mag-main-slider-item-text {
  transform: translateY(0);
}

.mag-main-slider-item-text p {
  font-size: 17px;
  word-break: break-all;
}

/*矢印*/
.mag-main-slider .slick-arrow {
  width: 50px;
  height: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 18px;
  padding: 80px 0 0;
  position: absolute;
  top: 200px;
  z-index: 2;
  cursor: pointer;
}
.mag-main-slider .slick-prev {
  background-image: url(../img/arrow-left-white.png);
  background-position: center;
  left: 0;
}
.mag-main-slider .slick-next {
  background-image: url(../img/arrow-right-white.png);
  background-position: center;
  right: 0;
}

/* =========================================================
連載記事スライダー
========================================================= */
.mag-special-slider {
  width: 650px;
  margin: 0 auto;
  position: relative;
}
.mag-special-slider .slick-slide {
  padding: 0 15px;
}
.mag-special-slider .slick-slide a {
  display: block;
  position: relative;
  overflow: hidden;
}
.mag-special-slider .slick-slide a img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.mag-special-slider .slick-slide a:hover img {
  opacity: 0.6;
}

.mag-special-slider-item-text {
  box-sizing: border-box;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.3s;
  transform: translateY(100%);
}
.mag-special-slider .slick-current .mag-special-slider-item-text {
  transform: translateY(0);
}

.mag-special-slider-item-text p {
  font-size: 15px;
  word-break: break-all;
}

/*矢印*/
.mag-special-slider .slick-arrow {
  width: 100px;
  height: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  background-size: 18px;
  padding: 267px 0 0;
  position: absolute;
  top: 0;
  z-index: 2;
  cursor: pointer;
}
.mag-special-slider .slick-prev {
  background-image: url(../img/arrow-left.png);
  background-position: right 6px center;
  left: 0;
}
.mag-special-slider .slick-next {
  background-image: url(../img/arrow-right.png);
  background-position: 6px center;
  right: 0;
}

/*ページャー*/
.slick-dots {
  width: 100%;
  text-align: center;
  margin: 20px 0 0;
}
.slick-dots li {
  width: 10px;
  height: 0;
  display: inline-block;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  padding: 10px 0 0;
  margin: 0 8px;
  border: 1px solid #000;
  cursor: pointer;
}
.slick-dots li:hover,
.slick-dots li.slick-active {
  background: #000;
}
.slick-dots li button {
  color: transparent;
}

/* =========================================================
アイテム一覧
========================================================= */
.mag-list ul {
  letter-spacing: -0.4em;
}

.mag-item {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  margin: 0 30px 50px 0;
  position: relative;
}
.mag-item:nth-child(3n) {
  margin: 0 0 50px;
}

.mag-item-image {
  position: relative;
}
.mag-item-image a:hover {
  opacity: 0.6;
}

.mag-item .mag-category-label {
  width: 95px;
  height: 30px;
  background: #fff;
  text-align: center;
  position: absolute;
  bottom: -15px;
  left: 10px;
}
.mag-item .mag-category-label a {
  font: 500 15px/30px "Jost", sans-serif !important;
  text-decoration: none;
  display: block;
  position: relative;
  user-select: none;
}
.mag-item .mag-category-label::before {
  content: "";
  width: 100%;
  height: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.mag-category-label-fashion::before {
  background-color: #f3d5d5;
}
.mag-category-label-beauty::before {
  background-color: #f2d5f2;
}
.mag-category-label-sports::before {
  background-color: #d5f2f2;
}
.mag-category-label-life::before {
  background-color: #f2e4d5;
}
.mag-category-label-babykids::before {
  background-color: #d5f2d5;
}
.mag-category-label-event::before {
  background-color: #d5d5f2;
}
.mag-category-label-food::before {
  background-color: #f2f2d5;
}

.mag-item-title {
  line-height: 1.8;
  word-break: break-all;
  margin: 25px 10px 5px;
}
.mag-item-title a {
  text-decoration: none;
}

.mag-item-info {
  position: relative;
}

.mag-item-date {
  font: 400 12px "Jost", sans-serif;
  float: left;
  margin: 4px 0 0 10px;
}

.mag-item-button {
  float: right;
}

/*お気に入りボタン*/
.mag-item-heart {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 0 0;
}
.mag-item-heart a {
  width: 18px;
  height: 0;
  display: block;
  overflow: hidden;
  background-image: url(../img/ico-heart.png);
  background-repeat: no-repeat;
  background-size: contain;
  padding: 18px 0 0;
}
.mag-item-heart a.active {
  background-image: url(../img/ico-heart-on.png);
}

/*snsボタン*/
.mag-item-sns {
  display: inline-block;
  position: relative;
}
.mag-item-sns span {
  width: 16px;
  height: 0;
  overflow: hidden;
  display: block;
  background-image: url(../img/ico-sns.png?);
  background-repeat: no-repeat;
  background-size: contain;
  padding: 16px 0 0;
  cursor: pointer;
  z-index: 10;
}

.mag-item-sns ul li {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: 0.15s;
  transform: rotate(-180deg) scale(0.5);
}
.mag-item-sns ul li.is-open {
  pointer-events: initial;
  opacity: 1;
}
.mag-item-sns-twitter.is-open {
  transform: translate(-59px, 4px) rotate(0deg) scale(1);
}
.mag-item-sns-facebook.is-open {
  transform: translate(-39px, -32px) rotate(0deg) scale(1);
  transition-delay: 0.03s;
}
.mag-item-sns-line.is-open {
  transform: translate(0, -47px) rotate(0deg) scale(1);
  transition-delay: 0.06s;
}

.mag-item-sns ul li a {
  width: 34px;
  height: 0;
  overflow: hidden;
  display: block;
  padding: 34px 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.mag-item-sns-twitter a {
  background-image: url(../img/ico-twitter.png?);
}
.mag-item-sns-facebook a {
  background-image: url(../img/ico-facebook.png);
}
.mag-item-sns-line a {
  background-image: url(../img/ico-line2.png);
}

/* =========================================================
VIEW MOREボタン
========================================================= */
.mag-view-more {
  user-select: none;
  text-align: center;
  /*margin: 20px 0 0;*/
}
.mag-view-more a {
  width: 340px;
  display: inline-block;
  border: 1px solid #000;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 8px 0;
}
.mag-view-more a:hover {
  opacity: 0.6;
}
.mag-view-more a span {
  display: block;
  font: 500 27px/1.4 "Jost", sans-serif;
}

/* =========================================================
サイドバー 上部のサーチエリア
========================================================= */
.mag-search {
  margin: 0 0 60px;
}

/*インプット*/
.mag-input {
  box-sizing: border-box;
  width: 320px;
  border: 1px solid #d5d5d5;
  padding: 0 50px 0 0;
  margin: 0 0 15px;
  position: relative;
}
.mag-input input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  font-size: 13px;
  padding: 0 10px;
}
.mag-input button {
  width: 50px;
  height: 0;
  overflow: hidden;
  background: url(../img/ico-search.png) no-repeat center;
  background-size: 20px;
  padding: 38px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

/*セレクトボックス*/
.mag-select {
  margin: 0 0 40px;
}
.mag-select select {
  box-sizing: border-box;
  width: 320px;
  height: 38px;
  border: 1px solid #d5d5d5;
  background: url(../img/arrow-down-small.png) no-repeat right 13px center;
  font-size: 13px;
  color: #666;
  padding: 0 10px;
  cursor: pointer;
}

/* =========================================================
サイドバー HOT KEYWORD
========================================================= */
.mag-keyword h3 {
  margin: 0 0 20px;
}
.mag-keyword h3 span {
  font: 500 20px "Jost", sans-serif;
  margin: 0 35px 0 0;
}

.mag-keyword-list ul li {
  display: inline-block;
  margin: 0 6px 14px 0;
}
.mag-keyword-list ul li a {
  display: block;
  border: 1px solid #d5d5d5;
  border-radius: 50px;
  text-decoration: none;
  padding: 6px 10px;
}
.mag-keyword-list ul li a:hover {
  opacity: 0.6;
}

/* =========================================================
サイドバー RANKING
========================================================= */
.mag-ranking-title {
  text-align: center;
  margin: 0 0 10px;
}
.mag-ranking-title span {
  display: block;
  font: 500 26px/1.3 "Jost", sans-serif;
  margin: 0 0 5px;
}

/*RANKINGタブ*/
.mag-ranking-tab ul {
  letter-spacing: -0.4em;
  text-align: center;
}
.mag-ranking-tab ul li {
  user-select: none;
  width: 50%;
  display: inline-block;
  font: 400 17px "Jost", sans-serif;
  letter-spacing: normal;
  padding: 3px 0;
  opacity: 0.4;
  cursor: pointer;
}
.mag-ranking-tab ul li.active {
  opacity: 1;
  pointer-events: none;
}

.mag-ranking-tab ul li:first-child::before,
.mag-ranking-tab ul li:last-child::after {
  content: "";
  width: 7px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 7px;
}
.mag-ranking-tab ul li:first-child::before {
  background-image: url(../img/arrow-left.png);
  margin: -3px 15px 0 0;
}
.mag-ranking-tab ul li:last-child::after {
  background-image: url(../img/arrow-right.png);
  margin: -3px 0 0 15px;
}

/* =========================================================
サイドバー ボタン
========================================================= */
.mag-sub-button {
  user-select: none;
  width: 320px;
  text-align: center;
  margin: 30px auto 0;
}
.mag-sub-button a {
  width: 100%;
  display: inline-block;
  border: 1px solid #000;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 6px 0 8px;
}
.mag-sub-button a:hover {
  opacity: 0.6;
}
.mag-sub-button a span {
  display: block;
  font: 500 19px "Jost", sans-serif;
  margin: 0 0 2px;
}

/* =========================================================
サイドバー バナー
========================================================= */
.mag-sub-banner {
  width: 320px;
  margin: 30px auto 0;
}
.mag-sub-banner a:hover {
  opacity: 0.6;
}
.mag-sub-banner a img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* =========================================================
一列アイテム一覧
========================================================= */
.mag-oneline-list > ul {
  border-top: 1px solid #d5d5d5;
}

.mag-oneline-item {
  border-bottom: 1px solid #d5d5d5;
  display: table;
  padding: 20px 0;
}

.mag-oneline-item-image {
  width: 100px;
  display: table-cell;
}
.mag-oneline-item-image a:hover {
  opacity: 0.6;
}
.mag-oneline-item-image a img {
  width: 100px;
  height: auto;
  vertical-align: top;
}

.mag-oneline-item-info {
  width: 100%;
  display: table-cell;
  vertical-align: top;
  padding: 0 0 0 15px;
  position: relative;
}

.mag-oneline-item-number {
  font: italic 400 30px/1 "Jost", sans-serif;
  margin: 0 0 7px;
  position: absolute;
  top: 0;
  left: 15px;
}

.mag-oneline-item .mag-category-label {
  width: 110px;
  display: inline-block;
  font: 500 17px/1.1 "Jost", sans-serif !important;
  text-align: center;
  margin: 0 0 15px 30px;
  position: relative;
}
.mag-oneline-item .mag-category-label span {
  position: relative;
}
.mag-oneline-item .mag-category-label::before {
  content: "";
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.mag-oneline-item-title {
  font-size: 14px;
  line-height: 1.7;
  height: 5em;
  word-break: break-all;
  margin: 0 0 10px;
}

.mag-oneline-item-date {
  font: 400 12px "Jost", sans-serif;
  color: #747474;
  float: left;
  margin: 2px 0 0;
}

/* =========================================================
ページネーション
========================================================= */
.pagination {
  text-align: right;
  margin: 50px 0 0;
}
.wp-pagenavi a,
.wp-pagenavi span {
  font-size: 13px;
  padding: 0 5px;
}
.wp-pagenavi .pages {
  margin: 0 15px 0 0;
}
.wp-pagenavi .current {
  background: #eee;
}
.wp-pagenavi .previouspostslink {
  background: url(../img/pagenation_arrow_left.png) no-repeat left center;
  padding: 0 5px 0 10px;
}
.wp-pagenavi .nextpostslink {
  background: url(../img/pagenation_arrow_right.png) no-repeat right center;
  padding: 0 10px 0 5px;
}
.wp-pagenavi a:hover {
  opacity: 0.6;
}

/* =========================================================
フッター
========================================================= */
.pc-footer {
  border-top: 1px solid #d5d5d5;
}

.pc-footer-mail-banner {
  margin: 0 0 5px;
}
.pc-footer-mail-banner a:hover {
  opacity: 0.6;
}

.pc-footer-link-block-title {
  font: 500 12px "Poppins", sans-serif;
  letter-spacing: 0.08em;
  color: #3a3b3b;
  margin: 0 0 30px;
}
.pc-footer-mail-brand-title {
  font: 500 12px "Poppins", sans-serif;
  letter-spacing: 0.08em;
  margin: 0 0 5px;
  color: #eeccbd;
}