/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
* Prevent vertical alignment issues.
*/

img {
  vertical-align: bottom;
}

/* ============================================  destyle.css */

/*********************************************
 * マンガで学ぶHIV/エイズ
 *
 * "源柔ゴシック" licensed under the SIL Open Font License 1.1
 *  http://jikasei.me/font/genjyuu/
 *********************************************/

 /* js：accordion.js用 */
 /* ============================================ */

.js-accordion-title {
  cursor: pointer;
}

.js-accordion-title:hover {
  opacity: .8;
}

/* Webフォント読み込み */

@font-face {
  font-family: 'GenjuB';
  src: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/fonts/GenJyuuGothic-Bold-subset.woff2) format('woff2'),url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/fonts/GenJyuuGothic-Bold-subset.woff) format('woff'),url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/fonts/GenJyuuGothic-Bold-subset.ttf) format('opentype');
  font-display: block;
}

/* ヘッダー */
/* ============================================ */

body {
  background-color: #ebeff5;
  font-size: 20px;
  color: #707070;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

header {
  height: 60px;
  padding: 16px 22px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.site-title {
  display: inline;
  height: 28px;
  line-height: 28px;
  font-size: 1em;
  color: #0161AB;
  font-family: GenjuB;
  white-space: nowrap;
}

.share {
  width: 116px;
  height: 28px;
  display: flex;
  justify-content: space-between;
}

.share__button {
  width: 28px;
  height: 28px;
  background-color: #ebeff5;
}

.share__button a {
  display: block;
  width: 100%;
  height: 100%;
}

.share__button.x {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/x.png);
}

.share__button.facebook {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/facebook.png);
}

.share__button.line {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/line.png);
}

/* メインコンテンツ */
/* ============================================ */

main {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.main-visual {
  width: 100%;
  height: 500px;
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/main-visual.png);
}

.main-visual__title {
  display: none;
}

.main-visual__supervisor {
  display: none;
}

.explanation {
  width: 100%;
  padding: 16px;
  background: #fff;
  border: solid 1px #707070;
}

.explanation-text {
  font-size: 1em;
  color: #707070;
  line-height: 30px;
}

.characters-area {
  width: 100%;
  margin-top: 80px;
}

.characters-title {
  width: 100%;
  padding: 15px;
  background-color: #0171AB;
  border-radius: 20px;
  text-align: center;
  font-size: 1.7em;
  line-height: 34px;
  color: #fff;
  font-family: GenjuB;
  position: relative;
}

.characters-title::after {
  content: '＋';
  display: block;
  position: absolute;
  top: 25%;
  right: 24px;
}

.characters-title.is-active::after {
  content: '－';
}

.characters {
  flex-wrap: wrap;
  justify-content: space-between;
  height: 0;
  overflow: hidden;
}

.characters.is-open {
  display: flex;
  height: auto;
}

.character {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 240px;
  margin-top: 32px;
}

.character-image {
  background-color: #fff;
  width: 100%;
  height: 240px;
  border-radius: 50%;
  margin: 0 auto;
}

