@charset "UTF-8";
/*--------------------------
	Variables
--------------------------*/
/*--------------------------
	General Settings
--------------------------*/
* {
  font-size: 14px;
  line-height: 1.8;
  box-sizing: border-box;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; }

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
dl,
dt,
dd {
  margin: 0;
  padding: 0; }

ul,
ol {
  list-style-type: none; }

a {
  color: #008fd1; }
  a:visited {
    color: #666; }
  a:hover {
    color: #c41f47;
    transition: .3s ease;
    -webkit-transition: .3s ease; }

/*--------------------------
	  Common Settings
  --------------------------*/
section h3 {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 4px solid #000;
  font-size: 18px; }

.link:before {
  content: "▶";
  font-size: 10px;
  color: #008fd1; }

.link > a {
  padding: 20px 0 20px 5px;
  padding-right: 0; }
  .link > a:visited {
    color: #008fd1; }

/*--------------------------
	  PC
  --------------------------*/
/*---layout---*/
body {
  padding-top: 50px;
  background: url(../images/bg.jpg) repeat-x; }

section {
  width: 1000px;
  margin: 0 auto 50px; }

aside {
  width: 1000px;
  margin: 0 auto; }

#sect_wrapper {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; }
  #sect_wrapper section {
    width: 240px;
    margin-left: 0;
    margin-right: 0; }

/*---sns---*/
.sns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px; }
  .sns div {
    margin-right: 10px; }

/*---main_sect---*/
#main_sect {
  margin-bottom: 0; }
  #main_sect h1 {
    font-size: 30px; }
    #main_sect h1 span {
      color: #0085cd;
      font-size: 30px; }
  #main_sect h2 {
    font-size: 24px; }
    #main_sect h2 + p {
      margin-bottom: 30px;
      font-size: 18px;
      font-weight: bold; }
      #main_sect h2 + p > span {
        font-size: 14px;
        font-weight: normal; }
  #main_sect #book_cover {
    position: relative;
    float: left;
    width: 310px;
    margin-right: 60px; }
    #main_sect #book_cover img {
      width: 310px;
      box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2); }
    #main_sect #book_cover #medal {
      position: absolute;
      display: block;
      padding-top: 30px;
      width: 120px;
      height: 174px;
      top: -20px;
      right: -10px;
      background: url(../images/icon_medal.png) no-repeat left center;
      background-size: cover;
      text-align: center;
      line-height: 1.4;
      transform: rotate(15deg);
      font-weight: bold; }
      #main_sect #book_cover #medal .date {
        display: block;
        font-size: .5rem; }
      #main_sect #book_cover #medal strong {
        display: block;
        font-size: 2.2rem;
        line-height: 1;
        color: #c41f47; }
  #main_sect #contents_info h3 {
    width: 100px;
    min-height: 170px;
    float: left;
    margin-top: 0;
    margin-right: 30px;
    border-right: 4px solid #000;
    border-bottom: none; }
    #main_sect #contents_info h3 + p {
      margin-bottom: 30px;
      padding-left: 30px; }
      #main_sect #contents_info h3 + p + p {
        text-align: right; }

/*---book_info---*/
#book_info dl {
  display: flex;
  flex-flow: row wrap; }
  #book_info dl dt {
    width: 75px;
    margin-bottom: 3px;
    margin-right: 10px;
    padding: 3px 6px;
    background: #008fd1;
    color: #fff; }
  #book_info dl dd {
    width: 150px;
    padding: 3px;
    clear: both; }

/*---purchase_sect---*/
#purchase_sect ul li {
  margin-bottom: 10px; }

#purchase_sect .button {
  background: #008fd1; }

.button {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  width: 240px;
  height: 65px;
  line-height: 57px;
  outline: none;
  border: 4px solid #008fd1; }
  .button:visited {
    color: #fff; }

#purchase_sect .button::before, #purchase_sect .button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: ''; }

.button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box !important;
  -webkit-transition: all .3s;
  transition: all .3s; }
  .button::before, .button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box !important;
    -webkit-transition: all .3s;
    transition: all .3s; }

#purchase_sect .button:hover {
  background-color: #fff;
  color: #008fd1 !important;
  border: 4px solid #008fd1; }

/*---blog_sect---*/
#blog_sect p a {
  color: #008fd1;
  font-weight: bold;
  background-image: url(../images/orangain_logo.png);
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 46px 46px; }

#blog_sect .button:hover {
  background-color: #008fd1;
  color: #fff !important;
  border: 4px solid #008fd1; }

/*---review_sect---*/
#review_sect ul {
  list-style: disc inside; }
  #review_sect ul li blockquote {
    position: relative;
    padding: 25px 20px 20px 40px;
    font-size: 1.1rem;
    color: #666;
    background: rgba(0, 0, 0, 0.1);
    line-height: 1.3; }
    #review_sect ul li blockquote::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 20px;
      width: 16px;
      height: 16px;
      display: block;
      background-image: url(../images/quote-left.svg);
      background-size: contain; }

/*---index_sect---*/
#index_sect .box_wrapper {
  display: flex;
  justify-content: space-between; }

#index_sect h4 {
  margin-bottom: 15px;
  padding: 3px 10px;
  color: #fff;
  background: #008fd1; }

#index_sect ol {
  margin-bottom: 30px;
  margin-left: 20px; }
  #index_sect ol > li {
    font-size: 12px; }
    #index_sect ol > li > span {
      margin-right: 15px;
      color: #008fd1;
      font-weight: bold; }

/*---footer---*/
footer {
  margin: 80px auto; }
  footer .totop {
    position: fixed;
    background: #000;
    opacity: 0.75;
    right: 30px;
    bottom: 30px;
    display: block;
    width: 70px;
    height: 70px; }
    footer .totop > a {
      display: block;
      color: #fff;
      text-decoration: none;
      font-size: 50px;
      line-height: 70px; }
  footer p {
    text-align: center; }

/*--------------------------
	  media query
  --------------------------*/
@media screen and (max-width: 999px) {
  /*　画面サイズが999pxまではここを読み込む　*/
  body {
    margin: 0 10px; }
  section,
  aside {
    width: 100%;
    display: inherit; }
  #sect_wrapper {
    width: 100%;
    display: inherit; }
    #sect_wrapper section {
      width: 100%;
      display: inherit; }
  .box_wrapper,
  #index_sect .box_wrapper {
    width: 100%;
    display: inherit; }
  #main_sect #book_cover {
    float: none;
    margin: 0 auto 30px;
    text-align: center; }
  #book_info dl {
    width: 240px;
    margin: 0 auto; }
  #purchase_sect ul,
  #blog_sect p {
    text-align: center; } }

@media screen and (max-width: 649px) {
  /*　画面サイズが649pxまではここを読み込む　*/
  body {
    background: url(../images/bg@650w.jpg) repeat-x;
    background-size: contain; }
  #main_sect {
    margin-top: 80px; }
  #main_sect #contents_info h3 {
    float: none;
    width: 100%;
    min-height: inherit;
    margin: 0 0 20px 0;
    border-right: none;
    border-bottom: 4px solid #000; }
    #main_sect #contents_info h3 + p {
      padding: 0; } }