@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/** 1. Set default font family to sans-serif. 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability of focused elements when they are also in an active/hover state. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ========================================================================== Base styles: opinionated defaults ========================================================================== */
html { color: #222; font-size: 1em; line-height: 1.4; }

/* Remove text-shadow in selection highlight: https://twitter.com/miketaylr/status/12228805301  These selection rule sets have to be separate. Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers: https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* ========================================================================== Browser Upgrade Prompt ========================================================================== */
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ========================================================================== Author's custom styles ========================================================================== */
/* ========================================================================== Helper classes ========================================================================== */
/* Hide visually and from screen readers */
.hidden { display: none !important; }

/* Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats  For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ }
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }
/* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print { *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */
  a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  /* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

html, body { font-family: "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Noto Sans Japanese", Arial, Meiryo, sans-serif; letter-spacing: -0.02em; color: #777; }

:focus { outline: none; }

h1 { font-size: 1.275rem; color: #454752; }

p { width: 85%; margin: 0 auto 50px; }

.btn { border-radius: 0; height: 40px; line-height: 28px; letter-spacing: 0.08em; padding: 6px 28px; }
@media screen and (min-width: 769px) { .btn { height: 70px; line-height: 58px; padding: 6px 52px; } }
.btn:focus, .btn.active:focus, .btn:active:focus { outline: none; }
.btn.active, .btn:active { box-shadow: none; }

form > .form-group:last-child { margin-bottom: 0; }

.form-control { border-radius: 0; }

@media screen and (max-width: 384px) { .onlyMid { display: none; } }
@media screen and (max-width: 768px) { .onlyPC { display: none; } }
@media screen and (min-width: 769px) { .onlySP { display: none; }
  .onlyMid:not(.onlyPC) { display: none; } }
.header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; height: 20vw; max-height: 150px; margin: 0 9% 0 4%; background: #fff; }
.header .header--logo { display: block; width: 25.5vw; max-width: 190px; height: 20vw; max-height: 69px; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; background: url("/static/images/logo.svg") no-repeat center center; background-size: contain; }
.header .header--nav a { font-size: 0.9rem; font-weight: 500; color: #000; text-decoration: underline; }
@media screen and (min-width: 769px) { .header .header--nav a { font-size: 21.33px; } }
.header.subpage-header { position: relative; width: 100%; height: 16vw; margin: 0; padding: 4.66vw 0; }
@media screen and (min-width: 769px) { .header.subpage-header { height: 150px; padding: 59px 0; } }
.header.subpage-header .header-left-nav { position: absolute; }
.header.subpage-header .header-left-nav a { display: inline-block; padding-left: 10.6px; height: 7.5vw; line-height: 7.5vw; color: #777; }
@media screen and (min-width: 769px) { .header.subpage-header .header-left-nav a { font-size: 1.5rem; height: 24px; line-height: 24px; } }
.header.subpage-header .header-left-nav a:before { content: "<"; display: inline-block; width: 18px; height: 10.6px; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; background: url("/static/images/arrow-link.svg") no-repeat right center; background-size: 10.6px 10.6px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
@media screen and (min-width: 769px) { .header.subpage-header .header-left-nav a:before { display: inline-block; float: left; width: 37px; height: 24px; background-size: 24px 24px; } }
.header.subpage-header h1 { position: absolute; display: block; margin: 0; height: 7.5vw; line-height: 7.5vw; width: 100%; text-align: center; pointer-events: none; }
@media screen and (min-width: 769px) { .header.subpage-header h1 { font-size: 2rem; height: 2rem; line-height: 2rem; } }

.sub nav { border-top: solid 1px #c4c4c4; padding: 20px 0; }
@media screen and (min-width: 769px) { .sub nav { padding: 30px 0; } }
.sub nav ul { width: 85%; margin: 0 auto; padding: 0; list-style: none; }
.sub nav ul li a { display: block; width: 100%; height: 24px; font-size: 0.833rem; line-height: 24px; color: #777; background: url("/static/images/arrow-link.svg") no-repeat right center; background-size: 10.6px 10.6px; }
@media screen and (min-width: 769px) { .sub nav ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 400px; margin: 0 auto; padding-right: 36px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  .sub nav ul li { margin-bottom: 0; }
  .sub nav ul li a { height: 40px; font-size: 1rem; line-height: 40px; text-align: right; padding-right: 35px; background-size: 11px 21px; } }

.footer { position: relative; bottom: auto; padding-top: 35px; font-size: 0.66rem; text-align: center; color: #fff; background: #3d3f45; }
@media screen and (min-width: 769px) { .footer { padding-top: 50px; } }
.footer .footer--main p { margin-bottom: 35px; }
.footer .logo { display: block; width: 32.4vw; max-width: 230px; height: 11.7vw; max-height: 84px; margin: 0 auto 35px; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; background: url("/static/images/logo-white.svg") no-repeat center center; background-size: contain; }
.footer .footer--author { font-size: 0.833rem; }
@media screen and (min-width: 769px) { .footer .footer--author { font-size: 1.166rem; } }
.footer a { color: #a7adb9; font-weight: 200; text-decoration: underline; }
.footer .footer--notice { width: 100%; padding: 20px 7.5% 0; color: #a7adb9; border-top: solid 1px #626262; }
.footer .footer--notice .footer--notice_title { display: inline-block; margin-bottom: 10px; color: #fff; }
.footer .footer--copyright { margin-bottom: 0; padding-bottom: 13.3px; font-weight: 200; color: #6c7078; }
@media screen and (min-width: 769px) { .footer .footer--main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1024px; margin: 0 auto 60px; padding: 0 100px; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-size: 1.166rem; }
  .footer .footer--main p { width: auto; text-align: left; margin: 14px 0; }
  .footer .footer--main p.logo { width: 230px; height: 84px; margin-top: 0; margin-right: 85px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }
  .footer .footer--notice { width: 100%; max-width: 1024px; margin: 0 auto 80px; padding: 20px 0 0; font-size: 1rem; }
  .footer .footer--copyright { font-size: 0.833rem; } }

@media screen and (max-width: 768px) { .footer.hide { display: none; } }
/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; width: 30px; height: 58px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 105px; padding: 0; border: none; outline: none; z-index: 1; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 0.75; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0; }
.slick-prev:before, .slick-next:before { display: block; width: 30px; height: 58px; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; opacity: 1; background: url("/static/images/arrow-slick.svg") no-repeat left center; background-size: 30px 58px; }

.slick-prev { left: 50px; }
.slick-prev:before { content: "←"; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center; transform-origin: center; }

.slick-next { right: 50px; }
.slick-next:before { content: "→"; }

/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; }
@media screen and (min-width: 769px) { .slick-dots { bottom: -80px; } }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 0.75; }
.slick-dots li button:before { position: absolute; top: 7px; left: 7px; content: "•"; width: 6px; height: 6px; border-radius: 3px; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; background: #b2b2b2; }
.slick-dots li.slick-active button:before { background: #007bff; }

body.page-index .main { position: relative; height: 142.6vw; width: 100%; text-align: center; background: #e8eaef url("/static/images/bg-index.svg") no-repeat center center; background-size: 109vw; }
@media screen and (min-width: 769px) { body.page-index .main { height: 875px; background-size: 1670px 1670px; } }
body.page-index .main .main--head { position: absolute; left: 0; right: 0; top: 10.2vw; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; width: 34.26vw; max-width: 219px; height: 10.74vw; max-height: 68px; margin: 0 auto 6.67vw; background: url("/static/images/title.svg") no-repeat center center; background-size: contain; }
@media screen and (min-width: 769px) { body.page-index .main .main--head { top: 60px; } }
body.page-index .main .main--lead { position: absolute; left: 0; right: 0; top: 26.85vw; margin: 0 auto; font-size: 0.725rem; line-height: 1.17rem; }
@media screen and (min-width: 769px) { body.page-index .main .main--lead { top: 165px; font-size: 1.166rem; line-height: 1.566rem; } }
body.page-index .main .main--lead .sup { font-size: 0.625rem; color: #999; }
@media screen and (min-width: 769px) { body.page-index .main .main--lead .sup { font-size: 0.916rem; } }
body.page-index .main .main-form-image label { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: block; width: 48.5vw; max-width: 340px; height: 48.5vw; max-height: 340px; color: #707486; border-radius: 50%; background: #fff url("/static/images/camera.svg") no-repeat center 44%; background-size: 62.3px 47px; }
@media screen and (min-width: 769px) { body.page-index .main .main-form-image label { background-size: 111px 84px; background-position-y: 118px; } }
body.page-index .main .main-form-image label input[type=file] { display: none; }
body.page-index .main .main--preview { width: 48.5vw; max-width: 340px; height: 48.5vw; max-height: 340px; border-radius: 50%; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }
body.page-index .main .main--preview img { display: none; position: relative; top: 0; left: 0; width: 48.5vw; max-width: 340px; height: 48.5vw; max-height: 340px; border-radius: 50%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; }
body.page-index .main .main--preview.active img { display: block; }
body.page-index .main .main--preview span { display: block; position: relative; padding-top: 23px; top: 50%; font-size: 0.725rem; font-weight: normal; color: #707486; }
@media screen and (min-width: 769px) { body.page-index .main .main--preview span { padding-top: 45px; font-size: 1.287rem; } }
body.page-index .main .main--preview.active span { visibility: hidden; }
body.page-index .main .main-btn-selectfile { cursor: pointer; }
body.page-index .main .main-btn-container { position: absolute; left: 0; right: 0; bottom: 11.1vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 48.5vw; max-width: 340px; margin: 0 auto; }
@media screen and (min-width: 769px) { body.page-index .main .main-btn-container { bottom: 60px; } }
body.page-index .main .main-btn-container .main-btn-selectfile, body.page-index .main .main-btn-container .arrow, body.page-index .main .main-btn-container .main-btn-submit { width: 14.6vw; max-width: 100px; font-size: 0.725rem; white-space: nowrap; background-repeat: no-repeat; background-position: center top; background-size: contain; background-color: transparent; color: #707486; }
@media screen and (min-width: 769px) { body.page-index .main .main-btn-container .main-btn-selectfile, body.page-index .main .main-btn-container .arrow, body.page-index .main .main-btn-container .main-btn-submit { font-size: 1.33rem; } }
body.page-index .main .main-btn-container .main-btn-selectfile { padding-top: 16.3vw; background-image: url("/static/images/btn-camera.png"); }
@media screen and (min-width: 769px) { body.page-index .main .main-btn-container .main-btn-selectfile { padding-top: 115px; } }
body.page-index .main .main-btn-container .arrow { height: 14.6vw; max-height: 100px; overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; background-position-y: center; background-image: url("/static/images/arrow.svg"); background-size: 27px 23px; }
@media screen and (min-width: 769px) { body.page-index .main .main-btn-container .arrow { background-size: 51px 44px; } }
body.page-index .main .main-btn-container .main-btn-submit { padding-top: 16.3vw; background-image: url("/static/images/btn-send.png"); border: none; }
@media screen and (min-width: 769px) { body.page-index .main .main-btn-container .main-btn-submit { padding-top: 115px; } }
body.page-index .main .main-btn-container .main-btn-submit:disabled { opacity: 0.25; }
body.page-index .sub h2 { font-size: 0.916rem; text-align: center; line-height: 58px; letter-spacing: 0.08em; color: #707486; background: url("/static/images/bg-index-h2.svg") no-repeat center center; background-size: 58px 58px; }
@media screen and (min-width: 769px) { body.page-index .sub h2 { margin: 35px auto 50px; line-height: 120px; font-size: 1.899rem; font-weight: normal; background-size: 119px 119px; } }
body.page-index .sub ol { list-style: none; counter-reset: stepcount; width: 85%; margin: 0 auto; padding: 0; }
@media screen and (min-width: 769px) { body.page-index .sub ol { padding: 0 0 95px; } }
body.page-index .sub ol li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; font-size: 0.725rem; }
@media screen and (min-width: 769px) { body.page-index .sub ol li { margin-bottom: 40px; font-size: 1.166rem; } }
body.page-index .sub ol li:before { counter-increment: stepcount; content: counter(stepcount); display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 24px; height: 24px; margin-right: 16px; color: #707486; border: solid 1px #707486; border-radius: 50%; line-height: 22px; text-align: center; }
@media screen and (min-width: 769px) { body.page-index .sub ol li:before { width: 44px; height: 44px; line-height: 40px; border-width: 2px; } }
body.page-index .sub ol li span { display: block; }
body.page-index .sub nav ul li a { height: 38px; line-height: 38px; }
body.page-index.page-en .main .main--head { max-height: 62px; background-image: url("/static/images/title-en.svg"); }

body.page-flower .main { width: 100%; }
body.page-flower .main .header--result { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 11px 4.7vw; background: #f6f7f9; }
@media screen and (min-width: 769px) { body.page-flower .main .header--result { padding: 25px calc(50% - 375.5px) 18px; } }
body.page-flower .main .header--result .result--image { width: 37vw; max-width: 360px; height: 37vw; max-height: 360px; margin-right: 30px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }
body.page-flower .main .header--result .result--image img { width: 37vw; max-width: 360px; height: 37vw; max-height: 360px; border-radius: 50%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; }
body.page-flower .main .header--result ul { width: 48.6vw; max-width: 400px; list-style: none; padding: 0; margin-bottom: 0; }
body.page-flower .main .header--result ul li { display: block; width: 100%; font-size: 0.66rem; line-height: 1rem; }
@media screen and (min-width: 769px) { body.page-flower .main .header--result ul li { font-size: 1.083rem; line-height: 26px; } }
body.page-flower .main .header--result ul li .result--flower_name { color: #454752; }
body.page-flower .main .header--result ul li .result--value { float: right; font-weight: 200; }
body.page-flower .main .header--result ul li .result--value:after { content: "%"; }
body.page-flower .main .header--result ul li:nth-child(1) { font-size: 0.833rem; line-height: 1.6rem; }
@media screen and (min-width: 769px) { body.page-flower .main .header--result ul li:nth-child(1) { margin-bottom: 10px; font-size: 1.5rem; } }
body.page-flower .main .header--result ul li:nth-child(1) .result--flower_name { font-weight: bold; }
body.page-flower .main .header--result ul li:nth-child(1) .result--value { font-weight: normal; color: #6f73ad; }
body.page-flower .main .header--result ul li:nth-child(2) .result--value { color: #4f7199; }
body.page-flower .main .header--result ul li:nth-child(3) .result--value { color: #708490; }
body.page-flower .main .header--result ul li:nth-child(4) .result--value { color: #a0abae; }
body.page-flower .main .header--result ul li:nth-child(5) .result--value { color: #bbbbbb; }
body.page-flower .main .header--result ul li:nth-child(6) .result--value { color: #d4d4d4; }
body.page-flower .main .header--result #chartAll { width: 14.4vw; max-width: 90px; height: 14.4vw; max-height: 90px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }
body.page-flower .main h2 { margin: 34px 0 0; font-size: 1rem; text-align: center; color: #454752; }
@media screen and (min-width: 769px) { body.page-flower .main h2 { margin: 60px 0 50px; font-size: 1.7rem; } }
body.page-flower .main .main--result { margin: 0 auto; padding: 30px 16.5vw 25px; text-align: center; border-bottom: solid 1px #c4c4c4; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result { width: 616px; margin-top: 55px; padding: 0 101px 46px; } }
body.page-flower .main .main--result .result--image { width: 67vw; max-width: 414px; height: 67vw; max-height: 414px; margin: 0 auto; background: url("/static/images/bg-flower-image.png") no-repeat center center; background-size: cover; }
body.page-flower .main .main--result .result--image img { width: 67vw; max-width: 414px; height: 67vw; max-height: 414px; border-radius: 50%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; }
body.page-flower .main .main--result .result--graph { position: relative; width: 14.4vw; height: 14.4vw; margin: -14.32vw 0 0 auto; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--graph { width: 90px; height: 90px; margin: -86px auto 0 334px; } }
body.page-flower .main .main--result .result--graph:before { position: absolute; content: " "; display: block; margin: -2px 0 0 -2px; width: calc(14.4vw + 4px); height: calc(14.4vw + 4px); background: rgba(0, 0, 0, 0.06); border-radius: 50%; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--graph:before { width: 94px; height: 94px; } }
body.page-flower .main .main--result .result--percent { position: relative; width: 14.4vw; margin: -14.4vw 0 0 auto; color: #000; font-size: 5.55vw; line-height: 14.4vw; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--percent { width: 94px; margin: -91px auto 0 330px; font-size: 2.133rem; line-height: 94px; } }
body.page-flower .main .main--result .result--percent:after { content: "%"; margin-right: -2.7vw; font-size: 3.21vw; font-weight: 200; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--percent:after { font-size: 1.233rem; margin-right: -16px; } }
body.page-flower .main .main--result .result--detail { margin: 18px auto; font-size: 0.725rem; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--detail { width: 100%; font-size: 1.166rem; margin: 30px 0 30px; } }
body.page-flower .main .main--result .result--detail .result--flower_name { display: block; font-size: 1.11rem; line-height: 2.00rem; color: #454752; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--detail .result--flower_name { margin: 15px 0 12px; font-size: 2rem; } }
body.page-flower .main .main--result .result--link { margin-bottom: 0; font-size: 0.725rem; font-weight: 200; letter-spacing: 0; }
@media screen and (min-width: 769px) { body.page-flower .main .main--result .result--link { width: 100%; font-size: 1.166rem; } }
body.page-flower .main .main--result .result--link a { color: #007bff; }
body.page-flower .main .main--result:last-child { border-bottom: none; }
body.page-flower .main .sub { text-align: center; margin-top: -1px; }
body.page-flower .main .sub nav { border-top: none; padding: 0; }
body.page-flower .main .sub nav .btn--top { width: 100%; border-top: solid 1px #c4c4c4; border-bottom: solid 1px #c4c4c4; background: #f6f7f9; padding: 18.3px 0; }
@media screen and (min-width: 769px) { body.page-flower .main .sub nav .btn--top { padding: 40px 0 37px; } }
body.page-flower .main .sub nav .btn--top a { min-width: 28px; padding: 0; background: url("/static/images/camera.svg") no-repeat center top; background-size: 28px 21.3px; border: none; }
@media screen and (min-width: 769px) { body.page-flower .main .sub nav .btn--top a { height: 100px; min-width: 69px; background-size: 69px 52px; } }
body.page-flower .main .sub nav .btn--top a span { display: block; padding-top: 22px; font-size: 0.725rem; font-weight: normal; letter-spacing: -0.02em; color: #707486; }
@media screen and (min-width: 769px) { body.page-flower .main .sub nav .btn--top a span { padding-top: 53px; font-size: 1.333rem; } }
body.page-flower .main .sub nav .btn--sub { padding: 6px 0; }
@media screen and (min-width: 769px) { body.page-flower .main .sub nav .btn--sub { padding: 18px 0; } }
body.page-flower .main .sub nav .btn--sub a { text-decoration: underline; letter-spacing: 0; color: #007bff; }
@media screen and (min-width: 769px) { body.page-flower .main .sub nav .btn--sub a { font-size: 1.166rem; } }
body.page-flower .intro { display: none; position: fixed; top: 0; width: 100%; height: 100%; text-align: center; background: #e8eaef url("/static/images/bg-index.svg") no-repeat center center; background-size: 145vw; }
body.page-flower .intro .intro--slick { height: 43%; top: 50%; margin-top: -60px; }
@media screen and (min-width: 769px) { body.page-flower .intro .intro--slick { margin-top: -135px; } }
body.page-flower .intro .intro--slick .slick-dots { padding: 0; list-style: none; }
@media screen and (max-height: 769px) and (orientation: landscape) { body.page-flower .intro .intro--slick .slick-dots { position: fixed; bottom: 2vh; } }
body.page-flower .intro .intro--slick .slick-dots li { display: inline-block; }
body.page-flower .intro .intro--step h2 { font-size: 1.39rem; font-weight: normal; letter-spacing: 0.08em; color: #707486; }
@media screen and (min-width: 769px) { body.page-flower .intro .intro--step h2 { font-size: 3.33rem; margin-bottom: 40px; } }
body.page-flower .intro .intro--step p { width: 60vw; font-size: 0.833rem; }
@media screen and (min-width: 769px) { body.page-flower .intro .intro--step p { font-size: 2rem; } }
body.page-flower .intro .intro--label { position: absolute; left: 0; right: 0; top: 22%; font-size: 1.66rem; font-weight: normal; opacity: 0.3; }
@media screen and (max-height: 769px) and (orientation: landscape) { body.page-flower .intro .intro--label { top: 14%; } }
@media screen and (min-width: 769px) { body.page-flower .intro .intro--label { font-size: 2rem; } }
body.page-flower .intro .intro--label.intro-label-complete { color: #707486; opacity: 1; }
body.page-flower .intro .intro-btn-skip { position: relative; top: 50%; margin-top: -23%; }
@media screen and (max-height: 769px) and (orientation: landscape) { body.page-flower .intro .intro-btn-skip { margin-top: -5.5%; } }
@media screen and (min-width: 769px) { body.page-flower .intro .intro-btn-skip { margin-top: -50px; } }
body.page-flower .intro .intro-btn-skip .btn { color: #007bff; }
@media screen and (min-width: 769px) { body.page-flower .intro .intro-btn-skip .btn { font-size: 1.5rem; } }
body.page-flower .intro .intro-btn-skip .intro-btn-complete { background: #8b8fa7; color: #fff; }
body.page-flower.show_intro .main { position: fixed; }
body.page-flower.show_intro .intro { display: block; }

body.page-feedback, body.page-feedback-result { background: #f6f7f9; }
body.page-feedback .main, body.page-feedback-result .main { min-height: calc(100vh - 16vw); text-align: center; }
body.page-feedback .main h2, body.page-feedback-result .main h2 { margin-top: 0; font-size: 1rem; color: #454752; }
@media screen and (min-width: 769px) { body.page-feedback .main, body.page-feedback-result .main { height: inherit; } }

body.page-feedback .main { padding: 14% 0; }
@media screen and (min-width: 769px) { body.page-feedback .main { padding-top: 70px; padding-bottom: 135px; } }
body.page-feedback .main h2 { margin-bottom: 6vw; line-height: 1.275rem; }
@media screen and (min-width: 769px) { body.page-feedback .main h2 { margin-bottom: 0; font-size: 1.5rem; line-height: 2.333rem; } }
body.page-feedback .main .result--image { width: 32.5vw; max-width: 280px; height: 32.5vw; max-height: 280px; margin: 6vw auto; }
@media screen and (min-width: 769px) { body.page-feedback .main .result--image { margin: 30px auto 20px; } }
body.page-feedback .main .result--image img { width: 32.5vw; max-width: 280px; height: 32.5vw; max-height: 280px; border-radius: 50%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; }
body.page-feedback .main form { width: 80%; margin: 0 auto; text-align: left; }
body.page-feedback .main form label { display: block; margin: 0 auto; max-width: 825px; font-weight: normal; color: #454752; }
@media screen and (min-width: 769px) { body.page-feedback .main form label { font-size: 1.166rem; } }
body.page-feedback .main form textarea.form-control { max-width: 825px; font-size: 1rem; margin: 0 auto 6%; height: 8.5rem; }
body.page-feedback .main form .btn { display: block; margin: 0 auto; padding: 6px 45px; background: #8b8fa7; border: none; }
@media screen and (min-width: 769px) { body.page-feedback .main form .btn { font-size: 1.5rem; padding: 6px 76px; } }

body.page-feedback-result .main { padding: 30vh 0 0; }
@media screen and (min-width: 769px) { body.page-feedback-result .main { padding: 345px 0 135px; } }
body.page-feedback-result .main h2 { padding-top: 1.275rem; font-size: 1.275rem; }
@media screen and (min-width: 769px) { body.page-feedback-result .main h2 { font-size: 2rem; } }
body.page-feedback-result .main p { width: 100%; margin: 0; font-size: 1rem; text-align: center; color: #454752; }
@media screen and (min-width: 769px) { body.page-feedback-result .main p { font-size: 1.5rem; } }
body.page-feedback-result .main > .sub { margin-top: 22vh; }
@media screen and (min-width: 769px) { body.page-feedback-result .main > .sub { margin-top: 297px; } }
body.page-feedback-result .main > .sub nav { border: none; text-align: center; }
@media screen and (min-width: 769px) { body.page-feedback-result .main > .sub nav { padding: 0; } }
body.page-feedback-result .main > .sub nav .btn--top { background: #8b8fa7; color: #fff; }
@media screen and (min-width: 769px) { body.page-feedback-result .main > .sub nav .btn--top { font-size: 1.5rem; } }

body.page-about .main, body.page-technology .main { padding: 10vw 0 0; border-top: solid 1px #c4c4c4; }
@media screen and (min-width: 769px) { body.page-about .main, body.page-technology .main { padding-top: 60px; } }
body.page-about .main .main--head, body.page-technology .main .main--head { overflow: hidden; font-size: 0; text-indent: 100%; white-space: nowrap; width: 34.26vw; max-width: 219px; height: 10.74vw; max-height: 68px; margin: 0 auto 9.5vw; background: url("/static/images/title.svg") no-repeat center center; background-size: contain; }
@media screen and (min-width: 769px) { body.page-about .main .main--head, body.page-technology .main .main--head { margin-bottom: 70px; } }
body.page-about .main .main--content, body.page-technology .main .main--content { width: 85%; max-width: 760px; margin: 0 auto; }
body.page-about .main .main--content h2, body.page-technology .main .main--content h2 { margin-bottom: 9.5vw; font-size: 1rem; font-weight: bold; line-height: 2rem; color: #444444; border-bottom: solid 1px #777; }
@media screen and (min-width: 769px) { body.page-about .main .main--content h2, body.page-technology .main .main--content h2 { margin-bottom: 40px; font-size: 2rem; line-height: 60px; } }
body.page-about .main .main--content section.sub h3, body.page-technology .main .main--content section.sub h3 { margin-bottom: 4vw; font-size: 0.833rem; font-weight: bold; color: #444444; }
@media screen and (min-width: 769px) { body.page-about .main .main--content section.sub h3, body.page-technology .main .main--content section.sub h3 { font-size: 1.333rem; line-height: 40px; margin-bottom: 15px; } }
body.page-about .main .main--content section.sub p, body.page-technology .main .main--content section.sub p { width: 100%; font-size: 0.66rem; line-height: 1.125rem; margin-bottom: 10.5vw; }
@media screen and (min-width: 769px) { body.page-about .main .main--content section.sub p, body.page-technology .main .main--content section.sub p { margin-bottom: 50px; font-size: 1.166rem; line-height: 1.975rem; } }
body.page-about .main .main--content section.sub p a, body.page-technology .main .main--content section.sub p a { text-decoration: underline; color: #007bff; }
body.page-about > .sub nav, body.page-technology > .sub nav { border: none; text-align: center; padding-top: 0; margin-bottom: 11vw; }
@media screen and (min-width: 769px) { body.page-about > .sub nav, body.page-technology > .sub nav { padding-bottom: 0; margin: 90px 0 100px; } }
body.page-about > .sub nav .btn--top, body.page-technology > .sub nav .btn--top { background: #8b8fa7; color: #fff; }
@media screen and (min-width: 769px) { body.page-about > .sub nav .btn--top, body.page-technology > .sub nav .btn--top { font-size: 1.5rem; } }
body.page-about.page-en .main .main--head, body.page-technology.page-en .main .main--head { background-image: url("/static/images/title-en.svg"); }
body.page-about.page-en .main .main--content h2, body.page-technology.page-en .main .main--content h2 { font-weight: 500; }
body.page-about.page-en .main .main--content section.sub h3, body.page-technology.page-en .main .main--content section.sub h3 { font-weight: 500; }

body.page-feedback .faq { max-width: 825px; font-size: 1rem; margin: 0 auto 6%; height: 8.5rem; }
body.page-feedback .faq h2 { margin-top: 2em;margin-bottom:1em}
body.page-feedback .faq dl { text-align: left;}
body.page-feedback .faq dt{
    margin-left: 5%;
    font-size: 1.2em;
    font-weight: bold;
}
body.page-feedback .faq dd {
    margin-left: 10%;
    margin-right: 15%;
    padding-bottom: 1rem;
    font-size: 1.0rem;
    font-weight: normal;
}
@media screen and (min-width: 768px) {
body.page-feedback .faq dt{
    margin-left: 20%;
}
body.page-feedback .faq dd {
    margin-left: 25%;
    margin-right: 15%;
}
}