@charset "UTF-8";
/* ---------------------------------- */
/* shared.css                         */
/* ---------------------------------- */
/*
 *  TABLE OF CONTENTS
 *
 *  @BASE
 *  @WRAP
 *  @PAGE
 *  @HEADER
 *  @CONTENTS
 *  @PAGETOP
 *  @FOOTER
 *
 */
/* =================================
   @BASE
================================= */
html {
  font-size: 62.5%;
}
body {
  background: #ffd106 url(../images/bg.gif) repeat top center;
  color: #fefefe;
  vertical-align: baseline;
  font-size: 10px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
/* CLEARFIX
================= */
.clearfix {
  zoom: 1; /*for IE 5.5-7*/
}
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0px;
  /*for modern browser*/
  content: ".";
}
* html .clearfix {
  display: inline-table;
  /*\*/
  display: block; /**/
}
/* LINK
================= */
a {
  overflow: hidden;
  outline: none;
  border: none;
}
a img {
  outline: none;
  border: none;
}
a:link {
  color: #ff7e00;
  text-decoration: underline;
}
a:visited {
  color: #ff7e00;
  text-decoration: underline;
}
a:hover {
  color: #ff7e00;
  text-decoration: none;
}
a:active {
  color: #ff7e00;
  text-decoration: none;
}
/* =================================
   @PAGE
================================= */
#page {
  background: url(../images/bg_page.gif) repeat-x top center;
}
/* =================================
   @WRAP
================================= */
#wrap {
  margin: 0 auto;
}
/* =================================
   @HEADER
================================= */
#header {
  position: relative;
  overflow: hidden;
  height: 235px;
  margin: 0 auto;
  width: 960px;
}
#header h1 {
  position: absolute;
  top: 62px;
  left: 7px;
}
#header .logo_level5 {
  position: absolute;
  top: 10px;
  left: 0;
}
#header .character_keita {
  position: absolute;
  top: 0;
  right: 330px;
}
#header .character_whisper {
  position: absolute;
  top: 2px;
  right: 244px;
}
#header .character_nyan {
  position: absolute;
  top: 32px;
  right: 142px;
}
#header .character_fumi {
  position: absolute;
  top: 15px;
  right: 0;
}
/* TOPICS
================= */
.topics {
  position: absolute;
  top: 132px;
  right: 0;
  padding: 54px 20px 15px;
  width: 553px;
  height: 25px;
  background: url(../images/bg_topics.png) no-repeat 0 0;
  color: #343434;
  font-size: 16px;
}
.topics ul li {
  float: left;
}
.topics dl dt {
  float: left;
  margin-right: 20px;
}
.topics dl dd {
  float: left;
  font-weight: bold;
}
.topics dl dd a {
  font-weight: normal;
}
/* =================================
   @CONTENTS
================================= */
#contents {
  overflow: hidden;
}
#contents .puzzle {
  float: right;
  background: url(../images/puzzle_bg_0317.png) no-repeat 0 0;
  padding: 0;
}
#contents .puzzle p {
  padding: 10px 15px 16px 15px;
}
#contents .puzzle_dx {
  float: right;
  background: url(../images/puzzle_dx_bg_0317.png) no-repeat 0 0;
  padding: 0;
}
#contents .puzzle_dx {
  padding: 5px 4px 16px 15px;
}
.banner_onishinka {
  padding: 0 0 26px;
  text-align: center;
}
/* 商品 */
#contents .product {
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
#contents .btn_officialsite {
  position: absolute;
}
/* 妖怪1 */
#contents .product01 {
  background: url(../images/bg_01.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 445px;
  float: left;
}
#contents .product01 .btn_officialsite {
  bottom: 15px;
  right: 15px;
}
/* 妖怪2 */
#contents .product02 {
  background: url(../images/bg_02.png) no-repeat 0 0;
  padding: 6px 15px 0 15px;
  height: 571px;
}
#contents .product02 .btn_officialsite {
  bottom: 125px;
  right: 15px;
}
#contents .product02 .banner_jga2015 {
  position: absolute;
  bottom: 20px;
  right: 9px;
}
/* リズム */
#contents .product03 {
  background: url(../images/bg_03.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 299px;
  width: 440px;
  float: left;
}
#contents .product03 .btn_officialsite {
  bottom: 15px;
  left: 15px;
}
/* 大辞典 */
#contents .product04 {
  background: url(../images/bg_04.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 299px;
  width: 440px;
  float: left;
  margin-right: 20px;
}
#contents .product04 .btn_officialsite {
  bottom: 15px;
  left: 95px;
}
/* 三国志 */
#contents .product05 {
  background: url(../images/bg_05_160402.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 406px;
}
#contents .product05 .btn_officialsite {
  bottom: 51px;
  right: 15px;
}
/* ぷにぷに */
#contents .product06 {
  background: url(../images/bg_06_1028.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 402px;
}
#contents .product06 .btn_officialsite {
  bottom: 47px;
  right: 15px;
}
/* 妖怪バスターズ */
#contents .product08 {
  background: url(../images/bg_08_1015.png) no-repeat 0 0;
  position: relative;
  padding: 15px 15px 0 15px;
  height: 449px;
}
#contents .product08 .btn_officialsite {
  position: absolute;
  bottom: 14px;
  right: 15px;
}
#contents .gettogumi {
  background: url(../images/bg_gettogumi_1212.png) no-repeat 0 -150px;
  padding: 0 35px;
  height: 360px;
}
#campaign {
  margin: -10px auto 20px;
  text-align: center;
}
#add_whf2016 {
  position: relative;
  margin: 0 auto 20px;
  text-align: center;
}
#contents .banner {
  background: url(../images/bg_content.gif) repeat-y 0 0;
  padding: 10px 35px 0;
}
/* ダンス */
#contents .product09 {
  background: url(../images/bg_09.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 402px;
}
#contents .product09 .btn_officialsite {
  bottom: 47px;
  right: 15px;
}
/* 妖怪3 */
#contents .product10_top {
  background: url(../images/bg_10_161215_top.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 470px;
}
#contents .product10_top .btn_officialsite {
  bottom: 31px;
  right: 15px;
}
#contents .product10_bottom {
  background: url(../images/bg_10_170524_bottom.png) no-repeat 0 0;
  padding: 11px 10px 0 10px;
  height: 189px;
}
/* 妖怪 ゲラポ 大辞典 */
#contents .product_3area {
  width: 960px;
  margin: 0 auto;
}
#contents .product_3area .product11 {
  background: url(../images/bg_11.png) no-repeat 0 0;
  position: relative;
  width: 310px;
  height: 314px;
  padding: 20px 0 0 0;
  float: left;
}
#contents .product_3area .product11 p,
#contents .product_3area .product12 p,
#contents .product_3area .product13 p {
  margin-left: 15px;
}
#contents .product11 .btn_officialsite {
  bottom: 40px;
  right: 15px;
}
#contents .product_3area .product12 {
  background: url(../images/bg_12.png) no-repeat 0 0;
  position: relative;
  width: 310px;
  height: 314px;
  padding: 20px 0 0 0;
  margin-left: 15px;
  float: left;
}
#contents .product12 .btn_officialsite {
  bottom: 40px;
  right: 15px;
}
#contents .product_3area .product13 {
  background: url(../images/bg_13.png) no-repeat 0 0;
  position: relative;
  width: 310px;
  height: 314px;
  padding: 20px 0 0 0;
  margin-right: 15px;
  float: left;
}
#contents .product13 .btn_officialsite {
  bottom: 40px;
  right: 15px;
}

