@charset "UTF-8";

body {background: #fff; color: #191919; line-height: 1.8;}
figure {margin: 0;}
img {vertical-align: bottom;}
article * {box-sizing: border-box;}

html[lang="en"] article h1,
html[lang="de"] article h1,
html[lang="es"] article h1,
html[lang="pt"] article h1 {font-weight: normal;}

article header,
.en article header {position: relative; max-width: 900px; margin: 0 auto 40px;}
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;}
html[lang="en"] article header h1,
html[lang="de"] article header h1,
html[lang="es"] article header h1,
html[lang="pt"] article header h1 {max-width: 100%; width: auto; display: inline-block; left: 5%; 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%;}
}
article header p {position: absolute; bottom: 2%; left: 2%; padding: 1%; display: inline-block; background: rgba(255,255,255,.75); font-weight: bold; font-size: 18px; margin: 0 2% 0 0;
}
 html[lang="ja-JP"] 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: 100px;}
@media only screen and (max-width: 768px){
  article section {margin-bottom: 40px;}
}

article section .wrap {max-width: 700px; margin: 0 auto; padding: 0 15px;}
article section img {width: 100%;}
@media only screen and (max-width: 768px){
  article section {overflow: hidden;}
  article section img {width: 140%; margin-left: -20%;}
}
article section h1 {margin-bottom: 20px; line-height: 1.2;}
html[lang="ja-JP"] article section h1 {font-family:"ゴシックMB101 DB", 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;}
@media only screen and (max-width: 768px){
  article section h1 {font-size: 20px;}
}
article .desc {margin-top: 0;}
.item {margin: 0; 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: "";}
}

.relatedLink {display: block; text-align: right; margin: 40px 20% 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: bottom;}