/*   HTML5 Doctor CSS Reset -> http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/   */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
a img{vertical-align:bottom}li{list-style:none}input[type="text"]{border:none;}input[type="radio"]{margin:0 3px 0 0}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'メイリオ', 'Meiryo', '游ゴシック', 'YuGothic', 'Hiragino Kaku Gothic ProN',
  'ヒラギノ角ゴ ProN', 'sans-serif';
  line-height: 32px;
  -webkit-text-size-adjust: none;
  /*footer下部固定*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
html{
  overflow-y: scroll;
}
img {
  height: auto;
  vertical-align: bottom;
}
ul {
  list-style-type: none;
}
a {
  color: rgb(57, 64, 151);
  text-decoration: none;
  transition: 0.3s ease-in-out;
}
a:hover {
  text-decoration: none;
  opacity: 0.7;
}
a:visited {
  color: rgb(74, 81, 179);
  text-decoration: none;
}
.heading.-primary {
  margin-bottom: 40px;
  text-align: center;
}

.container {
  width: 100%;
  position: relative;
  overflow: hidden;
  /*footer下部固定*/
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-height: 100vh;
}

@media only screen and (min-width: 1025px) {
  body {
    font-size: 14px;
  }
  .heading.-primary {
    font-size: 32px;
  }
  .for-sp {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  body {
    font-size: 12px;
  }
  .heading.-primary {
    font-size: 24px;
  }
  .for-pc {
    display: none;
  }
}
/* @media only screen and (min-width: 768px) and (max-width: 1024px) {
} */

/*------------------------
header
------------------------*/
.header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 1024px) {
  .header {
    padding: 0 16px 0 32px;
  }
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
}
@media only screen and (min-width: 1025px) {
  .header-wrapper {
    width: 1008px;
    padding: 24px 0;
  }
  .header-wrapper .logo .link .image {
    width: 130px;
  }
}
@media only screen and (max-width: 1024px) {
  .header-wrapper {
    width: 100%;
    padding: 8px 0;
  }
  .header-wrapper .logo .link .image {
    width: 90px;
    margin-left: 8px;
  }
}
.gn-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.gn-list .item .link {
  display: block;
  color: #000;
}
.gn-list .item.-contact {
  background: #000;
  transform:skewX(-9deg);
}
.gn-list .item.-contact .link {
  color: #FFF;
  transform:skewX(9deg);
}
@media only screen and (min-width: 1025px) {
  .gn-list .item {
    margin-left: 32px;
  }
  .gn-list .item.-contact .link {
    padding: 2px 24px;
  }
}
@media only screen and (max-width: 1024px) {
  .gn-list .item {
    margin-left: 16px;
  }
  .gn-list .item.-contact .link {
    padding: 2px 16px;
  }
}

/*------------------------
main
------------------------*/
.main-wrapper {
  width: 100%;
  text-align: center;
}
@media only screen and (max-width: 1024px) {
  .main-wrapper {
    padding: 30px 16px;
  }
}

/*------------------------
firstview
------------------------*/
.firstview-area {
  position: relative;
  width: 100%;
  height: 100vh;
}
.firstview-area .movie {
  width: 100%;
}
.firstview-area .copys {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
@media only screen and (min-width: 1025px) {
  .firstview-area .copys .copy {
    width: 675px;
    margin-bottom: 12px;
  }
  .firstview-area .copys .text {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1024px) {
  .firstview-area .copys .copy {
    width: 263px;
    margin-bottom: 8px;
  }
  .firstview-area .copys .text {
    font-size: 18px;
  }
}

/*------------------------
overview
------------------------*/
.overview-area .box {
  margin: 0 auto;
  text-align: left;
}
.overview-area .box .text {
  margin-bottom: 32px;
}
.overview-area .box .table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.overview-area .box .table .row .cell {
  vertical-align: top;
  border-bottom: 2px solid #CBCBCB;
}
.overview-area .box .table .row .cell.-heading {
  text-align: left;
  font-weight: normal;
}
.overview-area .box .table .row .cell .sub {
  font-size: 0.7em;
}
@media only screen and (min-width: 1025px) {
  .overview-area {
    padding: 90px 0 192px;
    font-size: 18px;
  }
  .overview-area .box {
    width: 580px;
  }
  .overview-area .box .table .row .cell {
    padding: 16px 0;
  }
  .overview-area .box .table .row .cell.-heading {
    width: 140px;
  }
  .overview-area .box .table .row .cell .sub {
    line-height: 24px;
  }
}
@media only screen and (max-width: 1024px) {
  .overview-area {
    padding: 70px 0 40px 0;
    font-size: 14px;
  }
  .overview-area .box {
    width: 90%;
  }
  .overview-area .box .table .row .cell {
    padding: 8px 0;
  }
  .overview-area .box .table .row .cell.-heading {
    width: 120px;
  }
  .overview-area .box .table .row .cell .sub {
    line-height: 16px;
  }
}

/*------------------------
privacy-area
------------------------*/
.privacy-area {
  text-align: left;
}
.privacy-area .text {
  margin-bottom: 32px;
}
.privacy-area .list {
  margin-bottom: 24px;
}
.privacy-area .list.-number .item {
  list-style-type: decimal;
  margin-left: 1em;
  margin-bottom: 8px;
}
.privacy-area .text.-info {
  text-align: right;
}
.privacy-area .heading.-secondary {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: bold;

}
@media only screen and (min-width: 1025px) {
  .privacy-area {
    width: 1000px;
    margin: 192px auto;
  }
}
@media only screen and (max-width: 1024px) {
  .privacy-area {
    padding: 50px 16px 40px;
  }
}

/*------------------------
footer
------------------------*/
.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #000;
  color: #FFF;
  /*footer下部固定*/
  margin-top: auto;
}
.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer-wrapper .copyright {
  width: 100%;
  text-align: center;
}
.ft-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.ft-list .item .link {
  display: block;
  color: #FFF;
}
@media only screen and (min-width: 1025px) {
  .footer {
    padding: 32px 0;
  }
  .footer-wrapper {
    width: 1008px;
  }
  .footer-wrapper .copyright {
    padding-top: 16px;
    font-size: 12px;
  }
  .ft-list .item {
    margin-left: 32px;
  }
}
@media only screen and (max-width: 1024px) {
  .footer {
    padding: 16px;
    position: static;
    z-index: 3000;
  }
  .footer-wrapper {
    width: 100%;
  }
  .footer-wrapper .logo .link .image {
    width: 60px;
  }
  .footer-wrapper .copyright {
    padding-top: 8px;
    font-size: 9px;
  }
  .ft-list {
    margin-right: 24px;
    font-size: 10px;
  }
  .ft-list .item {
    margin-left: 16px;
  }
}

/*------------------------
slanting
------------------------*/
.slanting-top {
  position: fixed;
  z-index: -100;
  top: 0;
  width: 150px;
  height: 900px;
  background-color: #000;
  transform:skewX(-9deg);
}
.slanting-btm {
  position: fixed;
  z-index: -100;
  bottom: 0;
  width: 150px;
  height: 900px;
  background-color: #000;
  transform:skewX(-9deg);
}
@media only screen and (min-width: 1366px) {
  .slanting-top {
    left: -90px;
  }
  .slanting-btm {
    right: -90px;
  }
}
@media only screen and (max-width: 1366px) {
  .slanting-top {
    left: -190px;
  }
  .slanting-btm {
    right: -190px;
  }
}