@charset "UTF-8";
/*
Theme Name: Quince
Author: haruki tsuruta
Author URI: https://harukitsuruta.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*========================================


	*This CSS is written by SASS


========================================*/
/* = MediaQueries
----------------------------------------------- */
/*========================================


	*This CSS  src _reset.scss


========================================*/
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;
  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; }

li {
  list-style: none; }

main {
  display: block; }

/*========================================


	*This CSS  src _color.scss


========================================*/
/* = Color
----------------------------------------------- */
/*========================================


	*This CSS  src _font.scss


========================================*/
html {
  font-size: 62.5%;
  font-family: "游ゴシック", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.6;
  color: #000;
  text-rendering: auto; }

@media screen and (max-width: 599px) {
  html {
    font-size: 2.77778vw; } }

@media all and (-ms-high-contrast: none) {
  html {
    font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif; } }

.mincho {
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'HGS明朝E', 'メイリオ', Meiryo, serif; }

/* = WebFonts
----------------------------------------------- */
.font_en {
  font-family: 'Teko', sans-serif;
  letter-spacing: .09em; }

/* = Weight
----------------------------------------------- */
.normal {
  font-weight: normal !important; }

.bold {
  font-weight: bold !important; }

/* = FontSize px to rem
----------------------------------------------- */
/*========================================


	*This CSS  src _common.scss


========================================*/
/* = Commons
----------------------------------------------- */
a {
  color: #000;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

a:hover {
  color: #000; }

.no_point {
  pointer-events: none !important; }

img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: auto;
  vertical-align: bottom; }

/* = Text align
----------------------------------------------- */
.align_center {
  text-align: center !important; }

.align_left {
  text-align: left !important; }

.align_right {
  text-align: right !important; }

/* = Selected Text
----------------------------------------------- */
::selection {
  background: #b6b1d3; }

/* = Clear fix
----------------------------------------------- */
.clearfix::after {
  content: ' ';
  display: block;
  clear: both; }

/* = Margin Commons
----------------------------------------------- */
.mb0 {
  margin-bottom: 0px !important; }

@media screen and (min-width: 850px) {
  .mb0 {
    margin-bottom: 0% !important; } }

.mb10 {
  margin-bottom: 10px !important; }

@media screen and (min-width: 850px) {
  .mb10 {
    margin-bottom: 1.5% !important; } }

.mb20 {
  margin-bottom: 20px !important; }

@media screen and (min-width: 850px) {
  .mb20 {
    margin-bottom: 3% !important; } }

.mb30 {
  margin-bottom: 30px !important; }

@media screen and (min-width: 850px) {
  .mb30 {
    margin-bottom: 4.5% !important; } }

.mb40 {
  margin-bottom: 40px !important; }

@media screen and (min-width: 850px) {
  .mb40 {
    margin-bottom: 6% !important; } }

.mb50 {
  margin-bottom: 50px !important; }

@media screen and (min-width: 850px) {
  .mb50 {
    margin-bottom: 7.5% !important; } }

.mb60 {
  margin-bottom: 60px !important; }

@media screen and (min-width: 850px) {
  .mb60 {
    margin-bottom: 9% !important; } }

.mb70 {
  margin-bottom: 70px !important; }

@media screen and (min-width: 850px) {
  .mb70 {
    margin-bottom: 10.5% !important; } }

.mb80 {
  margin-bottom: 80px !important; }

@media screen and (min-width: 850px) {
  .mb80 {
    margin-bottom: 12% !important; } }

.mb90 {
  margin-bottom: 90px !important; }

@media screen and (min-width: 850px) {
  .mb90 {
    margin-bottom: 13.5% !important; } }

.mb100 {
  margin-bottom: 100px !important; }

@media screen and (min-width: 850px) {
  .mb100 {
    margin-bottom: 15% !important; } }

.mt0 {
  margin-top: 0px !important; }

@media screen and (min-width: 850px) {
  .mt0 {
    margin-top: 0% !important; } }

.mt10 {
  margin-top: 10px !important; }

@media screen and (min-width: 850px) {
  .mt10 {
    margin-top: 1.5% !important; } }

.mt20 {
  margin-top: 20px !important; }

@media screen and (min-width: 850px) {
  .mt20 {
    margin-top: 3% !important; } }

.mt30 {
  margin-top: 30px !important; }

@media screen and (min-width: 850px) {
  .mt30 {
    margin-top: 4.5% !important; } }

.mt40 {
  margin-top: 40px !important; }

@media screen and (min-width: 850px) {
  .mt40 {
    margin-top: 6% !important; } }

.mt50 {
  margin-top: 50px !important; }

@media screen and (min-width: 850px) {
  .mt50 {
    margin-top: 7.5% !important; } }

.mt60 {
  margin-top: 60px !important; }

@media screen and (min-width: 850px) {
  .mt60 {
    margin-top: 9% !important; } }

.mt70 {
  margin-top: 70px !important; }

@media screen and (min-width: 850px) {
  .mt70 {
    margin-top: 10.5% !important; } }

.mt80 {
  margin-top: 80px !important; }

@media screen and (min-width: 850px) {
  .mt80 {
    margin-top: 12% !important; } }

.mt90 {
  margin-top: 90px !important; }

@media screen and (min-width: 850px) {
  .mt90 {
    margin-top: 13.5% !important; } }

.mt100 {
  margin-top: 100px !important; }

@media screen and (min-width: 850px) {
  .mt100 {
    margin-top: 15% !important; } }

/* = Padding
----------------------------------------------- */
.no_padding {
  padding: 0 !important; }

/* = Form reset
----------------------------------------------- */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input:not([type="checkbox"]), button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  outline: none;
  border: 1px solid #aaa;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  -webkit-box-shadow: 0 0 4px #b6b1d3;
  box-shadow: 0 0 4px #b6b1d3;
  border: 2px solid #b6b1d3; }

/* = Display on off
----------------------------------------------- */
.sp {
  display: block; }

@media screen and (min-width: 600px) {
  .sp {
    display: none; } }

.pc {
  display: none; }

@media screen and (min-width: 600px) {
  .pc {
    display: block; } }

/* = Box shadow
----------------------------------------------- */
.shadow {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

/* = Round
----------------------------------------------- */
.round {
  border-radius: 4px; }

/* = Flex
----------------------------------------------- */
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

@media screen and (max-width: 599px) {
  .row {
    display: block; } }

.row .col2 {
  width: 50%; }

@media screen and (max-width: 599px) {
  .row .col2 {
    width: 100%; } }

.row .col3 {
  width: 33.33333%; }

@media screen and (max-width: 599px) {
  .row .col3 {
    width: 100%; } }

/* = Common inner
----------------------------------------------- */
.common_inner {
  max-width: 1000px;
  margin: 0 auto; }

/*========================================


	*LP独自のCSSはここから


========================================*/
#lcs_pages {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 1px; }

.back_home {
  text-align: center;
  margin: 8% 0; }

@media screen and (min-width: 1280px) {
  .back_home {
    margin: 30px 0; } }

.back_home a {
  display: inline-block;
  background: #1b2e59;
  border: solid 2px #1b2e59;
  color: #FFF;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 1em 1.5em;
  border-radius: 10px;
  -webkit-transition: all .2s linear;
  transition: all .2s linear; }

@media screen and (min-width: 600px) {
  .back_home a {
    font-size: 3.6rem;
    padding: 20px 40px; } }

.back_home a:hover {
  background: #FFF;
  color: #1b2e59; }

.btn_area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 4%;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

@media screen and (min-width: 600px) {
  .btn_area {
    width: 50%;
    margin: 40px auto; } }

@media screen and (min-width: 600px) and (min-width: 1280px) {
  .btn_area {
    width: 1000px; } }

.btn_area .hl {
  width: 100%;
  margin: 0 auto 20%; }

@media screen and (min-width: 600px) {
  .btn_area .hl {
    margin-bottom: 80px; } }

.btn_area .btn {
  width: 24%;
  text-align: center; }

.btn_area .btn img {
  width: 90%; }

.btn_area .btn a {
  background: #FFF;
  border-radius: 10px;
  padding: 15px 5px; }

@media screen and (min-width: 1280px) {
  .btn_area .btn a {
    padding: 10px; } }

#js-sticky {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translateY(100%);
  transform: translateY(100%); }

#js-sticky.headroom--unpinned {
  -webkit-transform: translateY(0);
  transform: translateY(0); }

#js-sticky.headroom--pinned {
  -webkit-transform: translateY(0);
  transform: translateY(0); }

#js-sticky.headroom--pinned.headroom--top {
  -webkit-transform: translateY(100%);
  transform: translateY(100%); }

#js-sticky .btn_area {
  margin: 0 auto;
  padding: 4% 0; }

@media screen and (min-width: 600px) {
  #js-sticky .btn_area {
    padding: 2% 0; } }

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 4%; }

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }