@charset "UTF-8";

body {background: #fff; color: #1a1a1a; line-height: 1.8; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;}
figure {margin: 0;}
img {vertical-align: bottom;}
article * {box-sizing: border-box;}

html[lang="de"] article h1,
html[lang="es"] article h1,
html[lang="pt"] article h1 {font-weight: normal;}
article section.prologue .lead {max-width: 980px;}
article section.prologue .lead p {max-width: 460px; text-align: left;}

article header,
.en article header {position: relative; max-width: 960px; margin: 0px auto 80px;}
article header img {width: 100%;}
article header h1 {position: absolute; max-width: 50px; width: 5%; left: 75%; top: 12%; background: rgba(255,255,255,.75); padding: 3%; box-sizing: content-box;}

.relatedLink {display: block; text-align: right; margin: 40px 10% 0 0;}
.relatedLink a {display: inline-block; background: url(/img/common/arrow_right.png) no-repeat 14px 50%; border: 1px solid #ccc; padding: 10px 20px 10px 35px; text-decoration: none;}
.relatedLink a:hover {border: 1px solid #191919;}

aside.share {border: none; text-align: center; margin-top: 0; background: #fff; padding: 40px 0;}
aside.share a {display: inline-block; margin-right: 20px;}
aside.share a:last-child {margin-right: 0;}
aside.share span {display: inline-block; margin-right: 20px; color: #999; font-size: small;}
aside.share img {vertical-align: middle; opacity: .4;}

aside.share img.fbBtn {width: 20px; padding-right: 0;}
aside.share img.tw_btnImg {width: 26px; padding-right: 0;}
.item li a {text-decoration: underline;}
aside.share img.weibo {width: 24px; padding-right: 0;}

html[lang="es"] article header h1,
html[lang="pt"] article header h1 {max-width: 100%; width: auto; display: inline-block; right: 5%; left: auto; top: 5%; padding: 1% 2%; font-size: 36px; line-height: 1.2;}
@media only screen and (max-width: 768px){
  html[lang="en"] article header h1,
  html[lang="de"] article header h1,
  html[lang="es"] article header h1,
  html[lang="pt"] article header h1 {font-size: 22px; top: 2%;}
}

 html[lang="UTF-8"] article header p {font-family:"ゴシックMB101 DB", 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;}

 @media only screen and (max-width: 768px){
   article header p {bottom: 15px; left: 15px; margin-right: 15px; font-size: 16px;}
 }

article p {font-size: 16px;}
@media only screen and (max-width: 768px){
  article p {font-size: 14px;}
}

article section {margin-bottom: 140px;}
@media only screen and (max-width: 768px){
  article section {margin-bottom: 40px;}
}

html[lang="en"] article header h1,
html[lang="fr-FR"] article header h1,
html[lang="en-GB"] article header h1,
html[lang="zh-CN"] article header h1,
html[lang="zh-HK"] article header h1,
html[lang="ja"] article header h1,
html[lang="pt"] article header h1,
html[lang="es"] article header h1,
html[lang="th"] article header h1
{max-width:60%; margin-top: 0px; width: auto; display: inline-block; right: 8%; left: auto;
top: 12%; padding: 0%; background: none;}

html[lang="ko-KR"] article header h1 {max-width:40%; margin-top: 0px; width: auto; display: inline-block; right: 3%; left: auto;
top: 78%; padding: 0%; background: none;}

html[lang="ar-KW"] article header h1,html[lang="ar-SA"] article header h1,html[lang="ar-AE"] article header h1 {
    max-width: 36%;
    margin-top: 0px;
    width: auto;
    display: inline-block;
    right: 5%;
    left: auto;
    top: 75%;
    padding: 0%;
    background: none;
}

html[lang="de"] article header h1 {max-width: 48%; margin-top: 0px; width: auto; display: inline-block; right: 2%; left: auto; top: 78%; padding: 0%; background: none;}
html[lang="it-IT"] article header h1 {max-width: 36%; margin-top: 0px; width: auto; display: inline-block; right: 4%; left: auto; top: 77%; padding: 0%; background: none;}
html[lang="zh-tw"] article header h1 {max-width: 38%; margin-top: 0px; width: auto; display: inline-block; right: 3%; left: auto; top: 72%; padding: 0%; background: none;}

article section.prologue {position: relative; padding: 0;}
article section .wrap, article section .lead {max-width: 700px; margin: 0 auto; padding: 0 15px;}
article section .wrap span.storeLine {font-size: 12px; color: #5B5B5B; display: block;}
article section .lead h2 {text-align: center; line-height: 1.4;}
article section .lead p {text-align: center;}
article section img {width: 100%;}
@media only screen and (max-width: 768px){
  article section {overflow: hidden;}
  article section img {width: 140%; margin-left: -20%;}
  html[lang="en"] article header h1,html[lang="en"] article header h1, html[lang="fr-FR"] article header h1,
  html[lang="de"] article header h1, html[lang="it-IT"] article header h1,
  html[lang="en-GB"] article header h1, html[lang="zh-CN"] article header h1,html[lang="ko-KR"] article header h1,
  html[lang="zh-tw"] article header h1,html[lang="zh-HK"] article header h1,html[lang="ja"] article header h1,
  html[lang="pt"] article header h1,html[lang="es"] article header h1,html[lang="th"] article header h1,
  html[lang="ar-KW"] article header h1,html[lang="ar-AE"] article header h1
   {padding: 2%; right: 2%; max-width: 30%; top: 74%;}
}
article section h1 {margin: 40px 0 20px; font-size: 26px; line-height: 1.2;}
html [lang="en"] article section h1 {font-family: -apple-system, Helvetica, sans-serif -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}


@media only screen and (max-width: 768px){
  article section h1 {font-size: 20px;}
}
article .desc {margin-top: 0; line-height: 1.8;}
.item {margin: 0 0 6px; padding: 0; font-size: 12px;}
.item li {list-style: none; display: inline-block;}
.item li:before {content: " ／ ";}
.item li:first-child:before {content: "";}

@media only screen and (max-width: 768px){
  .item li {display: block;}
  .item li:before {content: "";}
  article header, .en article header {margin: 0 auto 160px;}
  .relatedLink a {font-size: 14px; padding: 10px 10px 10px 30px;}
  .relatedLink {display: block; text-align: right; margin: 40px 0 0 0; padding: 20px;}
}

@media only screen and (max-width: 499px){
  article header, .en article header {margin: 0 auto 20px;}
  html[lang="en"] article header h1,html[lang="en"] article header h1, html[lang="fr-FR"] article header h1,
  html[lang="de"] article header h1, html[lang="it-IT"] article header h1,
  html[lang="en-GB"] article header h1, html[lang="zh-CN"] article header h1,html[lang="ko-KR"] article header h1,
  html[lang="zh-HK"] article header h1,html[lang="ja"] article header h1,
  html[lang="pt"] article header h1,html[lang="es"] article header h1,html[lang="th"] article header h1,
  html[lang="ar-KW"] article header h1,html[lang="ar-AE"] article header h1
  {padding: 2%; right: 6%; max-width: 60%; top: 11.5%;}
  article section.prologue .lead p {max-width: 400px; text-align: left;}
  html[lang="zh-tw"] article header h1 {padding: 2%; right: 2%; max-width: 40%; top: 70%;}
  html[lang="de"] article header h1 {padding: 2%; right: 2%; max-width: 40%; top: 62%;}
}

@media screen and (max-width: 413px)
{
  article header, .en article header {margin: 0 auto 10px;}
html[lang="en"] article header h1,html[lang="en"] article header h1, html[lang="fr-FR"] article header h1,
html[lang="de"] article header h1, html[lang="it-IT"] article header h1,
html[lang="en-GB"] article header h1, html[lang="zh-CN"] article header h1,html[lang="ko-KR"] article header h1,
html[lang="zh-HK"] article header h1,html[lang="ja"] article header h1,
html[lang="pt"] article header h1,html[lang="es"] article header h1,html[lang="th"] article header h1,
html[lang="ar-KW"] article header h1,html[lang="ar-AE"] article header h1
{padding: 2%; right: 6%; max-width: 65%; top: 11.5%;}
article section.prologue {margin-bottom: 20px;}
html[lang="zh-tw"] article header h1 {padding: 2%; right: 2%; max-width: 42%; top: 70%;}
html[lang="de"] article header h1 {padding: 2%; right: 2%; max-width: 42%; top: 62%;}
}

/* タブレット */
@media screen and (min-width: 500px) and (max-width: 800px)
{
 article header, .en article header {margin: 0 auto 30px;}
 article section.prologue .lead p {max-width: 100%; text-align: left;}
 article section.prologue .lead {max-width: 700px;}
 html[lang="en"] article header h1,html[lang="en"] article header h1, html[lang="fr-FR"] article header h1,
 html[lang="de"] article header h1, html[lang="it-IT"] article header h1,
 html[lang="en-GB"] article header h1, html[lang="zh-CN"] article header h1,html[lang="ko-KR"] article header h1,
 html[lang="zh-HK"] article header h1,html[lang="ja"] article header h1,
 html[lang="pt"] article header h1,html[lang="es"] article header h1,html[lang="th"] article header h1,
 html[lang="ar-KW"] article header h1,html[lang="ar-AE"] article header h1
 {padding: 2%; right: 6%; max-width: 60%; top: 11.5%;}
 html[lang="zh-tw"] article header h1 {padding: 2%; right: 2%; max-width: 38%; top: 70%;}
 html[lang="de"] article header h1 {padding: 2%; right: 2%; max-width: 42%; top: 62%;}

}