@charset "utf-8";

/* ------------------------------------------------------
RESET
------------------------------------------------------ */
html {line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
details,menu,figcaption,figure,main,article,aside,footer,header,nav,section {display: block;}
html,body,button,input,optgroup,select,textarea,p,h1,h2,h3,h4,h5,h6,figure,ul,ol,dl,dt,dd {margin: 0;}
ul,ol,dl,dd,dt { list-style: none; padding: 0;}
hr {box-sizing: content-box;height: 0;overflow: visible;}
pre {font-family: monospace, monospace;font-size: 1em;}
a {background-color: transparent;-webkit-text-decoration-skip: objects;outline: none;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
code,kbd,samp {font-family: monospace, monospace;font-size: 1em;}
dfn {font-style: italic;}
mark {background-color: #ff0;color: #000;}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
canvas,audio,video {display: inline-block;}
audio:not([controls]) {display: none;height: 0;}
img {border-style: none;}
svg:not(:root) {overflow: hidden;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {display: inline-block;vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],
[type="radio"] {box-sizing: border-box;padding: 0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
summary {display: list-item;}
[hidden],template {display: none;}

/* ------------------------------------------------------
ANIMATED
------------------------------------------------------ */
/*fadeup*/
.fade--in-up{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0, 40px);-ms-transform: translate(0, 40px);transform: translate(0, 40px);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: opacity 1.5s cubic-bezier(0.165, 0.80, 0.45, 1) 0s, transform 1.5s cubic-bezier(0.165, 0.80, 0.45, 1) 0s;transition: opacity 1.5s cubic-bezier(0.165, 0.80, 0.45, 1) 0s, transform 1.5s cubic-bezier(0.165, 0.80, 0.45, 1) 0s;}
.fade--in-uplong {
  ;-webkit-transform: translate(0, 50px);-ms-transform: translate(0, 50px);transform: translate(0, 50px);
}
.fade--in-up.animated {opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0);}

/*fadedown*/
.fade--in-down{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0, -40px);-ms-transform: translate(0, -40px);transform: translate(0, -40px);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: all 1.5s cubic-bezier(0.165, 0.80, 0.45, 1) 0s;transition: all 1.5s cubic-bezier(0.165, 0.80, 0.45, 1) 0s;}
.fade--in-down.animated {opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0);}

/*fadein*/
.fade--in{opacity: 0;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transition: all 3s cubic-bezier(0.165, 0.80, 0.45, 1) 0s;transition: all 3s cubic-bezier(0.165, 0.80, 0.45, 1) 0s;}
.fade--in.animated {opacity: 1;filter: alpha(opacity=1);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.delay05 {-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
.delay10 {-webkit-transition-delay: 1.0s;transition-delay: 1.0s;}
.delay15 {-webkit-transition-delay: 1.5s;transition-delay: 1.5s;}
.delay20 {-webkit-transition-delay: 2.0s;transition-delay: 2.0s;}
.delay25 {-webkit-transition-delay: 2.5s;transition-delay: 2.5s;}
.delay30 {-webkit-transition-delay: 3.0s;transition-delay: 3.0s;}
.delay35 {-webkit-transition-delay: 3.5s;transition-delay: 3.5s;}
.delay40 {-webkit-transition-delay: 4.0s;transition-delay: 4.0s;}
.delay45 {-webkit-transition-delay: 4.5s;transition-delay: 4.5s;}
.delay50 {-webkit-transition-delay: 5.0s;transition-delay: 5.0s;}
@media screen and (max-width: 767px) {
  .sp--delay10 {-webkit-transition-delay: 1.0s;transition-delay: 1.0s;}
}

/* ------------------------------------------------------
FONTS
------------------------------------------------------ */
.font--fjalla {font-family: 'Fjalla One', sans-serif !important;}

/* ------------------------------------------------------
GENERAL
------------------------------------------------------ */
html {min-height: 100%;}
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", YuGothic, "游ゴシック体", "メイリオ", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background-color: #fff;
  color: #000;
}
.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#wrapper {overflow: hidden;}
.container {
  padding: 0 4.6875vw;
  margin: 0 auto;
  max-width: 1200px;
}
.align--center {text-align: center !important;}
.bg--color-red {background-color: #f31717 !important;}
.bg--color-yellow {background-color: #f3b41d !important;}
.bg--gradient-blu {
  background-color: #c0c7e7;
  background-image: linear-gradient(135deg, #c0c7e7 0%, #d6f0f7 50%, #e5e8f8 100%);
}
.color--cyan-gradient {
  background: -webkit-linear-gradient(135deg, #c0c7e7 0%, #d6f0f7 50%, #e5e8f8 100%);
  background: linear-gradient(135deg, #c0c7e7 0%, #d6f0f7 50%, #e5e8f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color--pink {color: #f18498;}
.color--purple {color: #7378ab;}
.color--green {color: #55a755;}
.color--blue {color: #59b7d3;}
@media all and (-ms-high-contrast: none) {
  .color--cyan-gradient {
    background: none;
    color: #dde4f8;
  }
}
@media screen and (max-width: 767px) {
  .show--only-pc {display: none !important;}
}
@media screen and (min-width: 768px) {
  .show--only-sp {display: none !important;}
  .container {
    padding: 0 15px;
  }
}

/* ------------------------------------------------------
HEADER
------------------------------------------------------ */
.social__list {
  font-size: 0;
  text-align: center;
}
.social__list li {
  display: inline-block;
  padding: 0 10px;
}
.logo {font-size: 0;}
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
}
.header__inner {
  background-color: #fff;
  position: relative;
}
.header__inner > .button {
  position: absolute;
  right: 50px;
  top: 9px;
  margin: 0;
  height: 26px;
  line-height: 28px;
  width: 130px;
  font-size: 10px;
  border-radius: 14px;
}
.header__inner > .button--amazon span {
  padding-left: 25px;
}
.header__inner > .button--amazon span:before {
  width: 18px;
  height: 18px;
  margin-top: -10px;
}
@media screen and (max-width: 767px) {
  #header {height: 43px;}
  .header__inner {padding: 16px 15px;}
  .logo img {width: 90px;}
  .hamburger {
    position: absolute;
    right: 15px;
    top: 9px;
    height: 25px;
  }
  .hamburger button {
    border: none;
    background: #fff;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    display: block;
    width: 25px;
    height: 100%;
    position: relative;
  }
  .hamburger span {
    position: absolute;
    left: 0;
    width: 25px;
    height: 3px;
    background-color: #000;
    display: block;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .hamburger span:nth-child(1) {top: 4px;}
  .hamburger span:nth-child(2) {top: 11px;}
  .hamburger span:nth-child(3) {top: 18px;}
  .nav--opened .hamburger button {background-color: transparent;}
  .nav--opened .hamburger span:nth-child(1) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    top: 12px;
  }
  .nav--opened .hamburger span:nth-child(2) {
    opacity: 0;
    -webkit-transform: translateX(100%);
    =ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  .nav--opened .hamburger span:nth-child(3) {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: 12px;
  }
  .nav--opened {overflow: hidden;}
  #header .navbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 43px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -ms-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .nav--opened #header .navbar {
    opacity: 1;
    visibility: visible;
    z-index: 5;
  }
  #header .navbar__inner {
    height: 100%;
    overflow-y: scroll;
  }
  #header .mainmenu {margin-bottom: 20px;}
  #header .mainmenu li a {
    display: block;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 15px 30px;
  }
  #header .mainmenu li {border-bottom: 1px solid #707070;}
  #header .button--amazon {margin-bottom: 35px;}
  #header .social {
    text-align: center;
    padding-bottom: 30px;
  }
  #header .social__list li {padding: 0 10px;}
  #header .social__list li a img {width: 25px;}
  .sticky {top:0 !important;}
}
@media screen and (min-width: 768px) {
  .logo {
    width: 157px;
    padding-right: 13px;
  }
  .logo img {width: 100%;}
  .visual .navbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 20px 0;
  }
  .navbar__inner {
    margin: 0 auto;
    max-width: 1200px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center!important;
    align-items: center!important;
  }
  .mainmenu {font-size: 0;}
  .mainmenu li {
    display: inline-block;
    padding: 0 17px;
  }
  .mainmenu li a {
    display: block;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    line-height: 1.2;
    font-size: 15px;
    letter-spacing: -0.025em;
  }
  .social {
    width: 310px;
    padding-left: 13px;
  }
  .social .button--amazon {
    width: 180px;
    height: 38px;
    border-radius: 19px;
    line-height: 38px;
    font-size: 15px;
    letter-spacing: -0.025em;
    -moz-box-shadow: 0 0 5px #5d7199;
    -webkit-box-shadow: 0 0 5px #5d7199;
    box-shadow: 0 0 5px #5d7199;
  }
  .social .button--amazon span {padding-left: 27px;}
  .social__list {
    display: inline-block;
    vertical-align: middle;
    padding-top: 6px;
    padding-left: 14px;
  }
  .header__inner {padding: 15px 10px;background-color: rgba(255, 255, 255, 0.9);}
  .sticky {
    top: -90px;
    -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -ms-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .sticky--opened .sticky {top:0;}
  .sticky--opened .sticky .header__inner {padding-left: 0;padding-right: 0;}
}
@media screen and (min-width: 768px) and (max-width: 990px) {
  .logo {width: 100px;padding-right: 5px;}
  .mainmenu li {padding: 0 6px;}
  .mainmenu li a {font-size: 11px;}
  .social__list {padding-left: 5px;}
  .social__list li {padding: 0 5px;}
  .social__list li img {width: 18px;}
  .social {width: 198px;padding-left: 0;}
  .social .button--amazon {font-size: 10px;width: 130px;height: 32px;border-radius: 16px;line-height: 32px;}
  .navbar__inner {
    padding: 0 10px;
    -ms-flex-pack: center!important;
    justify-content: center!important;
  }
}
@media screen and (min-width: 991px) and (max-width: 1199px) {
  .logo {width: 130px;padding-right: 5px;}
  .navbar__inner {
    padding: 0 10px;
    -ms-flex-pack: center!important;
    justify-content: center!important;
  }
  .mainmenu li {padding: 0 10px;}
  .mainmenu li a {font-size: 13px;}
  .social {width: 280px;}
  .social__list li {padding: 0 5px;}
  .social__list li img {width: 20px;}
}

/* ------------------------------------------------------
MAIN
------------------------------------------------------ */
#main {margin-top: 120vw;}
.group {position: relative;z-index: 2;background-color: #fff;}
.nav__group {padding: 20px 0;}
@media screen and (min-width: 768px) {
  .grid {overflow: hidden;}
  .grid--item {float: left;}
  #main {margin-top:750px;}
}

/* Flex */
.banner__book {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.banner__book {
  -ms-flex-align: end!important;
  align-items: flex-end!important;
}
.mine__head {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.mine__head {
  -ms-flex-align: center!important;
  align-items: center!important;
}
@media screen and (min-width: 768px) {
  .mine__list, .profile__content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* Button */
.button {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  line-height: 1;
  text-decoration: none;
}
.button--amazon {
  height: 45px;
  width: 230px;
  background-color: #f88327;
  border-radius: 23px;
  color: #fff;
  line-height: 44px;
  font-weight: bold;
  font-size: 14px;
  -moz-box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
  -webkit-box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
  box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
}
.button--amazon span {
  display: inline-block;
  position: relative;
  padding: 0 0 0 33px;
}
.button--amazon span:before {
  content: "";
  background: url(../img/ico_amazon52x52.png) no-repeat 0 0 / 100% 100%;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -13px;
}
.button--default {
  background-color: #fff;
  border: 1px solid #000000;
  height: 45px;
  width: 260px;
  line-height: 43px;
  border-radius: 23px;
  font-size: 12px;
  font-weight: bold;
  color: #000;
}
.button--no-border {border: none;}
.button__more {margin-top: 30px;}
.button--no-shadow {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.button--step {
  background-color: #fff;
/*  border: 1px solid #000000;*/
  height: 30px;
  width: 150px;
  line-height: 28px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}
.button--step span {
  position: relative;
  padding: 0 22px 0 0;
}
.button--step span:after {
  content: "";
  width: 15px;
  height: 3px;
  background: url(../img/arrow02.png) no-repeat 0 0 / 100% 100%;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -2px;
}
.button--color-cyan {background-color: #f18498;}
.button--color-pink {background-color: #f18498;}
.button--color-blue {background-color: #59b7d3;}
.button--color-purple {background-color: #7378ab;}
@media screen and (min-width: 768px) {
  .button--amazon {
    width: 280px;
    height: 60px;
    font-size: 16px;
    line-height: 58px;
    border-radius: 30px;
    -moz-box-shadow: 0 0 8px #5d7199;
    -webkit-box-shadow: 0 0 8px #5d7199;
    box-shadow: 0 0 8px #5d7199;
  }
  .button--amazon span {padding: 0 0 0 40px;}
  .button--amazon span:before {
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }
  .button--default {
    font-size: 14px;
    width: 240px;
    height: 50px;
    border-radius: 25px;
    line-height: 48px;
  }
  .button__more {margin-top: 60px;}
  .button--step {
    font-size: 14px;
    width: 240px;
    height: 44px;
    line-height: 42px;
    border-radius: 22px;
  }
  .button--step span {padding-right: 44px;}
  .button--step span:after {width: 30px;height: 6px;margin-top: -4px;}
}

/* sakura */
.button--amazon_sakura {
  height: 45px;
  width: 230px;
  background-color: #e38aa2;
  border-radius: 23px;
  color: #fff;
  line-height: 44px;
  font-weight: bold;
  font-size: 14px;
  -moz-box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
  -webkit-box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
  box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
}
.button--amazon_sakura span {
  display: inline-block;
  position: relative;
  padding: 0 0 0 33px;
}
.button--amazon_sakura span:before {
  content: "";
  background: url(../img/ico_amazon52x52.png) no-repeat 0 0 / 100% 100%;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -13px;
}

@media screen and (min-width: 768px) {
  .button--amazon_sakura {
    width: 280px;
    height: 60px;
    font-size: 16px;
    line-height: 58px;
    border-radius: 30px;
    -moz-box-shadow: 0 0 8px #5d7199;
    -webkit-box-shadow: 0 0 8px #5d7199;
    box-shadow: 0 0 8px #5d7199;
  }
  .button--amazon_sakura span {padding: 0 0 0 40px;}
  .button--amazon_sakura span:before {
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }
}

.sakura_bg_l {
  background: url(../img/text_bg_l.png) no-repeat 0 0 ;
  background-size:110% auto;
  background-position: bottom left 0px;
}

.sakura_bg_r {
  background: url(../img/text_bg_r.png) no-repeat 0 0;
  background-size:110% auto;
  background-position: bottom right 0px;
}

/* Heading */
.heading {
  text-align: center;
  margin-bottom: 30px;
}
.heading p {
  color: #a6a9b3;
  font-size: 12px;
  margin-bottom: 15px;
  padding-top: 38px;
  position: relative;
}
.heading p:before {
  content: "";
  width: 7px;
  height: 30px;
  background: url(../img/bg_head.png) no-repeat 0 0 / 100% 100%;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -4px;
}
.head__image {margin: 0 -4.6875vw 15px -4.6875vw;text-align: center;}
.head__image img {width: 320px;}
.heading h3 {
  font-weight: bold;
  font-size: 18px;
  font-size: 5.625vw;
}
@media screen and (min-width: 768px) {
  .heading {margin-bottom: 60px;}
  .heading p {
    padding-top: 72px;
    margin-bottom: 40px;
    font-size: 20px;
  }
  .heading p:before {
    width: 14px;
    height: 60px;
    margin-left: -7px;
  }
  .head__image {margin: 0 0 26px;}
  .head__image img {width: auto;max-width: 100%;}
  .heading h3 {
    font-size: 36px;
  }
}

/* Visual */
.visual {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
}
.visual__inner {
  height: 120vw;
  position: relative;
}
.visual__media {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.visual__media .movie {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
}
.visual__logo {
  position: absolute;
  left: 0;
  top: 18vw;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.visual__logo img {
  width: 50vw;
}
.visual__text {
  position: absolute;
  right: 7.8125vw;
  top: 28vw;
}
.visual__text img {width: 9.53125vw;}
.visual__batch {
  position: absolute;
  left: 2.34375vw;
  top: 3.125vw;
  width: 29.0625vw;
  z-index: 1;
}
.visual__batch img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .visual {top:43px;}
}
@media screen and (min-width: 768px) {
  .visual__inner {height: 750px;}
  .visual__logo {top:65px;}
  .visual__text img, .visual__logo img {width: auto;}
  .visual__text {
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 165px;
  }
  .visual__batch {
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: -122px;
  }
  .visual__batch img {width: 100%;max-width: 700px; margin: 0 auto;}
}

/* About */
.about {padding: 15px 0 30px;}
.about .button__wrap {margin-bottom: 40px;}
.about__text {padding: 0 4.6875vw;}
.about__text p {
  font-size: 13px;
  font-size: 4.0625vw;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .about {padding: 80px 0;}
  .about .heading {margin-bottom: 30px;}
  .about__text {
    padding: 0 15px;
    margin: 0 auto;
    max-width: 680px;
  }
  .about__text p {
    font-size: 20px;
    line-height: 2;
  }
}

/* Cast */
.cast {padding: 30px 0;}
.cast .container {padding: 0 3.125vw;}
.cast .heading {margin-bottom: 20px;}
.cast .head__image {margin-bottom: 20px;}
.cast__desc {
  font-size: 12px;
  font-size: 3.75vw;
  text-align: center;
  line-height: 1.5;
  margin: 0 -5px 20px;
}
.cast__quote {
  font-weight: bold;
  text-align: center;
  font-size: 3.5vw;
  line-height: 1.5;
  margin: 0 -5px 28px;
  font-feature-settings: "pwid" 1;
}
.cast__quote span {position: relative;}
.cast__quote span i {position: relative;}
.cast__quote span i:after,
.cast__quote span:before {
  content: "";
  width: 8px;
  height: 8px;
  background: url(../img/icon02.png) no-repeat 0 0 / 100% 100%;
  position: absolute;
}
.cast__quote span:before {
  background-image: url(../img/icon01.png);
  left: -10px;
  top: 0;
}
.cast__quote span i:after {
  left: 3px;
  top: 7px;
}
.cast__list li {margin-bottom: 5px;}
.cast__box {
  background-color: #fff;
  position: relative;
  padding: 20px 20px;
  letter-spacing: -0.08em;
}
.cast__cate {
  font-size: 30px;
  line-height: 1;
  position: absolute;
  right: 3px;
  top: 2px;
}
.cast__box p {
  line-height: 1;
  font-weight: bold;
  font-size: 10px;
  font-size: 3.125vw;
  position: relative;
  z-index: 1;
  margin-bottom: 13px;
}
.cast__box p strong {
  display: block;
  font-size: 18px;
  font-size: 4.6875vw;
  margin-top: 6px;
}
.cast__title {
  font-weight: bold;
  font-size: 3.75vw;
  line-height: 1.4;
}
.cast__title--large {
  line-height: 1.2;
  font-size: 5vw;
}
.cast--bg-image {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}
.cast__box.cast--bg-image {padding-top: 30px;}
.cast--bg-image1 {background-image: url(../img/bg_cast01_sp.png);}
.cast--bg-image2 {background-image: url(../img/bg_cast02_sp.png);}
.cast--bg-image3 {background-image: url(../img/bg_cast03_sp.png);}
.cast--bg-image4 {background-image: url(../img/bg_cast04_sp.png);}
.cast__box.cast--bg-image .cast__title {
  min-height: 75px;
  padding-bottom: 15px;
  font-feature-settings: "palt" 1;
}
/*
@media screen and (min-width: 340px) {
  .cast__quote {font-size: 12px;}
}
*/
@media screen and (min-width: 370px) {
  .cast__title {font-size: 13px;  font-size: 4.0625vw; font-feature-settings: "pwid" 1;}
  .cast__title--large {font-size: 18px; font-size: 5.625vw; font-feature-settings: "pwid" 1;}
}
@media screen and (min-width: 768px) {
  .cast {padding: 70px 0;}
  .cast .container {padding: 0 15px;}
  .cast .head__image {margin-bottom: 50px;}
  .cast .heading {margin-bottom: 35px;}
  .cast__desc {
    font-size: 18px;
    margin: 0 0 56px;
    line-height: 1.6;
  }
  .cast__quote {
    line-height: 1.6;
    font-size: 24px;
    margin: 0 0 70px;
  }
  .cast__quote span i:after,
  .cast__quote span:before {
    width: 15px;
    height: 15px;
  }
  .cast__quote span:before {left: -18px;}
  .cast__quote span i:after {left: 4px;top:18px;}
  .cast__content {
    margin: 0 auto;
    max-width: 1010px;
  }
  .cast__list li {
    margin-bottom: 10px;
    width: 50%;
    padding: 0 5px;
  }
  .cast__list li:nth-child(2) {margin-top: 85px;}
  .cast__cate {
    font-size: 50px;
    right: 6px;top: 5px;
  }
  .cast__box {padding: 30px 20px 30px 25px;}
  .cast__box p {font-size: 13px;margin-bottom: 15px;}
  .cast__box p strong {font-size: 30px;margin-top: 7px;letter-spacing: -0.1em;font-feature-settings: "palt" 1;}
  .cast__title {font-size: 22px;line-height: 1.36; font-feature-settings: "pwid" 1;}
  .cast__title--large {font-size: 28px;letter-spacing: -0.055em; font-feature-settings: "pwid" 1;}
  .cast__title--large.ps26 {font-size: 26px;}
  .cast__title.ffs {font-feature-settings: "palt" 1;}
  .cast__box.cast--bg-image {padding-top: 55px;}
  .cast__box.cast--bg-image p {margin-bottom: 40px;}
  .cast__box.cast--bg-image .cast__title {min-height: inherit;padding-bottom: 24px;}
}

/* Recommend */
.recommend {padding: 40px 0;}
.recommend .container {padding: 0;}
.recommend .head__image {margin-left: 0;margin-right: 0;}
.recommend__wrap {padding: 10px;}
.recommend__slide {
  background-color: #fff;
  padding: 20px;
  letter-spacing: -0.03em;
}
.recommend__text {
  font-size: 3.9vw;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 5px;
  letter-spacing: -0.025em;
  margin-right: -10px;
  font-feature-settings: "palt" 1;
  font-family: "Hiragino Mincho ProN","Hiragino Mincho Pro",游明朝,"Yu Mincho",YuMincho,HGS明朝E,メイリオ,Meiryo,serif;
}
.recommend__text span {display: inline-block;position: relative;}
.recommend__text em {
  font-style: normal;
  color: #04408a;
  font-weight: bold;
}
.comba--before:before,
.comba--after:after {
  content: "";
  width: 8px;
  height: 8px;
  background: url(../img/icon02.png) no-repeat 0 0 / 100% 100%;
}
.comba--before:before {
  position: absolute;
}
.comba--after:after {
/*
  right: -8px;
  bottom: 0;
*/
  display: inline-block;
  position: relative;
  top: 4px;
}
.comba--before:before {
  background-image: url(../img/icon01.png);
  left: -10px;
  top: 0;
}
.recommend__author {
  font-size: 3.125vw;
  font-weight: bold;
  line-height: 1.3;
}
.recommend__list li {margin-bottom: 10px;padding: 0 4vw;}
.recommend__list li:last-child {margin-bottom: 0px !important;}
.slick-next, .slick-prev {
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  font-size: 0;
  width: 13px;
  height: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.slick-next {
  background: url(../img/ico_next.png) no-repeat 0 0 / 100% 100%;
  right: -6px;
}
.slick-prev {
  background: url(../img/ico_prev.png) no-repeat 0 0 / 100% 100%;
  left: -6px;
}
.slick-dots {font-size: 0;text-align: center;position: absolute;
left: 0;right: 0;bottom: -28px;}
.slick-dots li {display: inline-block;padding: 0 6px;}
.slick-dots li button {
  cursor: pointer;
  font-size: 0;
  border: none;
  background: none;
  outline: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #d0d0d0;
  padding: 0;
}
.slick-dots .slick-active button {background-color: #04408a;}
@media screen and (min-width: 768px) {
  .recommend {padding: 80px 0 115px;}
  .recommend .heading {margin-bottom: 80px;padding: 0 15px;}
  .recommend .heading p {margin-bottom: 35px;}
  .comba--after:after,
  .comba--before:before {
    width: 15px;
    height: 15px;
  }
  .comba--before:before {left: -18px;}
  .comba--after:after {
    top: 10px;
/*    right: -10px;*/
  }
  .recommend__text {font-size: 22px;margin-right: 0;}
  .recommend__author {font-size: 13px;}
  .recommend__list li {margin-bottom: 40px;margin-left: 80px;padding: 0;}
  .recommend__slide {padding: 40px 30px;}
  .recommend__list li:nth-child(2) {margin-left: 145px;}
  .recommend__wrap {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
  }
  .slick-next, .slick-prev {
    width: 26px;
    height: 48px;
    margin-top: -24px;
  }
  .slick-next {right: 20px;}
  .slick-prev {left: 20px;}
  .slick-dots {bottom: -55px;}
  .slick-dots li {padding: 0 11px;}
  .slick-dots li button {
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
}

/* Banner */
.banner {
  background: url(../img/bg_banner_sp.png) no-repeat center center / cover;
  padding: 30px 0;
}
.banner h2 {margin-bottom: 12px;font-size: 0;}
.banner h2 img {
  display: block;
  margin: 0 auto;
  max-width: 258px;
}
.banner .button__wrap {
  text-align: center;
  margin-top: 18px;
}
.banner__content {
  width: 54.138%;
  text-align: right;
  padding: 0 12px 12px 0;
}
.banner__content h3 {
  font-size: 20px;
  font-weight: bold;
}
.banner__content h3 small {font-size: 11px;}
.banner__content h4 {
  font-size: 13px;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: 7px;
}
.banner__content p {
  font-size: 11px;
  line-height: 1.4;
}
.banner__image {width: 45.862%;}
.banner__image img {
  display: block;
  max-width: 141px;
}
@media screen and (max-width: 767px) {
  .banner__content h3 small {
    display: block;
    margin-top: 2px;
  }
  .banner__image img {width: 100%;}
}
@media screen and (min-width: 768px) {
  .banner {background-image: url(../img/bg_banner.png);}
  .banner .button__wrap {text-align: right;}
  .banner h2 {margin-bottom: 16px;}
  .banner h2 img {display: inline;}
  .banner__content {padding: 0 40px 30px 0;}
  .banner__content h3 {font-size: 28px;}
  .banner__content h3 small {
    font-size: 18px;
    margin-left: 5px;
  }
  .banner__content h4 {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .banner__content p {font-size: 14px;}
  .banner__image img,.banner h2 img {max-width: 100%;}
}

/* Profile */
.profile {
  background: #f1f3fc url(../img/img_profile_sp.png) no-repeat right top / 100% auto;
  padding: 30px 0;
}
.profile__media {margin-bottom: 27px;}
.profile__media iframe {
  width: 100%;
  height: 50.9375vw;
  border: none;
}
.profile__title {
  line-height: 1.2;
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 20px;
}
.profile__title small {
  display: block;
  font-size: 11px;
  margin-top: 8px;
}
.profile__text p {
  font-size: 12px;
    font-size: 3.75vw;
  line-height: 1.5;
  font-feature-settings: "pwid" 1;
}
@media screen and (min-width: 768px) {
  .profile {
    padding: 70px 0;
    background-image: url(../img/img_profile.png);
    background-size: auto auto;
  }
  .profile__content {
    margin: 0 auto;
    max-width: 1000px;
  }
  .profile__media {
    margin-bottom: 0;
    width: 56.8%;
    -ms-flex-order: 12;
    order: 12;
  }
  .profile__media iframe {height: 320px;}
  .profile__text {
    width: 43.2%;
    padding: 0 20px 0 0;
  }
  .profile__title {
    font-size: 50px;
    margin-bottom: 40px;
  }
  .profile__title small {font-size: 16px;}
  .profile__text p {
    font-size: 14px;
    line-height: 1.57;
  }
}
@media screen and (min-width: 1030px) {
  .profile__media iframe {height: 320px;}
}
@media screen and (min-width: 1300px) {
  .profile {
    background-image: url(../img/img_profile_lg.png);
    background-position: center top;
  }
}

/* Topic */
.topic {padding: 30px 0;}
.topic__list {border-top: 1px solid #d8d8d8;}
.topic__list dt {
  font-size: 12px;
  font-size: 3.75vw;
  padding: 9px 0 5px 0;
  line-height: 1;
}
.topic__list dt .new {color: #f31717;}
.topic__list dt .date {padding: 0 10px 0;}
.topic__list dt .cate {
  font-size: 10px;
  background-color: #10b43a;
  color: #fff;
  width: 43px;
  height: 14px;
  line-height: 14px;
  text-align: center;
}
.topic__list dd {
  border-bottom: 1px solid #d8d8d8;
  font-size: 12px;
  font-size: 3.75vw;
  line-height: 1.4;
  padding: 0 0 7px;
}
.topic__list dd a {
  text-decoration: none;
  color: #000;
}
.topic__list figure {margin-top: 5px;}
.topic__list dl {display: none;}
.topic__list dl:nth-child(1) {display: block;}
.topic__list dl:nth-child(2) {display: block;}
.topic__list dl:nth-child(3) {display: block;}
@media screen and (max-width: 767px) {
  .topic__list dt .new,.topic__list dt .date,.topic__list dt .cate {display: inline-block;}
  .topic__list figure img {
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .topic {padding: 80px 0;}
  .topic__list {padding: 15px 0 0 0;margin: 0 auto;max-width: 760px;}
  .topic__list dt {
    font-size: 18px;
    position: relative;
    width: 150px;
    padding: 0;
  }
  .topic__list dt .new {
    position: absolute;
    left: 0;
    top: 0;
  }
  .topic__list dt .date {
    padding: 0 20px 0 0;
    display: block;
    text-align: right;
  }
  .topic__list dt .cate {
    font-size: 14px;
    width: 70px;
    height: 20px;
    line-height: 20px;
  }
  .topic__list dt .cate {
    display: inline-block;
    position: absolute;
    right: -70px;
    top: 0;
  }
  .topic__list dd {
    padding: 0 0 15px 150px;
    margin: -1.1em 0 15px 0;
    font-size: 16px;
  }
  .topic__list dd a {
    margin-left: 85px;
    display: inline-block;
  }
  .topic__list figure {margin-top: 15px;}
}

/* Mine */
.mine {padding: 30px 0;}
.mine li {margin-bottom: 5px;}
.mine__box {
  position: relative;
  background-color: #fff;
  padding: 15px 15px 12px;
}
.mine li .number {
  position: absolute;
  right: 5px;
  top: 5px;
  line-height: 1;
  font-size: 35px;
}
.mine__head {margin-bottom: 10px;position: relative;z-index: 1;}
.mine__head div {padding: 0 0 0 10px;}
.mine__head div p {font-weight: bold;}
.mine__head div p:nth-child(1) {
  font-size: 14px;
  font-size: 4.375vw;
  margin-bottom: 8px;
}
.mine__head div p:nth-child(1) small {
  font-size: 10px;
  font-size: 3.125vw;
  display: block;
  margin-bottom: 2px;
}
.mine__head div p:nth-child(2) {
  font-size: 15px;
  font-size: 4.6875vw;
  line-height: 1.2;
}
.mine__head figure img {
  display: block;
  width: 65px;
}
.mine__box p {
  font-size: 12px;
  font-size: 3.75vw;
  line-height: 1.5;
}
.mine__list li {display: none;}
.mine__list li:nth-child(1) {display: block;}
.mine__list li:nth-child(2) {display: block;}
.mine__list li:nth-child(3) {display: block;}
.mine__list li:nth-child(4) {display: block;}
@media screen and (max-width: 767px) {
  .mine__list li {
    position: inherit !important;
    left: inherit !important;
    top: inherit !important;
  }
}
@media screen and (min-width: 768px) {
  .mine__content {
    margin: 0 auto;
    max-width: 1010px;
  }
  .mine {padding: 80px 0;}
  .mine__list li {
    width: 50%;
    padding: 0 5px;
    margin-bottom: 10px;
  }
  .mine__list li:nth-child(2) {margin-top: 70px;}
  .mine li .number {font-size: 50px;right: 7px;top:7px;}
  .mine__head {margin-bottom: 25px;}
  .mine__head figure img {width: 100px;}
  .mine__head div p:nth-child(1) {font-size: 18px;line-height: 1.2;}
  .mine__head div p:nth-child(1) small {font-size: 14px;margin-bottom: 0;}
  .mine__head div p:nth-child(2) {font-size: 24px;}
  .mine__box {padding: 30px 30px 25px;}
  .mine__box p {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Twitter */
.twitter {padding: 30px 0;}
.twitter .button__more {margin-top: 30px;}
.twitter__area {
  border: 1px solid #dddddd;
  margin: 0 auto;
  max-width: 690px;
  overflow: hidden;
  height: 470px;
}
.twitter__area.is--open {height: auto;max-height: 5000px;}
@media screen and (min-width: 768px) {
  .twitter {padding: 80px 0;}
  .twitter .button__more {margin-top: 80px;}
  .twitter__area {height: 900px;}
  .twitter__area.is--open {height: auto;max-height: 10000px;}
}

/* ------------------------------------------------------
FOOTER
------------------------------------------------------ */
#footer {padding: 10px 0;}
.copyright {
  text-align: center;
  font-size: 10px;
  line-height: 1;
}
.pagetop {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 5;
}
.pagetop__inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: right;
  position: relative;
}
.totop {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  opacity: 0;
}
.pagetop a {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  font-size: 0;
  background: #04408a url(../img/ico_pagetop.png) no-repeat center center / 15px 11px;
  -moz-box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
  -webkit-box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
  box-shadow: 0 0 4px rgba(93, 113, 153, 0.7);
}
@media screen and (min-width: 768px) {
  #footer {padding: 30px 0;}
  .copyright {font-size: 12px;}
  .totop {right: 0;}
  .pagetop a {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background-size: 23px 17px;
  }
}

/* ------------------------------------------------------
HOVER
------------------------------------------------------ */
@media screen and (min-width: 768px) {
  .button, .social__list li a, .logo a, .mainmenu li a, .pagetop a {
    -webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
  }
  .button:hover, .social__list li a:hover, .logo a:hover, .mainmenu li a:hover, .pagetop a:hover {opacity: 0.5;}
  .topic__list dd a:hover {text-decoration: underline;}
}
.timeline-Tweet-text { font-size:18px !important;}