.takashi .character-image {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/takashi.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 10px 0;
}
.miho .character-image {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/miho.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 15px 0;
}
.ryo .character-image {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/ryo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 10px 0;
}
.master .character-image {
  background-image: url(/content/dam/shionogi/jp/sustainability/informations-for-id/hiv/assets/images/master.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 10px 0;
}

.character-name {
  position: relative;
  top: 80%;
  left: calc(50% - 78px);
  bottom: 0;
  width: 168px;
  height: 60px;
  background-color: #fff;
  font-size: 1.2em;
  font-family: GenjuB;
  line-height: 60px;
  text-align: center;
}

.character-explanation {
  width: 100%;
  background-color: #fff;
  border: solid 1px #707070;
  padding: 16px;
  margin-top: 16px;
  flex-grow: 1;
}

.character-explanation-text {
  font-size: 1em;
  color: #707070;
  line-height: 1.5;
}

.comic-click-trigger {
  text-align: center;
  margin: 32px 10% 0;
  padding: 0.25em 0.5em;
  background-color: #e70010;
  color: #fff;
  font-size: 1.15em;
}

.comics {
  width: 100%;
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.comic {
  width: 100%;
  max-width: 522px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 32px;
}

.comic__title {
  width: 100%;
  padding: 30px;
  background-color: #0171AB;
  border-radius: 14px;
  font-size: 1.2em;
  color: #fff;
  font-family: GenjuB;
  line-height: 1;
  text-align: center;
}

.comic__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 16px;
  width: 100%;
  max-width: 370px;
}

.comic__explanation {
  background: #fff;
  padding: 8px;
}

.comic__explanation__text {
  font-size: 0.9em;
  color: #707070;
  line-height: 1.5;
}

.comic__link-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.link {
  display: block;
  background-color: #00A4DC;
  width: 177px;
  height: 54px;
  border-radius: 14px;
  line-height: 54px;
  font-size: 1em;
  color: #fff;
  font-family: GenjuB;
  text-align: center;
}

.link:hover {
  background-color: #81d9f7;
}

.comic__thumbnail-area {
  width: 136px;
  height: 192px;
  margin-top: 16px;
}

.comic__thumbnail-area a:hover {
  opacity: .8;
}

.thumbnail {
  width: 100%;
}

.message-area {
  margin-top: 80px;
}

.message-title-area {
  width: 100%;
  border-radius: 20px;
  background: #0171AB;
  padding: 23px 18px;
}

.message-title {
  font-size: 1.3em;
  color: #fff;
  font-family: GenjuB;
  text-align: center;
}

.message__supervisor {
  font-size: 0.9em;
  color: #fff;
  font-family: GenjuB;
  text-align: center;
  margin-top: 8px;
}

.message {
  width: 100%;
  padding: 16px;
  background: #fff;
  margin-top: 16px;
  border: solid 1px #707070;
}

.intro {
  font-size: 1.2em;
}

.message-text {
  font-size: 1em;
  line-height: 1.5;
  margin-top: 1.5em;
}

.dl-area {
  margin-top: 80px;
}

.dl-title-area {
  width: 100%;
  border-radius: 20px;
  background: #0171AB;
  padding: 23px 18px;
}

.dl-title {
  font-size: 1.3em;
  color: #fff;
  font-family: GenjuB;
  text-align: center;
}

.dl-content {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

.dl-poster {
  width: 50%;
  padding: 0 18px;
}

.dl-poster-title {
  text-align: center;
  color: #0161AB;
  font-family: GenjuB;
  font-size: 1.3em;
}

.dl-poster-image {
  display: block;
  margin-top: 16px;
  width: 100%;
}

.dl-poster-image img {
  width: 100%;
  height: auto;
}

.dl-poster-image:hover {
  opacity: .8;
}

.dl-poster-link {
  display: block;
  background-color: #00A4DC;
  width: 100%;
  max-width: 398px;
  margin: 16px auto 0;
  height: 54px;
  border-radius: 14px;
  line-height: 54px;
  font-size: 1em;
  color: #fff;
  font-family: GenjuB;
  text-align: left;
  padding-left: 1em;
}

.dl-poster-link:hover {
  background-color: #81d9f7;
}

.dl-comics {
  width: 100%;
  padding: 0 18px;
}

.dl-comics-title {
  text-align: center;
  color: #0161AB;
  font-family: GenjuB;
  font-size: 1.3em;
}

.dl-comic {
  margin-top: 16px;
}

.dl-comic-title {
  color: #0161AB;
  font-family: GenjuB;
  width: 100%;
}

.dl-comic-content {
  display: flex;
  align-items: center;
}

.dl-comic-thumb {
  width: 75%;
  max-width: 136px;
  margin-top: 8px;
}

.dl-comic-thumb:hover {
  opacity: .8;
}

.dl-comic-thumb img {
  width: 100%;
}

.dl-comic-link {
  margin: 0 auto;
  display: block;
  background-color: #00A4DC;
  width: 100%;
  max-width: 398px;
  height: 54px;
  border-radius: 14px;
  line-height: 54px;
  font-size: 1em;
  color: #fff;
  font-family: GenjuB;
  text-align: left;
  padding-left: 1em;
}

.dl-comic-link:hover {
  background-color: #81d9f7;
}

.infection-info {
  text-align: center;
  margin-top: 60px;
}

.infection-info a:hover {
  opacity: .8;
}

.infection-info img {
  width: 240px;
}

/* フッター */
/* ============================================ */

footer {
  width: 100%;
  height: 48px;
  margin-top: 80px;
  background: #fff;
  display: flex;
  justify-content: space-around;
}

.footer__logo {
  width: 127px;
  height: 20px;
  margin-top: 13px;
}

.footer__logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__logo a img {
  width: 100%;
}

.footer-info {
  display: flex;
  margin: 15px;
}

.footer-links {
  display: flex;
}

.footer-link {
  font-size: 0.6em;
  margin-right: 16px;
  height: 18px;
}

.footer-link a {
  line-height: 18px;
}

.footer-link a::before {
  display: inline;
  content: "> ";
}

.footer-link a:hover {
  text-decoration: underline;
}

.copywrite {
  font-size: 0.6em;
  line-height: 18px;
  margin-left: 32px;
}

@media screen and (max-width: 1024px) {
  .main-visual {
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
  }

  .main-visual::before {
    content: "";
    display: block;
    padding-top: calc(100vw * 0.462);
  }

  .characters-title {
    width: 90%;
    margin:  0 auto;

  }

  .characters {
    justify-content: center;
  }

  .comics {
    justify-content: center;
  }

  .message-title-area {
    width: 90%;
    margin: 0 auto;
  }

  .message {
    width: 90%;
    margin: 16px auto 0;
  }

  .dl-comic {
    margin-top: 32px;
  }

  .dl-comic:first-child {
    margin-top: 16px;
  }

  .dl-comic-title {
    text-align: center;
  }

  .dl-comic-content {
    flex-wrap: wrap;
  }

  .dl-comic-thumb {
    max-width: 100%;
    margin: 8px auto 0;
  }

  .dl-comic-link {
    margin-top: 8px;
  }

}

@media screen and (max-width: 480px) {

  body {
    font-size: 14px;
  }


  header {
    height: auto;
    flex-wrap: wrap;
    padding: 16px 8px;
  }

  .site-title {
    font-size: 1.25rem;
  }

  .share {
    margin: 16px 0 0 auto;
  }

  .character {
    display: flex;
    margin-bottom: 32px;
  }

  .character-image {
    width: calc(50vw - 16px);
    height: calc(50vw - 16px);
    margin: 0 8px;
    background-size: contain;
  }

  .character-image::before {
    display: block;
    content: "";
    width: calc(50vw - 16px);
    height: calc(50vw - 16px);
  }

  .character-name {
    position: static;
    width: 100%;
    height: calc(1.2rem + 16px);
    line-height: calc(1.2rem + 16px);
    margin: 4px 0;
  }

  .character-explanation {
    margin: 0 8px 0 0;
    padding: 8px;
    min-height: calc(50vw + 1.2rem + 4px);
    display: flex;
    align-items: center;
  }

  .comic__title {
    order: 1;
  }

  .comic__main {
    margin: 0 auto;
    order: 3;
    max-width: 100%;
  }

  .comic__thumbnail-area {
    order: 2;
    width: 80%;
    height: auto;
    margin: 16px auto 0;
  }

  .comic__explanation {
    width: 80%;
    margin: 0 auto;
  }

  .comic__link-area {
    flex-wrap: wrap;
    margin: 16px auto 0;
    width: 90%;
  }

  .link {
    width: 90%;
    margin: 16px auto;
  }

  .dl-area {
    width: 90%;
    margin: 80px auto 0;
  }

  .dl-content {
    display: block;
  }

  .dl-poster {
    width: 100%;
  }
  .dl-poster-title {
    border-bottom: #0161AB solid 1px;
  }

  .dl-comics {
    width: 100%;
    margin-top: 48px;
  }

  .dl-comics-title {
    border-bottom: #0161AB solid 1px;
  }

  footer {
    height: auto;
    flex-wrap: wrap;
  }

  .footer-info {
    flex-wrap: wrap;
    margin: 16px 0;
  }

  .footer-links {
    flex-wrap: wrap;
    margin: 0 auto 16px;
  }

  .footer-link {
    display: flex;
    width: 50%;
    border: #707070 solid 1px;
    margin: 0;
    padding: 16px;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .footer-link:nth-child(1),
  .footer-link:nth-child(2) {
    border-bottom: none;
  }
  .footer-link:nth-child(1),
  .footer-link:nth-child(3) {
    border-right: none;
  }

  .footer-link a::before {
    display: none;
  }

}