/*
* The default style sheet used to render HTML.
*
* Copyright (C) 2000 Lars Knoll (knoll@kde.org)
* Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Library General Public
* License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Library General Public License for more details.
*
* You should have received a copy of the GNU Library General Public License
* along with this library; see the file COPYING.LIB. If not, write to
* the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301, USA.
*
*/
@namespace "http://www.w3.org/1999/xhtml";
html {
display: block;
}
/* children of the element all have display:none */
head {
display: none;
}
meta {
display: none;
}
title {
display: none;
}
link {
display: none;
}
style {
display: none;
}
script {
display: none;
}
/* generic block-level elements */
body {
display: block;
margin: 8px;
}
body:-webkit-full-page-media {
background-color: rgb(0, 0, 0);
}
p {
display: block;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1__qem;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
div {
display: block;
}
layer {
display: block;
}
article,
aside,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
marquee {
display: inline-block;
}
address {
display: block;
}
blockquote {
display: block;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
figcaption {
display: block;
}
figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
center {
display: block;
/* special centering to be able to emulate the html4/netscape behaviour */
text-align: -webkit-center;
}
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
map {
display: inline;
}
video {
object-fit: contain;
}
/* heading elements */
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67__qem;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
}
:-webkit-any(article, aside, nav, section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83__qem;
-webkit-margin-after: 0.83em;
}
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
h1 {
font-size: 1.17em;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1em;
}
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
h1 {
font-size: 1em;
-webkit-margin-before: 1.33__qem;
-webkit-margin-after: 1.33em;
}
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
h1 {
font-size: 0.83em;
-webkit-margin-before: 1.67__qem;
-webkit-margin-after: 1.67em;
}
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
:-webkit-any(article, aside, nav, section)
h1 {
font-size: 0.67em;
-webkit-margin-before: 2.33__qem;
-webkit-margin-after: 2.33em;
}
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83__qem;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
}
h4 {
display: block;
-webkit-margin-before: 1.33__qem;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
}
h5 {
display: block;
font-size: 0.83em;
-webkit-margin-before: 1.67__qem;
-webkit-margin-after: 1.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
}
h6 {
display: block;
font-size: 0.67em;
-webkit-margin-before: 2.33__qem;
-webkit-margin-after: 2.33em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
}
/* tables */
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
table > tr {
vertical-align: middle;
}
col {
display: table-column;
}
colgroup {
display: table-column-group;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td,
th {
display: table-cell;
vertical-align: inherit;
}
th {
font-weight: bold;
}
caption {
display: table-caption;
text-align: -webkit-center;
}
/* lists */
ul,
menu,
dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 40px;
}
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 40px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
ul ul,
ol ul {
list-style-type: circle;
}
ol ol ul,
ol ul ul,
ul ol ul,
ul ul ul {
list-style-type: square;
}
dd {
display: block;
-webkit-margin-start: 40px;
}
dl {
display: block;
-webkit-margin-before: 1__qem;
-webkit-margin-after: 1em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
dt {
display: block;
}
ol ul,
ul ol,
ul ul,
ol ol {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
/* form elements */
form {
display: block;
margin-top: 0__qem;
}
label {
cursor: default;
}
legend {
display: block;
-webkit-padding-start: 2px;
-webkit-padding-end: 2px;
border: none;
}
fieldset {
display: block;
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;
border: 2px groove ThreeDFace;
min-width: -webkit-min-content;
}
button {
-webkit-appearance: button;
}
/* Form controls don't go vertical. */
input,
textarea,
keygen,
select,
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb !important;
}
input,
textarea,
keygen,
select,
button {
margin: 0__qem;
font: -webkit-small-control;
text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-shadow: none;
display: inline-block;
text-align: start;
}
input[type="hidden" i] {
display: none;
}
input {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
input[type="search" i] {
-webkit-appearance: searchfield;
box-sizing: border-box;
}
input::-webkit-textfield-decoration-container {
display: flex;
align-items: center;
-webkit-user-modify: read-only !important;
content: none !important;
}
input[type="search" i]::-webkit-textfield-decoration-container {
direction: ltr;
}
input::-webkit-clear-button {
-webkit-appearance: searchfield-cancel-button;
display: inline-block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-margin-start: 2px;
opacity: 0;
pointer-events: none;
}
input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-clear-button {
opacity: 1;
pointer-events: auto;
}
input[type="search" i]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
display: block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-margin-start: 1px;
opacity: 0;
pointer-events: none;
}
input[type="search" i]:enabled:read-write:-webkit-any(
:focus,
:hover
)::-webkit-search-cancel-button {
opacity: 1;
pointer-events: auto;
}
input[type="search" i]::-webkit-search-decoration {
-webkit-appearance: searchfield-decoration;
display: block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-align-self: flex-start;
margin: auto 0;
}
input[type="search" i]::-webkit-search-results-decoration {
-webkit-appearance: searchfield-results-decoration;
display: block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-align-self: flex-start;
margin: auto 0;
}
input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
display: inline-block;
cursor: default;
flex: none;
align-self: stretch;
-webkit-user-select: none;
-webkit-user-modify: read-only !important;
opacity: 0;
pointer-events: none;
}
input:enabled:read-write:-webkit-any(
:focus,
:hover
)::-webkit-inner-spin-button {
opacity: 1;
pointer-events: auto;
}
keygen,
select {
border-radius: 5px;
}
keygen::-webkit-keygen-select {
margin: 0px;
}
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
::-webkit-input-placeholder {
-webkit-text-security: none;
color: darkGray;
pointer-events: none !important;
}
input::-webkit-input-placeholder {
white-space: pre;
word-wrap: normal;
overflow: hidden;
-webkit-user-modify: read-only !important;
}
input[type="password" i] {
-webkit-text-security: disc !important;
}
input[type="hidden" i],
input[type="image" i],
input[type="file" i] {
-webkit-appearance: initial;
padding: initial;
background-color: initial;
border: initial;
}
input[type="file" i] {
align-items: baseline;
color: inherit;
text-align: start !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #faffbd !important;
background-image: none !important;
color: #000000 !important;
}
input[type="radio" i],
input[type="checkbox" i] {
margin: 3px 0.5ex;
padding: initial;
background-color: initial;
border: initial;
}
input[type="button" i],
input[type="submit" i],
input[type="reset" i] {
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
}
input[type="file" i]::-webkit-file-upload-button {
-webkit-appearance: push-button;
-webkit-user-modify: read-only !important;
white-space: nowrap;
margin: 0;
font-size: inherit;
}
input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button,
button {
align-items: flex-start;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box;
}
input[type="range" i] {
-webkit-appearance: slider-horizontal;
padding: initial;
border: initial;
margin: 2px;
color: #909090;
}
input[type="range" i]::-webkit-slider-container,
input[type="range" i]::-webkit-media-slider-container {
flex: 1;
min-width: 0;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
display: flex;
}
input[type="range" i]::-webkit-slider-runnable-track {
flex: 1;
min-width: 0;
-webkit-align-self: center;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
display: block;
}
input[type="range" i]::-webkit-slider-thumb,
input[type="range" i]::-webkit-media-slider-thumb {
-webkit-appearance: sliderthumb-horizontal;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
display: block;
}
input[type="button" i]:disabled,
input[type="submit" i]:disabled,
input[type="reset" i]:disabled,
input[type="file" i]:disabled::-webkit-file-upload-button,
button:disabled,
select:disabled,
keygen:disabled,
optgroup:disabled,
option:disabled,
select[disabled] > option {
color: GrayText;
}
input[type="button" i]:active,
input[type="submit" i]:active,
input[type="reset" i]:active,
input[type="file" i]:active::-webkit-file-upload-button,
button:active {
border-style: inset;
}
input[type="button" i]:active:disabled,
input[type="submit" i]:active:disabled,
input[type="reset" i]:active:disabled,
input[type="file" i]:active:disabled::-webkit-file-upload-button,
button:active:disabled {
border-style: outset;
}
option:-internal-spatial-navigation-focus {
outline: black dashed 1px;
outline-offset: -1px;
}
datalist {
display: none;
}
area {
display: inline;
cursor: pointer;
}
param {
display: none;
}
input[type="checkbox" i] {
-webkit-appearance: checkbox;
box-sizing: border-box;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
input[type="color" i] {
-webkit-appearance: square-button;
width: 44px;
height: 23px;
background-color: ButtonFace;
/* Same as native_theme_base. */
border: 1px #a9a9a9 solid;
padding: 1px 2px;
}
input[type="color" i]::-webkit-color-swatch-wrapper {
display: flex;
padding: 4px 2px;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
width: 100%;
height: 100%;
}
input[type="color" i]::-webkit-color-swatch {
background-color: #000000;
border: 1px solid #777777;
flex: 1;
min-width: 0;
-webkit-user-modify: read-only !important;
}
input[type="color" i][list] {
-webkit-appearance: menulist;
width: 88px;
height: 23px;
}
input[type="color" i][list]::-webkit-color-swatch-wrapper {
padding-left: 8px;
padding-right: 24px;
}
input[type="color" i][list]::-webkit-color-swatch {
border-color: #000000;
}
input::-webkit-calendar-picker-indicator {
display: inline-block;
width: 0.66em;
height: 0.66em;
padding: 0.17em 0.34em;
-webkit-user-modify: read-only !important;
opacity: 0;
pointer-events: none;
}
input::-webkit-calendar-picker-indicator:hover {
background-color: #eee;
}
input:enabled:read-write:-webkit-any(
:focus,
:hover
)::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator:focus {
opacity: 1;
pointer-events: auto;
}
input[type="date" i]:disabled::-webkit-clear-button,
input[type="date" i]:disabled::-webkit-inner-spin-button,
input[type="datetime-local" i]:disabled::-webkit-clear-button,
input[type="datetime-local" i]:disabled::-webkit-inner-spin-button,
input[type="month" i]:disabled::-webkit-clear-button,
input[type="month" i]:disabled::-webkit-inner-spin-button,
input[type="week" i]:disabled::-webkit-clear-button,
input[type="week" i]:disabled::-webkit-inner-spin-button,
input:disabled::-webkit-calendar-picker-indicator,
input[type="date" i][readonly]::-webkit-clear-button,
input[type="date" i][readonly]::-webkit-inner-spin-button,
input[type="datetime-local" i][readonly]::-webkit-clear-button,
input[type="datetime-local" i][readonly]::-webkit-inner-spin-button,
input[type="month" i][readonly]::-webkit-clear-button,
input[type="month" i][readonly]::-webkit-inner-spin-button,
input[type="week" i][readonly]::-webkit-clear-button,
input[type="week" i][readonly]::-webkit-inner-spin-button,
input[readonly]::-webkit-calendar-picker-indicator {
visibility: hidden;
}
select {
-webkit-appearance: menulist;
box-sizing: border-box;
align-items: center;
border: 1px solid;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
}
select:not(:-internal-list-box) {
overflow: visible !important;
}
select:-internal-list-box {
-webkit-appearance: listbox;
align-items: flex-start;
border: 1px inset gray;
border-radius: initial;
overflow-x: hidden;
overflow-y: scroll;
vertical-align: text-bottom;
-webkit-user-select: none;
white-space: nowrap;
}
optgroup {
font-weight: bolder;
display: block;
}
option {
font-weight: normal;
display: block;
padding: 0 2px 1px 2px;
white-space: pre;
min-height: 1.2em;
}
select:-internal-list-box optgroup option:before {
content: "\00a0\00a0\00a0\00a0";
}
select:-internal-list-box option,
select:-internal-list-box optgroup {
line-height: initial !important;
}
select:-internal-list-box:focus option:checked {
background-color: -internal-active-list-box-selection !important;
color: -internal-active-list-box-selection-text !important;
}
select:-internal-list-box option:checked {
background-color: -internal-inactive-list-box-selection !important;
color: -internal-inactive-list-box-selection-text !important;
}
select:-internal-list-box:disabled option:checked,
select:-internal-list-box option:checked:disabled {
color: gray !important;
}
select:-internal-list-box hr {
border-style: none;
}
output {
display: inline;
}
/* meter */
meter {
-webkit-appearance: meter;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
meter::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
-webkit-user-modify: read-only !important;
height: 100%;
width: 100%;
}
meter::-webkit-meter-bar {
background: linear-gradient(
to bottom,
#ddd,
#eee 20%,
#ccc 45%,
#ccc 55%,
#ddd
);
height: 100%;
width: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(
to bottom,
#ad7,
#cea 20%,
#7a3 45%,
#7a3 55%,
#ad7
);
height: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(
to bottom,
#fe7,
#ffc 20%,
#db3 45%,
#db3 55%,
#fe7
);
height: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(
to bottom,
#f77,
#fcc 20%,
#d44 45%,
#d44 55%,
#f77
);
height: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
/* progress */
progress {
-webkit-appearance: progress-bar;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
}
progress::-webkit-progress-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
-webkit-user-modify: read-only;
height: 100%;
width: 100%;
}
progress::-webkit-progress-bar {
background-color: gray;
height: 100%;
width: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
progress::-webkit-progress-value {
background-color: green;
height: 100%;
width: 50%; /* should be removed later */
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
/* inline elements */
u,
ins {
text-decoration: underline;
}
strong,
b {
font-weight: bold;
}
i,
cite,
em,
var,
address,
dfn {
font-style: italic;
}
tt,
code,
kbd,
samp {
font-family: monospace;
}
pre,
xmp,
plaintext,
listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1__qem 0;
}
mark {
background-color: yellow;
color: black;
}
big {
font-size: larger;
}
small {
font-size: smaller;
}
s,
strike,
del {
text-decoration: line-through;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
nobr {
white-space: nowrap;
}
/* states */
:focus {
outline: auto 5px -webkit-focus-ring-color;
}
/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus,
body:focus,
input[readonly]:focus {
outline: none;
}
embed:focus,
iframe:focus,
object:focus {
outline: none;
}
input:focus,
textarea:focus,
keygen:focus,
select:focus {
outline-offset: -2px;
}
input[type="button" i]:focus,
input[type="checkbox" i]:focus,
input[type="file" i]:focus,
input[type="hidden" i]:focus,
input[type="image" i]:focus,
input[type="radio" i]:focus,
input[type="reset" i]:focus,
input[type="search" i]:focus,
input[type="submit" i]:focus,
input[type="file" i]:focus::-webkit-file-upload-button {
outline-offset: 0;
}
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
a:-webkit-any-link:active {
color: -webkit-activelink;
}
/* HTML5 ruby elements */
ruby,
rt {
text-indent: 0; /* blocks used for ruby rendering should not trigger this */
}
rt {
line-height: normal;
-webkit-text-emphasis: none;
}
ruby > rt {
display: block;
font-size: 50%;
text-align: start;
}
ruby > rp {
display: none;
}
/* other elements */
noframes {
display: none;
}
frameset,
frame {
display: block;
}
frameset {
border-color: inherit;
}
iframe {
border: 2px inset;
}
details {
display: block;
}
summary {
display: block;
}
summary::-webkit-details-marker {
display: inline-block;
width: 0.66em;
height: 0.66em;
-webkit-margin-end: 0.4em;
}
template {
display: none;
}
bdi,
output {
unicode-bidi: -webkit-isolate;
}
bdo {
unicode-bidi: bidi-override;
}
textarea[dir="auto" i] {
unicode-bidi: -webkit-plaintext;
}
dialog:not([open]) {
display: none;
}
dialog {
position: absolute;
left: 0;
right: 0;
width: -webkit-fit-content;
height: -webkit-fit-content;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
}
dialog::backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
}
/* page */
@page {
/* FIXME: Define the right default values for page properties. */
size: auto;
margin: auto;
padding: 0px;
border-width: 0px;
}
/* Disable multicol in printing, since it's not implemented properly. See crbug.com/99358 */
@media print {
* {
-webkit-columns: auto !important;
}
}
/* noscript is handled internally, as it depends on settings. */
@charset "UTF-8";
/*---------------------------------
Start reset.css
---------------------------------*/
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
/* Document */
/* ============================================ */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-webkit-tap-highlight-color: transparent;
/* 3*/
}
/* Sections */
/* ============================================ */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: inherit;
/* 2 */
}
address {
font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: inherit;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/**
* Prevent vertical alignment issues.
*/
svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/**
* Reset form fields to make them styleable.
* 1. Make form elements stylable across systems iOS especially.
* 2. Inherit text-transform from parent.
*/
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
/* 1 */
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit;
/* 2 */
}
/**
* Reset radio and checkbox appearance to preserve their look in iOS.
*/
[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
[type="radio"] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
}
/**
* Correct cursors for clickable elements.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
cursor: default;
}
/**
* Improve outlines for Firefox and unify style with input elements & buttons.
*/
:-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
}
/**
* Remove padding
*/
option {
padding: 0;
}
/**
* Reset to invisible
*/
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the outline style in Safari.
*/
[type="search"] {
outline-offset: -2px;
/* 1 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Fix font inheritance.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/**
* Clickable labels
*/
label[for] {
cursor: pointer;
}
/* Interactive */
/* ============================================ */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/*
* Remove outline for editable content.
*/
[contenteditable]:focus {
outline: auto;
}
/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
border-color: inherit;
/* 1 */
border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}
/*---------------------------------
End reset.css
---------------------------------*/
/*---------------------------------
base
---------------------------------*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
small,
button,
time,
figure {
margin: 0;
padding: 0;
border: 0;
font-size: inherit;
vertical-align: baseline;
}
header,
footer,
nav,
section,
article,
aside,
figure,
figcaption,
main {
display: block;
}
html {
font-size: 62.5%;
}
body {
color: #333;
font-family: "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", "Meiryo",
sans-serif;
font-size: 1.4em;
font-weight: 200;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
li,
dd {
list-style-type: none;
}
img {
max-width: 100%;
height: auto;
border-style: none;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
html {
font-size: 0.9775vw;
/* 1023px幅で10px換算 */
}
}
/*
form
---------------------------------*/
/**
* "display:none"で消さず、"opacity:0;"を使う。（Tabキーで選択できなくなるのを防ぐため）また、親要素に"position:relative;"を指定すること。
*/
[type="checkbox"],
[type="radio"] {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
[type="checkbox"] + span,
[type="radio"] + span {
display: inline-block;
position: relative;
margin: 0 0.2em 0;
padding: 0 0 0 1.2em;
cursor: pointer;
}
/**
* 標準で出力されるチェックボックスは消して、独自のチェックボックスを擬似要素で作成
*/
[type="checkbox"] + span::before {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 1em;
height: 1em;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 2px;
background: #fff;
content: "";
}
[type="checkbox"] + span::after {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
opacity: 0;
width: 1em;
height: 0.6em;
margin-top: -0.2em;
border-bottom: 3px solid rgba(0, 0, 0, 0.32);
border-left: 3px solid rgba(0, 0, 0, 0.32);
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
content: "";
}
[type="checkbox"]:checked + span::after {
opacity: 1;
}
/**
* 標準で出力されるラジオボタンは消して、独自のラジオボタンを擬似要素で作成
*/
[type="radio"] + span::before {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 1em;
height: 1em;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 50%;
background: #fff;
content: "";
}
[type="radio"] + span::after {
position: absolute;
top: 50%;
left: 4px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
width: 0.6em;
height: 0.6em;
border: 1px solid transparent;
border-radius: 50%;
background: rgba(0, 0, 0, 0.32);
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
content: "";
}
[type="radio"]:checked + span::after {
opacity: 1;
}
/*---------------------------------
Utility
---------------------------------*/
.emphasis {
color: #cba328;
}
@media screen and (min-width: 768px) {
.only-sp {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.only-pc {
display: none !important;
}
}
/*---------------------------------
layout
---------------------------------*/
/*
siteWrapper
---------------------------------*/
.siteWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
/*
header
---------------------------------*/
.header {
position: relative;
z-index: 100;
padding-top: 2.1rem;
padding-bottom: 2.1rem;
}
.header__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header__logo {
width: 12.1rem;
}
.header__contact {
text-align: right;
transform: translate(7px, -5px);
color: #fff;
}
.header__tel {
font-family: "Roboto", sans-serif;
font-size: 2.2rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.header__time {
margin-top: 0.6rem;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.01em;
}
@media (hover: hover) and (pointer: fine) {
.header__tel:hover {
pointer-events: none;
}
}
@media screen and (min-width: 768px) {
.header {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.header__logo {
width: 135px;
}
.header__contact {
text-align: right;
transform: translate(0.5rem, -0.3rem);
}
.header__tel {
font-size: 24px;
}
.header__time {
font-size: 11px;
}
}
/*
footer
---------------------------------*/
.footer {
padding-top: 3.8rem;
padding-bottom: 3.8rem;
background-color: #2f3042;
color: #fff;
}
.footer__nav__listItem {
text-align: center;
}
.footer__nav__listItem:not(:first-child) {
margin-top: 1.8rem;
}
.footer__nav__listItem a {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.1em;
}
.footer__logo {
margin-top: 6rem;
text-align: center;
}
.footer__logo img {
width: 143px;
}
@media (hover: hover) and (pointer: fine) {
.footer__nav__listItem a:hover {
text-decoration: underline;
}
}
@media screen and (min-width: 768px) {
.footer {
padding-bottom: 3rem;
}
.footer .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer__nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.footer__nav__listItem:not(:first-child) {
margin-top: 0;
margin-left: 3rem;
}
.footer__nav__listItem a {
font-size: 1.4rem;
}
.footer__logo {
margin-top: 0;
}
}
/*
main
---------------------------------*/
.main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-x: hidden;
}
/*
section
---------------------------------*/
section {
padding-top: 5rem;
padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
section {
padding-top: 10rem;
padding-bottom: 10rem;
}
}
/*
container
---------------------------------*/
.container {
padding-right: 2.5rem;
padding-left: 2.5rem;
}
@media screen and (min-width: 768px) {
.container {
width: 95%;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-right: 0;
padding-left: 0;
}
}
/*---------------------------------
Component
---------------------------------*/
/*
cmnBtn
---------------------------------*/
.cmnBtn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
padding: 1.23em;
border-radius: 3px;
background-color: #cba328;
color: #fff;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.1em;
-webkit-transition: -webkit-filter 0.3s;
transition: -webkit-filter 0.3s;
transition: filter 0.3s;
transition: filter 0.3s, -webkit-filter 0.3s;
}
.cmnBtn:not(:first-child) {
margin-top: 1rem;
}
.cmnBtn::after {
position: absolute;
top: 50%;
right: 2.3rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0.33em;
height: 1.11em;
background: url(../img/icon_arrow.svg) no-repeat center center/contain;
content: "";
}
@media (hover: hover) and (pointer: fine) {
.cmnBtn:hover {
-webkit-filter: brightness(1.1);
filter: brightness(1.1);
}
}
@media screen and (min-width: 768px) {
.cmnBtn {
border-radius: 6px;
font-size: 2.2rem;
}
.cmnBtn::after {
height: 0.51em;
}
}
/*
cmnCtaArea
---------------------------------*/
.cmnCtaArea {
padding-top: 4rem;
padding-bottom: 5rem;
background: url(../img/img_cta_bg_sp.jpg) no-repeat center center/cover;
}
.cmnCtaArea .cmnSecTtl {
color: #fff;
font-weight: 500;
}
.cmnCtaArea .cmnCta {
margin-top: 1rem;
}
@media screen and (min-width: 768px) {
.cmnCtaArea {
padding-top: 8rem;
padding-bottom: 8rem;
background: url(../img/img_cta_bg_pc.jpg) no-repeat center center/cover;
}
.cmnCtaArea .cmnCta {
margin-top: 4.5rem;
margin-right: auto;
margin-left: auto;
}
}
/*
cmnCta
---------------------------------*/
.cmnCta__pop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.3rem 2.5rem 1.3rem;
border-radius: 5px;
background-color: #f4f4f5;
}
.cmnCta__pop::before {
position: absolute;
top: calc(100% - 1px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 1.8rem;
height: 1.4rem;
background: url(../img/img_cta_triangle.png) no-repeat center center/contain;
content: "";
}
.cmnCta__img {
-webkit-box-flex: 0;
-ms-flex: 0 1 8.9rem;
flex: 0 1 8.9rem;
padding-top: 1rem;
}
.cmnCta__txtArea {
margin-left: 1.3rem;
}
.cmnCta__txt {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.8181818182;
}
.cmnCta__txt--lg {
font-size: 1.3rem;
line-height: 1.5;
}
.cmnCta__txt--lg span {
font-family: "Roboto", sans-serif;
font-size: 3rem;
font-weight: 500;
}
.cmnCta__link {
margin-top: 0.1rem;
}
.cmnCta__link a {
display: inline-block;
position: relative;
padding-bottom: 0.2rem;
color: #8d8d8e;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.cmnCta__link a::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #747474;
content: "";
}
.cmnCta__btn {
margin-top: 2.3rem;
}
@media screen and (min-width: 768px) {
.cmnCta {
max-width: 80rem;
}
.cmnCta__pop {
display: block;
position: relative;
width: 89%;
margin-right: auto;
margin-left: auto;
padding: 1.6rem 4rem 0;
border-radius: 6px;
}
.cmnCta__pop::before {
left: 31%;
}
.cmnCta__img {
position: absolute;
top: -1.2rem;
left: -1.6rem;
width: 10.8rem;
padding-top: 0;
}
.cmnCta__txtArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: 7.3rem;
}
.cmnCta__txt {
padding-top: 0.3rem;
font-size: 1.4rem;
}
.cmnCta__txt--lg {
-webkit-transform: translateY(-1.8rem);
transform: translateY(-1.8rem);
font-size: 2.2rem;
}
.cmnCta__txt--lg span {
font-size: 4.6rem;
}
.cmnCta__link {
margin-top: -2.5rem;
margin-left: auto;
}
.cmnCta__link a {
font-size: 1.1rem;
}
.cmnCta__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
}
.cmnCta__btn .cmnBtn {
width: calc(50% - 1.1rem);
}
.cmnCta__btn .cmnBtn:not(:first-child) {
margin-top: 0;
}
.cmnCta__btn .cmnBtn:last-child {
}
.top_firstView .cmnCta__btn {
justify-content: flex-start;
}
}
/*
cmnDescription
---------------------------------*/
.cmnDescription {
padding: 2.6rem 2.8rem 2rem;
background-color: #fff;
}
.cmnDescription__ttl + * {
margin-top: 1rem;
}
.cmnDescription__ttl dt {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translateY(0.2rem);
transform: translateY(0.2rem);
padding: 0.26em 0.74em;
background-color: #333;
color: #fff;
font-size: 1.5rem;
font-weight: 600;
vertical-align: top;
}
.cmnDescription__ttl dd {
display: inline-block;
margin-left: 1rem;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.025em;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.cmnDescription__ttl + * {
margin-top: 2rem;
}
.cmnDescription__ttl dt {
font-size: 1.8rem;
}
.cmnDescription__ttl dd {
font-size: 2.4rem;
}
}
/*
cmnSecTtl
---------------------------------*/
.cmnSecTtl {
font-size: 2.4rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.5;
text-align: center;
}
.cmnSecTtl--border {
position: relative;
padding-bottom: 0.6em;
}
.cmnSecTtl--border::before {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 9rem;
height: 2px;
background-color: #cba328;
content: "";
}
.cmnSecTtl--border + * {
margin-top: 2.5rem;
}
.cmnSecTtl span {
font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
.cmnSecTtl {
font-size: 4.4rem;
}
.cmnSecTtl::before {
width: 15rem;
}
.cmnSecTtl span {
font-size: 3rem;
}
.cmnSecTtl + * {
margin-top: 5rem;
}
}
/*
cmnSubTtl
---------------------------------*/
.cmnSubTtl {
position: relative;
padding: 1em 1em 1.5em;
background-color: #252638;
color: #fff;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.025em;
line-height: 1.4;
text-align: center;
}
.cmnSubTtl::before,
.cmnSubTtl::after {
position: absolute;
bottom: -1px;
width: 52%;
height: 3rem;
background-color: #f1f1f1;
content: "";
}
.cmnSubTtl::before {
left: 0;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.cmnSubTtl::after {
right: 0;
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
@media screen and (min-width: 768px) {
.cmnSubTtl {
padding: 1em 1em 1.7em;
font-size: 2.2rem;
}
.cmnSubTtl::before,
.cmnSubTtl::after {
height: 4rem;
}
.cmnSubTtl::before {
left: -1px;
}
.cmnSubTtl::after {
right: -1px;
}
}
/*
cmnTtl
---------------------------------*/
.cmnTtl {
padding: 0.36em;
background-color: #252638;
color: #fff;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
@media screen and (min-width: 768px) {
.cmnTtl {
font-size: 2.4rem;
letter-spacing: 0.05em;
}
}
/*
cmnTxt
---------------------------------*/
.cmnTxt {
font-size: 1.4rem;
line-height: 1.6071428571;
}
.cmnTxt--bold {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.cmnTxt {
font-size: 1.6rem;
}
}
/*
modal
---------------------------------*/
.modal {
display: none;
}
.modal.is-open {
display: block;
}
.modal__overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.5);
}
.modal__container {
position: relative;
width: 85%;
max-width: 500px;
max-height: 90vh;
padding: 2rem 1.5rem;
overflow-y: auto;
border-radius: 2rem;
background-color: #fff;
}
.modal__ttl {
font-size: 1.3rem;
line-height: 1.4;
text-align: center;
}
.modal__txt {
margin-top: 2rem;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.5;
}
.modal__button {
position: absolute;
top: 10px;
right: 10px;
width: 2.3rem;
height: 2.3rem;
color: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.modal__button::before,
.modal__button::after {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 2.2rem;
height: 3px;
border-radius: 3px;
background-color: #000;
content: "";
}
.modal__button::before {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.modal__button::after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 768px) {
.modal__container {
max-width: 70rem;
padding: 5rem 4rem 4rem;
}
.modal__ttl {
font-size: 2.1rem;
}
.modal__txt {
margin-top: 4rem;
font-size: 1.9rem;
}
.modal__button {
top: 3rem;
right: 3rem;
}
.modal__button::before,
.modal__button::after {
width: 3rem;
height: 0.4rem;
}
}
/*
top_firstView
---------------------------------*/
.top_firstView {
position: relative;
padding-top: 10rem;
background-color: #252638;
}
.top_firstView .container {
position: relative;
z-index: 1;
}
.top_firstView__barAnim {
display: flex;
align-items: flex-end;
position: absolute;
top: 34%;
left: 0;
width: 100%;
height: 98px;
}
.top_firstView__barAnim .bar {
flex: 1;
width: 7px;
min-height: 10px;
margin-left: 2px;
background-color: rgba(49, 50, 72, 0.8);
}
@keyframes growAnim {
0% {
height: 10px;
}
20% {
height: 60%;
}
40% {
height: 30%;
}
60% {
height: 90%;
}
80% {
height: 40%;
}
100% {
height: 100%;
}
}
.top_firstView__top {
color: #fff;
text-align: center;
}
.top_firstView__top__achievement {
display: block;
margin-right: -0.7rem;
}
.top_firstView__subTtl {
display: inline-block;
position: relative;
margin-top: 2.9rem;
font-size: 2.2rem;
font-weight: 500;
letter-spacing: 0.07em;
}
.top_firstView__subTtl span:first-child {
opacity: 0;
animation: txtOpacity 0s 0.7s forwards;
}
.top_firstView__ttl {
display: inline-block;
position: relative;
margin-top: 1.3rem;
font-size: 3.3rem;
font-weight: 600;
letter-spacing: 0.04em;
white-space: nowrap;
}
.top_firstView__ttl span:first-child {
opacity: 0;
animation: txtOpacity 0s 0.8s forwards;
}
.top_firstView__ttl .cross {
display: inline-block;
transform: translateY(-1px);
padding-right: 0.05em;
font-weight: 200;
}
.top_firstView__txtAnim {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top_firstView__txtAnim::before,
.top_firstView__txtAnim::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: #cba328;
transform: scale(0, 1);
content: "";
}
.top_firstView__txtAnim::before {
transform-origin: left top;
animation: txtSlideAnim01 0.8s ease-in;
}
.top_firstView__txtAnim::after {
transform-origin: right top;
animation: txtSlideAnim02 0.2s linear 0.8s forwards;
}
@keyframes txtOpacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes txtSlideAnim01 {
0% {
transform: scale(0, 1);
}
70% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes txtSlideAnim02 {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(0, 1);
}
}
.top_firstView__img {
position: relative;
z-index: 1;
margin-top: 2.9rem;
text-align: center;
}
.top_firstView__img img {
width: 22.7rem;
}
.top_firstView .cmnCta {
position: relative;
z-index: 1;
margin-top: -1rem;
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.top_firstView .cmnCta__pop {
margin-right: 1.1rem;
margin-left: 1.1rem;
padding: 1.5rem 1.5rem 1.6rem 1.2rem;
}
.top_firstView .cmnCta__img {
flex: 0 1 7.6rem;
padding-top: 0;
}
.top_firstView .cmnCta__txtArea {
flex-shrink: 0;
margin-left: 1rem;
padding-right: 1rem;
}
.top_firstView .cmnCta__txt {
font-size: 0.9rem;
letter-spacing: 0.1em;
}
.top_firstView .cmnCta__txt--lg {
margin-top: -0.2rem;
font-size: 1.1rem;
}
.top_firstView .cmnCta__txt--lg span {
font-size: 2.3rem;
letter-spacing: 0.03em;
}
.top_firstView .cmnCta__link {
margin-top: -0.2rem;
}
.top_firstView .cmnCta__link a {
font-size: 0.9rem;
}
.top_firstView .cmnBtn {
padding: 1.1em;
}
.top_firstView .cmnBtn::after {
right: 1.8rem;
}
.top_firstView__bottom {
margin-top: 4.6rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
background-color: #2b2c46;
}
.top_firstView__bottom__txt {
color: rgba(255, 255, 255, 0.4);
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.025em;
line-height: calc(30 / 18);
}
@media screen and (min-width: 768px) {
.top_firstView {
padding-top: 11.8rem;
}
.top_firstView__barAnim {
top: 49%;
height: 17rem;
}
.top_firstView__top {
position: relative;
text-align: left;
}
.top_firstView__top__achievement img {
width: 64%;
max-width: 654px;
}
.top_firstView__subTtl {
margin-top: 6.1rem;
font-size: 3.4rem;
}
.top_firstView__ttl {
margin-top: 1.4rem;
font-size: 5.8rem;
}
.top_firstView__ttl .cross {
transform: translateY(-3px);
}
.top_firstView__img {
position: absolute;
top: 6rem;
right: -1.2rem;
}
.top_firstView__img img {
width: 45.4rem;
}
.top_firstView .cmnCta {
margin-top: 5.7rem;
padding-right: 0;
padding-left: 0;
}
.top_firstView .cmnCta__pop {
display: flex;
width: 400px;
padding: 1.1rem 1.7rem 0.9rem 1.3rem;
}
.top_firstView .cmnCta__img {
flex: 0 1 6.4rem;
position: static;
}
.top_firstView .cmnCta__txtArea {
display: block;
margin-left: 1.4rem;
padding-right: 0;
}
.top_firstView .cmnCta__txt {
font-size: 1.1rem;
letter-spacing: 0.08em;
white-space: nowrap;
}
.top_firstView .cmnCta__txt--lg {
display: inline-block;
transform: translateY(0);
margin-top: -0.4rem;
font-size: 1.1rem;
}
.top_firstView .cmnCta__link {
display: inline-block;
transform: translateY(-0.2rem);
margin-left: 0.4rem;
}
.top_firstView .cmnCta__link a {
font-size: 1rem;
}
.top_firstView .cmnCta__btn {
margin-top: 2.5rem;
}
.top_firstView .cmnBtn {
width: 28rem;
padding: 1.2em;
font-size: 1.7rem;
letter-spacing: 0.05em;
}
.top_firstView__bottom {
position: relative;
z-index: 1;
margin-top: 6.9rem;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
.top_firstView__bottom__txt {
font-size: 1rem;
line-height: 2.2;
}
}
@media screen and (min-width: 900px) {
.top_firstView .cmnCta__pop {
width: 444px;
}
}
/*
top_movie
---------------------------------*/
.top_movie {
padding-top: 4.2rem;
padding-bottom: 1rem;
}
.top_movie__box {
overflow: hidden;
border-radius: 3px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.top_movie__box:not(:first-child) {
margin-top: 2rem;
}
.top_movie__youtube {
position: relative;
padding-top: 56%;
}
.top_movie__youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top_movie__link {
display: block;
padding: 2.2rem;
border-top: 1px solid #eee;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
transition: opacity 0.3s;
}
.top_movie__link span {
display: inline-block;
position: relative;
padding-left: 2.6rem;
}
.top_movie__link span::before {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 1.3rem;
height: 1.2rem;
background: url("../img/icon_arrow-circle.svg") no-repeat center center /
contain;
content: "";
}
@media (hover: hover) and (pointer: fine) {
.top_movie__link:hover {
opacity: 0.7;
}
}
@media screen and (min-width: 370px) {
.top_movie__link {
font-size: 1.5rem;
}
}
@media screen and (min-width: 768px) {
.top_movie {
padding-top: 8rem;
}
.top_movie__inner {
display: flex;
justify-content: space-between;
}
.top_movie__box {
width: 48%;
border-radius: 6px;
}
.top_movie__box:not(:first-child) {
margin-top: 0;
}
.top_movie__link {
font-size: 1.8rem;
}
.top_movie__link span {
padding-left: 2.8rem;
}
.top_movie__link span::before {
width: 1.6rem;
height: 1.6rem;
}
}
/*
top_simulator
---------------------------------*/
.top_simulator {
padding-top: 3rem;
padding-bottom: 2rem;
}
.top_simulator .cmnSecTtl {
line-height: 1.75;
}
.top_simulator__txt {
margin-top: 3.5rem;
color: #595959;
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.top_simulator__txt--lg {
margin-top: 3.7rem;
color: #1e1e1e;
font-size: 1.5rem;
line-height: 1.75;
text-align: center;
}
.top_simulator__txt--lg .emphasis {
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.2em;
}
.top_simulator__txt--lg .emphasis span {
font-size: 3rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.top_simulator__calc {
position: relative;
margin-top: 1rem;
letter-spacing: 0.05em;
white-space: nowrap;
}
.top_simulator__calc input[type="text"] {
width: 26.5rem;
padding: 0.02em 0.3em 0;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 3.5rem;
text-align: center;
vertical-align: bottom;
}
.top_simulator__calc span {
margin-left: 1rem;
font-size: 2.3rem;
font-weight: 600;
}
.top_simulator__typewriter {
display: flex;
justify-content: center;
position: absolute;
top: 0.9rem;
left: 1.5rem;
z-index: -1;
width: 23.5rem;
}
_::-webkit-full-page-media,
_:future,
:root .top_simulator__typewriter {
top: 1.6rem;
}
.top_simulator__typewriter span {
display: inline-block;
opacity: 0;
margin: 0 auto;
padding-top: 0.1em;
padding-right: 0.2em;
overflow: hidden;
border-right: 2px solid #cba328;
color: #cba328;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.05em;
white-space: nowrap;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #cba328;
}
}
.top_simulator__typewriter.is-show span {
opacity: 1;
animation: typing 2.5s steps(15, end), blink-caret 0.5s step-end infinite;
}
.top_simulator .cmnTtl {
margin-top: 3.5rem;
padding: 0.7em;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.top_simulator__tableArea {
overflow-x: auto;
}
.top_simulator__table tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top_simulator__table tr:first-child,
.top_simulator__table tr:last-child {
border-bottom: 1px solid #252638;
}
.top_simulator__table tr th,
.top_simulator__table tr td {
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0.93em;
background-color: #fff;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.6;
text-align: center;
vertical-align: middle;
}
.top_simulator__table tr:nth-child(2n + 3) th,
.top_simulator__table tr:nth-child(2n + 3) td {
background-color: #f8f8f8;
}
.top_simulator__table tr:first-child th,
.top_simulator__table tr:first-child td {
padding: 0.64em;
}
.top_simulator__table tr:nth-child(2n + 3) th,
.top_simulator__table tr:nth-child(2n + 3) td {
padding: 0.7em;
}
.top_simulator__table tr th:first-child {
position: sticky;
left: 0;
width: 11rem;
border-right: 1px solid #252638;
}
.top_simulator__table tr th:not(:first-child) {
width: 20.2rem;
}
.top_simulator__table tr td {
width: 20.2rem;
}
.top_simulator__table tr .minus {
color: #727272;
}
@media screen and (min-width: 768px) {
.top_simulator {
padding-top: 6rem;
padding-bottom: 5rem;
}
.top_simulator .cmnSecTtl {
font-size: 3rem;
font-weight: 500;
}
.top_simulator .cmnSecTtl span {
display: inline-block;
-webkit-transform: translateY(-0.2rem);
transform: translateY(-0.2em);
margin-right: 0.4em;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.top_simulator__typewriter {
top: 1.2rem;
left: 50%;
transform: translateX(-57%);
width: 26rem;
}
_::-webkit-full-page-media,
_:future,
:root .top_simulator__typewriter {
top: 2.2rem;
}
.top_simulator__calc .top_simulator__typewriter span {
font-size: 2.2rem;
}
.top_simulator__txt {
margin-top: 4rem;
-webkit-transform: translateX(-2.6rem);
transform: translateX(-2.6rem);
font-size: 1.4rem;
text-align: center;
}
.top_simulator .cmnSecTtl + .top_simulator__txt {
margin-top: 4rem;
padding-right: 18em;
}
.top_simulator__calc {
margin-top: 1.5rem;
text-align: center;
}
.top_simulator__calc input[type="text"] {
width: 40rem;
padding: 0.1em 0.3em 0.05em;
border-radius: 6px;
font-size: 4rem;
}
.top_simulator__calc span {
font-size: 1.8rem;
}
.top_simulator__txt--lg {
-webkit-transform: translateX(0);
transform: translateX(0);
margin-top: 4rem;
font-size: 1.6rem;
}
.top_simulator__txt--lg .emphasis {
margin-left: 0.2em;
font-size: 1.8rem;
}
.top_simulator__txt--lg .emphasis span {
font-size: 2.8rem;
}
.top_simulator .cmnTtl,
.top_simulator__tableArea {
width: 95%;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
}
.top_simulator .cmnTtl {
margin-top: 5rem;
border-radius: 6px 6px 0 0;
font-size: 1.8rem;
}
.top_simulator__table tr:last-child {
border-radius: 0 0 6px 6px;
}
.top_simulator__table tr th,
.top_simulator__table tr td {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 1.8rem;
}
.top_simulator__table tr th:first-child {
width: 18.1rem;
border-left: 1px solid #252638;
}
.top_simulator__table tr th:not(:first-child) {
width: 28.1rem;
}
.top_simulator__table tr th:last-child,
.top_simulator__table tr td:last-child {
border-right: 1px solid #252638;
}
.top_simulator__table tr td {
width: 28.1rem;
}
.top_simulator__table tr:last-child th:first-child {
border-radius: 0 0 0 6px;
}
.top_simulator__table tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
}
/*
top_achievement
---------------------------------*/
.top_achievement {
padding-top: 3rem;
padding-bottom: 6rem;
}
.top_achievement .cmnSecTtl {
margin-right: -1rem;
margin-left: -1rem;
}
.top_achievement .cmnSecTtl + .cmnTxt {
margin-top: 3rem;
}
@media screen and (min-width: 768px) {
.top_achievement {
padding-top: 5rem;
padding-bottom: 10rem;
}
.top_achievement .cmnSecTtl + .cmnTxt {
text-align: center;
}
}
/*
top_economicSituation
---------------------------------*/
.top_economicSituation {
position: relative;
padding-top: 6.5rem;
padding-bottom: 4.5rem;
background-color: #f1f1f1;
}
.top_economicSituation .cmnSecTtl {
margin-right: -1rem;
margin-left: -1rem;
}
.top_economicSituation::before {
position: absolute;
top: -5.8rem;
right: 0;
width: 5.3rem;
height: 14.7rem;
background: url("../img/img_man.png") no-repeat center right / contain;
content: "";
}
.top_economicSituation__listTtl {
display: flex;
justify-content: center;
margin-top: 4rem;
}
.top_economicSituation__listTtl span {
display: inline-block;
position: relative;
padding-right: 4.5rem;
font-size: 1.5rem;
font-weight: 500;
}
.top_economicSituation__listTtl span::before {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 3.5rem;
height: 2px;
background-color: currentColor;
content: "";
}
.top_economicSituation__listTtl span:first-child {
color: #a00109;
}
.top_economicSituation__listTtl span:last-child {
margin-left: 3.3rem;
color: #045ba5;
}
.top_economicSituation__list {
margin-top: 1.8rem;
}
.top_economicSituation__listItem:not(:first-child) {
margin-top: 1.2rem;
}
.top_economicSituation__listItem .cmnTtl {
padding: 0.5em;
}
.top_economicSituation__listItem img {
border-radius: 0 0 3px 3px;
}
.top_economicSituation__txt {
margin-top: 3.4rem;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
.top_economicSituation__txt > span {
display: inline-block;
margin-top: 1rem;
font-size: 2.4rem;
}
.top_economicSituation__txt span span {
font-size: 3rem;
color: #a00109;
}
@media screen and (min-width: 768px) {
.top_economicSituation {
padding-top: 10rem;
padding-bottom: 10rem;
}
.top_economicSituation::before {
width: 8rem;
height: 22rem;
}
.top_economicSituation__listTtl {
margin-top: 5rem;
}
.top_economicSituation__listTtl span {
font-size: 1.7rem;
}
.top_economicSituation__list {
display: flex;
margin-top: 3rem;
}
.top_economicSituation__listItem {
width: calc(33.33% - 1.3333rem);
}
.top_economicSituation__listItem:not(:first-child) {
margin-top: 0;
margin-left: 1.3333rem;
}
.top_economicSituation__txt {
margin-top: 4rem;
font-size: 2.4rem;
}
.top_economicSituation__txt > span {
font-size: 3rem;
}
.top_economicSituation__txt span span {
font-size: 3.4rem;
}
}
/*
top_what
---------------------------------*/
.top_what {
padding-bottom: 2rem;
}
.top_what .cmnSecTtl--border + .cmnTxt {
margin-top: 2.2rem;
}
.top_what__img {
margin-top: 4.6rem;
margin-right: -0.4rem;
margin-left: -1.2rem;
}
@media screen and (min-width: 768px) {
.top_what {
padding-top: 10rem;
}
.top_what .cmnSecTtl--border + .cmnTxt {
margin-top: 5rem;
text-align: center;
}
.top_what__img {
max-width: 50rem;
margin-top: 7rem;
margin-right: auto;
margin-left: auto;
}
}
/*
top_where
---------------------------------*/
.top_where {
padding-top: 2rem;
padding-bottom: 4.5rem;
}
.top_where__graphTtl {
margin-top: 4.2rem;
color: #999;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.top_where__graph + * {
margin-top: 6rem;
}
.top_where__subTtl {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
white-space: nowrap;
}
.top_where__subTtl span {
display: inline-block;
position: relative;
}
.top_where__subTtl span::before {
position: absolute;
top: -1.2rem;
right: 0;
color: #b8b8b8;
font-size: 0.9rem;
letter-spacing: 0.025em;
content: "※3";
}
.top_where__subTtl + .cmnSecTtl {
margin: 2rem -1rem 0;
font-weight: 600;
line-height: 1.7;
}
.top_where__subTtl + .cmnSecTtl span {
font-size: 2.4rem;
}
.top_where__img {
margin-top: 2.5rem;
text-align: center;
}
.top_where__img img {
width: 72%;
}
.top_where__list {
display: flex;
margin-top: 3rem;
}
.top_where__listItem {
width: 50%;
padding: 0.2rem 1.5rem;
font-size: 1.5rem;
font-weight: 600;
line-height: calc(56 / 30);
text-align: center;
}
.top_where__listItem:last-child {
border-left: 1px dashed rgba(163, 163, 163, 0.5);
}
.top_where__listItem:first-child span {
color: #045ba5;
}
.top_where__listItem:last-child span {
color: #068e23;
}
.top_where__annotation {
margin-top: 3.5rem;
color: #b8b8b8;
font-size: 0.9rem;
font-weight: 400;
line-height: calc(30 / 18);
}
@media screen and (min-width: 768px) {
.top_where {
padding-top: 10rem;
padding-bottom: 10rem;
}
.top_where__graphTtl {
margin-top: 6rem;
font-size: 1.3rem;
}
.top_where__graph {
max-width: 50rem;
margin-right: auto;
margin-left: auto;
}
.top_where__graph + * {
margin-top: 10rem;
}
.top_where__subTtl {
font-size: 2.4rem;
}
.top_where__subTtl span::before {
top: -1.3rem;
font-size: 1.3rem;
}
.top_where__subTtl + .cmnSecTtl span {
font-size: 4.4rem;
}
.top_where__box {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6rem;
}
.top_where__img {
width: 45%;
margin-top: 0;
}
.top_where__img img {
width: 90%;
}
.top_where__list {
display: block;
width: 45%;
margin-top: 0;
padding-right: 3rem;
}
.top_where__listItem {
width: 100%;
font-size: 2.2rem;
}
.top_where__listItem:last-child {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px dashed rgba(163, 163, 163, 0.5);
border-left: none;
}
.top_where__annotation {
width: fit-content;
margin: 4rem auto 0;
font-size: 1.1rem;
}
}
/*
top_which
---------------------------------*/
.top_which {
background-color: #f1f1f1;
}
.top_which .cmnSecTtl--border + .cmnTtl {
margin-top: 3rem;
}
.top_which__img {
background-color: #fff;
}
.top_which__txtArea {
margin-top: 2rem;
}
@media screen and (min-width: 768px) {
.top_which .cmnSecTtl--border + .cmnTtl {
margin-top: 5rem;
max-width: 50rem;
margin-right: auto;
margin-left: auto;
}
.top_which__img {
max-width: 50rem;
margin-right: auto;
margin-left: auto;
}
.top_which__txtArea {
margin-top: 4rem;
max-width: 80%;
margin-right: auto;
margin-left: auto;
}
}
/*
top_reason
---------------------------------*/
.top_reason {
padding-bottom: 3.5rem;
background-color: #f1f1f1;
}
.top_reason .cmnSubTtl {
width: 27.5rem;
margin-right: auto;
margin-left: auto;
}
.top_reason .cmnSecTtl {
margin-top: 3.4rem;
}
.top_reason .cmnSecTtl--border + .cmnTxt {
margin-top: 2rem;
}
.top_reason__list {
margin-top: 4rem;
}
.top_reason__listItem {
padding: 2.5rem 1.6rem 1.5rem;
background-color: #fff;
}
.top_reason__listItem:not(:first-child) {
margin-top: 2.5rem;
}
.top_reason__listItem__ttl {
color: #666;
font-size: 1.2rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.top_reason__vsArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 1.8rem;
}
.top_reason__vsArea__circle {
width: 41.3%;
border: 3px solid #c9c9c9;
border-radius: 50%;
}
.top_reason__vsArea__circle__inner {
position: relative;
padding-top: 100%;
}
.top_reason__vsArea__txt {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.3333333333;
text-align: center;
}
.top_reason__vsArea__vs {
color: #999;
font-size: 2.4rem;
font-weight: 300;
}
.top_reason__vsArea__circle.win {
position: relative;
}
.top_reason__vsArea__circle.win::before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 4px solid #eee5cb;
border-radius: 50%;
content: "";
}
.top_reason__vsArea__circle.win::after {
position: absolute;
top: -2.3rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 6.3rem;
height: 5rem;
background: url(../img/img_crown.png) no-repeat center center/contain;
content: "";
}
.top_reason__listItem__speechBalloon {
position: relative;
width: 92.5%;
margin-top: 1.6rem;
margin-right: auto;
margin-left: auto;
padding: 0.63em 1em;
border-radius: 1rem;
background-color: #ebebeb;
font-size: 1.4rem;
line-height: 1.6;
text-align: center;
}
.top_reason__listItem__speechBalloon::before {
position: absolute;
bottom: calc(100% - 1px);
left: 14%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 10px 6px;
border-color: transparent transparent #ebebeb transparent;
content: "";
}
.top_reason__listItem__speechBalloon span {
color: #cc6666;
font-weight: 600;
}
.top_reason__listItem .cmnTxt {
width: 92.5%;
margin-top: 2rem;
margin-right: auto;
margin-left: auto;
}
.top_reason__listItem__img {
margin-top: 2rem;
}
.top_reason__listItem01 .top_reason__listItem__img {
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.top_reason__listItem02 .top_reason__listItem__img {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.top_reason__listItem03 .top_reason__listItem__img {
margin-top: 3rem;
padding-right: 1.5rem;
padding-left: 1rem;
}
@media screen and (min-width: 768px) {
.top_reason {
padding-bottom: 10rem;
}
.top_reason .cmnSubTtl {
width: 35rem;
}
.top_reason .cmnSecTtl--border + .cmnTxt {
margin-top: 5rem;
text-align: center;
}
.top_reason__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top_reason__listItem {
width: calc(33.33% - 1.3333333333rem);
border-radius: 1rem;
}
.top_reason__listItem:not(:first-child) {
margin-top: 0;
margin-left: 2rem;
}
.top_reason__listItem__ttl {
font-size: 1.5rem;
}
.top_reason__listItem03 .top_reason__listItem__img {
margin-top: 5rem;
}
}
/*
top_merit
---------------------------------*/
.top_merit {
padding-bottom: 0;
}
.top_merit__list {
margin-top: 3.5rem;
}
.top_merit__listItem {
border: 1px solid #c9c9c9;
border-radius: 3px;
}
.top_merit__listItem:not(:first-child) {
margin-top: 4rem;
}
.top_merit__listItem .cmnTtl {
padding: 0.7em;
}
.top_merit__list__img {
padding-top: 2rem;
padding-right: 4rem;
padding-left: 4rem;
}
.top_merit__listItem01 .top_merit__list__img {
padding-top: 2.8rem;
padding-right: 5rem;
padding-left: 4.5rem;
}
.top_merit__listItem02 .top_merit__list__img {
padding-top: 1.9rem;
padding-right: 4.1rem;
padding-left: 3.9rem;
}
.top_merit__childList {
margin-top: 1.3rem;
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.top_merit__childListItem {
position: relative;
padding: 1em 1.2em 1em 4.2em;
background-image: linear-gradient(
to right,
#999,
#999 1px,
transparent 1px,
transparent 3px
);
background-size: 4px 1px;
background-position: top left;
background-repeat: repeat-x;
}
.top_merit__childListItem::before {
position: absolute;
top: 50%;
left: 1.6rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 2rem;
height: 2rem;
background: url(../img/icon_check01.png) no-repeat center center/contain;
content: "";
}
.top_merit__mediaArea {
width: 100vw;
margin-top: 3.4rem;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding-top: 3.3rem;
padding-right: 2.5rem;
padding-left: 2.5rem;
background-color: #f1f1f1;
}
.top_merit__media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 2rem 2rem 2rem;
background-color: #fff;
}
.top_merit__media__img {
width: 43.5%;
}
.top_merit__media .cmnTxt {
width: 40%;
}
.top_merit__mediaArea__second {
margin-top: 1.8rem;
}
.top_merit__mediaArea__second .top_merit__media {
margin-top: 1.8rem;
}
.top_merit__mediaArea__second .top_merit__media__img {
width: 46.6%;
}
.top_merit__txt {
font-size: 1.8rem;
font-weight: 600;
text-align: center;
}
.top_merit__bottom {
width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding: 1.4rem 2.5rem 3rem;
background-color: #f1f1f1;
}
.top_merit__bottom__inner {
position: relative;
padding: 2.5rem 2rem;
background-color: #fff;
}
.top_merit__bottom__inner::before {
position: absolute;
top: 50%;
right: 2.5rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 8.4rem;
height: 10.3rem;
background: url(../img/img_arrow.png) no-repeat center center/contain;
content: "";
}
.top_merit__bottom__inner .top_merit__txt {
position: relative;
z-index: 1;
line-height: 1.3333333333;
}
@media screen and (min-width: 768px) {
.top_merit {
padding-bottom: 5rem;
}
.top_merit__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 5rem;
}
.top_merit__listItem {
width: calc(50% - 1rem);
border-radius: 1rem;
}
.top_merit__listItem:not(:first-child) {
margin-top: 0;
margin-left: 2rem;
}
.top_merit__listItem .cmnTtl {
border-radius: 1rem 1rem 0 0;
}
.top_merit__list__img {
min-height: 21rem;
}
.top_merit__listItem01 .top_merit__list__img {
padding-top: 3.7rem;
}
.top_merit__childList {
margin-top: 2.5rem;
padding-right: 2rem;
padding-left: 2rem;
}
.top_merit__childListItem {
background-image: linear-gradient(
to right,
#999,
#999 2px,
transparent 2px,
transparent 5px
);
background-size: 7px 2px;
}
.top_merit__childListItem::before,
.top_merit__childListItem::after {
width: 2.4rem;
height: 2.4rem;
}
.top_merit__mediaArea__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 95%;
max-width: 1024px;
margin-top: 2rem;
margin-right: auto;
margin-left: auto;
}
.top_merit__mediaArea__first {
width: 48%;
}
.top_merit__mediaArea__second {
width: 48%;
}
.top_merit__media {
padding: 3rem 5rem;
}
.top_merit__media .cmnTxt {
width: 47%;
}
.top_merit__media__img {
width: 40%;
}
.top_merit__txt {
font-size: 2.4rem;
}
.top_merit__bottom {
width: 95%;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding: 4rem 0 7rem;
}
.top_merit__bottom__inner::before {
right: calc(50% - 24rem);
}
}
/*
top_contact
---------------------------------*/
.top_contact {
padding-top: 4rem;
padding-bottom: 6.5rem;
}
.top_contact .cmnTtl {
margin-top: 1.7rem;
padding: 0.66em;
border-radius: 5px 5px 0 0;
font-size: 1.5rem;
font-weight: 500;
}
.top_contact .cmnCta__pop {
border-radius: 0 0 5px 5px;
}
.top_contact .cmnCta__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.top_contact .cmnBtn {
width: calc(50% - 0.8rem);
padding: 0.66em;
background-color: #999;
text-align: center;
}
.top_contact .cmnBtn::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 170% 40%;
transform-origin: 170% 40%;
}
.top_contact .cmnBtn.is-open {
background-color: #cba328;
}
.top_contact .cmnBtn.is-open::after {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 40% 10%;
transform-origin: 40% 10%;
}
.top_contact .cmnBtn:not(:first-child) {
margin-top: 0;
margin-left: 1.6rem;
}
.top_contact__form {
margin-top: 4.3rem;
}
.top_contact__form__item {
display: none;
}
.top_contact__form__item.is-show {
display: block;
}
.top_contact__form__item dt {
font-weight: 600;
}
.top_contact__form__item dd {
margin-top: 1.5rem;
}
.top_contact__form__radio:not(:first-child) {
margin-top: 1.5rem;
}
.top_contact__form__radio label {
display: block;
position: relative;
}
.top_contact__form__radio label span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0.91em;
border: 1px solid #ababab;
}
.top_contact__form__radio label span::before,
.top_contact__form__radio label span::after {
content: none;
}
[type="radio"]:checked + span {
border-color: #cba328;
background-color: #cba328;
color: #fff;
}
.top_contact__form__item02 {
margin-top: 3.5rem;
}
.top_contact__form__item02 dt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.top_contact__form__comments {
margin-left: 3rem;
font-size: 1rem;
font-weight: 200;
}
.top_contact__form__reset {
display: none;
margin-top: 1.5rem;
padding-right: 0.7rem;
text-align: right;
}
.top_contact__form__reset.is-show {
display: block;
}
.top_contact__form__reset__btn {
position: relative;
padding-right: 1.8rem;
text-decoration: underline;
}
.top_contact__form__reset__btn::after {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 1rem;
height: 0.6rem;
background: url(../img/icon_arrow-gold.svg) no-repeat center center/contain;
content: "";
}
.top_contact__form__item03 {
margin-top: 3rem;
}
.top_contact__form__item03 dt {
font-size: 2.4rem;
line-height: 1.25;
}
.top_contact__form__item03 dt span {
font-size: 1.4rem;
}
.top_contact__form__item04 {
margin-top: 3rem;
}
.top_contact__form__item04 dt {
font-size: 2.4rem;
font-weight: 600;
line-height: 1.25;
}
.top_contact__form__item04 dt span {
font-size: 1.4rem;
}
.top_contact__form__checkbox:not(:first-child) {
margin-top: 1.5rem;
}
.top_contact__form__checkbox label {
position: relative;
}
.top_contact__form__checkbox label span {
padding-left: 2.1rem;
}
.top_contact__form__checkbox label span::before {
width: 1.21em;
height: 1.21em;
border-color: #ddd;
border-radius: 0;
}
.top_contact__form__checkbox label span::after {
left: 0.25em;
width: 0.7em;
height: 0.5em;
margin-top: -0.1em;
border-color: #666;
border-left-width: 2px;
border-bottom-width: 2px;
}
.top_contact__form__item05 {
margin-top: 3.5rem;
}
.top_contact__form__item05 dd {
margin-top: 1.3rem;
}
.top_contact__form__item06 {
margin-top: 2.8rem;
}
.top_contact__form__item06 dd {
margin-top: 1.3rem;
}
.top_contact__form__item07 {
margin-top: 2.8rem;
}
.top_contact__form__item07 dd {
margin-top: 1.3rem;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 0.9em;
border: 1px solid #ababab;
font-size: 1.6rem;
}
.top_contact__submit {
display: none;
margin-top: 3rem;
}
.top_contact__submit.is-show {
display: block;
}
.top_contact__submit__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
width: 100%;
padding: 1.07em;
border: 3px solid #cba328;
border-radius: 3px;
color: #cba328;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.1em;
-webkit-transition: background 0.3s, color 0.3s;
transition: background 0.3s, color 0.3s;
}
.top_contact__submit__btn::after {
position: absolute;
top: 50%;
right: 2.2rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0.33em;
height: 1.11em;
background: url(../img/icon_arrow-gold02.svg) no-repeat center center/contain;
-webkit-transition: background 0.3s;
transition: background 0.3s;
content: "";
}
@media (hover: hover) and (pointer: fine) {
.top_contact__submit__btn:hover {
background-color: #cba328;
color: #fff;
}
.top_contact__submit__btn:hover::after {
background: url(../img/icon_arrow.svg) no-repeat center center/contain;
}
}
@media screen and (min-width: 768px) {
.top_contact {
padding-top: 10rem;
padding-bottom: 10rem;
}
.top_contact .cmnTtl {
width: 80%;
max-width: 71.2rem;
margin-right: auto;
margin-left: auto;
}
.top_contact .cmnCta {
margin-right: auto;
margin-left: auto;
}
.top_contact .cmnCta__img {
left: 0.3rem;
}
.top_contact .cmnCta__txtArea {
margin-left: 8.3rem;
}
.top_contact .cmnBtn {
padding: 1.24em;
}
.top_contact__form {
max-width: 80rem;
margin-right: auto;
margin-left: auto;
}
.top_contact__form__radio {
width: 40rem;
}
.top_contact__form__item dt {
font-size: 1.6rem;
}
.top_contact__form__item01 .top_contact__form__radio {
margin-right: auto;
margin-left: auto;
}
.top_contact__form__item02 {
margin-top: 5rem;
}
.top_contact__form__item02 dd {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.top_contact__form__radio:not(:first-child) {
margin-top: 0;
margin-left: 2rem;
}
.top_contact__form__comments {
font-size: 1.2rem;
}
.top_contact__form__reset {
margin-top: 2.5rem;
}
.top_contact__form__reset__btn {
font-size: 1.6rem;
}
.top_contact__form__reset__btn::after {
width: 1.3rem;
height: 0.8rem;
}
.top_contact__form__item03 {
margin-top: 4rem;
}
.top_contact__form__item03 dd {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.top_contact__form__item04 {
margin-top: 4rem;
}
.top_contact__form__item04 dd {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.top_contact__form__checkbox {
width: 30%;
}
.top_contact__form__checkbox label span {
padding-left: 2.8rem;
font-size: 1.6rem;
line-height: 1.5;
}
.top_contact__form__checkbox label span::before {
top: 0.2em;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.top_contact__form__checkbox label span::after {
top: 0.6em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.top_contact__form__checkbox:not(:first-child) {
margin-top: 0;
}
.top_contact__form__checkbox:nth-child(n + 4) {
margin-top: 1.5rem;
}
.top_contact__form__item05 {
margin-top: 6rem;
}
.top_contact__form__item06 {
margin-top: 4rem;
}
.top_contact__form__item07 {
margin-top: 4rem;
}
.top_contact__form__item05.is-show,
.top_contact__form__item06.is-show,
.top_contact__form__item07.is-show {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top_contact__form__item05 dt,
.top_contact__form__item06 dt,
.top_contact__form__item07 dt {
width: 24rem;
}
.top_contact__form__item05 dd,
.top_contact__form__item06 dd,
.top_contact__form__item07 dd {
width: calc(100% - 24rem);
margin-top: 0;
}
.top_contact__submit {
margin-top: 8rem;
}
.top_contact__submit__btn {
width: 30rem;
margin-right: auto;
margin-left: auto;
}
}
/*
thanks
---------------------------------*/
.thanks-page .header {
background-color: #252638;
}
.thanks-page .header__logo a,
.thanks-page .footer__logo a {
display: inline-block;
}
.thanks {
padding-top: 14rem;
background-color: #eee;
}
.thanks__top {
padding: 6.5rem 2rem 6rem;
border-radius: 1rem;
background-color: #fff;
}
.thanks__ttl {
position: relative;
padding-top: 7rem;
font-size: 1.7rem;
letter-spacing: 0.05em;
line-height: 1.7647058824;
text-align: center;
}
.thanks__ttl::before {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 4.5rem;
height: 4.5rem;
background: url(./icon_check02.png) no-repeat center center/contain;
content: "";
}
.thanks__txt01 {
margin-top: 6rem;
padding-top: 1.6em;
padding-bottom: 1.6em;
border-top: 1px solid #eef0f2;
border-bottom: 1px solid #eef0f2;
color: #085bc2;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.5;
text-align: center;
}
.thanks__txt02 {
margin-top: 2.5rem;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 2;
}
.thanks__boxes {
margin-top: 3rem;
}
.thanks__box {
min-height: 13.5rem;
padding: 2.2rem 2rem;
border: 1px solid #eef0f2;
border-radius: 1rem;
}
.thanks__box:not(:first-child) {
margin-top: 1.2rem;
}
.thanks__box .thanks__txt02 {
margin-top: 1rem;
}
.thanks__box__ttl {
position: relative;
padding-left: 3rem;
font-size: 1.3rem;
letter-spacing: 0.05em;
line-height: 1.8461538462;
}
.thanks__box__ttl::before {
position: absolute;
top: 0.3em;
left: 0;
width: 2rem;
height: 1.7rem;
background: url(../img/icon_speech-balloon.png) no-repeat center
center/contain;
content: "";
}
.thanks__contact {
width: 100vw;
margin-top: 5rem;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding-top: 7.5rem;
padding-bottom: 6.7rem;
background: url(./img_thanks_contact_bg_sp.jpg) no-repeat center center/cover;
color: #fff;
}
.thanks__contact__inner {
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
}
.thanks__contact__txt {
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.9230769231;
text-align: center;
}
.thanks__contact__tel {
position: relative;
margin-top: 4rem;
padding-left: 8rem;
text-align: center;
}
.thanks__contact__tel::before {
position: absolute;
top: 50%;
left: 1.8rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 7.2rem;
height: 4.1rem;
background: url(./img_tel.png) no-repeat center center/contain;
content: "";
}
.thanks__contact__tel a {
font-family: "Roboto", sans-serif;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.thanks__contact__tel__txt {
margin-top: 0.5rem;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
.thanks {
padding-top: 18rem;
}
.thanks__top {
padding: 10.5rem 12rem 8.5rem;
}
.thanks__ttl {
padding-top: 10rem;
font-size: 2.4rem;
}
.thanks__ttl::before {
width: 6.4rem;
height: 6.4rem;
}
.thanks__txt01 {
margin-top: 8rem;
font-size: 1.6rem;
}
.thanks__txt02 {
margin-top: 4.2rem;
font-size: 1.3rem;
text-align: center;
}
.thanks__txt02 + .thanks__txt02 {
margin-top: 2rem;
}
.thanks__boxes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 4rem;
}
.thanks__box {
width: 48%;
padding: 4rem;
}
.thanks__box:not(:first-child) {
margin-top: 0;
}
.thanks__box__ttl {
font-size: 1.5rem;
}
.thanks__box .thanks__txt02 {
text-align: left;
}
.thanks__contact {
margin-top: 7rem;
padding-top: 10rem;
padding-bottom: 10rem;
background: url(./img_thanks_contact_bg_pc.jpg) no-repeat center
center/cover;
}
.thanks__contact__txt {
font-size: 1.6rem;
}
.thanks__contact__tel {
padding-left: 5.6rem;
}
.thanks__contact__tel::before {
left: calc(50% - 15rem);
width: 7.8rem;
height: 4.5rem;
}
.thanks__contact__tel a {
font-size: 2.7rem;
}
.thanks__contact__tel__txt {
font-size: 1.2rem;
}
}
.top_contact__form__radio select {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0.91em;
border: 1px solid #ababab;
width: 100%;
font-size: 1.6rem;
text-align: center;
}
.top_contact__form__radio_time {
display: none;
}
@media screen and (min-width: 768px) {
.sp {
display: none;
}
}
@media screen and (max-width: 767px) {
.js-modal-close {
position: relative;
display: block;
top: unset;
right: unset;
width: 60px;
height: 16px;
margin-left: auto;
margin-bottom: 10px;
background: url(pop_close.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
@media screen and (max-width: 767px) {
.modal_pop-inner a {
width: 100%;
height: auto;
position: relative;
bottom: unset;
right: unset;
left: unset;
}
}