/* common */
article { margin: 0 auto; width: 100%; max-width: 1164px; }
article h2 { padding: 15px 0 12px 0; font-family: "Viga", sans-serif; font-size: 140%; color: #3f2021; text-align: center; background-color: #e6dab8; }
article section.body { margin: 0 auto; width: 94%; max-width: 600px; }
article section.body:nth-of-type(1) { margin-top: 60px; }
article section.body p { font-size: 110%; color: #3f2021; line-height: 1.6; }
article.title { position: relative; background-color: #3f2021; background-color: #3f2021; background-position: center; background-repeat: no-repeat; background-size: cover; }
article.title.pc { background-image: url("../images/flair/title_bg_pc.jpg"); }
article.title.sp { background-image: url("../images/flair/title_bg_sp.jpg"); }
article.title h1 { display: -webkit-box; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin: 0 auto; width: 100%; height: 150px; background-color: rgba(0, 0, 0, 0.1); }
article.title h1 span { display: block; }
article.title h1 span:nth-child(1) { width: calc(206px*0.6); }
article.title h1 span:nth-child(2) { margin-left: 15px; width: calc(460px*0.6); }
article.title h1 span img { width: 100%; }
article.title p.logo { position: absolute; left: 10px; bottom: 10px; width: 60px; }
article.title p.logo img { width: 100%; }

@media screen and (max-width: 640px) { article h2 { padding: 13px 0 10px 0; font-size: 110%; }
  article section.body p { font-size: 90%; } }
/* title */
@media screen and (max-width: 640px) { article.title h1 { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: wrap; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; height: 280px; }
  article.title h1 span img { width: 100%; }
  article.title p.logo { left: 10px; top: 10px; width: 40px; }
  article.title h1 span:nth-child(1) { margin: 0 auto; width: 124px; }
  article.title h1 span:nth-child(2) { margin: 0 auto; width: 276px; }
  /* android */ }
/* page_lead */
.page_lead { max-width: 890px; margin: 0 auto; padding: 40px 0; }
.page_lead .paragraph { font-size: 112.5%; font-weight: bold; line-height: 1.8; color: #3f2021; text-align: center; }
.page_lead .paragraph:nth-of-type(2) { margin: 20px 0 0 0; }

@media screen and (max-width: 890px) { .page_lead { padding-right: 20px; padding-left: 20px; }
  .page_lead .paragraph { text-align: left; line-height: 1.5; }
  .sp_none { display: none; } }
@media screen and (max-width: 640px) { .page_lead { font-size: 100%; } }
/* movie */
article.movie .movie_inner { max-width: 640px; margin: 0 auto; padding: 50px 0; }
article.movie .video { position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; margin: 0 auto; }
article.movie .video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width: 640px) { article.movie .movie_inner { max-width: 100%; padding-right: 20px; padding-left: 20px; } }
/* bar */
article.bar .bar_list { max-width: 890px; margin: 0 auto; padding: 0 0 80px; }
article.bar .bar_list li { padding: 50px 0 50px; border-bottom: 2px dotted rgba(63, 32, 33, 0.25); }
article.bar .bar_list li:nth-child(odd) .img { float: left; }
article.bar .bar_list li:nth-child(odd) .details { float: right; }
article.bar .bar_list li:nth-child(even) .img { float: right; }
article.bar .bar_list li:nth-child(even) .details { float: left; }
article.bar .bar_list li:last-child { border-bottom: none; padding-bottom: 0; }
article.bar .img { width: 42.1348%; }
article.bar .img img { width: 100%; }
article.bar .details { box-sizing: border-box; padding: 20px 30px 0 30px; width: 57.8651%; color: #3f2021; }
article.bar .details dd { margin: 5px 0 0 0; font-size: 81.25%; line-height: 1.4; }
article.bar .details dd:first-of-type { margin-top: 20px; }
article.bar .details .name { font-family: "Viga", sans-serif; font-size: 187.5%; }
article.bar .details .url a { position: relative; font-weight: bold; color: #f59119; }
article.bar .details .url a:before { content: url(../images/common/icon_blank.svg); display: block; position: absolute; top: 0.1em; right: -1.2307em; width: 12px; height: 10px; }
article.bar .details .url a:hover { color: #3f2021; }
article.bar .details .url a:hover:before { content: url(../images/common/icon_blank_h.svg); }
article.bar .details .explain { margin: 20px 0 0 0; line-height: 1.6; }

@media screen and (max-width: 890px) { article.bar .bar_list { padding-right: 20px; padding-left: 20px; } }
@media screen and (max-width: 640px) { article.bar .bar_list { max-width: 100%; }
  article.bar .bar_list li:nth-child(odd) .img { float: none; }
  article.bar .bar_list li:nth-child(odd) .details { float: none; }
  article.bar .bar_list li:nth-child(even) .img { float: none; }
  article.bar .bar_list li:nth-child(even) .details { float: none; }
  article.bar .bar_list li:last-child { border-bottom: none; padding-bottom: 0; }
  article.bar .img { width: 100%; }
  article.bar .details { padding-right: 0; padding-bottom: 0; padding-left: 0; width: 100%; } }