@charset "UTF-8";
/* 共通カラー */
/* フォントファミリー */
/* 最大幅 */
/* ブレイクポイント */
/* メディアクエリ */
/*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */
/* Document
* ========================================================================== */
/**
* 1. Remove repeating backgrounds in all browsers (opinionated).
* 2. Add border box sizing in all browsers (opinionated).
*/
*,
::before,
::after {
background-repeat: no-repeat;
/* 1 */
box-sizing: border-box;
/* 2 */
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*/
::before,
::after {
text-decoration: inherit;
/* 1 */
vertical-align: inherit;
/* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Use the default user interface font in all browsers (opinionated).
* 3. Correct the line height in all browsers.
* 4. Use a 4-space tab width in all browsers (opinionated).
* 5. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
* 6. Breaks words to prevent overflow in all browsers (opinionated).
* 7. Font rendering settings; 1x => subpixel、2x or higher => grayscale http://creator.dwango.co.jp/14128.html
*/
html {
cursor: default;
/* 1 */
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 2 */
line-height: 1.15;
/* 3 */
-moz-tab-size: 4;
/* 4 */
-o-tab-size: 4;
tab-size: 4;
/* 4 */
-ms-text-size-adjust: 100%;
/* 5 */
-webkit-text-size-adjust: 100%;
/* 5 */
word-break: break-word;
/* 6 */
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: unset;
/* 7 */
scroll-padding-top: 60px;
}
@media screen and (min-width: 670px) {
html {
scroll-padding-top: 76px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* Sections
* ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
@font-face {
body {
font-family: "Libre";
src: url("../../../font/LibreCaslonDisplay-Regular.ttf") format("truetype");
}
}
@font-face {
body {
font-family: "Roboto";
src: url("../../../font/Roboto-Thin.ttf") format("truetype");
}
}
@font-face {
body {
font-family: "Roboto-b";
src: url("../../../font/Roboto-Bold.ttf") format("truetype");
}
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* 1. Add the correct sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* Add the correct display in IE.
*/
main {
display: block;
}
/**
* Remove the list style on navigation lists in all browsers (opinionated).
*/
nav ol,
nav ul {
list-style: none;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Liberation Mono, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Add the correct text decoration in Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Oxygen Mono, Liberation Mono, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Remove the text shadow on text selections in Firefox 61- (opinionated).
* 1. Restore the coloring undone by defining the text shadow
* in all browsers (opinionated).
*/
::-moz-selection {
background-color: #b3d4fc;
/* 1 */
color: #000;
/* 1 */
text-shadow: none;
}
::selection {
background-color: #b3d4fc;
/* 1 */
color: #000;
/* 1 */
text-shadow: none;
}
/* Embedded content
* ========================================================================== */
/*
* Change the alignment on media elements in all browers (opinionated).
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Change the fill color to match the text color in all browsers (opinionated).
*/
svg {
fill: currentColor;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Tabular data
* ========================================================================== */
/**
* Collapse border spacing in all browsers (opinionated).
*/
table {
border-collapse: collapse;
}
/* Forms
* ========================================================================== */
/**
* Inherit styling in all browsers (opinionated).
*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* Remove the margin in Safari.
*/
button,
input,
select {
margin: 0;
}
/**
* 1. Show the overflow in IE.
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button {
overflow: visible;
/* 1 */
text-transform: none;
/* 2 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* Show the overflow in Edge and IE.
*/
input {
overflow: visible;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
*/
legend {
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in Edge and IE.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 2. Remove the default vertical scrollbar in IE.
* 3. Change the resize direction on textareas in all browsers (opinionated).
*/
textarea {
margin: 0;
/* 1 */
overflow: auto;
/* 2 */
resize: vertical;
/* 3 */
}
/**
* Remove the padding in IE 10-.
*/
[type=checkbox],
[type=radio] {
padding: 0;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/* Interactive
* ========================================================================== */
/*
* Add the correct display in Edge and IE.
*/
details {
display: block;
}
/*
* Add the correct styles in Edge, IE, and Safari.
*/
dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
* ========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* User interaction
* ========================================================================== */
/*
* 1. Remove the tapping delay on clickable elements
in all browsers (opinionated).
* 2. Remove the tapping delay in IE 10.
*/
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
/* 1 */
touch-action: manipulation;
/* 2 */
}
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/* Accessibility
* ========================================================================== */
/**
* Change the cursor on busy elements in all browsers (opinionated).
*/
[aria-busy=true] {
cursor: progress;
}
/*
* Change the cursor on control elements in all browsers (opinionated).
*/
[aria-controls] {
cursor: pointer;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers (opinionated).
*/
[aria-disabled],
[disabled] {
cursor: not-allowed;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers (opinionated).
*/
[aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
display: inherit;
position: absolute;
}
/* ---------------------------------------------------------
mixin
--------------------------------------------------------- */
/* 縦横比を保持したブロック */
/* スクロールできるエリア */
/* …で省略 */
/* 三角形 */
/* ---------------------------------------------------------
function
--------------------------------------------------------- */
/* $mapの中から、ネストされてる値を取得 */
/* easing指定 */
/* SASS */
/*
---
name: ellipsis-multiline
category:
- base/mixins
compile: true
---
使い方
```scss
.dummy-omit-text-cls-default {
@include u-ellipsis-multiline();
}
.dummy-omit-text-cls-custom {
@include u-ellipsis-multiline(3);
}
```
使用例
```ejs
<p class="dummy-omit-text-cls-default">これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>
<p class="dummy-omit-text-cls-custom">これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>
```
*/
/* 下記はstyleguide用のダミークラスなので、実装では使用しないでください */
.dummy-omit-text-cls-default {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.dummy-omit-text-cls-custom {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/**
* reset
* (c) FOURDIGIT Inc.
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
a {
background: transparent;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
img {
vertical-align: bottom;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
del,
ins {
text-decoration: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1em;
font-weight: normal;
}
mark {
font-style: italic;
font-weight: bold;
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
font-size: 0.75em;
vertical-align: 0.25em;
}
sub {
font-size: 0.75em;
vertical-align: -0.25em;
}
big {
font-size: 110%;
}
small {
font-size: 90%;
}
legend {
color: #000000;
}
hr {
border: 0;
border-top: 1px solid #cccccc;
display: block;
height: 1px;
margin: 1em 0;
padding: 0;
}
input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
vertical-align: middle;
}
/* Color */
.color-white {
color: #ffffff;
}
.color-black {
color: #000000;
}
.color-gray {
color: #666666;
}
/* TextAlign */
.al {
text-align: left;
}
.ar {
text-align: right;
}
.ac {
text-align: center;
}
/* Clearfix */
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Nav */
.nav {
zoom: 1;
}
.nav:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* accessibilityNav */
#accessibilityNav {
display: none;
}
/* logtag */
#logtag {
display: none;
}
[data-aos^=none][data-aos^=none] {
opacity: 1;
}
[data-aos^=none][data-aos^=none].aos-animate {
opacity: 1;
}
.blockMarker-box {
position: relative;
}
.blockMarker-box .blockMarkerMsk {
background: #cccccc;
height: 100%;
position: absolute;
top: 0;
z-index: 2;
}
.blockMarker-box .blockMarkerMsk.color2 {
background: #d268f9;
}
[data-aos=blockMarker] {
left: 0;
width: 0;
}
[data-aos=blockMarker].aos-animate {
-webkit-animation: blockMarker 1.2s ease 0.5s 1 forwards;
animation: blockMarker 1.2s ease 0.5s 1 forwards;
}
@-webkit-keyframes blockMarker {
50% {
margin-left: 0;
width: 100%;
}
100% {
margin-left: 100%;
width: 0%;
}
}
@keyframes blockMarker {
50% {
margin-left: 0;
width: 100%;
}
100% {
margin-left: 100%;
width: 0%;
}
}
/* 右から */
[data-aos=blockMarkerR] {
right: 0;
width: 0;
}
[data-aos=blockMarkerR].aos-animate {
-webkit-animation: blockMarkerR 1.2s ease 0.5s 1 forwards;
animation: blockMarkerR 1.2s ease 0.5s 1 forwards;
}
@-webkit-keyframes blockMarkerR {
50% {
margin-right: 0;
width: 100%;
}
100% {
margin-right: 100%;
width: 0%;
}
}
@keyframes blockMarkerR {
50% {
margin-right: 0;
width: 100%;
}
100% {
margin-right: 100%;
width: 0%;
}
}
[data-aos=blockMarkerCnt] {
opacity: 0;
}
[data-aos=blockMarkerCnt].aos-animate {
-webkit-animation: blockMarkerCnt 0.8s ease 1s 1 forwards;
animation: blockMarkerCnt 0.8s ease 1s 1 forwards;
}
@-webkit-keyframes blockMarkerCnt {
100% {
opacity: 1;
}
}
@keyframes blockMarkerCnt {
100% {
opacity: 1;
}
}
/*
.page {
color: #333333;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
-webkit-font-feature-settings: 'palt';
font-feature-settings: 'palt';
font-size: 14px;
letter-spacing: .1em;
line-height: 1.5;
min-width: 1000px;
overflow-x: hidden;
}
@media only screen and (max-width: 736px) {
.page {
min-width: inherit;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
*/
/*****
* 3. tag
*****/
/* anchor */
a {
background-color: transparent;
background-image: none;
background-position: top left;
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
transition: 0.3s;
}
/* cap */
.cap {
background: none;
color: #666666;
font-size: 10px;
line-height: 1.5;
}
.caption {
background: none;
color: #666666;
font-size: 3.7313432836vw;
line-height: 1.5;
}
@media screen and (min-width: 670px) {
.caption {
font-size: 14px;
}
}
.cap {
padding-top: 5px;
}
/* imageCap */
.imageCap {
position: relative;
}
.imageCap .caption {
bottom: 0;
box-sizing: border-box;
left: 0;
padding: 0 10px 10px;
position: absolute;
right: 0;
text-shadow: 0 0 6px #ffffff, 0 0 6px #ffffff, 0 0 6px #ffffff;
width: 100%;
}
.imageCap .caption.color-white {
text-shadow: 0 0 6px #000000, 0 0 6px #000000, 0 0 6px #000000;
}
/* img */
img {
height: auto;
max-width: 100%;
vertical-align: top;
}
/* pc sp */
img.sp,
br.sp {
display: none;
}
@media only screen and (max-width: 736px) {
img.sp,
br.sp {
display: inline-block;
}
img.pc,
br.pc {
display: none;
}
}
/* telephone */
.telephone {
pointer-events: none;
}
@media only screen and (max-width: 736px) {
.telephone {
pointer-events: visible;
}
}
.wrap {
margin: 0 auto;
max-width: 1280px;
width: 100%;
}
@media only screen and (max-width: 736px) {
.wrap {
padding: 0 8.5333333333vw;
}
}
body {
background-color: #ffffff;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 62.5%;
font-size: 3vw;
line-height: 4.8vw;
}
@media screen and (min-width: 670px) {
body {
font-size: 16px;
line-height: 30px;
}
}
img {
max-width: 100%;
}
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-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 {
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 */
}
/**
* 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;
}
/**
* 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 */
}
/**
* Fix appearance for Firefox
*/
[type=number] {
-moz-appearance: textfield;
}
/**
* 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;
}
@-webkit-keyframes keyvisual_img {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@keyframes keyvisual_img {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@-webkit-keyframes wobbling_x {
0% {
margin-left: 10px;
}
100% {
margin-left: 0px;
}
}
@keyframes wobbling_x {
0% {
margin-left: 10px;
}
100% {
margin-left: 0px;
}
}
@-webkit-keyframes wobbling_y {
0% {
margin-top: 0px;
}
100% {
margin-top: 10px;
}
}
@keyframes wobbling_y {
0% {
margin-top: 0px;
}
100% {
margin-top: 10px;
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
main
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.keyvisual {
position: relative;
display: flex;
flex-wrap: nowrap;
margin: 60px auto 0 auto;
}
.keyvisual::before {
content: "";
position: absolute;
left: -20%;
top: -70%;
width: 200px;
height: 200px;
background: rgba(240, 240, 233, 0.5);
border-radius: 50%;
-webkit-animation: wobbling_x 2s ease-in-out infinite alternate, wobbling_y 2.4s ease-in-out infinite alternate;
animation: wobbling_x 2s ease-in-out infinite alternate, wobbling_y 2.4s ease-in-out infinite alternate;
z-index: -1;
}
@media screen and (min-width: 670px) {
.keyvisual::before {
left: -2%;
top: -40%;
width: 700px;
height: 700px;
margin: 78px auto 0 auto;
}
}
.keyvisual__logo {
margin: 10vw 7vw;
width: 25%;
text-align: center;
}
@media screen and (min-width: 670px) {
.keyvisual__logo {
width: 30%;
margin: 12% 7% 13% 7%;
}
}
.keyvisual__img {
position: absolute;
right: 0;
top: 0;
width: 60%;
overflow: hidden;
}
.keyvisual__img img {
width: 100%;
}
@media screen and (min-width: 670px) {
.keyvisual__img {
width: 55%;
}
}
.keyvisual__img::before {
-webkit-animation: keyvisual_img 1s ease 0s forwards;
animation: keyvisual_img 1s ease 0s forwards;
background: #fff;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
@-webkit-keyframes com_img {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@keyframes com_img {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@-webkit-keyframes community__lead {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes community__lead {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes wobbling_x {
0% {
margin-left: 10px;
}
100% {
margin-left: 0px;
}
}
@keyframes wobbling_y {
0% {
margin-top: 0px;
}
100% {
margin-top: 10px;
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
community
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.community {
position: relative;
margin: 15vw 0 5vw 0;
overflow-x: clip;
}
.community::before {
content: "";
position: absolute;
left: 50%;
top: -40%;
width: 200px;
height: 200px;
background: rgba(240, 240, 233, 0.5);
border-radius: 50%;
-webkit-animation: wobbling_x 3s ease-in-out infinite alternate, wobbling_y 4s ease-in-out infinite alternate;
animation: wobbling_x 3s ease-in-out infinite alternate, wobbling_y 4s ease-in-out infinite alternate;
z-index: -1;
}
@media screen and (min-width: 670px) {
.community::before {
left: 80%;
top: -40%;
width: 400px;
height: 400px;
}
}
@media screen and (min-width: 670px) {
.community {
margin: 0 0 50px 0;
}
}
.community__wrap {
max-width: 1100px;
margin: 0 auto;
}
@media screen and (min-width: 670px) {
.community__wrap {
margin: 50px auto 0 auto;
}
}
.community__inner {
width: 90%;
margin: 0vw auto 0 auto;
}
@media screen and (min-width: 670px) {
.community__inner {
width: 48%;
margin: 0rem 0 0 auto;
}
}
.community__title {
font-family: "caveat";
font-size: 9vw;
line-height: 10vw;
letter-spacing: 1vw;
margin: 0 0 2vw 0;
text-align: right;
position: relative;
overflow: hidden;
z-index: 2;
overflow: hidden;
transform: translate(-100%, 0);
transition: transform 2s 2s ease;
}
.community__title span {
display: block;
transform: translate(100%, 0);
transition: transform 2s 2s ease;
}
.community__title.active {
transform: translate(0, 0);
}
.community__title.active span {
transform: translate(0, 0);
}
@media screen and (min-width: 670px) {
.community__title {
font-size: 5rem;
letter-spacing: 0.5rem;
margin: 0 0 30px 0;
line-height: 6rem;
}
}
.community__title::before {
content: "";
height: 1px;
background: #000000;
width: 54%;
display: block;
position: absolute;
top: 58%;
}
@media screen and (min-width: 670px) {
.community__title::before {
width: 36%;
top: 61%;
left: -10%;
}
}
.community__lead {
font-size: 3vw;
line-height: 5vw;
width: 100%;
margin: 0 auto;
position: relative;
opacity: 0;
-webkit-animation: community__lead 1s ease 3s forwards;
animation: community__lead 1s ease 3s forwards;
}
@media screen and (min-width: 670px) {
.community__lead {
width: 91%;
font-size: 1rem;
line-height: 2.3rem;
margin: 0 0 0 auto;
}
}
.community__img {
position: absolute;
z-index: 1;
top: -18vw;
left: 0;
width: 45%;
/*max-width: 700px;*/
overflow: hidden;
z-index: 3;
}
@media screen and (min-width: 670px) {
.community__img {
width: 50%;
top: -9vw;
bottom: 0;
}
}
.community__img img {
width: 100%;
}
.community__img::before {
-webkit-animation: com_img 1s ease 1.2s forwards;
animation: com_img 1s ease 1.2s forwards;
background: #fff;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
@-webkit-keyframes lead_img {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes lead_img {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes wobbling_x {
0% {
margin-left: 50px;
}
100% {
margin-left: 0px;
}
}
@keyframes wobbling_y {
0% {
margin-top: 0px;
}
100% {
margin-top: 50px;
}
}
@-webkit-keyframes border_anim {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
@keyframes border_anim {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
lead
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.lead {
position: relative;
margin: 0 0 15vw 0;
overflow-x: clip;
}
.lead::before {
content: "";
position: absolute;
left: 0%;
top: 10%;
width: 700px;
height: 700px;
background: rgba(240, 240, 233, 0.5);
border-radius: 50%;
-webkit-animation: wobbling_x 2.5s ease-in-out infinite alternate, wobbling_y 3s ease-in-out infinite alternate;
animation: wobbling_x 2.5s ease-in-out infinite alternate, wobbling_y 3s ease-in-out infinite alternate;
z-index: -1;
}
@media screen and (min-width: 670px) {
.lead::before {
left: 60%;
width: 950px;
height: 950px;
}
}
@media screen and (min-width: 670px) {
.lead {
margin: 0 0 100px 0;
}
}
.lead__wrap {
max-width: 1100px;
margin: 0 auto 10vw auto;
width: 90%;
}
@media screen and (min-width: 670px) {
.lead__wrap {
width: auto;
margin: 0 auto;
}
}
.lead__path {
display: flex;
flex-wrap: nowrap;
max-width: 1100px;
margin: 0 auto 3vw auto;
}
@media screen and (min-width: 670px) {
.lead__path {
margin: 0 auto;
}
}
.lead__item {
margin: 0 1vw 0 0;
}
@media screen and (min-width: 670px) {
.lead__item {
margin: 0 10px 0 0;
}
}
.lead__item:first-child::after {
content: " > ";
padding: 0 0 0 1vw;
}
@media screen and (min-width: 670px) {
.lead__item:first-child::after {
padding: 0 0 0 10px;
}
}
.lead__item a {
color: #000000;
font-size: 2.8vw;
text-decoration: underline;
}
@media screen and (min-width: 670px) {
.lead__item a {
font-size: 0.9rem;
}
}
.lead__item a:hover {
color: #666666;
}
.lead__inner {
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 670px) {
.lead__inner {
width: 48%;
margin: 10rem 0 0 auto;
}
}
.lead__title {
font-family: "caveat";
font-size: 10vw;
letter-spacing: 1vw;
margin: 0 0 3vw 0;
opacity: 0;
line-height: 10vw;
}
@media screen and (min-width: 670px) {
.lead__title {
font-size: 4.5rem;
line-height: 5rem;
letter-spacing: 0.5rem;
margin: 0 0 50px 0;
}
}
.lead__title::before {
content: "";
height: 0%;
background: #000000;
width: 1px;
display: block;
position: absolute;
top: -50%;
right: 20%;
opacity: 1;
}
@media screen and (min-width: 670px) {
.lead__title::before {
top: -100%;
}
}
.lead__title.active {
-webkit-animation: lead_img 1.5s ease 0s forwards;
animation: lead_img 1.5s ease 0s forwards;
}
.lead__title.active::before {
-webkit-animation: border_anim 0.5s linear 0.5s forwards;
animation: border_anim 0.5s linear 0.5s forwards;
}
.lead__block {
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 670px) {
.lead__block {
font-size: 0.9rem;
line-height: 2.6rem;
margin: 0 auto;
width: 80%;
}
}
.lead__text {
font-size: 3vw;
line-height: 5vw;
margin-bottom: 8vw;
opacity: 0;
}
.lead__text.active {
-webkit-animation: lead_img 1s ease 1s forwards;
animation: lead_img 1s ease 1s forwards;
}
@media screen and (min-width: 670px) {
.lead__text {
font-size: 0.9rem;
line-height: 2.6rem;
margin-bottom: 40px;
}
}
.lead__br--pc {
display: none;
}
@media screen and (min-width: 670px) {
.lead__br--pc {
display: inline;
}
}
.lead__br--sp {
display: inline;
}
@media screen and (min-width: 670px) {
.lead__br--sp {
display: none;
}
}
.lead__link {
display: flex;
flex-wrap: nowrap;
}
.lead__anchor {
width: 49%;
margin: 0;
}
.lead__anchor:first-of-type {
margin: 0 2% 0 0;
}
.lead__anchor a {
border: 1px solid #000000;
text-align: center;
display: block;
padding: 3vw;
font-size: 3.5820895522vw;
font-family: "outfit_L";
transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}
@media screen and (min-width: 670px) {
.lead__anchor a {
padding: 10px;
font-size: 1.2rem;
}
}
.lead__anchor a span {
position: relative;
padding: 0 8.9552238806vw 0 0;
}
@media screen and (min-width: 670px) {
.lead__anchor a span {
padding: 0 30px 0 0;
}
}
.lead__anchor a span::after {
position: absolute;
content: "";
background: url(../img/share-archive/lead_anchor_icon1.svg) no-repeat center center/cover;
width: 14px;
height: 7px;
width: 2.6865671642vw;
height: 1.3432835821vw;
right: 0;
top: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 670px) {
.lead__anchor a span::after {
width: 18px;
height: 13px;
}
}
.lead__anchor a:hover {
background: #000000;
color: #FFF;
letter-spacing: 0.15em;
}
.lead__anchor a:hover span::after {
background: url(../img/share-archive/lead_anchor_icon2.svg) no-repeat center center/cover;
}
.lead__imgwrap {
width: 100%;
}
@media screen and (min-width: 670px) {
.lead__imgwrap {
width: 50%;
position: relative;
left: 0;
padding-top: 6.0416666667vh;
}
}
.lead__imgpic1 {
position: relative;
z-index: 1;
bottom: 0vw;
left: 0;
width: 70%;
opacity: 0;
}
@media screen and (min-width: 670px) {
.lead__imgpic1 {
position: absolute;
}
}
.lead__imgpic1 img {
width: 100%;
}
@media screen and (min-width: 670px) {
.lead__imgpic1 {
bottom: 100px;
right: 10%;
max-height: 710px;
overflow: hidden;
}
}
.lead__imgpic1.active {
-webkit-animation: lead_img 1.5s ease 0s forwards;
animation: lead_img 1.5s ease 0s forwards;
}
.lead__imgpic2 {
position: relative;
z-index: 2;
bottom: 0;
right: 0vw;
width: 70%;
margin: -25vw auto 0 30%;
opacity: 0;
}
@media screen and (min-width: 670px) {
.lead__imgpic2 {
position: absolute;
}
}
.lead__imgpic2 img {
width: 100%;
}
@media screen and (min-width: 670px) {
.lead__imgpic2 {
bottom: 0;
right: 0%;
left: 25%;
width: auto;
margin: auto;
}
}
.lead__imgpic2.active {
-webkit-animation: lead_img 1.5s ease 0s forwards;
animation: lead_img 1.5s ease 0s forwards;
}
@-webkit-keyframes gallary_title {
0% {
opacity: 0;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@keyframes gallary_title {
0% {
opacity: 0;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
gallary
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.gallary {
position: relative;
margin: 0 0 10vw 0;
}
@media screen and (min-width: 670px) {
.gallary {
margin: 0 0 100px 0;
}
}
.gallary__title {
font-family: "caveat";
font-size: 9vw;
max-width: 1100px;
margin: 0 auto 5vw auto;
padding: 0 0vw 0 0;
letter-spacing: 1vw;
width: 90%;
opacity: 0;
}
@media screen and (min-width: 670px) {
.gallary__title {
font-size: 4rem;
padding: 0 30px 0 0;
margin: 0 auto 30px auto;
letter-spacing: 0.4rem;
width: auto;
}
}
.gallary__title span {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 400;
font-size: 3vw;
padding: 0 0 0 2vw;
}
@media screen and (min-width: 670px) {
.gallary__title span {
font-size: 14px;
padding: 0 0 0 30px;
}
}
.gallary__title.active {
-webkit-animation: gallary_title 1s ease 0s forwards;
animation: gallary_title 1s ease 0s forwards;
}
.gallary__button {
position: absolute;
}
@-webkit-keyframes gallaryslider__wrap {
0% {
transform: translateY(30px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gallaryslider__wrap {
0% {
transform: translateY(30px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
gallaryslider
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.gallaryslider {
position: relative;
padding: 50px 0 0 0;
margin: -60px 0 0 0;
opacity: 0;
}
.gallaryslider.active {
-webkit-animation: gallaryslider__wrap 2s ease 0s forwards;
animation: gallaryslider__wrap 2s ease 0s forwards;
}
.gallaryslider__wrap {
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.gallaryslider__item {
width: 32%;
margin: 0 1% 0 0;
}
.gallaryslider__item img {
width: 100%;
}
.gallaryslider__button {
position: absolute;
top: -50px;
right: 0;
width: 30px;
height: 30px;
}
@media screen and (min-width: 670px) {
.gallaryslider__button {
width: 43px;
height: 43px;
}
}
.gallaryslider__btnwrap {
max-width: 1100px;
margin: 0 auto;
position: absolute;
display: block;
height: 30px;
top: 5px;
width: 50%;
right: 0;
}
@media screen and (min-width: 670px) {
.gallaryslider__btnwrap {
height: 40px;
top: 0px;
right: auto;
transform: translate(55%, 0);
width: 55%;
}
}
.swiper-button-next, .swiper-button-prev {
width: 5.9701492537vw;
height: 5.9701492537vw;
top: 22px;
}
@media screen and (min-width: 670px) {
.swiper-button-next, .swiper-button-prev {
width: 40px;
height: 40px;
}
}
.swiper-button-next {
right: 10%;
background-image: none;
}
@media screen and (min-width: 670px) {
.swiper-button-next {
right: 0;
}
}
.swiper-button-prev {
right: 26%;
left: auto;
background-image: none;
}
@media screen and (min-width: 670px) {
.swiper-button-prev {
right: 50px;
}
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 0;
}
.swiper-button-next:after {
content: "";
background: url(../img/share-archive/gallaryslider_btn_icon2.svg) no-repeat center center;
width: 5.9701492537vw;
height: 5.9701492537vw;
position: absolute;
}
@media screen and (min-width: 670px) {
.swiper-button-next:after {
width: 40px;
height: 40px;
}
}
.swiper-button-next:hover::after {
background: url(../img/share-archive/gallaryslider_btn_icon4.svg) no-repeat center center;
}
.swiper-button-prev:after {
content: "";
background: url(../img/share-archive/gallaryslider_btn_icon1.svg) no-repeat center center;
width: 5.9701492537vw;
height: 5.9701492537vw;
position: absolute;
}
@media screen and (min-width: 670px) {
.swiper-button-prev:after {
width: 40px;
height: 40px;
}
}
.swiper-button-prev:hover::after {
background: url(../img/share-archive/gallaryslider_btn_icon3.svg) no-repeat center center;
}
@-webkit-keyframes news {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes news {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
news
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.news {
width: 90%;
margin: 0 auto 10vw auto;
opacity: 0;
}
@media screen and (min-width: 670px) {
.news {
width: 800px;
margin: 0 auto 100px auto;
display: flex;
flex-wrap: wrap;
}
}
.news.active {
-webkit-animation: news 1s ease 0s forwards;
animation: news 1s ease 0s forwards;
}
.news__title {
font-family: "caveat";
font-size: 9vw;
padding: 0;
margin: 0 0 3vw 0;
}
@media screen and (min-width: 670px) {
.news__title {
font-size: 4rem;
border-right: 1px solid #000000;
padding: 0 90px 0 0;
position: relative;
margin: 0;
}
}
.news__title span {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 400;
font-size: 2.8vw;
padding: 0 0 0 3vw;
}
@media screen and (min-width: 670px) {
.news__title span {
font-size: 14px;
position: absolute;
top: 0;
width: 100%;
padding: 0;
}
}
.news__content {
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 670px) {
.news__content {
max-width: 510px;
display: flex;
flex-wrap: wrap;
padding: 10px 0 0 0;
}
}
.news__content a {
color: #000000;
}
.news__content a:hover {
color: #666666;
}
.news__item {
font-size: 3.4vw;
font-weight: 300;
}
@media screen and (min-width: 670px) {
.news__item {
width: 110px;
margin: 0 0 20px 0;
font-size: 0.9rem;
}
.news__item:last-of-type {
margin: 0 0 10px 0;
}
}
.news__unit {
font-size: 3.4vw;
margin: 0 0 3vw 0;
}
@media screen and (min-width: 670px) {
.news__unit {
width: calc(100% - 110px);
margin: 0 0 20px 0;
font-size: 0.9rem;
}
.news__unit:last-of-type {
margin: 0 0 10px 0;
}
}
@-webkit-keyframes area__title {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@keyframes area__title {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@-webkit-keyframes area__wrap {
0% {
transform: translateY(30px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes area__wrap {
0% {
transform: translateY(30px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
main
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.area__title {
width: 100%;
background: url(../img/share-archive/area_title_pic1.jpg) no-repeat center center/cover;
padding: 7vw 0;
text-align: center;
margin: 0 0 5vw 0;
overflow: hidden;
position: relative;
}
.area__title span {
font-family: "caveat";
font-size: 9vw;
color: #FFF;
}
@media screen and (min-width: 670px) {
.area__title {
height: 200px;
padding: 60px 0;
margin: 0 0 100px 0;
}
.area__title span {
font-size: 4rem;
}
}
.area__title::before {
background: #FFF;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
.area__title.active::before {
-webkit-animation: area__title 1s ease 0s forwards;
animation: area__title 1s ease 0s forwards;
}
.area__inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.area__wrap {
width: 90%;
margin: 0 auto 10vw auto;
opacity: 0;
}
@media screen and (min-width: 670px) {
.area__wrap {
width: 530px;
margin: 0 0 50px 0;
}
.area__wrap:nth-of-type(1) {
margin: 0 40px 50px 0;
}
}
.area__wrap.active {
-webkit-animation: area__wrap 2s ease 0s forwards;
animation: area__wrap 2s ease 0s forwards;
}
.area__areatitle {
font-family: "outfit_L";
font-weight: 300;
font-size: 6vw;
margin: 0 0 3vw 0;
letter-spacing: 1vw;
}
.area__areatitle span {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 400;
font-size: 3.4vw;
padding: 0 0 0 3vw;
font-weight: 700;
}
@media screen and (min-width: 670px) {
.area__areatitle {
font-size: 1.8rem;
margin: 0 0 30px 0;
letter-spacing: 0.4rem;
}
.area__areatitle span {
font-size: 1rem;
}
}
.area__img {
margin: 0 0 3vw 0;
}
@media screen and (min-width: 670px) {
.area__img {
margin: 0 0 20px 0;
}
}
.area__img img {
width: 100%;
}
.area__name {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-weight: 400;
font-weight: 600;
font-size: 5vw;
margin: 0 0 3vw 0;
}
@media screen and (min-width: 670px) {
.area__name {
font-size: 1.5rem;
margin: 0 0 30px 0;
}
}
.area__overview {
font-size: 3vw;
margin: 0 0 1vw 0;
}
@media screen and (min-width: 670px) {
.area__overview {
font-size: 0.9rem;
margin: 0 0 10px 0;
}
}
.area__area {
font-size: 3vw;
margin: 0 0 3vw 0;
}
@media screen and (min-width: 670px) {
.area__area {
font-size: 0.8rem;
margin: 0 0 30px 0;
}
}
.area__lead {
font-size: 3.2vw;
font-weight: 700;
line-height: 5vw;
margin: 0 0 3vw 0;
}
@media screen and (min-width: 670px) {
.area__lead {
font-size: 0.9rem;
line-height: 1.6rem;
margin: 0 0 30px 0;
}
}
.area__link {
letter-spacing: 0.16em;
}
@media screen and (min-width: 670px) {
.area__link {
display: flex;
flex-wrap: nowrap;
}
}
.area__contact {
width: 100%;
margin: 0 0 3vw 0;
display: block;
background: #000000;
color: #FFF;
text-align: center;
padding: 3vw 0;
font-family: "outfit";
font-weight: 700;
font-size: 3vw;
transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
border: 1px solid #000000;
}
@media screen and (min-width: 670px) {
.area__contact {
width: 375px;
margin: 0 15px 0 0;
padding: 15px 0;
font-size: 0.8rem;
letter-spacing: 0.2rem;
}
}
.area__contact span {
position: relative;
padding: 0 0 0 25px;
}
.area__contact span::before {
content: "";
position: absolute;
background: url(../img/share-archive/area_url_icon1.svg) no-repeat left top;
width: 16px;
height: 14px;
left: 0;
top: 2px;
}
.area__contact:hover {
background: #FFF;
color: #000000;
letter-spacing: 0.45em;
}
.area__contact:hover span::before {
background: url(../img/share-archive/area_url_icon3.svg) no-repeat left top;
}
.area__detail {
width: 100%;
margin: 0;
display: block;
background: #000000;
color: #FFF;
text-align: center;
padding: 3vw 0;
font-family: "outfit";
font-weight: 700;
font-size: 3vw;
transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
border: 1px solid #000000;
}
@media screen and (min-width: 670px) {
.area__detail {
width: 375px;
margin: 0;
padding: 15px 0;
font-size: 0.9rem;
letter-spacing: 0.3rem;
}
}
.area__detail span {
position: relative;
padding: 0 25px 0 0;
}
.area__detail span::after {
content: "";
position: absolute;
background: url(../img/share-archive/area_url_icon2.svg) no-repeat left top;
width: 15px;
height: 13px;
right: 0;
top: 3px;
}
.area__detail:hover {
background: #FFF;
color: #000000;
letter-spacing: 0.45em;
}
.area__detail:hover span::after {
background: url(../img/share-archive/area_url_icon4.svg) no-repeat left top;
}
.area__caption {
border-top: 1px solid #707070;
padding: 4vw 0;
font-size: 2.8vw;
width: 90%;
margin: 0 auto;
line-height: 5vw;
}
@media screen and (min-width: 670px) {
.area__caption {
padding: 40px 0;
font-size: 0.9rem;
line-height: 1.8rem;
width: auto;
}
}
.area__br {
display: block;
}
@media screen and (min-width: 670px) {
.area__br {
display: none;
}
}
.page {
overflow-x: hidden;
}
.btn {
position: fixed;
top: 0;
right: 0;
display: inline-block;
width: 60px;
height: 60px;
cursor: pointer;
background: #2c2c2c;
right: 0;
top: 0;
z-index: 9999;
}
@media screen and (min-width: 670px) {
.btn {
width: 70px;
height: 76px;
}
}
.btn__line {
left: 13px;
top: 27px;
position: absolute;
display: block;
width: 60%;
height: 3px;
transition: 0.15s ease-out;
background-color: #fff;
}
@media screen and (min-width: 670px) {
.btn__line {
top: 35px;
}
}
.btn__inner::after {
content: "";
position: absolute;
display: block;
width: 60%;
height: 3px;
transition: 0.15s ease-out;
background-color: #fff;
top: 39px;
left: 13px;
}
@media screen and (min-width: 670px) {
.btn__inner::after {
top: 49px;
}
}
.btn__inner::before {
content: "";
position: absolute;
display: block;
width: 60%;
height: 3px;
transition: 0.15s ease-out;
background-color: #fff;
left: 13px;
top: 15px;
}
@media screen and (min-width: 670px) {
.btn__inner::before {
top: 21px;
}
}
.btn.active .btn__line {
width: 0;
opacity: 0;
transform: translateX(20px) rotate(90deg);
}
.btn.active .btn__inner::before {
width: 40px;
transform: translateY(17px) translateX(3px) rotate(-135deg);
left: 8px;
}
@media screen and (min-width: 670px) {
.btn.active .btn__inner::before {
left: 13px;
}
}
.btn.active .btn__inner::after {
width: 40px;
top: 49px;
left: 8px;
transform: translateY(-17px) translateX(3px) rotate(135deg);
}
@media screen and (min-width: 670px) {
.btn.active .btn__inner::after {
top: 54px;
left: 13px;
}
}
.header {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
background-color: #FFF;
}
.header__top {
position: relative;
padding: 0vh 0vw 0vh 2vw;
display: flex;
flex-wrap: nowrap;
height: 60px;
}
@media screen and (min-width: 670px) {
.header__top {
padding: 20px 15px;
margin: 0;
height: 76px;
}
}
.header__wrap {
display: flex;
flex-wrap: nowrap;
margin: 0 auto 0 0;
}
.header__logo {
width: 60%;
margin: 2vh 4vw 0 0;
}
@media screen and (min-width: 670px) {
.header__logo {
width: 170px;
margin: 5px 20px 0 0;
}
}
.header__logo a {
display: block;
}
.header__text {
font-size: 2.8vw;
font-weight: normal;
margin: 1.8vh 2vw 0 0;
}
@media screen and (min-width: 670px) {
.header__text {
font-size: 14px;
margin: 11px 50px 0 0;
white-space: nowrap;
}
}
.header__list {
display: none;
}
@media screen and (min-width: 960px) {
.header__list {
margin: 10px 60px 0 0;
display: block;
display: flex;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1200px) {
.header__list {
margin: 10px 0 0 0;
}
}
.header__item a {
font-size: 2.8vw;
margin: 0 1.5vw 0 0;
}
@media screen and (min-width: 670px) {
.header__item a {
font-size: 12px;
margin: 0 20px 0 0;
padding: 0 0 0 25px;
white-space: nowrap;
}
}
.header__item a:hover {
color: #666666;
}
.header__item:nth-of-type(1) {
background: url("../img/module/header_item_icon1.svg") no-repeat left top/15px;
}
.header__item:nth-of-type(2) {
background: url("../img/module/header_item_icon2.svg") no-repeat left top/20px;
}
.header__item:nth-of-type(3) {
background: url("../img/module/header_item_icon3.svg") no-repeat left center/20px;
display: none;
}
@media screen and (min-width: 960px) {
.header__item:nth-of-type(3) {
display: block;
}
}
.header__item:nth-of-type(4) {
background: url("../img/module/header_item_icon4.svg") no-repeat left center/20px;
display: none;
}
@media screen and (min-width: 960px) {
.header__item:nth-of-type(4) {
display: block;
}
}
.header__item:nth-of-type(4) a {
margin: 0;
}
.header__group {
display: none;
}
@media screen and (min-width: 960px) {
.header__group {
display: block;
width: 150px;
margin: 10px 80px 0 0;
}
}
.header__language {
display: none;
}
@media screen and (min-width: 670px) {
.header__language {
display: block;
position: relative;
margin: 7px 80px 0 0;
}
}
.header__languagebtn {
border: 1px solid #2c2c2c;
border-radius: 6px;
padding: 1px 25px 1px 10px;
font-size: 2.8vw;
position: relative;
cursor: pointer;
}
.header__languagebtn:hover {
border: 1px solid #666666;
color: #666666;
}
@media screen and (min-width: 670px) {
.header__languagebtn {
font-size: 12px;
}
}
.header__languagebtn::after {
position: absolute;
right: 6px;
top: 10px;
content: "";
background: url("../img/module/hmenulanguage_btn_icon.svg") no-repeat left center;
width: 8px;
height: 8px;
}
.header__languagelist {
position: absolute;
top: 30px;
background: #FFF;
z-index: 9999999999;
width: 100%;
padding: 10px;
display: none;
}
.header__languagelist.active {
display: block;
}
.header__languageitem {
margin: 0 0 10px 0;
}
.header__languageitem a {
color: #2c2c2c;
}
.header__languageitem a:hover {
color: #666666;
}
.hmenu-brand {
width: 80%;
margin: 0 auto 2vh auto;
}
@media screen and (min-width: 670px) {
.hmenu-brand {
margin: 0 auto 20px auto;
}
}
.hmenu-brand__item {
width: 60%;
margin: 0 auto 2vh auto;
}
@media screen and (min-width: 670px) {
.hmenu-brand__item {
margin: 0 auto 20px auto;
}
}
.hmenu-brand__item:last-child {
margin: 0 auto;
}
.hmenu-brand__item a {
position: relative;
display: block;
}
.hmenu-brand__item a:hover {
opacity: 0.7;
}
.hmenu-brand__item a img {
width: 100%;
}
.hmenu-list {
display: flex;
border-bottom: 1px solid #2c2c2c;
padding: 0 0 2vh 0;
margin: 0 auto 2vh auto;
height: 10.8955223881vw;
}
@media screen and (min-width: 670px) {
.hmenu-list {
padding: 0 0 20px 0;
margin: 0 auto 20px auto;
height: 73px;
}
}
.hmenu-list__item {
width: 45%;
}
.hmenu-list__item a {
font-size: 3vw;
margin: 0;
color: #2c2c2c;
line-height: 0;
display: block;
background: url("../img/module/hmenu_item_icon1.svg") no-repeat left center/15px;
padding: 15px 0 15px 25px;
}
@media screen and (min-width: 670px) {
.hmenu-list__item a {
font-size: 14px;
}
}
.hmenu-list__item a:hover {
color: #666666;
}
.hmenu-list__language {
position: relative;
width: 50%;
}
.hmenu-list__btn {
border: 1px solid #2c2c2c;
border-radius: 6px;
padding: 1px 25px 1px 10px;
font-size: 3vw;
position: relative;
cursor: pointer;
color: #2c2c2c;
}
@media screen and (min-width: 670px) {
.hmenu-list__btn {
font-size: 14px;
}
}
.hmenu-list__btn::after {
position: absolute;
right: 6px;
top: 10px;
content: "";
background: url("../img/module/hmenu-list_btn_pic.svg") no-repeat left center;
width: 8px;
height: 8px;
}
.hmenu-list__wrap {
position: absolute;
top: 30px;
background: #FFF;
z-index: 9999999999;
width: 100%;
padding: 10px;
display: none;
}
.hmenu-list__wrap.active {
display: block;
}
.hmenu-list__wrapitem {
margin: 0 0 10px 0;
}
.hmenu-list__wrapitem a {
color: #2c2c2c;
}
.hmenu-list__wrapitem a:hover {
color: #666666;
}
.hmenu-nav {
border-bottom: 1px solid #2c2c2c;
padding: 0 0 2vh 0;
margin: 0 auto 2vh auto;
}
@media screen and (min-width: 670px) {
.hmenu-nav {
padding: 0 0 20px 0;
margin: 0 auto 20px auto;
}
}
.hmenu-nav__list {
clear: both;
overflow: hidden;
}
.hmenu-nav__item {
float: left;
width: 50%;
margin: 0 0 1vh 0;
}
@media screen and (min-width: 670px) {
.hmenu-nav__item {
margin: 0 0 10px 0;
}
}
.hmenu-nav__item a {
font-size: 3vw;
margin: 0 1.5vw 0 0;
padding: 3px 0 3px 25px;
color: #2c2c2c;
background: url("../img/module/hmenu-nav_item_pic1.svg") no-repeat left center/20px;
}
@media screen and (min-width: 670px) {
.hmenu-nav__item a {
font-size: 14px;
margin: 0 20px 0 0;
}
}
.hmenu-nav__item a:hover {
color: #666666;
}
.hmenu-nav__item:last-child {
width: 100%;
}
.hmenu {
background: #F0F0E9;
padding: 2vh 3vw;
position: fixed;
right: -100%;
top: 60px;
width: 100%;
height: 100%;
z-index: 99999999;
transition: all 0.4s;
}
@media screen and (min-width: 670px) {
.hmenu {
right: -30%;
width: 30%;
top: 75px;
}
}
.hmenu.active {
right: 0;
transition: all 0.4s;
}
.hmenu__address {
font-size: 2.8vw;
text-align: center;
color: #2c2c2c;
display: block;
}
@media screen and (min-width: 670px) {
.hmenu__address {
font-size: 12px;
}
}
.footer {
background: #F0F0E9;
padding: 8vh 0 3vh 0;
}
@media screen and (min-width: 670px) {
.footer {
padding: 80px 0 40px 0;
}
}
.footer__logo {
width: 70%;
margin: 0 auto;
text-align: center;
}
@media screen and (min-width: 670px) {
.footer__logo {
width: 260px;
margin: 0 auto;
}
}
.footer__logo img {
width: 60%;
margin: 0 auto 2vw auto;
}
@media screen and (min-width: 670px) {
.footer__logo img {
width: 200px;
margin: 0 auto 20px auto;
}
}
.footer__text {
text-align: center;
font-size: 2.6vw;
display: block;
margin: 0 auto 4vw auto;
}
@media screen and (min-width: 670px) {
.footer__text {
font-size: 12px;
margin: 0 auto 40px auto;
}
}
.footer__copyright {
font-size: 2.8vw;
text-align: center;
display: block;
padding: 1vh 0;
border-top: 1px solid #2c2c2c;
width: 90%;
margin: 0 auto;
}
@media screen and (min-width: 670px) {
.footer__copyright {
max-width: 860px;
font-size: 12px;
padding: 20px 0;
}
}
.footer__copyright small {
color: #FFF;
font-weight: 400;
font-size: 2.3880597015vw;
}
@media screen and (min-width: 670px) {
.footer__copyright small {
font-size: 1.2rem;
}
}
@media screen and (min-width: 960px) {
.footer__copyright small {
font-size: 1.2rem;
}
}
.footer-link {
z-index: 9999;
position: fixed;
bottom: 0;
display: none;
}
@media screen and (min-width: 670px) {
.footer-link {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 10px 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
}
.footer-link__url {
width: 100%;
margin: 0 0 2% 0;
}
@media screen and (min-width: 670px) {
.footer-link__url {
width: 250px;
margin: 0 2% 0 0;
}
}
.footer-link__url a {
display: block;
padding: 1.7910447761vw 0 1.1940298507vw;
text-align: center;
color: #FFF;
border-bottom: 4px solid #791B16;
background: #912620;
text-align: center;
letter-spacing: 0.1em;
font-weight: bold;
font-size: 3.2835820896vw;
}
@media screen and (min-width: 670px) {
.footer-link__url a {
font-size: 1.4rem;
}
}
@media screen and (min-width: 960px) {
.footer-link__url a {
font-size: 1.6rem;
}
}
@media screen and (min-width: 670px) {
.footer-link__url a {
padding: 12px 0 8px;
}
}
.footer-link__url a:hover {
background: #791B16;
}
.footer-link__url:last-child {
margin: 0;
}
.footer-link__url:last-child a {
border-bottom: 4px solid #716431;
background: #8E8151;
}
.footer-link__url:last-child a:hover {
background: #716431;
}
.footer-group {
width: 90%;
margin: 0 auto 5vw auto;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 670px) {
.footer-group {
max-width: 860px;
margin: 0 auto 50px auto;
flex-wrap: nowrap;
}
}
.footer-group__item {
width: 49%;
}
.footer-group__item:nth-of-type(1) {
margin: 0 2% 5% 0;
}
.footer-group__item:nth-of-type(2) {
margin: 0 0% 5% 0;
}
.footer-group__item:last-child {
margin: 0 0 0 25%;
}
@media screen and (min-width: 670px) {
.footer-group__item {
width: 265px;
}
.footer-group__item:nth-of-type(1) {
margin: 0 30px 0 0;
}
.footer-group__item:nth-of-type(2) {
margin: 0 30px 0 0;
}
.footer-group__item:last-child {
margin: 0;
}
}
.footer-group__item span {
font-size: 3vw;
text-align: center;
display: block;
}
@media screen and (min-width: 670px) {
.footer-group__item span {
font-size: 13px;
}
}
.footer-group__item a {
opacity: 1;
}
.footer-group__item a img {
width: 100%;
margin: 0 auto 2vw auto;
}
@media screen and (min-width: 670px) {
.footer-group__item a img {
margin: 0 auto 20px auto;
}
}
.footer-group__item a:hover img {
opacity: 0.6;
}
.footer-brand {
width: 90%;
margin: 0 auto 8vw auto;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 670px) {
.footer-brand {
width: 100%;
max-width: 1040px;
margin: 0 auto 50px auto;
}
}
.footer-brand__item {
width: 38%;
}
.footer-brand__item:nth-of-type(1) {
margin: 0 2% 3% 10%;
}
.footer-brand__item:nth-of-type(2) {
margin: 0 0% 3% 0;
}
.footer-brand__item:nth-of-type(3) {
margin: 0 -7% 3% 0;
}
.footer-brand__item:nth-of-type(4) {
margin: 0 -7% 3% 0;
}
.footer-brand__item:nth-of-type(5) {
margin: 0 0% 3% 0;
}
.footer-brand__item:nth-of-type(6) {
margin: 2% 5% 0% 10%;
}
.footer-brand__item:nth-of-type(7) {
margin: 0 0% 0% 0;
}
@media screen and (min-width: 670px) {
.footer-brand__item {
width: 200px;
}
.footer-brand__item:nth-of-type(1) {
margin: 0 80px 20px 0;
}
.footer-brand__item:nth-of-type(2) {
margin: 0 80px 20px 0;
}
.footer-brand__item:nth-of-type(3) {
margin: 0 80px 20px 0;
}
.footer-brand__item:nth-of-type(4) {
margin: 0 0px 20px 0;
}
.footer-brand__item:nth-of-type(5) {
margin: 0 80px 0px 145px;
}
.footer-brand__item:nth-of-type(6) {
margin: 0 80px 0px 0;
}
.footer-brand__item:nth-of-type(7) {
margin: 0 0 0 0;
}
}
.footer-brand__item a {
position: relative;
display: block;
padding: 10px 0;
}
.footer-brand__item a:hover {
opacity: 0.7;
}
.footer-brand__item a img {
width: 100%;
}
.pagetop {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
width: 60px;
height: 60px;
}
.pagetop a {
display: block;
}
.pagetop:hover {
opacity: 0.7;
}
@media screen and (min-width: 670px) {
.gtranslate {
margin: 7px 80px 0 0;
}
}
.gtranslate--gnav {
margin-left: 15px;
display: none;
}
@media screen and (min-width: 1200px) {
.gtranslate--gnav {
display: inline-block;
}
}
.gtranslate .gt_selector {
padding: 0.5970149254vw;
color: #2c2c2c;
border-radius: 1.4925373134vw;
border-color: #707070;
background: #FFF;
font-size: 3.2835820896vw;
}
@media screen and (min-width: 670px) {
.gtranslate .gt_selector {
padding: 4px;
border-radius: 5px;
font-size: 1.2rem;
}
}
@media screen and (min-width: 670px) {
.gtranslate--beige {
margin: 0;
}
}
.gtranslate--beige .gt_selector {
background-color: #F0F0E9;
}
.footer {
background: #2F2F2F;
letter-spacing: 0.2985074627vw;
}
@media screen and (min-width: 670px) {
.footer {
letter-spacing: 2px;
}
}
.footer__text {
color: #FFF;
}
.footer__logo img {
width: auto;
}
@media screen and (min-width: 520px) {
.footer__logo img {
width: 200px;
}
}
.footer__copyright {
color: #FFF;
}
.hmenu {
background: #2F2F2F;
letter-spacing: 0.2985074627vw;
}
@media screen and (min-width: 670px) {
.hmenu {
letter-spacing: 2px;
}
}
.hmenu__address small {
color: #FFF;
}
@media screen and (min-width: 670px) {
.gtranslate {
line-height: 18px;
}
}
.gtranslate .gt_selector {
padding: 0.5970149254vw;
border-radius: 1.4925373134vw;
font-size: 3.2835820896vw;
border-width: thin;
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
@media screen and (min-width: 670px) {
.gtranslate .gt_selector {
padding: 4px;
border-radius: 5px;
font-size: 0.75rem;
width: 125px;
}
}
.gtranslate--beige .gt_selector {
background-color: #2F2F2F;
color: #FFF;
}
.hmenu-list {
border-bottom: 1px solid #FFF;
}
.hmenu-list__item a {
color: #FFF;
background: url("../img/module/hmenu_item_white_icon.svg") no-repeat left center/15px;
}
.hmenu-nav {
border-bottom: 1px solid #FFF;
}
.hmenu-nav__item a {
color: #FFF;
background: url("../img/module/hmenu-nav_item_white_pic.svg") no-repeat left center/15px;
}
.footer-group__item span {
color: #FFF;
}
.header__top {
letter-spacing: 0.2985074627vw;
}
@media screen and (min-width: 670px) {
.header__top {
letter-spacing: 2px;
}
}
.header__list {
display: none;
}
@media screen and (min-width: 670px) {
.header__list {
line-height: 21px;
}
}
@media screen and (min-width: 960px) {
.header__list {
margin: 10px 60px 0 0;
display: block;
display: flex;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1200px) {
.header__list {
margin: 10px 0 0 0;
}
}
.header__item a {
font-size: 2.8vw;
margin: 0 1.5vw 0 0;
}
@media screen and (min-width: 670px) {
.header__item a {
font-size: 12px;
margin: 0 20px 0 0;
padding: 0 0 0 25px;
white-space: nowrap;
line-height: 21px;
}
}
.header__item a:hover {
color: #666666;
}