@charset "utf-8";
/*--------------------
reset
--------------------*/
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,picture,
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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  background: #000;
  box-sizing: border-box;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display:block;
}
a {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
dl, dt, dd, ul, li, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
picture {
  display: block;
}
img{
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
  vertical-align: top;
  border-style: none;
  display: block;
}

/*====================
content
====================*/
body {
  position: relative;
  line-height: 1;
  text-align: left;
  font-family: YuGothic, "游ゴシック体", Yu Gothic, "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Helvetica Neue", Arial, "メイリオ", Meiryo, sans-serif;
  color: #000;
  font-weight: 500;
  background-image: url("../img/pc_bg.jpg");
  background-attachment:fixed;
  background-position: top center;
  background-size: 100% cover;
}
#content {
    padding: 0;
    margin: 0;
}
/* a
--------------------*/
a img {
  transition-duration: 0.5s;
}
a { text-decoration: underline;}
@media screen and (min-width: 768px){
  a:hover img {
    opacity: 0.8;
    transition-duration: 0.5s;
  }
  a:hover { text-decoration: none;}
}
/* wrapper
--------------------*/
#wrapper {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  font-size: 1.6rem;
  display: block;
  background: #0d0010;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, .7);
}
#wrapper h1, h2, h3, p {
  line-height: 1;
  font-size: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
#wrapper .inner {
  position: relative;
}
/*====================
header
====================*/
#wrapper header .fv_btn {
  display: flex;
}
#wrapper header video {
  width: 100%;
}
/*====================
main
====================*/
#wrapper main {
}
/* model
--------------------*/
.model {
}
/* message
--------------------*/
.message {
}
/* course
--------------------*/
.course .course_btn {
  display: flex;
}
.course .course_btn li {
  position: relative;
}
.course .course_btn img {
  position: relative;
  transition-duration: 0.5s;
  cursor: pointer;
}
.course .course_btn img.off {
  display: none;
  position: absolute;
} 
.course .course_btn img.off.active {
  display: block;
  z-index: 2;
  pointer-events: none;
}
#course02_details {
  display: none;
}
@media screen and (min-width: 768px){
  .course .course_btn img.pc_hover:hover {
    opacity: 0.8;
    transition-duration: 0.5s;
  }
}
/* howto
--------------------*/
.howto ul {
  display: flex;
}
/* flow
--------------------*/
.flow {
}
/* faq
--------------------*/
.faq {
  padding-bottom: 8%;
}
.faq .inner {
  width: calc(660 / 750 *100%);
  margin: 0 auto;
  background: #f8f8f8;
  border-radius: 10px;
  margin-bottom: 5%;
}
.faq h3 {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.faq p {
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  padding: 4% 6% 6%;
  box-sizing: border-box;
  display: none;
  font-feature-settings: "palt";
  letter-spacing: .03em;
}
.faq .btn {
  padding-top: 6%;
}
/* プラスマイナスアイコン */
.acc_icon_wrap {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translatey(-50%);
  width: 1.2em;
  height: 1.2em;
}
.acc_icon_wrap .acc_icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.acc_icon_wrap .acc_icon:before,
.acc_icon_wrap .acc_icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.5s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 3px;
  transform: translate(-50%, -50%);
}
.acc_icon_wrap .acc_icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.acc_icon_wrap .acc_icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
@media screen and (max-width: 767px){
  .faq .inner {
    border-radius: 6px;
  }
  .faq p {
    font-size: 13px;
  }
}
/* guide
--------------------*/
.guide {
}
/* fin
--------------------*/
.fin .btn {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 8%;
  z-index: 10;
  display: flex;
  justify-content: center;
}
.fin li {
  width: calc(366/750*100%);
}