/* バスターズ2 */
#contents .product14 {
  background: url(../images/bg_14.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 406px;
}
#contents .product14 .btn_officialsite {
  bottom: 51px;
  right: 15px;
}

/* 妖怪三国志 国盗りウォーズ */
#contents .product15 {
  background: url(../images/bg_15.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 406px;
}
#contents .product15 .btn_officialsite {
  bottom: 51px;
  right: 15px;
}

/* 妖怪ウォッチ ゲラポリズム */
#contents .product16 {
  background: url(../images/bg_16.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 406px;
}
#contents .product16 .btn_officialsite {
  bottom: 51px;
  right: 15px;
}

/* 妖怪ウォッチ5周年記念タイトル発表会 */
#contents .event_5th_anniversary {
  width: 910px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 10px;
}

/* 妖怪4 */
#contents .product17 {
  background: url(../images/bg_17.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 631px;
}
#contents .product17 .btn_officialsite {
  bottom: 256px;
  right: 15px;
}

/* 妖怪ウォッチ ワールド */
#contents .product18 {
  background: url(../images/bg_18.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 406px;
}
#contents .product18 .btn_officialsite {
  bottom: 50px;
  right: 15px;
}

/* 妖怪ウォッチ メダルウォーズ */
#contents .product19 {
  background: url(../images/bg_19_190730.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 406px;
}
#contents .product19 .btn_officialsite {
  bottom: 50px;
  right: 15px;
}

