@media only screen and (max-width: 640px) { section.main { width: 100%; }
  section.main h1 img { width: 640px; height: auto; }
  section.main div { width: 600px; padding: 20px; background-color: #d2c800; }
  section.main div p.page { width: 600px; background-color: #fff; }
  section.main div p.page img { width: 596px; margin: 2px; height: auto; }
  section.main div a.button { display: block; width: 600px; padding: 10px 0; margin-top: 10px; background-color: #fff; font-size: 2em; text-align: center; color: #0c79cc; font-weight: bold; }
  ul.sns { width: 240px; height: 24px; margin: 20px auto; }
  ul.sns li { float: left; width: 120px; }
  section.detail { width: 600px; margin: 0 auto; font-size: 1.3em; }
  section.detail ul { width: 600px; }
  section.detail ul li { width: 100%; }
  section.detail ul li div.title { position: relative; width: 100%; height: 30px; background: url(../images/sp_icon_works.png) no-repeat 10px 5px; background-color: #d2c800; overflow: hidden; }
  section.detail ul li div.title span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li div.title2 { position: relative; width: 100%; height: 30px; background: url(../images/sp_icon_comics.png) no-repeat 10px 5px; background-color: #d2c800; overflow: hidden; }
  section.detail ul li div.title2 span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article { padding: 20px; background-color: #fff; }
  section.detail ul li article img { display: block; }
  section.detail ul li article div.character { position: relative; width: 150px; height: 18px; margin-bottom: 10px; background: url(../images/sp_works_character.png) no-repeat; overflow: hidden; }
  section.detail ul li article div.character span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article div.profile { position: relative; width: 150px; height: 18px; margin-bottom: 10px; background: url(../images/sp_works_profile.png) no-repeat; overflow: hidden; }
  section.detail ul li article div.profile span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article div.other { position: relative; width: 150px; height: 18px; margin-bottom: 10px; background: url(../images/sp_works_other.png) no-repeat; overflow: hidden; }
  section.detail ul li article div.other span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article p { margin-bottom: 8px; font-size: 1.16em; color: #4c4600; background-color: #fff; }
  section.detail ul li article p.small { font-size: 0.7em; }
  section.detail ul li article div { width: 100%; background-color: #fff; }
  section.detail ul li article ul.character { width: 580px; margin-right: -20px; }
  section.detail ul li article ul.character li { float: left; width: 270px; margin-right: 20px; }
  section.detail ul li article ul.character li div.imgbox { float: left; width: 116px; padding: 1px; margin-right: 10px; background-color: #fff; border: 1px #d2c800 solid; }
  section.detail ul li article ul.character li div.imgbox img { width: 116px; height: auto; }
  section.detail ul li article ul.character li strong { float: left; display: block; width: 140px; font-size: 1.167em; font-weight: normal; }
  section.detail ul li article ul.character li span { display: block; font-size: 0.75em; text-indent: -6px; }
  section.detail ul li article ul.character li div.text { clear: both; padding-top: 10px; }
  section.detail ul li article ul.comics { width: 560px; }
  section.detail ul li article ul.comics li.image { float: left; width: 244px; margin-right: 20px; }
  section.detail ul li article ul.comics li.image a.imgbox { display: block; width: 240px; padding: 1px; margin-right: 10px; background-color: #fff; border: 1px #d2c800 solid; }
  section.detail ul li article ul.comics li.image a.imgbox img { width: 240px; height: auto; }
  section.detail ul li article ul.comics li.text { float: left; width: 296px; margin-right: 0; }
  section.detail ul li article ul.comics li.text strong { float: left; font-size: 1.33em; color: #807900; }
  section.detail ul li div.line { width: 100%; height: 1px; background-color: #d2c801; }
  section.detail ul li a.button { display: block; width: 100%; height: 36px; padding-top: 14px; font-size: 1.5em; line-height: 1.2; text-indent: 255px; color: #4c4600; background: #d2c800 url(../images/icon_allow.png) no-repeat 225px 18px; }
  section.detail ul li a.totop { display: block; width: 56px; height: 34px; margin: 20px 5px 20px auto; }
  a.try, a.buy, a.detail { font-size: 1.154em; } }
@media only screen and (min-width: 641px) { section.main { width: 100%; }
  section.main h1 { float: left; }
  section.main h1 img { width: 640px; height: auto; width: 720px; height: 380px; }
  section.main div { width: 600px; padding: 20px; background-color: #d2c800; float: left; width: 240px; height: 368px; padding: 12px 0 0 20px; }
  section.main div p.page { width: 600px; background-color: #fff; width: 214px; padding: 4px; }
  section.main div p.page img { width: 596px; margin: 2px; height: auto; width: 212px; margin: 0; border: 1px #d2c800 solid; }
  section.main div a.button { display: block; width: 600px; padding: 10px 0; margin-top: 10px; background-color: #fff; font-size: 2em; text-align: center; color: #0c79cc; font-weight: bold; width: 222px; padding: 4px 0; font-size: 1.4em; }
  ul.sns { width: 240px; height: 24px; margin: 20px auto; }
  ul.sns li { float: left; width: 120px; }
  section.detail { width: 600px; margin: 0 auto; font-size: 1.3em; width: 940px; font-size: 1em; }
  section.detail ul { width: 600px; width: 960px; margin-right: -20px; }
  section.detail ul li { width: 100%; float: left; width: 460px; margin-right: 20px; }
  section.detail ul li div.title { position: relative; width: 100%; height: 30px; background: url(../images/sp_icon_works.png) no-repeat 10px 5px; background: url(../images/icon_works.png) no-repeat 10px 5px; background-color: #d2c800; overflow: hidden; }
  section.detail ul li div.title span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li div.title2 { position: relative; width: 100%; height: 30px; background: url(../images/sp_icon_comics.png) no-repeat 10px 5px; background: url(../images/icon_comics.png) no-repeat 10px 5px; background-color: #d2c800; overflow: hidden; }
  section.detail ul li div.title2 span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article { padding: 20px; background-color: #fff; }
  section.detail ul li article img { display: block; }
  section.detail ul li article div.character { position: relative; width: 150px; height: 18px; margin-bottom: 10px; background: url(../images/sp_works_character.png) no-repeat; overflow: hidden; background: url(../images/works_character.png) no-repeat; }
  section.detail ul li article div.character span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article div.profile { position: relative; width: 150px; height: 18px; margin-bottom: 10px; background: url(../images/sp_works_profile.png) no-repeat; overflow: hidden; background: url(../images/works_profile.png) no-repeat; }
  section.detail ul li article div.profile span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article div.other { position: relative; width: 150px; height: 18px; margin-bottom: 10px; background: url(../images/sp_works_other.png) no-repeat; overflow: hidden; background: url(../images/works_other.png) no-repeat; }
  section.detail ul li article div.other span { position: absolute; top: 100%; left: 100%; }
  section.detail ul li article p { margin-bottom: 8px; font-size: 1.16em; color: #4c4600; background-color: #fff; }
  section.detail ul li article p.small { font-size: 0.7em; }
  section.detail ul li article div { width: 100%; background-color: #fff; }
  section.detail ul li article ul.character { width: 580px; margin-right: -20px; width: 440px; }
  section.detail ul li article ul.character li { float: left; width: 270px; margin-right: 20px; width: 200px; }
  section.detail ul li article ul.character li div.imgbox { float: left; width: 116px; padding: 1px; margin-right: 10px; background-color: #fff; border: 1px #d2c800 solid; width: 94px; }
  section.detail ul li article ul.character li div.imgbox img { width: 116px; height: auto; width: 94px; }
  section.detail ul li article ul.character li strong { float: left; display: block; width: 140px; font-size: 1.167em; font-weight: normal; width: 92px; }
  section.detail ul li article ul.character li span { display: block; font-size: 0.75em; text-indent: -6px; }
  section.detail ul li article ul.character li div.text { clear: both; padding-top: 10px; }
  section.detail ul li article ul.comics { width: 560px; width: 420px; }
  section.detail ul li article ul.comics li.image { float: left; width: 244px; margin-right: 20px; width: 144px; }
  section.detail ul li article ul.comics li.image a.imgbox { display: block; width: 240px; padding: 1px; margin-right: 10px; background-color: #fff; border: 1px #d2c800 solid; width: 140px; }
  section.detail ul li article ul.comics li.image a.imgbox img { width: 240px; height: auto; width: 140px; }
  section.detail ul li article ul.comics li.text { float: left; width: 296px; margin-right: 0; width: 256px; }
  section.detail ul li article ul.comics li.text strong { float: left; font-size: 1.33em; color: #807900; font-size: 1.167em; }
  section.detail ul li div.line { width: 100%; height: 1px; background-color: #d2c801; }
  section.detail ul li a.button { display: block; width: 100%; height: 36px; padding-top: 14px; font-size: 1.5em; line-height: 1.2; text-indent: 255px; color: #4c4600; background: #d2c800 url(../images/icon_allow.png) no-repeat 225px 18px; text-indent: 200px; background: #d2c800 url(../images/icon_allow.png) no-repeat 170px 16px; }
  section.detail ul li a.totop { display: block; width: 56px; height: 34px; margin: 20px 5px 20px auto; display: none; }
  a.try, a.buy, a.detail { font-size: 1.154em; font-size: 1.5em; } }