/*====================
footer
====================*/
footer {
  font-size: min(max(12px, calc(0.75rem + ((1vw - 3.75px) * 0.5333))), 14px);
  min-height: 0vw;    
  padding: 0;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
footer ul {
  list-style-type: none;
  margin: 0;
  padding-bottom: 5%;
}
footer ul li {
  background: #595959;
  text-align: center;
  width: 31%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  display: inline-block;
  cursor: pointer;
  transition-duration: 0.5s;
}
footer ul li a {
  font-size: min(max(12px, calc(0.75rem + ((1vw - 3.75px) * 0.5333))), 14px);
  min-height: 0vw;    
  color: #fff;
  display: block;
  text-decoration: none;
  padding: 5% 4% 5% 4%;
}
#copy {
  color: #fff;
  font-size: min(max(10px, calc(0.625rem + ((1vw - 3.75px) * 0.5333))), 12px);
  min-height: 0vw;
  margin: 0 auto;
  padding: 2% 0 8%;
  text-align: center;
}
@media screen and (min-width: 768px){
  footer ul li a:hover {
    background: #7b7b7b;
    transition-duration: 0.5s;
  }
}
/* floating
--------------------*/
#wrapper .floating {
  position: fixed;
  max-width: 640px;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
#wrapper .floating .btn {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
#wrapper .floating .btn li {
  width: calc(366/750*100%);
}
#wrapper .go_top {
  position: relative;
  margin: 0 0 2% auto;
  right: 0;
  left: 0;
  padding-right: 2%;
  width: calc(100/ 750 *100%);
  opacity: .7;
}
@media screen and (min-width: 940px){
  #wrapper .floating {
    margin: 0 auto 1%;
  }
  #wrapper .go_top {
    margin: 0 -24% 0 auto;
  }
}

@media screen and (min-width: 768px){
  #wrapper .go_top {
    width: 60px;
  }
}
@media screen and (max-width: 767px){
  #wrapper .floating {
    max-width: 750px;
  }
}

/*====================
slider
====================*/
.slider_wrap {
  width: 100%;
  margin: 0 auto;
}
.slick-arrow {
  z-index: 2!important;
  height: auto;
}
.slick-arrow:before{
  content:""!important;
  width: 100%!important;
  height: 100%!important;
  position: absolute;
  top: 0;
  left: 0;
}
.slick-next,
.slick-prev {
  width: calc(60/750*100%)!important;
  height: 80px!important;
}
@media screen and (min-width: 768px){
  .slick-next,
  .slick-prev {
    width: calc(60/750*100%)!important;
    height: 160px!important;
  }
}
.slick-next:before,
.slick-arrow:before {
  background-size: contain!important;
  background-repeat: no-repeat;
  background-position: center;
}
.slick-next:before{
  background-image: url("../img/arrow_right.png")!important;
}
.slick-prev:before{
  background-image: url("../img/arrow_left.png")!important;
}
.slick-arrow:before{
  opacity:1!important;
}
.slick-dots {
  bottom: -2%!important;
}
.slick-dots li {
  width: 10px !important;
  height: 10px !important;
  margin: 0 8px!important;
}
.slick-dots li button::before {
  color: #a67daf !important;
}
.slick-dots li.slick-active button::before {
  color: #fff !important;
}
.slick-dots li button::before {
  font-size: 10px !important;
  width: 10px !important;
  height: 10px !important;
  line-height: 10px !important;
  opacity: 1!important;
}
/* model slider
--------------------*/
.model .slider_wrap {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 13.7%;
  z-index: 2;
  line-height: 0;
  font-size: 0;
}
.model .slider_wrap .item {
  width: calc(666/750*100%);
}
.model .slick-next {
  right: 4% !important;
}
.model .slick-prev {
  left: 4% !important;
}

/*====================
animation
====================*/
.fadeUp {
  opacity: 0;
  transition: 2s;
  transform: translateY(60px);
}
.fadeUp.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.active {
	opacity: 1;
	visibility: visible;
}
.fv_fadeIn {
  animation: fadeIn 2s ease 0s 1 normal;
}
.fv_slideUp {
  animation: slideUp 3s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*====================
deco
====================*/
.notes {
  font-size: 80%;
  line-height: 1.5;
  display: inline-block;
}