/* 妖怪ウォッチ1 for Nintendo Switch */
#contents .product20 {
  background: url(../images/bg_20.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 611px;
}
#contents .product20 .btn_officialsite {
  bottom: 256px;
  right: 15px;
}

/* 妖怪学園Y ～ワイワイ学園生活～ */
#contents .product21 {
  background: url(../images/bg_21.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 426px;
}
#contents .product21 .btn_officialsite {
  bottom: 52px;
  right: 15px;
}

/* 妖怪ウォッチ1 スマホ */
#contents .product22 {
  background: url(../img/bg_22.png) no-repeat 0 0;
  padding: 15px 15px 0 15px;
  height: 426px;
}
#contents .product22 .btn_officialsite {
  bottom: 52px;
  right: 15px;
}

/* =================================
   @FOOTER
================================= */
#footer {
  clear: both;
  overflow: hidden;
  padding: 10px;
  margin: 0 auto;
  width: 940px;
}
#footer .attention {
  float: left;
}
#footer .attention_nintendo {
  float: right;
}
#footer .copyright {
  float: right;
}
/* =================================
   @COMMONPARTS
================================= */
#commonParts {
  clear: both;
  overflow: hidden;
  padding: 10px 10px 0;
  margin: 0 auto;
  width: 940px;
}
#commonParts ul {
  /* padding: 0 3px; */
  overflow: hidden;
}
#commonParts ul li {
  float: left;
  margin-right: 8px;
}
/* =================================
   @BANNER
================================= */
.collaboration {
  margin: 0 0 10px 0;
}
/* @映画2017バナー
============ */
.movie {
  text-align: center;
  margin: 0px 0 30px 0;
}
/* @YW2Dバナー
============ */
.yw2d {
  padding: 5px 0 20px 0;
  text-align: center;
}

/* =================================
   @FF14コラボバナー
================================= */

.ff14 {
  margin-bottom: 20px;
}

/* =================================
   MV追加
================================= */
.adjustment {
  margin: 0 auto;
  width: 930px;
}

.adjustment02 {
  margin: 0 auto !important;
  width: 930px;
}

.adjustment03 {
  margin: 0 auto;
  width: 940px;
}

.adjustment04 {
  margin: 0 auto;
  width: 890px;
}

.adjustment05 {
  margin: 0 auto;
  width: 960px;
}

.musicArea {
  background: url(/yw4/img/bg01.jpg) repeat center;
  text-align: center;
  padding: 30px 0px;
  margin-bottom: 40px;
}

.musicArea p {
  width: 940px;
  margin: 0 auto;
}

.hidden {
  display: none;
}

.cboxBottomCenter p {
  text-align: left;
}

/* =================================
   @妖怪ウォッチ10周年記念
================================= */
.anniversaryArea {
  text-align: center;
  background: url(../assets/img/top/bg_green.png) repeat 0 0/420px;
  padding: 30px 0 20px;
  margin-bottom: 40px;
}

.bnrSale {
  margin-top: 10px;
}

/* =================================
   @映画アーカイブリンク追加
================================= */
#movieArea {
  width: 960px;
  padding-bottom: 20px;
  margin: 40px auto 20px;
  border-bottom: solid 1px #ab8500;
}

#movieArea h1 {
  margin-bottom: 30px;
}

#movieArea ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0 40px;
}

#movieArea ul li {
  margin-bottom: 20px;
}

/* =================================
   @Twitterタイムライン追加
================================= */
.twArea {
  width: 900px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
}

.twArea .twBox {
  width: 400px;
}

.twArea .twBox h1 {
  margin-bottom: 10px;
}

.twArea .bnrBox {
  width: 460px;
  padding-top: 46px;
}

.twArea .bnrBox li {
  margin-bottom: 10px;
}

.twArea .bnrBox li:last-child {
  margin-bottom: 0;
}