@charset "UTF-8";
/*----------------------------------------
clearfix
----------------------------------------*/
/*----------------------------------------
variable
----------------------------------------*/
/*----------------------------------------
reset
----------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, dialog, figure, footer, header, hgroup, main, menu, nav, section,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
header, footer, article, section, aside, hgroup, nav, menu, figure, figcaption, time, main {
display: block;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 500;
font-style: normal;
position: relative;
width: 100%;
line-height: 1.8;
color: #333333;
background: #ffffff;
-webkit-font-smoothing: antialiased;
}
body.is-fixed {
overflow: hidden;
}
li {
list-style: none;
}
ol li {
list-style: decimal;
}
img {
width: 100%;
height: auto;
border: 0;
vertical-align: top;
font-size: 0;
line-height: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
hr {
margin: 1em 0;
padding: 0;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #d5d5d5;
}
input, select {
vertical-align: middle;
}
input, textarea {
margin: 0;
padding: 0;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
address {
font-style: normal;
}
a {
color: inherit;
outline: none;
text-decoration: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a:hover {
opacity: 0.7;
}
a.p-values__link:hover,
a.p-flow__item:hover,
a.p-produce__link:hover,
a.p-bnr__item:hover,
a.p-special__link:hover,
a.p-works__label:hover,
.p-bnr__trio a:hover {
opacity: 1;
}
/*----------------------------------------
Web Font / font family
※ 読み込みは index.html の で行う
@include En … Times New Roman（欧文見出し／The Premium Renovation）
@include Mincho … 游明朝体（和文明朝）
@include Gothic … 游ゴシック Std（和文ゴシック／本文）
※ 未インストール環境用に Noto Sans JP をフォールバック
----------------------------------------*/
/*----------------------------------------
fontSize
----------------------------------------*/
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.u-wrapper-l {
max-width: 1500px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.u-wrapper-l {
padding: 0 20px;
}
}
.u-wrapper-m {
max-width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.u-wrapper-m {
padding: 0 20px;
}
}
.u-wrapper-s {
max-width: 800px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.u-wrapper-s {
padding: 0 20px;
}
}
/*----------------------------------------
PC / SP 出し分け
----------------------------------------*/
.u-device-sp {
display: none;
}
@media screen and (max-width: 767px) {
.u-device-sp {
display: block;
}
}
@media screen and (max-width: 767px) {
.u-device-pc {
display: none;
}
}
br.u-device-sp {
display: none;
}
@media screen and (max-width: 767px) {
br.u-device-sp {
display: inline;
}
}
br.u-device-pc {
display: inline;
}
@media screen and (max-width: 767px) {
br.u-device-pc {
display: none;
}
}
span.u-device-sp {
display: none;
}
@media screen and (max-width: 767px) {
span.u-device-sp {
display: inline;
}
}
span.u-device-pc {
display: inline;
}
@media screen and (max-width: 767px) {
span.u-device-pc {
display: none;
}
}
/*----------------------------------------
スクリーンリーダー用（視覚的に隠す）
----------------------------------------*/
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*----------------------------------------
矢印パーツ（SVG）
assets/img/common/ico_arrow.svg を mask で読み込み、
background-color で色を切り替える
----------------------------------------*/
/*----------------------------------------
c-ttl セクション見出し
----------------------------------------*/
.c-ttl {
display: block;
text-align: center;
color: #ffffff;
}
.c-ttl.-black {
color: #333333;
}
.c-ttl__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 4rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.c-ttl__en {
font-size: 2.6rem;
}
}
.c-ttl__ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.4;
margin-top: 2px;
}
@media screen and (max-width: 767px) {
.c-ttl__ja {
font-size: 1.4rem;
margin-top: 4px;
}
}
/*----------------------------------------
c-btn 共通ボタンパーツ
1px罫線／テキスト左寄せ／右端に矢印
テキスト
モディファイア
.-lg … 幅390px（ヴィンテージマンションを見る など）
.-white … 濃色背景の上（すべての施工事例を見る など）
----------------------------------------*/
.c-btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 320px;
height: 66px;
padding: 0 60px 0 36px;
border: 1px solid #333333;
color: #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 1.5rem;
line-height: 1.4;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
}
.c-btn.-lg {
width: 390px;
}
.c-btn__arrow {
position: absolute;
right: 16px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
width: 19px;
height: 16.321px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
height: 15px;
-webkit-transition: background-color 0.4s, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: background-color 0.4s, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-btn:hover {
opacity: 1;
background: #333333;
color: #ffffff;
}
.c-btn:hover .c-btn__arrow {
-webkit-transform: translate(6px, -50%);
transform: translate(6px, -50%);
}
.c-btn.-white {
border-color: #ffffff;
color: #ffffff;
}
.c-btn.-white:hover {
background: #ffffff;
color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.c-btn {
width: 100%;
max-width: 320px;
height: 58px;
padding: 0 50px 0 24px;
font-size: 1.4rem;
}
.c-btn.-lg {
width: 100%;
}
}
/*----------------------------------------
c-editor 本文エリア（WordPress ブロックエディタ出力）
── クライアントはクラスを一切書かない前提 ──
・画像は常に1枚ずつ（横並びなし）
・通常の画像ブロック → コンテンツ幅 1080px
・ツールバー「幅広」(alignwide) → 1280px
・ツールバー「全幅」(alignfull) → 画面いっぱい
・サイドバーで幅を数値指定 → その幅で中央寄せ（キャプションも画像幅に揃う）
・キャプションを入れたブロック → そこがセクションの区切り（下の余白が広がる）
----------------------------------------*/
.c-editor {
/* ------ ブロックの幅 ------ */
}
.c-editor > * {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.c-editor > .alignwide {
max-width: 1280px;
}
.c-editor > .alignfull {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.c-editor {
/* ------ ブロック間の余白 ------
既定は広め。直前のブロックにキャプションが無い場合だけ詰める
（＝キャプション付きのブロックがセクションの終わり） */
}
.c-editor > * + * {
margin-top: 90px;
}
@media screen and (max-width: 767px) {
.c-editor > * + * {
margin-top: 44px;
}
}
.c-editor > *:not(:has(figcaption)) + * {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.c-editor > *:not(:has(figcaption)) + * {
margin-top: 10px;
}
}
.c-editor {
/* 埋め込み（動画）は常に独立したセクション扱い */
}
.c-editor > .wp-block-embed + * {
margin-top: 90px;
}
@media screen and (max-width: 767px) {
.c-editor > .wp-block-embed + * {
margin-top: 44px;
}
}
.c-editor {
/* ------ 画像ブロック ------ */
}
.c-editor .wp-block-image {
margin-bottom: 0;
}
.c-editor .wp-block-image img {
display: block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.c-editor .wp-block-image {
/* サイドバーで幅を数値指定したとき（is-resized）
画像幅で中央寄せし、キャプションも画像幅に揃える */
}
.c-editor .wp-block-image.is-resized {
display: table;
width: auto;
margin-left: auto;
margin-right: auto;
}
.c-editor .wp-block-image.is-resized img {
width: auto;
max-width: 100%;
}
@media screen and (max-width: 767px) {
.c-editor .wp-block-image.is-resized img {
width: 100%;
}
}
.c-editor .wp-block-image.is-resized figcaption {
display: table-caption;
caption-side: bottom;
}
@media screen and (max-width: 767px) {
.c-editor .wp-block-image.is-resized {
display: block;
width: auto;
}
.c-editor .wp-block-image.is-resized figcaption {
display: block;
}
}
.c-editor {
/* ------ キャプション ------ */
}
.c-editor figcaption {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 30px;
color: #333333;
text-align: left;
margin-top: 16px;
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.c-editor figcaption {
font-size: 1.3rem;
line-height: 24px;
margin-top: 10px;
}
}
.c-editor {
/* ------ 埋め込みブロック（YouTube など） ------ */
}
.c-editor .wp-block-embed {
margin-bottom: 0;
}
.c-editor .wp-block-embed__wrapper iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border: 0;
}
.c-editor {
/* ------ 段落・見出し ------ */
}
.c-editor p {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
}
@media screen and (max-width: 767px) {
.c-editor p {
font-size: 1.4rem;
line-height: 30px;
}
}
.c-editor h2 {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 3rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.c-editor h2 {
font-size: 2rem;
}
}
.c-editor h3 {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 2.2rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.c-editor h3 {
font-size: 1.7rem;
}
}
/*----------------------------------------
スクロールで出現するアニメーション
.js-fade … フェード＋下から持ち上げ
.js-fade-stagger … 直下の子要素を少しずつ遅らせて出現
.js-fade-in … フェードのみ（配置に transform を使う要素用）
JS で に .js-anim が付いたときだけ効く（JS無効時は常に表示）
※ transform ではなく translate プロパティを使用。
要素自身の transform（中央寄せなど）を打ち消さないため。
----------------------------------------*/
.js-anim .js-fade {
opacity: 0;
translate: 0 40px;
-webkit-transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), translate 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), translate 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-anim .js-fade.is-in {
opacity: 1;
translate: 0 0;
}
.js-anim .js-fade-stagger > * {
opacity: 0;
translate: 0 40px;
-webkit-transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), translate 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), translate 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-anim .js-fade-stagger.is-in > * {
opacity: 1;
translate: 0 0;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(2) {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(3) {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(4) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(5) {
-webkit-transition-delay: 0.56s;
transition-delay: 0.56s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(6) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(7) {
-webkit-transition-delay: 0.84s;
transition-delay: 0.84s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(8) {
-webkit-transition-delay: 0.98s;
transition-delay: 0.98s;
}
.js-anim .js-fade-stagger.is-in > *:nth-child(9) {
-webkit-transition-delay: 1.12s;
transition-delay: 1.12s;
}
.js-anim .js-fade-in {
opacity: 0;
-webkit-transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-anim .js-fade-in.is-in {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.js-anim .js-fade,
.js-anim .js-fade-in,
.js-anim .js-fade-stagger > * {
opacity: 1 !important;
translate: none !important;
-webkit-transition: none !important;
transition: none !important;
}
}
/*----------------------------------------
c-movie 動画のモーダル
----------------------------------------*/
.c-movie {
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 100%;
height: 100%;
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: 20px;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.4s, visibility 0.4s;
transition: opacity 0.4s, visibility 0.4s;
}
.c-movie.is-open {
opacity: 1;
visibility: visible;
}
.c-movie__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.88);
}
.c-movie__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1120px;
}
.c-movie__body {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
}
.c-movie__body video,
.c-movie__body iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.c-movie {
/* 閉じる（×） */
}
.c-movie__close {
position: absolute;
right: 0;
bottom: calc(100% + 18px);
width: 40px;
height: 40px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
@media screen and (max-width: 767px) {
.c-movie__close {
width: 32px;
height: 32px;
bottom: calc(100% + 12px);
}
}
.c-movie__close::before, .c-movie__close::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #ffffff;
}
.c-movie__close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-movie__close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----------------------------------------
共通レイアウト
----------------------------------------*/
.l-main {
display: block;
overflow-x: clip;
}
.l-inner {
max-width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.l-inner {
padding: 0 20px;
}
}
.l-inner-l {
max-width: 1500px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.l-inner-l {
padding: 0 20px;
}
}
/*----------------------------------------
l-header
----------------------------------------*/
.l-header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
color: #ffffff;
border-bottom: 1px solid transparent;
-webkit-transition: background-color 0.5s, color 0.5s, border-color 0.5s;
transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}
.l-header__inner {
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: 22px 30px;
}
@media screen and (max-width: 767px) {
.l-header__inner {
height: 56px;
padding: 0 0 0 18px;
}
}
.l-header {
/* ------ logo（SVG 1枚 / PC 253px・SP 210px）
ファーストビュー上は filter で白抜き、スクロール後はロゴ本来の色 ------ */
}
.l-header__logo {
display: block;
width: 253px;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
-webkit-transition: opacity 0.3s, -webkit-filter 0.5s;
transition: opacity 0.3s, -webkit-filter 0.5s;
transition: filter 0.5s, opacity 0.3s;
transition: filter 0.5s, opacity 0.3s, -webkit-filter 0.5s;
}
.l-header__logo:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.l-header__logo {
width: 210px;
}
}
.l-header__logo img {
display: block;
width: 100%;
height: auto;
}
.l-header {
/* ------ right ------ */
}
.l-header__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.l-header__right {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0;
font-size: 0;
}
}
.l-header__contact {
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;
height: 60px;
padding: 0 48px;
background: rgba(60, 59, 58, 0.82);
color: #ffffff;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.6rem;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.l-header__contact:hover {
opacity: 1;
background: #3c3b3a;
}
.l-header__contact img {
display: block;
width: 22px;
height: auto;
margin-left: 12px;
}
@media screen and (max-width: 767px) {
.l-header__contact-txt {
display: none;
}
}
@media screen and (max-width: 767px) {
.l-header__contact {
width: 56px;
height: 56px;
padding: 0;
background: #333333;
}
.l-header__contact img {
width: 20px;
margin-left: 0;
}
}
.l-header__menu {
width: 70px;
height: 30px;
margin-left: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.l-header__menu span {
display: block;
width: 70px;
height: 1px;
background: currentColor;
-webkit-transition: opacity 0.25s, -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
transition: opacity 0.25s, -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s, -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.l-header__menu {
width: 56px;
height: 56px;
margin-left: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #333333;
}
.l-header__menu span {
width: 34px;
background: #ffffff;
}
.l-header__menu span + span {
margin-top: 8px;
}
}
.l-header {
/* ------ 下層ページ：最初から白背景 ------ */
}
.l-header.-solid {
background: #ffffff;
color: #333333;
border-bottom-color: #707070;
}
.l-header.-solid .l-header__logo {
-webkit-filter: none;
filter: none;
}
.l-header.-solid .l-header__contact {
background: #3c3b3a;
}
@media screen and (max-width: 767px) {
.l-header.-solid .l-header__contact,
.l-header.-solid .l-header__menu {
background: #333333;
}
}
.l-header {
/* ------ スクロール時：白背景 ＋ 下部1px #707070 ------ */
}
.l-header.is-scrolled {
background: #ffffff;
}
.l-header.is-scrolled .l-header__logo {
-webkit-filter: none;
filter: none;
}
.l-header.is-scrolled {
color: #333333;
border-bottom-color: #707070;
}
.l-header.is-scrolled .l-header__contact {
background: #3c3b3a;
}
@media screen and (max-width: 767px) {
.l-header.is-scrolled .l-header__contact,
.l-header.is-scrolled .l-header__menu {
background: #333333;
}
}
.l-header {
/* ------ ドロワー展開時 ------
PC : パネルが右寄せなので、ヘッダーは背景を敷かない（ロゴは元の状態のまま）
SP : メニューと同じ背景色 ------ */
}
.l-header.is-open {
background: transparent;
color: #333333;
border-bottom-color: transparent;
}
.l-header.is-open .l-header__contact {
background: #3c3b3a;
}
@media screen and (max-width: 767px) {
.l-header.is-open {
background: #F2F2F2;
border-bottom-color: #707070;
}
.l-header.is-open .l-header__logo {
-webkit-filter: none;
filter: none;
}
.l-header.is-open .l-header__contact,
.l-header.is-open .l-header__menu {
background: #333333;
}
}
.l-header.is-open .l-header__menu span:nth-child(1) {
-webkit-transform: translateY(14px) rotate(22deg);
transform: translateY(14px) rotate(22deg);
}
.l-header.is-open .l-header__menu span:nth-child(2) {
opacity: 0;
}
.l-header.is-open .l-header__menu span:nth-child(3) {
-webkit-transform: translateY(-14px) rotate(-22deg);
transform: translateY(-14px) rotate(-22deg);
}
@media screen and (max-width: 767px) {
.l-header.is-open .l-header__menu span:nth-child(1) {
-webkit-transform: translateY(9px) rotate(22deg);
transform: translateY(9px) rotate(22deg);
}
.l-header.is-open .l-header__menu span:nth-child(3) {
-webkit-transform: translateY(-9px) rotate(-22deg);
transform: translateY(-9px) rotate(-22deg);
}
}
/*----------------------------------------
l-drawer ハンバーガーメニュー展開時
（AUN修正⑲ 新デザイン）
PC : 画面右寄せ 820px の半透明ライトグレーパネル
SP : 画面全体をライトグレーで覆う
----------------------------------------*/
.l-drawer {
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
background: transparent;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.45s, visibility 0.45s;
transition: opacity 0.45s, visibility 0.45s;
}
@media screen and (max-width: 767px) {
.l-drawer {
background: #F2F2F2;
}
}
.l-drawer.is-open {
opacity: 1;
visibility: visible;
}
.l-drawer__inner {
position: absolute;
top: 0;
right: 0;
width: 820px;
max-width: 100%;
height: 100%;
overflow-y: auto;
background: rgba(242, 242, 242, 0.94);
padding: 219px 87px 60px;
}
@media screen and (max-width: 767px) {
.l-drawer__inner {
position: static;
width: auto;
max-width: none;
height: 100%;
background: #F2F2F2;
padding: 84px 15px 24px;
}
}
.l-drawer__spacer {
display: none;
}
.l-drawer {
/* ------ nav ------ */
}
@media screen and (max-width: 767px) {
.l-drawer__nav {
display: block;
}
}
.l-drawer__nav-main li {
line-height: 1;
}
.l-drawer__nav-main li + li {
margin-top: 26px;
}
@media screen and (max-width: 767px) {
.l-drawer__nav-main li + li {
margin-top: 19px;
}
}
.l-drawer__nav-main a {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.6rem;
line-height: 1;
letter-spacing: 0.01em;
color: #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-drawer__nav-main a:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.l-drawer__nav-main a {
font-size: 1.9rem;
letter-spacing: 0.02em;
}
}
.l-drawer__nav-sub {
display: -ms-grid;
display: grid;
grid-auto-flow: column;
-ms-grid-rows: (auto)[3];
grid-template-rows: repeat(3, auto);
-ms-grid-columns: 241px 1fr;
grid-template-columns: 241px 1fr;
margin-top: 39px;
}
.l-drawer__nav-sub > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-drawer__nav-sub > *:nth-child(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.l-drawer__nav-sub > *:nth-child(3) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.l-drawer__nav-sub > *:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.l-drawer__nav-sub > *:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
.l-drawer__nav-sub > *:nth-child(6) {
-ms-grid-row: 3;
-ms-grid-column: 2;
}
@media screen and (max-width: 767px) {
.l-drawer__nav-sub {
-ms-grid-columns: 180px 1fr;
grid-template-columns: 180px 1fr;
margin-top: 30px;
}
}
.l-drawer__nav-sub li {
line-height: 1;
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.l-drawer__nav-sub li {
margin-bottom: 12px;
}
}
.l-drawer__nav-sub a {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.8rem;
line-height: 1;
letter-spacing: 0.02em;
color: #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-drawer__nav-sub a:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.l-drawer__nav-sub a {
font-size: 1.6rem;
letter-spacing: 0;
}
}
.l-drawer {
/* ------ info ------ */
}
.l-drawer__info {
margin-top: 41px;
color: #333333;
}
@media screen and (max-width: 767px) {
.l-drawer__info {
margin-top: 11px;
}
}
.l-drawer__address {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 24px;
font-style: normal;
}
@media screen and (max-width: 767px) {
.l-drawer__address {
font-size: 1.4rem;
line-height: 20px;
}
}
.l-drawer__sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 37px;
}
@media screen and (max-width: 767px) {
.l-drawer__sns {
margin-top: 26px;
}
}
.l-drawer__sns li + li {
margin-left: 36px;
}
@media screen and (max-width: 767px) {
.l-drawer__sns li + li {
margin-left: 33px;
}
}
.l-drawer__sns a {
display: block;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-drawer__sns a:hover {
opacity: 0.6;
}
.l-drawer__sns img {
display: block;
width: auto;
height: 38px;
}
@media screen and (max-width: 767px) {
.l-drawer__sns img {
height: 34px;
}
}
.l-drawer__sns li:nth-child(3) img {
height: 34px;
}
@media screen and (max-width: 767px) {
.l-drawer__sns li:nth-child(3) img {
height: 29px;
}
}
.l-drawer__sns li:nth-child(4) {
margin-left: 21px;
}
@media screen and (max-width: 767px) {
.l-drawer__sns li:nth-child(4) {
margin-left: 17px;
}
}
.l-drawer__sns .-note img {
height: 36px;
}
@media screen and (max-width: 767px) {
.l-drawer__sns .-note img {
height: 33px;
}
}
.l-drawer__organize {
margin-top: 32px;
}
@media screen and (max-width: 767px) {
.l-drawer__organize {
margin-top: 20px;
}
}
.l-drawer__organize-label {
display: block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.2rem;
line-height: 1.4;
}
.l-drawer__apollo {
display: inline-block;
margin-top: 8px;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
.l-drawer__apollo {
margin-top: 4px;
}
}
.l-drawer__apollo:hover {
opacity: 0.8;
}
.l-drawer__apollo img {
display: block;
width: 231px;
height: auto;
}
@media screen and (max-width: 767px) {
.l-drawer__apollo img {
width: 170px;
}
}
/*----------------------------------------
l-footer フッター
（AUN修正⑫⑱ 新デザイン）
PC : ロゴ ／ 大項目5・小項目6（1列）・会社情報 の3カラム
SP : 縦積み。小項目のみ2列
----------------------------------------*/
.l-footer {
background: #F2F2F2;
padding: 79px 20px 22px;
}
@media screen and (max-width: 767px) {
.l-footer {
padding: 47px 15px 10px;
}
}
.l-footer__inner {
display: -ms-grid;
display: grid;
-ms-grid-columns: 331px 406px 1fr;
grid-template-columns: 331px 406px 1fr;
max-width: 1080px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.l-footer__inner {
display: block;
max-width: none;
}
}
.l-footer {
/* ------ ロゴ ------ */
}
.l-footer__logo {
grid-column: 1/-1;
margin-bottom: 45px;
}
@media screen and (max-width: 767px) {
.l-footer__logo {
margin-bottom: 62px;
}
}
.l-footer__logo a {
display: inline-block;
}
.l-footer__logo img {
display: block;
width: 308px;
height: auto;
}
@media screen and (max-width: 767px) {
.l-footer__logo img {
width: 209px;
}
}
.l-footer {
/* ------ ナビ ------ */
}
.l-footer__nav {
display: contents;
}
@media screen and (max-width: 767px) {
.l-footer__nav {
display: block;
}
}
.l-footer__nav-main {
-ms-grid-column: 1;
grid-column: 1;
}
@media screen and (max-width: 767px) {
.l-footer__nav-main {
margin-bottom: 42px;
}
}
.l-footer__nav-main li {
line-height: 1;
}
.l-footer__nav-main li + li {
margin-top: 23px;
}
@media screen and (max-width: 767px) {
.l-footer__nav-main li + li {
margin-top: 21px;
}
}
.l-footer__nav-main a {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.2rem;
line-height: 1;
letter-spacing: 0.02em;
color: #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-footer__nav-main a:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.l-footer__nav-main a {
font-size: 2.2rem;
}
}
.l-footer__nav-sub {
-ms-grid-column: 2;
grid-column: 2;
}
@media screen and (max-width: 767px) {
.l-footer__nav-sub {
display: -ms-grid;
display: grid;
grid-auto-flow: column;
-ms-grid-rows: (auto)[3];
grid-template-rows: repeat(3, auto);
-ms-grid-columns: 179px 1fr;
grid-template-columns: 179px 1fr;
margin-bottom: 60px;
}
.l-footer__nav-sub > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-footer__nav-sub > *:nth-child(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.l-footer__nav-sub > *:nth-child(3) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.l-footer__nav-sub > *:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.l-footer__nav-sub > *:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
.l-footer__nav-sub > *:nth-child(6) {
-ms-grid-row: 3;
-ms-grid-column: 2;
}
}
.l-footer__nav-sub li {
line-height: 1;
}
.l-footer__nav-sub li + li {
margin-top: 17px;
}
@media screen and (max-width: 767px) {
.l-footer__nav-sub li + li {
margin-top: 0;
}
}
@media screen and (max-width: 767px) {
.l-footer__nav-sub li {
margin-bottom: 12px;
}
}
.l-footer__nav-sub a {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.6rem;
line-height: 1;
letter-spacing: 0.02em;
color: #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-footer__nav-sub a:hover {
opacity: 0.6;
}
.l-footer {
/* ------ 会社情報 ------ */
}
.l-footer__info {
-ms-grid-column: 3;
grid-column: 3;
}
.l-footer__address {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 21px;
font-style: normal;
color: #333333;
}
@media screen and (max-width: 767px) {
.l-footer__address {
font-size: 1.5rem;
line-height: 25px;
}
}
.l-footer__sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 18px;
}
@media screen and (max-width: 767px) {
.l-footer__sns {
margin-top: 24px;
}
}
.l-footer__sns li + li {
margin-left: 25px;
}
@media screen and (max-width: 767px) {
.l-footer__sns li + li {
margin-left: 24px;
}
}
.l-footer__sns a {
display: block;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-footer__sns a:hover {
opacity: 0.6;
}
.l-footer__sns img {
display: block;
width: auto;
height: 32px;
}
@media screen and (max-width: 767px) {
.l-footer__sns img {
height: 33px;
}
}
.l-footer__sns .-note img {
height: 26px;
}
@media screen and (max-width: 767px) {
.l-footer__sns .-note img {
height: 27px;
}
}
.l-footer__organize {
margin-top: 47px;
}
@media screen and (max-width: 767px) {
.l-footer__organize {
margin-top: 31px;
}
}
.l-footer__organize-label {
display: block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.2rem;
line-height: 1.4;
color: #333333;
}
.l-footer__apollo {
display: inline-block;
margin-top: 2px;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.l-footer__apollo:hover {
opacity: 0.8;
}
.l-footer__apollo img {
display: block;
width: 200px;
height: auto;
}
@media screen and (max-width: 767px) {
.l-footer__apollo img {
width: 198px;
}
}
.l-footer {
/* ------ コピーライト ------ */
}
.l-footer__copy {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.1rem;
line-height: 1.4;
color: #333333;
text-align: center;
margin-top: 32px;
}
@media screen and (max-width: 767px) {
.l-footer__copy {
font-size: 1.3rem;
margin-top: 17px;
}
}
/*----------------------------------------
p-common
----------------------------------------*/
/*========================================
front / TOP
========================================*/
/*----------------------------------------
p-mv メインビジュアル
----------------------------------------*/
.p-mv {
position: relative;
width: 100%;
height: 100vh;
min-height: 620px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-mv {
height: 100svh;
min-height: 560px;
}
}
.p-mv__movie {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-mv__movie::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.12);
}
.p-mv__img, .p-mv__video {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-mv__video {
z-index: 1;
opacity: 0;
-webkit-transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-mv__video.is-ready {
opacity: 1;
}
.p-mv.is-movie .p-mv__ttl {
opacity: 0;
visibility: hidden;
}
.p-mv__ttl {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-weight: 400;
font-size: 7rem;
line-height: 1.2;
color: #ffffff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
@media screen and (max-width: 767px) {
.p-mv__ttl {
font-size: 3rem;
}
}
/*----------------------------------------
p-message
----------------------------------------*/
.p-message {
padding: 80px 20px 70px;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-message {
padding: 88px 20px 70px;
}
}
.p-message__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-message__txt {
font-size: 1.4rem;
line-height: 36px;
}
}
.p-message__dash {
letter-spacing: -0.1em;
margin-right: -0.1em;
}
/*----------------------------------------
p-values Values01〜05
PC：5カラム／縦組み SP：横並び1カラム／横組み
----------------------------------------*/
.p-values__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2px;
background: #ffffff;
}
@media screen and (max-width: 767px) {
.p-values__list {
display: block;
gap: 0;
}
}
.p-values__item {
-webkit-box-flex: 1;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-values__item {
width: 100%;
}
}
.p-values__link {
position: relative;
display: block;
width: 100%;
aspect-ratio: 383/980;
min-height: 830px;
overflow: hidden;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-values__link {
aspect-ratio: 2/1;
min-height: 0;
}
}
.p-values__link:hover .p-values__img img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.p-values__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.p-values__img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.32)), color-stop(40%, rgba(0, 0, 0, 0.12)), to(rgba(0, 0, 0, 0.3)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.3) 100%);
}
@media screen and (max-width: 767px) {
.p-values__img::after {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.55)), color-stop(45%, rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.55)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.55) 100%);
}
}
.p-values__img picture {
display: block;
width: 100%;
height: 100%;
}
.p-values__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-values__body {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
}
@media screen and (max-width: 767px) {
.p-values__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 32px;
}
}
.p-values__arrow {
display: none;
}
@media screen and (max-width: 767px) {
.p-values__arrow {
position: relative;
display: block;
width: 30px;
height: 30px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-values__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-values__arrow {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 2;
}
}
.p-values__num {
position: absolute;
top: 52px;
left: 0;
width: 100%;
text-align: center;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 1.4rem;
letter-spacing: 0.06em;
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-values__num {
position: static;
width: auto;
font-size: 1.2rem;
}
}
.p-values__line {
position: absolute;
top: 92px;
left: 50%;
display: block;
width: 1px;
height: 62px;
background: #ffffff;
}
@media screen and (max-width: 767px) {
.p-values__line {
position: static;
height: 24px;
margin: 8px 0 8px;
}
}
.p-values__ttl {
position: absolute;
top: 182px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
max-height: calc(100% - 220px);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-weight: 400;
font-size: 3rem;
line-height: 1.5;
letter-spacing: 0.16em;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-values__ttl {
position: static;
-webkit-transform: none;
transform: none;
max-height: none;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
font-size: 2rem;
line-height: 1.6;
letter-spacing: 0;
text-align: center;
padding: 0 16px;
}
}
.p-values__ttl .en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
}
/*----------------------------------------
p-works SIGNATURE WORKS
----------------------------------------*/
.p-works {
background: #3c3b3a;
color: #ffffff;
padding: 110px 0 120px;
}
@media screen and (max-width: 767px) {
.p-works {
padding: 88px 0 80px;
}
}
.p-works__head {
margin-bottom: 90px;
}
@media screen and (max-width: 767px) {
.p-works__head {
margin-bottom: 32px;
}
}
.p-works__block {
margin-bottom: 76px;
}
@media screen and (max-width: 767px) {
.p-works__block {
margin-bottom: 34px;
}
}
.p-works__bar {
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;
padding: 0 30px 12px;
}
@media screen and (max-width: 767px) {
.p-works__bar {
padding: 0 14px 8px;
}
}
.p-works__label {
display: block;
}
.p-works__label .en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.4rem;
line-height: 1.4;
letter-spacing: 0.06em;
}
@media screen and (max-width: 767px) {
.p-works__label .en {
font-size: 1.7rem;
letter-spacing: 0.04em;
}
}
.p-works__label .ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-works__label .ja {
font-size: 1.4rem;
}
}
.p-works__ctrl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
@media screen and (max-width: 767px) {
.p-works__ctrl {
display: none;
}
}
.p-works__arrow {
position: relative;
display: block;
width: 30px;
height: 30px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-works__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-works__arrow + .p-works__arrow {
margin-left: 6px;
}
.p-works__arrow.js-marquee-prev::before {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.p-works__arrow:hover {
background: #ffffff;
}
.p-works__arrow:hover::before {
background-color: #3c3b3a;
}
.p-works__count {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
margin-left: 16px;
}
.p-works__count em {
font-style: normal;
}
.p-works__viewport {
width: 100%;
overflow: hidden;
-ms-touch-action: pan-y;
touch-action: pan-y;
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.p-works__viewport.is-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.p-works__viewport img {
pointer-events: none;
}
.p-works__track {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
will-change: transform;
}
.p-works__slide {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 72vw;
max-width: 1400px;
padding-right: 4px;
}
@media screen and (max-width: 767px) {
.p-works__slide {
width: 64vw;
padding-right: 2px;
}
}
.p-works__slide img {
display: block;
width: 100%;
aspect-ratio: 1400/900;
-o-object-fit: cover;
object-fit: cover;
}
.p-works__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 34px;
padding: 0 30px;
}
@media screen and (max-width: 767px) {
.p-works__more {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 24px;
padding: 0 20px;
}
}
/*----------------------------------------
p-flow WORK FLOW
PC：テキスト／画像の横並び SP：画像→テキストの縦並び
----------------------------------------*/
.p-flow__head {
padding: 110px 20px 80px;
}
@media screen and (max-width: 767px) {
.p-flow__head {
padding: 92px 20px 26px;
}
}
.p-flow__list {
display: block;
}
.p-flow__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
@media screen and (max-width: 767px) {
.p-flow__item {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.p-flow__item.-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
.p-flow__item.-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.p-flow__item:hover .p-flow__body {
background: #ffffff;
color: #333333;
}
.p-flow__item:hover .p-flow__arrow {
border-color: #333333;
}
.p-flow__item:hover .p-flow__arrow::before {
background-color: #333333;
}
.p-flow__item:hover .p-flow__img img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.p-flow__body {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 90px 60px 110px;
background: #3c3b3a;
color: #ffffff;
text-align: center;
-webkit-transition: background-color 0.5s, color 0.5s;
transition: background-color 0.5s, color 0.5s;
}
@media screen and (max-width: 767px) {
.p-flow__body {
display: block;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
min-height: 203px;
padding: 57px 58px 0;
text-align: left;
}
.p-flow__body::before {
content: "";
position: absolute;
top: 22px;
right: 30px;
bottom: 23px;
left: 30px;
border: 1px solid rgba(255, 255, 255, 0.8);
pointer-events: none;
-webkit-transition: border-color 0.5s;
transition: border-color 0.5s;
}
}
@media screen and (max-width: 767px) {
.p-flow__item:hover .p-flow__body::before {
border-color: #333333;
}
}
.p-flow__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.9rem;
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.p-flow__en {
font-size: 1.5rem;
line-height: 1.4;
}
}
.p-flow__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-weight: 400;
font-size: 2.4rem;
line-height: 1.5;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-flow__ttl {
font-size: 1.8rem;
line-height: 27px;
margin-top: 11px;
}
}
.p-flow__arrow {
position: relative;
display: block;
width: 60px;
height: 60px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-flow__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -8.84px 0 0 -10px;
display: block;
width: 20px;
height: 17.68px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-flow__arrow {
position: absolute;
right: 22px;
bottom: 22px;
}
@media screen and (max-width: 767px) {
.p-flow__arrow {
right: 40px;
bottom: 35px;
width: 29px;
height: 28px;
}
.p-flow__arrow::before {
width: 12px;
height: 10.608px;
margin: -5.304px 0 0 -6px;
}
}
.p-flow__img {
-webkit-box-flex: 1;
-ms-flex: 1 1 60%;
flex: 1 1 60%;
min-width: 0;
overflow: hidden;
}
.p-flow__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-flow__img img {
height: auto;
aspect-ratio: 390/207;
}
}
/*----------------------------------------
p-produce PRODUCE CASE
PC：4カラム SP：1カラム
----------------------------------------*/
.p-produce__head {
padding: 110px 20px 70px;
}
@media screen and (max-width: 767px) {
.p-produce__head {
padding: 92px 20px 24px;
}
}
.p-produce__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 4px;
padding: 0 50px;
}
@media screen and (max-width: 767px) {
.p-produce__list {
display: block;
padding: 0;
}
}
.p-produce__item {
-webkit-box-flex: 1;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-produce__item {
width: 100%;
}
.p-produce__item + .p-produce__item {
margin-top: 2px;
}
}
.p-produce__link {
position: relative;
display: block;
width: 100%;
aspect-ratio: 450/222;
overflow: hidden;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-produce__link {
aspect-ratio: 3/1;
}
}
.p-produce__link:hover .p-produce__img img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.p-produce__link:hover .p-produce__arrow {
background: #ffffff;
}
.p-produce__link:hover .p-produce__arrow::before {
background-color: #3c3b3a;
}
.p-produce__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.p-produce__img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
.p-produce__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-produce__ttl {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.6rem;
line-height: 1.3;
}
@media screen and (max-width: 767px) {
.p-produce__ttl {
font-size: 2.6rem;
}
}
.p-produce__arrow {
position: relative;
display: block;
width: 34px;
height: 34px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-produce__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-produce__arrow {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
}
@media screen and (max-width: 767px) {
.p-produce__arrow {
right: 14px;
bottom: 14px;
width: 28px;
height: 28px;
}
.p-produce__arrow::before {
width: 12px;
height: 10.608px;
margin: -5.304px 0 0 -6px;
}
}
.p-produce__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 66px;
}
@media screen and (max-width: 767px) {
.p-produce__more {
margin-top: 30px;
padding: 0 20px;
}
}
/*----------------------------------------
p-gallery Premium Residence Gallery
----------------------------------------*/
.p-gallery {
padding: 110px 20px 120px;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-gallery {
padding: 92px 0 80px;
}
}
@media screen and (max-width: 767px) {
.p-gallery__head {
padding: 0 20px;
}
}
.p-gallery__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0;
max-width: 1000px;
margin: 60px auto 0;
font-size: 0;
}
@media screen and (max-width: 767px) {
.p-gallery__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 0 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin-top: 26px;
}
}
.p-gallery__list li {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0;
}
@media screen and (max-width: 767px) {
.p-gallery__list li {
width: 100%;
}
}
.p-gallery__list li picture {
display: block;
}
.p-gallery__list li img {
display: block;
width: 100%;
height: auto;
}
.p-gallery__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 66px;
}
@media screen and (max-width: 767px) {
.p-gallery__more {
margin-top: 30px;
padding: 0 20px;
}
}
/*----------------------------------------
p-special Special Edit（YouTube）
----------------------------------------*/
.p-special__link {
position: relative;
display: block;
}
.p-special__link:hover .p-special__img img {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
.p-special__img {
overflow: hidden;
}
.p-special__img picture {
display: block;
}
.p-special__img img {
display: block;
width: 100%;
aspect-ratio: 1920/460;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-special__img img {
aspect-ratio: 5/2;
}
}
.p-special__body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-special__body {
left: 35%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
text-align: left;
}
}
.p-special__play {
display: block;
width: 104px;
margin-right: 34px;
}
.p-special__play img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-special__play {
width: 50px;
margin: 0 0 12px;
}
}
.p-special__txt {
display: block;
color: #333333;
}
.p-special__txt .en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.2rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-special__txt .en {
font-size: 2.2rem;
}
}
.p-special__txt .ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.3rem;
margin-top: 6px;
}
@media screen and (max-width: 767px) {
.p-special__txt .ja {
font-size: 1.2rem;
margin-top: 4px;
}
}
/*----------------------------------------
p-info Information
----------------------------------------*/
.p-info {
padding: 120px 20px 0;
}
@media screen and (max-width: 767px) {
.p-info {
padding: 92px 20px 0;
}
}
.p-info__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-info__head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 22px;
}
@media screen and (max-width: 767px) {
.p-info__head {
display: block;
margin-bottom: 12px;
}
}
.p-info__ttl {
-webkit-box-flex: 0;
-ms-flex: 0 0 320px;
flex: 0 0 320px;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-weight: 400;
font-size: 4rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-info__ttl {
font-size: 2.2rem;
text-align: center;
margin-bottom: 16px;
}
}
.p-info__ttl-ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.06em;
color: #333333;
margin-top: 8px;
}
@media screen and (max-width: 767px) {
.p-info__ttl-ja {
font-size: 1.2rem;
margin-top: 4px;
}
}
.p-info__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.p-info__cat li + li {
margin-left: 8px;
}
.p-info__cat a {
display: block;
min-width: 100px;
padding: 3px 20px;
border: 1px solid #333333;
text-align: center;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.p-info__cat a:hover {
opacity: 1;
background: #333333;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-info__cat a {
min-width: 0;
padding: 1px 14px;
font-size: 1.1rem;
}
}
.p-info__body {
margin-left: 320px;
}
@media screen and (max-width: 767px) {
.p-info__body {
margin-left: 0;
}
}
.p-info__item {
border-bottom: 1px solid #d5d5d5;
}
.p-info__item a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
padding: 32px 6px 12px;
}
@media screen and (max-width: 767px) {
.p-info__item a {
display: block;
padding: 16px 0 12px;
}
}
.p-info__date {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
color: #777;
margin-right: 24px;
}
@media screen and (max-width: 767px) {
.p-info__date {
display: block;
font-size: 1.1rem;
margin: 0 0 4px;
}
}
.p-info__name {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 1.5rem;
line-height: 1.7;
}
@media screen and (max-width: 767px) {
.p-info__name {
font-size: 1.3rem;
line-height: 1.7;
}
}
.p-info__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 46px;
}
@media screen and (max-width: 767px) {
.p-info__more {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 26px;
}
}
/*----------------------------------------
p-event EVENT
PC：3カラム SP：1枚ずつのスライダー
----------------------------------------*/
.p-event {
padding: 110px 20px 130px;
}
@media screen and (max-width: 767px) {
.p-event {
padding: 92px 20px 80px;
}
}
.p-event__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-event__ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-weight: 400;
font-size: 4rem;
line-height: 1.2;
color: #333333;
margin-bottom: 44px;
}
@media screen and (max-width: 767px) {
.p-event__ttl {
display: block;
font-size: 2.2rem;
text-align: center;
margin-bottom: 20px;
}
}
.p-event__ttl-ja {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.06em;
color: #333333;
margin-left: 20px;
}
@media screen and (max-width: 767px) {
.p-event__ttl-ja {
display: block;
font-size: 1.2rem;
margin: 4px 0 0;
}
}
@media screen and (max-width: 767px) {
.p-event__viewport {
overflow: hidden;
-ms-touch-action: pan-y;
touch-action: pan-y;
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.p-event__viewport.is-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.p-event__viewport img {
pointer-events: none;
}
}
.p-event__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 40px 1fr 40px 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
@media screen and (max-width: 767px) {
.p-event__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-grid-columns: none;
grid-template-columns: none;
gap: 0;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
}
.p-event__item a {
display: block;
}
.p-event__item:hover .p-event__pic {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
@media screen and (max-width: 767px) {
.p-event__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding: 0 14px;
}
}
.p-event__thumb {
position: relative;
width: 100%;
aspect-ratio: 3/4;
background: #3c3b3a;
overflow: hidden;
}
.p-event__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: blur(18px) brightness(0.85);
filter: blur(18px) brightness(0.85);
-webkit-transform: scale(1.18);
transform: scale(1.18);
}
.p-event__pic {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-event__name {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.7;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-event__name {
font-size: 1.3rem;
margin-top: 10px;
}
}
.p-event {
/* ------ SPスライダーのコントロール ------ */
}
@media screen and (max-width: 767px) {
.p-event__ctrl {
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;
margin-top: 18px;
}
}
.p-event__arrow {
position: relative;
display: block;
width: 30px;
height: 30px;
border: 1px solid #333333;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-event__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: #333333;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-event__arrow.js-event-prev::before {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.p-event__arrow:hover {
background: #333333;
}
.p-event__arrow:hover::before {
background-color: #ffffff;
}
.p-event__count {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.4rem;
margin: 0 22px;
}
.p-event__count em {
font-style: normal;
}
.p-event__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 50px;
}
@media screen and (max-width: 767px) {
.p-event__more {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 22px;
}
}
/*----------------------------------------
p-bnr SHOW ROOM / ABOUT / Q&A / note / CONTACT
----------------------------------------*/
.p-bnr__item {
position: relative;
display: block;
color: #ffffff;
}
.p-bnr__item:hover .p-bnr__img img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.p-bnr__item:hover .p-bnr__arrow {
background: #ffffff;
}
.p-bnr__item:hover .p-bnr__arrow::before {
background-color: #3c3b3a;
}
.p-bnr__img {
overflow: hidden;
}
.p-bnr__img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.28);
}
.p-bnr__img img {
display: block;
width: 100%;
aspect-ratio: 1920/460;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-bnr__img img {
aspect-ratio: 390/213;
}
}
.p-bnr__body {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.p-bnr__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.4rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-bnr__en {
font-size: 2rem;
}
}
.p-bnr__en.-note img {
display: block;
width: 140px;
height: auto;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.p-bnr__en.-note img {
width: 100px;
}
}
.p-bnr__ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
margin-top: 8px;
}
@media screen and (max-width: 767px) {
.p-bnr__ja {
font-size: 1.3rem;
margin-top: 4px;
}
}
.p-bnr__arrow {
position: relative;
display: block;
width: 60px;
height: 60px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-bnr__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -8.84px 0 0 -10px;
display: block;
width: 20px;
height: 17.68px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-bnr__arrow {
position: absolute;
right: 30px;
bottom: 40px;
z-index: 2;
}
@media screen and (max-width: 767px) {
.p-bnr__arrow {
right: 14px;
bottom: 14px;
width: 28px;
height: 28px;
}
.p-bnr__arrow::before {
width: 12px;
height: 10.608px;
margin: -5.304px 0 0 -6px;
}
}
.p-bnr {
/* ------ ABOUT / Q&A / note ------ */
}
.p-bnr__trio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-bnr__trio {
display: block;
}
}
.p-bnr__trio li {
-webkit-box-flex: 1;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
min-width: 0;
}
.p-bnr__trio li + li {
border-left: 1px solid rgba(255, 255, 255, 0.25);
}
@media screen and (max-width: 767px) {
.p-bnr__trio li + li {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
}
.p-bnr__trio a {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 400px;
padding: 0 30px;
color: #ffffff;
text-align: center;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-bnr__trio a:hover {
background: #4a4948;
}
.p-bnr__trio a:hover .p-bnr__arrow {
background: #ffffff;
}
.p-bnr__trio a:hover .p-bnr__arrow::before {
background-color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-bnr__trio a {
height: 142px;
padding: 0 20px;
}
}
.p-bnr__trio .p-bnr__arrow {
bottom: 30px;
}
@media screen and (max-width: 767px) {
.p-bnr__trio .p-bnr__arrow {
bottom: 14px;
}
}
/*----------------------------------------
p-mv-cm コンセプトムービーのボタン（MV右下）
----------------------------------------*/
.p-mv-cm {
position: absolute;
right: 20px;
bottom: 40px;
z-index: 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.p-mv-cm:hover {
opacity: 1;
}
.p-mv-cm:hover .p-mv-cm__thumb img {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
.p-mv-cm:hover .p-mv-cm__play {
background: rgba(255, 255, 255, 0.25);
}
@media screen and (max-width: 767px) {
.p-mv-cm {
right: 14px;
bottom: 24px;
}
}
.p-mv-cm__label {
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;
width: 158px;
height: 115px;
background: rgba(60, 59, 58, 0.9);
color: #ffffff;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.4rem;
line-height: 26px;
letter-spacing: 0.02em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-mv-cm__label {
width: 88px;
height: 64px;
font-size: 1.3rem;
line-height: 16px;
}
}
.p-mv-cm__thumb {
position: relative;
display: block;
width: 182px;
height: 115px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-mv-cm__thumb {
width: 100px;
height: 64px;
}
}
.p-mv-cm__thumb img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-mv-cm__play {
position: absolute;
top: 50%;
left: 50%;
width: 55px;
height: 55px;
margin: -27px 0 0 -27px;
border: 1px solid #ffffff;
border-radius: 50%;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
@media screen and (max-width: 767px) {
.p-mv-cm__play {
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
}
}
.p-mv-cm__play::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin: -10px 0 0 -6px;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent #ffffff;
}
@media screen and (max-width: 767px) {
.p-mv-cm__play::before {
margin: -6px 0 0 -3px;
border-width: 6px 0 6px 9px;
}
}
/*========================================
premium-renovation / The Premium Renovation
========================================*/
/*----------------------------------------
p-pv ページビジュアル
----------------------------------------*/
.p-pv {
position: relative;
margin-top: 105px;
}
@media screen and (max-width: 767px) {
.p-pv {
margin-top: 56px;
}
}
.p-pv__img {
overflow: hidden;
}
.p-pv__img picture {
display: block;
}
.p-pv__img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.16);
}
.p-pv__img img {
display: block;
width: 100%;
aspect-ratio: 2400/810;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-pv__img img {
aspect-ratio: 39/34;
}
}
.p-pv__body {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
color: #ffffff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}
.p-pv__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-pv__en {
font-size: 3rem;
}
}
.p-pv__ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 1.6;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-pv__ja {
font-size: 1.8rem;
line-height: 1.7;
letter-spacing: 0.1em;
margin-top: 10px;
}
}
/*----------------------------------------
p-premium-lead リード文
----------------------------------------*/
.p-premium-lead {
padding: 120px 20px 110px;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-premium-lead {
padding: 40px 20px 30px;
text-align: left;
}
}
.p-premium-lead p {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
}
.p-premium-lead p + p {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.p-premium-lead p {
font-size: 1.4rem;
line-height: 30px;
}
.p-premium-lead p + p {
margin-top: 26px;
}
.p-premium-lead p br {
display: none;
}
.p-premium-lead p br.-keep {
display: inline;
}
}
/*----------------------------------------
p-value Values 01〜05
テキストはコンテンツ幅の中、写真は画面端まで伸ばす
----------------------------------------*/
.p-value + .p-value {
margin-top: 130px;
}
@media screen and (max-width: 767px) {
.p-value + .p-value {
margin-top: 46px;
}
}
.p-value__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
@media screen and (max-width: 767px) {
.p-value__row {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.p-value__body {
-webkit-box-flex: 0;
-ms-flex: 0 0 600px;
flex: 0 0 600px;
min-width: 0;
margin-left: max(20px, (100% - 1340px) / 2);
padding-right: 60px;
}
@media screen and (max-width: 767px) {
.p-value__body {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 0;
padding: 0 20px;
margin-top: 24px;
}
}
.p-value__img {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-value__img {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
}
.p-value__img img {
display: block;
width: 100%;
height: 100%;
min-height: 500px;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-value__img img {
height: auto;
min-height: 0;
aspect-ratio: 16/10;
}
}
.p-value {
/* ------ 写真が左（Values 02・04） ------ */
}
.p-value.-reverse .p-value__row {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
.p-value.-reverse .p-value__row {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.p-value.-reverse .p-value__body {
margin-left: 0;
margin-right: max(20px, (100% - 1340px) / 2);
padding-right: 0;
padding-left: 60px;
}
@media screen and (max-width: 767px) {
.p-value.-reverse .p-value__body {
margin-right: 0;
padding: 0 20px;
}
}
.p-value__num {
display: block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 1.4rem;
letter-spacing: 0.06em;
line-height: 1;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-value__num {
font-size: 1.2rem;
}
}
.p-value__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.5;
color: #333333;
margin-top: 18px;
}
@media screen and (max-width: 767px) {
.p-value__ttl {
font-size: min(2.0rem, calc((100vw - 44px) / 17));
line-height: 1.7;
margin-top: 12px;
white-space: nowrap;
}
.p-value__ttl br {
display: none;
}
}
.p-value__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 2.4;
color: #333333;
margin-top: 34px;
}
.p-value__txt + .p-value__txt {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-value__txt {
font-size: 1.4rem;
line-height: 30px;
margin-top: 22px;
}
.p-value__txt + .p-value__txt {
margin-top: 22px;
}
.p-value__txt br {
display: none;
}
}
/*----------------------------------------
p-concierge Premium Concierge
----------------------------------------*/
.p-concierge {
background: #333333;
color: #ffffff;
padding: 110px 20px 130px;
margin-top: 140px;
}
@media screen and (max-width: 767px) {
.p-concierge {
padding: 46px 15px 56px;
margin-top: 46px;
}
}
.p-concierge__inner {
max-width: 1280px;
margin: 0 auto;
}
.p-concierge__head {
text-align: center;
margin-bottom: 90px;
}
@media screen and (max-width: 767px) {
.p-concierge__head {
margin-bottom: 40px;
}
}
.p-concierge__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 4rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-concierge__en {
font-size: 2.2rem;
}
}
.p-concierge__lead {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 2;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-concierge__lead {
font-size: 1.3rem;
line-height: 1.9;
margin-top: 10px;
}
}
.p-concierge__label {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
.p-concierge__label {
font-size: 2.6rem;
margin-bottom: 20px;
}
}
.p-concierge {
/* ------ 建築士1名分 ------ */
}
.p-concierge__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 44px;
}
.p-concierge__item + .p-concierge__item {
margin-top: 90px;
}
.p-concierge__item.-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
.p-concierge__item {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 0;
}
.p-concierge__item.-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.p-concierge__item + .p-concierge__item {
margin-top: 50px;
}
}
.p-concierge__photos {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-concierge__photos {
margin-top: 24px;
}
}
.p-concierge__photo {
overflow: hidden;
}
.p-concierge__photo + .p-concierge__photo {
margin-top: 24px;
}
.p-concierge__photo img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-concierge__photo + .p-concierge__photo {
margin-top: 8px;
}
}
.p-concierge__profile {
-webkit-box-flex: 0;
-ms-flex: 0 0 410px;
flex: 0 0 410px;
min-width: 0;
}
.p-concierge__face {
margin-bottom: 26px;
}
.p-concierge__face img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-concierge__face {
margin-bottom: 14px;
}
}
.p-concierge__role {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.p-concierge__role {
font-size: 1.2rem;
}
}
.p-concierge__name {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-weight: 400;
font-size: 2.2rem;
line-height: 1.4;
margin-top: 4px;
}
@media screen and (max-width: 767px) {
.p-concierge__name {
font-size: 2rem;
}
}
.p-concierge__name .en {
display: block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.4;
margin-top: 4px;
}
@media screen and (max-width: 767px) {
.p-concierge__name .en {
font-size: 1.2rem;
}
}
.p-concierge__txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.9;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-concierge__txt {
font-size: 1.3rem;
margin-top: 18px;
}
.p-concierge__txt br {
display: none;
}
}
.p-concierge__sub {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.9;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-concierge__sub {
font-size: 1.3rem;
margin-top: 18px;
}
}
.p-concierge__sub dt {
font-weight: 700;
font-synthesis: weight;
}
.p-concierge__sub dd {
margin: 0;
}
/*========================================
PRODUCE CASE（produce/）
========================================*/
/*----------------------------------------
p-pcase-intro ページ導入
----------------------------------------*/
.p-pcase-intro {
margin-top: 105px;
padding: 100px 20px 76px;
}
@media screen and (max-width: 767px) {
.p-pcase-intro {
margin-top: 56px;
padding: 46px 20px 28px;
}
}
.p-pcase-intro__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-pcase-intro__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-pcase-intro__ttl {
font-size: 3rem;
}
}
.p-pcase-intro__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-pcase-intro__txt {
font-size: 1.4rem;
line-height: 30px;
margin-top: 20px;
}
}
.p-pcase-intro__link {
margin-top: 34px;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-pcase-intro__link {
margin-top: 22px;
}
}
.p-pcase-intro__link a {
display: inline-block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.6;
color: #333333;
padding-bottom: 8px;
border-bottom: 1px solid #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-pcase-intro__link a:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.p-pcase-intro__link a {
font-size: 1.3rem;
padding-bottom: 6px;
}
}
/*----------------------------------------
p-pcase-nav ページ内リンク（4カテゴリ）
----------------------------------------*/
/* 01〜04 セクションを包むラッパー（この範囲だけナビが追従する） */
.p-pcase-wrap {
position: relative;
}
/* 追従バー本体 */
.p-pcase-navbar {
position: sticky;
top: 105px;
z-index: 20;
background: #ffffff;
padding: 14px 20px;
}
@media screen and (max-width: 767px) {
.p-pcase-navbar {
top: 56px;
padding: 8px 20px;
}
}
.p-pcase-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 36px;
max-width: 1080px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.p-pcase-nav {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 12px;
}
}
.p-pcase-nav__item {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-pcase-nav__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 6px);
flex: 0 0 calc(50% - 6px);
}
}
.p-pcase-nav__btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 64px;
padding: 0 44px 0 20px;
border: 1px solid #3c3b3a;
background: #3c3b3a;
color: #ffffff;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.6rem;
line-height: 1.2;
white-space: nowrap;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
}
.p-pcase-nav__btn:hover, .p-pcase-nav__btn.is-active {
background: #ffffff;
color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-pcase-nav__btn {
height: 44px;
padding: 0 28px 0 12px;
font-size: 1.7rem;
}
}
.p-pcase-nav__arrow {
position: absolute;
right: 15px;
top: 50%;
display: block;
width: 11px;
height: 13.002px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-pcase-nav__arrow {
right: 10px;
}
}
/*----------------------------------------
p-pcase 各カテゴリ（01〜04）
見出し＋キャッチ → キービジュアル → 本文／写真の2カラム
----------------------------------------*/
.p-pcase {
scroll-margin-top: 200px;
padding: 120px 20px 150px;
}
@media screen and (max-width: 767px) {
.p-pcase {
scroll-margin-top: 170px;
padding: 52px 20px 70px;
}
}
.p-pcase:nth-of-type(odd) {
background: #F2F2F2;
}
.p-pcase__inner {
max-width: 1180px;
margin: 0 auto;
}
.p-pcase {
/* ------ 見出し（01 Sauna・Spa） ------ */
}
.p-pcase__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 6.4rem;
line-height: 1.1;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-pcase__ttl {
font-size: 4rem;
}
}
.p-pcase__num {
font-size: 3.6rem;
margin-right: 24px;
}
@media screen and (max-width: 767px) {
.p-pcase__num {
font-size: 2.8rem;
margin-right: 16px;
}
}
.p-pcase {
/* ------ キャッチコピー ------ */
}
.p-pcase__catch {
margin-top: 44px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 45px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-pcase__catch {
margin-top: 21px;
font-size: 1.5rem;
line-height: 35px;
}
}
.p-pcase {
/* ------ キービジュアル ------ */
}
.p-pcase__kv {
margin-top: 50px;
}
@media screen and (max-width: 767px) {
.p-pcase__kv {
margin-top: 26px;
}
}
.p-pcase__kv img {
display: block;
width: 100%;
aspect-ratio: 1180/522;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-pcase__kv img {
aspect-ratio: 36/25;
}
}
.p-pcase {
/* ------ 本文（左）／写真（右）／ボタン ------ */
}
.p-pcase__row {
display: -ms-grid;
display: grid;
-ms-grid-columns: 54.237% 6.271% 39.492%;
grid-template-columns: 54.237% 39.492%;
-webkit-column-gap: 6.271%;
-moz-column-gap: 6.271%;
column-gap: 6.271%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.p-pcase__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-top: 30px;
}
}
.p-pcase__body {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-pcase__body {
display: contents;
}
}
.p-pcase__body p {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 30px;
color: #333333;
}
.p-pcase__body p + p {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-pcase__body p {
line-height: 25px;
}
.p-pcase__body p + p {
margin-top: 25px;
}
}
.p-pcase__photos {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/span 2;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-pcase__photos {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-top: 32px;
}
}
.p-pcase__photo + .p-pcase__photo {
margin-top: 22px;
}
.p-pcase__photo img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-pcase__photo + .p-pcase__photo {
margin-top: 16px;
}
}
.p-pcase .c-btn {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-row-align: start;
align-self: start;
-ms-grid-column-align: start;
justify-self: start;
height: 70px;
margin-top: 150px;
padding: 0 50px 0 24px;
font-size: 1.6rem;
background: #ffffff;
}
.p-pcase .c-btn__arrow {
right: 21px;
}
@media screen and (max-width: 767px) {
.p-pcase .c-btn {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
width: 320px;
max-width: calc(100% - 40px);
height: 70px;
margin-top: 30px;
font-size: 1.6rem;
}
}
.p-pcase {
/* ------ 中間幅（768〜1219px）の調整 ------ */
}
@media screen and (min-width: 768px) and (max-width: 1219px) {
.p-pcase {
padding: 80px 20px 100px;
}
.p-pcase__ttl {
font-size: 5rem;
}
.p-pcase__num {
font-size: 3rem;
margin-right: 20px;
}
.p-pcase__kv {
margin-top: 40px;
}
.p-pcase__row {
margin-top: 50px;
}
.p-pcase .c-btn {
margin-top: 90px;
}
}
/*========================================
SHOW ROOM（showroom/）
コンテンツ幅 1000px／写真ブロックも 1000px
========================================*/
/*----------------------------------------
p-sr-kv キービジュアル
----------------------------------------*/
.p-sr-kv {
margin-top: 105px;
}
@media screen and (max-width: 767px) {
.p-sr-kv {
margin-top: 56px;
}
}
.p-sr-kv img {
display: block;
width: 100%;
aspect-ratio: 1920/720;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-sr-kv img {
aspect-ratio: 75/56;
}
}
/*----------------------------------------
p-sr-intro タイトル＋リード
----------------------------------------*/
.p-sr-intro {
padding: 110px 20px 0;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-sr-intro {
padding: 46px 20px 0;
}
}
.p-sr-intro__ja {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.6rem;
line-height: 1.4;
letter-spacing: 0.2em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-sr-intro__ja {
font-size: 1.7rem;
letter-spacing: 0.12em;
}
}
.p-sr-intro__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 4.4rem;
line-height: 1.3;
color: #333333;
margin-top: 18px;
}
@media screen and (max-width: 767px) {
.p-sr-intro__en {
font-size: 2.8rem;
margin-top: 10px;
}
}
.p-sr-intro__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 40px;
color: #333333;
margin-top: 60px;
}
@media screen and (max-width: 767px) {
.p-sr-intro__txt {
font-size: 1.4rem;
line-height: 30px;
margin-top: 30px;
text-align: left;
}
.p-sr-intro__txt br {
display: none;
}
}
/* ルビ（陰翳礼讃） */
ruby rt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 0.4em;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1;
}
/*----------------------------------------
p-sr-concept CONCEPT（グレー地）
----------------------------------------*/
.p-sr-concept {
background: #F2F2F2;
margin-top: 110px;
padding: 90px 20px 100px;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-sr-concept {
margin-top: 46px;
padding: 46px 20px 50px;
}
}
.p-sr-concept__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-sr-concept__en {
font-size: 2.2rem;
}
}
.p-sr-concept__line {
display: block;
width: 1px;
height: 60px;
margin: 20px auto 0;
background: #333333;
}
@media screen and (max-width: 767px) {
.p-sr-concept__line {
height: 40px;
margin-top: 14px;
}
}
.p-sr-concept__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 44px;
color: #333333;
margin-top: 36px;
}
@media screen and (max-width: 767px) {
.p-sr-concept__txt {
font-size: 1.4rem;
line-height: 30px;
margin-top: 24px;
text-align: left;
}
.p-sr-concept__txt br {
display: none;
}
}
/*----------------------------------------
p-sr 各セクション（Space / Function / …）
----------------------------------------*/
.p-sr {
padding: 0 20px;
scroll-margin-top: 230px;
}
@media screen and (max-width: 767px) {
.p-sr {
scroll-margin-top: 140px;
}
}
.p-sr__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-sr__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5.4rem;
line-height: 1.2;
color: #c8c8c8;
text-align: center;
margin-top: 150px;
margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
.p-sr__ttl {
font-size: 3.2rem;
margin-top: 60px;
margin-bottom: 34px;
}
}
/*----------------------------------------
p-sr-item 見出し＋罫線＋本文＋写真
----------------------------------------*/
.p-sr-item + .p-sr-item {
margin-top: 110px;
}
@media screen and (max-width: 767px) {
.p-sr-item + .p-sr-item {
margin-top: 50px;
}
}
.p-sr-item__head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
.p-sr-item__head {
display: block;
}
}
.p-sr-item__ttl {
-webkit-box-flex: 0;
-ms-flex: 0 0 475px;
flex: 0 0 475px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.8rem;
line-height: 1.4;
letter-spacing: 0.05em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-sr-item__ttl {
font-size: 1.8rem;
}
}
.p-sr-item__ttl::after {
content: "";
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 1px;
margin-left: 15px;
background: #333333;
}
.p-sr-item__txt {
-webkit-box-flex: 0;
-ms-flex: 0 0 500px;
flex: 0 0 500px;
margin-left: 25px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-sr-item__txt {
margin: 14px 0 0;
font-size: 1.4rem;
line-height: 26px;
}
}
.p-sr-item {
/* ------ 写真ブロック ------ */
}
.p-sr-item__photos {
margin-top: 28px;
}
@media screen and (max-width: 767px) {
.p-sr-item__photos {
margin-top: 18px;
}
}
.p-sr-item__photos img {
display: block;
width: 100%;
height: auto;
}
.p-sr-item__photo img {
aspect-ratio: 5/3;
-o-object-fit: cover;
object-fit: cover;
}
.p-sr-item.-col3 .p-sr-item__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2px;
}
.p-sr-item.-col3 .p-sr-item__photos > * {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
.p-sr-item.-col3 .p-sr-item__photos img {
aspect-ratio: 333/600;
-o-object-fit: cover;
object-fit: cover;
}
.p-sr-item.-col2 .p-sr-item__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2px;
}
.p-sr-item.-col2 .p-sr-item__photos > * {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
.p-sr-item.-col2 .p-sr-item__photos img {
aspect-ratio: 499/600;
-o-object-fit: cover;
object-fit: cover;
}
.p-sr-item.-stack .p-sr-item__photos {
display: -ms-grid;
display: grid;
gap: 20px;
}
.p-sr-item.-stack .p-sr-item__photos img {
aspect-ratio: 5/3;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-sr-item.-stack .p-sr-item__photos {
gap: 8px;
}
}
.p-sr-item.-portrait .p-sr-item__photos img {
width: 405px;
max-width: 100%;
margin: 0 auto;
aspect-ratio: 405/600;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-sr-item.-portrait .p-sr-item__photos img {
width: 70%;
}
}
.p-sr-item.-grid4 .p-sr-item__photos {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 2px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.p-sr-item.-grid4 .p-sr-item__photos img {
aspect-ratio: 499/299;
-o-object-fit: cover;
object-fit: cover;
}
/*----------------------------------------
p-sr-mat 素材ギャラリー（8枚グリッド）
----------------------------------------*/
.p-sr-mat {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 18px 1fr;
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 18px;
-moz-column-gap: 18px;
column-gap: 18px;
row-gap: 20px;
margin-top: 110px;
}
@media screen and (max-width: 767px) {
.p-sr-mat {
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
row-gap: 8px;
margin-top: 40px;
}
}
.p-sr-mat img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 491/290;
-o-object-fit: cover;
object-fit: cover;
}
/*----------------------------------------
p-sr-reserve RESERVATION バナー
----------------------------------------*/
.p-sr-reserve {
position: relative;
display: block;
margin-top: 150px;
padding: 46px 20px 50px;
background: #3c3b3a;
color: #ffffff;
text-align: center;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-sr-reserve {
margin-top: 50px;
padding: 30px 20px 34px;
}
}
.p-sr-reserve:hover .p-sr-reserve__arrow {
background: #ffffff;
}
.p-sr-reserve:hover .p-sr-reserve__arrow::before {
background-color: #3c3b3a;
}
.p-sr-reserve__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 4rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-sr-reserve__en {
font-size: 2.6rem;
}
}
.p-sr-reserve__ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.2em;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-sr-reserve__ja {
font-size: 1.3rem;
letter-spacing: 0.1em;
margin-top: 8px;
}
}
.p-sr-reserve__arrow {
position: relative;
display: block;
width: 46px;
height: 46px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-sr-reserve__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -7.072px 0 0 -8px;
display: block;
width: 16px;
height: 14.144px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-sr-reserve__arrow {
position: absolute;
right: 22px;
bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-sr-reserve__arrow {
right: 14px;
bottom: 14px;
width: 34px;
height: 34px;
}
.p-sr-reserve__arrow::before {
width: 13px;
height: 11.492px;
margin: -5.746px 0 0 -6.5px;
}
}
/*----------------------------------------
p-sr-more 下部ボタン
----------------------------------------*/
.p-sr-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 60px;
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-sr-more {
margin-top: 30px;
padding-bottom: 56px;
}
}
/*----------------------------------------
p-sr-navbar 上部のセクションナビ（sticky／AUN修正⑤）
works ページに合わせて画面上部に追従させる
----------------------------------------*/
.p-sr-navbar {
position: sticky;
top: 105px;
z-index: 20;
background: #ffffff;
margin-top: 59px;
padding: 24px 20px;
}
@media screen and (max-width: 767px) {
.p-sr-navbar {
top: 56px;
margin-top: 30px;
padding: 12px 20px;
}
}
.p-sr-nav {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 31px 1fr 31px 1fr 31px 1fr;
grid-template-columns: repeat(4, 1fr);
gap: 31px;
max-width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.p-sr-nav {
gap: 6px;
}
}
.p-sr-nav__item {
min-width: 0;
}
.p-sr-nav__link {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 60px;
padding: 0 34px 0 20px;
border: 1px solid #3c3b3a;
background: #3c3b3a;
color: #ffffff;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.8rem;
line-height: 1.2;
white-space: nowrap;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
}
.p-sr-nav__link:hover, .p-sr-nav__link.is-active {
opacity: 1;
background: #ffffff;
color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-sr-nav__link {
height: 38px;
padding: 0 18px 0 8px;
font-size: 1.3rem;
}
}
.p-sr-nav__arrow {
position: absolute;
right: 14px;
top: 50%;
display: block;
width: 13px;
height: 15.366px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-sr-nav__arrow {
right: 6px;
width: 10px;
}
}
/*========================================
ABOUT（about/） コンテンツ幅 1080px
========================================*/
.p-ab {
padding: 0 20px;
}
.p-ab__inner {
max-width: 1080px;
margin: 0 auto;
}
/* セクション見出し（EN ＋ 薄グレーの和文） */
.p-ab-ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
@media screen and (max-width: 767px) {
.p-ab-ttl {
display: block;
}
}
.p-ab-ttl__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.6rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-ttl__en {
font-size: 2.4rem;
}
}
.p-ab-ttl__ja {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.8rem;
line-height: 1.2;
color: #c8c8c8;
margin-left: 16px;
}
@media screen and (max-width: 767px) {
.p-ab-ttl__ja {
font-size: 1.3rem;
margin-left: 10px;
}
}
/*----------------------------------------
ページ見出し＋カテゴリナビ
----------------------------------------*/
.p-ab-head {
margin-top: 105px;
padding: 100px 20px 80px;
}
@media screen and (max-width: 767px) {
.p-ab-head {
margin-top: 56px;
padding: 46px 20px 28px;
}
}
.p-ab-head__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-ab-head__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-head__ttl {
font-size: 3rem;
}
}
/* 01〜06 セクションを包むラッパー（この範囲だけナビが追従する） */
.p-ab-wrap {
position: relative;
}
/* 追従バー */
.p-ab-navbar {
position: sticky;
top: 105px;
z-index: 20;
background: #ffffff;
padding: 14px 20px;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
@media screen and (max-width: 767px) {
.p-ab-navbar {
top: 56px;
padding: 8px 20px;
}
}
.p-ab-navbar.is-stuck {
padding: 10px 20px;
}
.p-ab-navbar.is-stuck .p-ab-nav {
gap: 8px;
}
.p-ab-navbar.is-stuck .p-ab-nav__btn {
height: 48px;
font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
.p-ab-navbar.is-stuck .p-ab-nav__btn {
height: 44px;
font-size: 1.4rem;
}
}
.p-ab-nav {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 32px 1fr 32px 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 36px 32px;
max-width: 1080px;
margin: 0 auto;
-webkit-transition: gap 0.3s;
transition: gap 0.3s;
}
@media screen and (max-width: 767px) {
.p-ab-nav {
-ms-grid-columns: 1fr 8px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
.p-ab-nav__item {
min-width: 0;
}
.p-ab-nav__btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 62px;
padding: 0 60px 0 30px;
border: 1px solid #3c3b3a;
background: #3c3b3a;
color: #ffffff;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.4rem;
line-height: 1.2;
white-space: nowrap;
-webkit-transition: background-color 0.4s, color 0.4s, height 0.3s, font-size 0.3s;
transition: background-color 0.4s, color 0.4s, height 0.3s, font-size 0.3s;
}
.p-ab-nav__btn:hover, .p-ab-nav__btn.is-active {
background: #ffffff;
color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-ab-nav__btn {
height: 52px;
padding: 0 30px 0 12px;
font-size: 1.6rem;
}
}
.p-ab-nav__arrow {
position: absolute;
right: 29px;
top: 50%;
display: block;
width: 17px;
height: 20.094px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-ab-nav__arrow {
right: 10px;
width: 11px;
height: 9.724px;
margin: -4.862px 0 0 -5.5px;
}
}
/*----------------------------------------
MESSAGE（グレー地）
----------------------------------------*/
.p-ab-message {
background: #F2F2F2;
margin-top: 126px;
padding: 90px 20px 110px;
}
@media screen and (max-width: 767px) {
.p-ab-message {
margin-top: 42px;
padding: 46px 20px 50px;
}
}
.p-ab-message__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-ab-message__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.6rem;
line-height: 1.2;
color: #333333;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ab-message__en {
font-size: 2.4rem;
}
}
.p-ab-message__catch {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.2rem;
line-height: 58px;
letter-spacing: 0.06em;
color: #333333;
text-align: center;
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.p-ab-message__catch {
font-size: 2rem;
line-height: 36px;
margin-top: 30px;
}
}
.p-ab-message__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
text-align: center;
margin-top: 74px;
}
@media screen and (max-width: 767px) {
.p-ab-message__txt {
font-size: 1.4rem;
line-height: 30px;
margin-top: 30px;
text-align: left;
}
.p-ab-message__txt br {
display: none;
}
}
.p-ab-message__txt p + p {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.p-ab-message__txt p + p {
margin-top: 22px;
}
}
/*----------------------------------------
代表プロフィール
----------------------------------------*/
.p-ab-profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 110px;
}
@media screen and (max-width: 767px) {
.p-ab-profile {
display: block;
margin-top: 40px;
}
}
.p-ab-profile__photo {
-webkit-box-flex: 0;
-ms-flex: 0 0 407px;
flex: 0 0 407px;
margin-right: 24px;
}
@media screen and (max-width: 767px) {
.p-ab-profile__photo {
margin: 0 0 20px;
}
}
.p-ab-profile__photo img {
display: block;
width: 100%;
aspect-ratio: 407/361;
-o-object-fit: cover;
object-fit: cover;
}
.p-ab-profile__body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
.p-ab-profile__role {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-profile__role {
font-size: 1.3rem;
}
}
.p-ab-profile__name {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.2rem;
line-height: 1.4;
color: #333333;
margin-top: 8px;
}
@media screen and (max-width: 767px) {
.p-ab-profile__name {
font-size: 1.8rem;
}
}
.p-ab-profile__name .en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.4rem;
margin-left: 14px;
}
@media screen and (max-width: 767px) {
.p-ab-profile__name .en {
font-size: 1.2rem;
margin-left: 8px;
}
}
.p-ab-profile__txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 23px;
color: #333333;
margin-top: 26px;
}
@media screen and (max-width: 767px) {
.p-ab-profile__txt {
font-size: 1.3rem;
line-height: 22px;
margin-top: 16px;
}
}
.p-ab-profile__license {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 23px;
color: #333333;
margin-top: 26px;
}
@media screen and (max-width: 767px) {
.p-ab-profile__license {
font-size: 1.3rem;
line-height: 22px;
}
}
/* 著書ボックス */
.p-ab-book {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 649px;
max-width: 100%;
margin: 30px 0 0 auto;
padding: 30px;
border: 1px solid #d5d5d5;
}
@media screen and (max-width: 767px) {
.p-ab-book {
width: 100%;
margin-top: 24px;
padding: 18px;
}
}
.p-ab-book__cover {
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
margin-right: 30px;
}
@media screen and (max-width: 767px) {
.p-ab-book__cover {
-webkit-box-flex: 0;
-ms-flex: 0 0 78px;
flex: 0 0 78px;
margin-right: 16px;
}
}
.p-ab-book__cover img {
display: block;
width: 100%;
height: auto;
}
.p-ab-book__body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
.p-ab-book__ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.5;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-book__ttl {
font-size: 1.4rem;
}
}
.p-ab-book__sub {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.5;
color: #333333;
margin: 4px 0 0 46px;
}
@media screen and (max-width: 767px) {
.p-ab-book__sub {
font-size: 1.2rem;
margin-left: 0;
}
}
.p-ab-book__info {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 23px;
color: #333333;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-ab-book__info {
font-size: 1.2rem;
line-height: 21px;
margin-top: 14px;
}
}
.p-ab-book__info a {
color: #333333;
border-bottom: 1px solid #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-ab-book__info a:hover {
opacity: 0.6;
}
/*----------------------------------------
COMPANY（定義リスト）
----------------------------------------*/
.p-ab-sec {
margin-top: 140px;
}
@media screen and (max-width: 767px) {
.p-ab-sec {
margin-top: 56px;
}
}
.p-ab-message,
.p-ab-sec {
scroll-margin-top: 250px;
}
@media screen and (max-width: 767px) {
.p-ab-message,
.p-ab-sec {
scroll-margin-top: 235px;
}
}
.p-ab-dl {
margin-top: 66px;
border-top: 1px solid #e5e5e5;
}
@media screen and (max-width: 767px) {
.p-ab-dl {
margin-top: 24px;
}
}
.p-ab-dl__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 34px 0 36px;
border-bottom: 1px solid #e5e5e5;
}
@media screen and (max-width: 767px) {
.p-ab-dl__row {
display: block;
padding: 18px 0 20px;
}
}
.p-ab-dl__dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 217px;
flex: 0 0 217px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-dl__dt {
font-size: 1.4rem;
line-height: 22px;
}
}
.p-ab-dl__dd {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-dl__dd {
font-size: 1.4rem;
line-height: 22px;
margin-top: 4px;
}
}
.p-ab-dl__dd a {
color: #333333;
border-bottom: 1px solid #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-ab-dl__dd a:hover {
opacity: 0.6;
}
/* 住所＋地図 */
.p-ab-map {
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.p-ab-map {
margin-top: 30px;
}
}
.p-ab-map__address {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.6;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-map__address {
font-size: 1.3rem;
}
}
.p-ab-map__img {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-ab-map__img {
margin-top: 14px;
}
}
.p-ab-map__img img,
.p-ab-map__img iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1080/680;
-o-object-fit: cover;
object-fit: cover;
border: 0;
}
@media screen and (max-width: 767px) {
.p-ab-map__img img,
.p-ab-map__img iframe {
aspect-ratio: 4/3;
}
}
/*----------------------------------------
HISTORY
----------------------------------------*/
.p-ab-history {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 56px;
}
@media screen and (max-width: 767px) {
.p-ab-history {
display: block;
margin-top: 24px;
}
}
.p-ab-history__body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
margin-right: 0;
}
@media screen and (max-width: 767px) {
.p-ab-history__body {
margin: 0;
}
}
.p-ab-history__txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-history__txt {
font-size: 1.4rem;
line-height: 24px;
}
}
.p-ab-history__photos {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-ab-history__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 8px;
margin-top: 20px;
}
}
.p-ab-history__photos img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 303/188;
-o-object-fit: cover;
object-fit: cover;
}
.p-ab-history__photos > * + * {
margin-top: 10px;
}
@media screen and (max-width: 767px) {
.p-ab-history__photos > * + * {
margin-top: 0;
}
}
@media screen and (max-width: 767px) {
.p-ab-history__photos > * {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
}
/* 年表 */
.p-ab-table {
margin-top: 74px;
border-top: 1px solid #e5e5e5;
}
@media screen and (max-width: 767px) {
.p-ab-table {
margin-top: 26px;
}
}
.p-ab-table__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 16px 0;
border-bottom: 1px solid #e5e5e5;
}
@media screen and (max-width: 767px) {
.p-ab-table__row {
padding: 12px 0;
}
}
.p-ab-table__dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 115px;
flex: 0 0 115px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-table__dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 76px;
flex: 0 0 76px;
font-size: 1.3rem;
line-height: 22px;
}
}
.p-ab-table__dd {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-table__dd {
font-size: 1.3rem;
line-height: 22px;
}
}
/*----------------------------------------
LECTURES / AWARDS（もっと見る）
----------------------------------------*/
.p-ab-list {
position: relative;
margin-top: 46px;
border-top: 1px solid #e5e5e5;
}
@media screen and (max-width: 767px) {
.p-ab-list {
margin-top: 22px;
}
}
.p-ab-list__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 16px 0;
}
@media screen and (max-width: 767px) {
.p-ab-list__row {
display: block;
padding: 12px 0;
}
}
.p-ab-list__dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 126px;
flex: 0 0 126px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-list__dt {
font-size: 1.3rem;
line-height: 22px;
}
}
.p-ab-list__dd {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-list__dd {
font-size: 1.3rem;
line-height: 22px;
}
}
.p-ab-list__item {
padding: 12px 0 14px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 26px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-list__item {
font-size: 1.3rem;
line-height: 22px;
}
}
.p-ab-list__item + .p-ab-list__item {
margin-top: 16px;
}
.p-ab-list__award {
display: block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 2rem;
line-height: 32px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ab-list__award {
font-size: 1.6rem;
line-height: 27px;
}
}
.p-ab-list__work {
display: block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 1.4rem;
line-height: 24px;
color: #6b6b6b;
margin-top: 2px;
}
@media screen and (max-width: 767px) {
.p-ab-list__work {
font-size: 1.2rem;
line-height: 21px;
}
}
.p-ab-list__more {
position: relative;
max-height: 0;
overflow: hidden;
opacity: 0.35;
-webkit-transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
.p-ab-list.is-open .p-ab-list__more {
max-height: 4000px;
opacity: 1;
}
.p-ab-list:not(.is-open) .p-ab-list__more {
max-height: 44px;
}
.p-ab-more {
display: block;
margin: 30px auto 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
color: #333333;
background: none;
border: 0;
cursor: pointer;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-ab-more:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.p-ab-more {
font-size: 1.4rem;
margin-top: 20px;
}
}
.p-ab-more__icon {
margin-left: 10px;
}
.is-open .p-ab-more .p-ab-more__txt::after {
content: "";
}
/*----------------------------------------
MEDIA
----------------------------------------*/
.p-ab-media {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
grid-template-columns: repeat(3, 1fr);
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
row-gap: 56px;
margin-top: 66px;
}
@media screen and (max-width: 767px) {
.p-ab-media {
-ms-grid-columns: 1fr 14px 1fr;
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 14px;
-moz-column-gap: 14px;
column-gap: 14px;
row-gap: 26px;
margin-top: 24px;
}
}
.p-ab-media__img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 303px;
}
@media screen and (max-width: 767px) {
.p-ab-media__img {
height: 190px;
}
}
.p-ab-media__img img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.p-ab-media__ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 25px;
color: #333333;
margin-top: 36px;
}
@media screen and (max-width: 767px) {
.p-ab-media__ttl {
font-size: 1.2rem;
line-height: 20px;
margin-top: 14px;
}
}
.p-ab-media__ttl span {
border-bottom: 1px solid #d5d5d5;
padding-bottom: 2px;
}
.p-ab-media a:hover {
opacity: 0.7;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-ab-media-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 58px;
}
@media screen and (max-width: 767px) {
.p-ab-media-more {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 26px;
}
}
/*----------------------------------------
RECRUIT バナー
----------------------------------------*/
.p-ab-recruit {
margin-top: 140px;
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-ab-recruit {
margin-top: 50px;
padding-bottom: 56px;
}
}
.p-ab-recruit__banner {
position: relative;
display: block;
padding: 46px 20px 50px;
background: #3c3b3a;
color: #ffffff;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ab-recruit__banner {
padding: 30px 20px 34px;
}
}
.p-ab-recruit__banner:hover .p-ab-recruit__arrow {
background: #ffffff;
}
.p-ab-recruit__banner:hover .p-ab-recruit__arrow::before {
background-color: #3c3b3a;
}
.p-ab-recruit__en {
display: block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 4rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-ab-recruit__en {
font-size: 2.6rem;
}
}
.p-ab-recruit__ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.2em;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-ab-recruit__ja {
font-size: 1.3rem;
letter-spacing: 0.1em;
margin-top: 8px;
}
}
.p-ab-recruit__arrow {
position: relative;
display: block;
width: 46px;
height: 46px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-ab-recruit__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -7.072px 0 0 -8px;
display: block;
width: 16px;
height: 14.144px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-ab-recruit__arrow {
position: absolute;
right: 22px;
bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-ab-recruit__arrow {
right: 14px;
bottom: 14px;
width: 34px;
height: 34px;
}
.p-ab-recruit__arrow::before {
width: 13px;
height: 11.492px;
margin: -5.746px 0 0 -6.5px;
}
}
.p-ab-recruit__note {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.6;
color: #333333;
text-align: center;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-ab-recruit__note {
font-size: 1.2rem;
margin-top: 14px;
text-align: left;
}
}
/*========================================
WORKS 一覧（works/） コンテンツ幅 1000px
========================================*/
.p-wk {
padding: 0 20px;
}
.p-wk__inner {
max-width: 1000px;
margin: 0 auto;
}
/*----------------------------------------
ページ見出し＋カテゴリナビ（1行）
----------------------------------------*/
/* カテゴリセクションを包むラッパー（この範囲だけ追従する） */
.p-wk-wrap {
position: relative;
padding-bottom: 180px;
}
@media screen and (max-width: 767px) {
.p-wk-wrap {
padding-bottom: 90px;
}
}
.p-wk-head {
position: sticky;
top: 105px;
z-index: 20;
background: #ffffff;
margin-top: 191px;
padding: 14px 20px 20px;
}
@media screen and (max-width: 767px) {
.p-wk-head {
top: 56px;
margin-top: 102px;
padding: 10px 20px 14px;
}
}
.p-wk-head__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-wk-head__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 4rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wk-head__ttl {
font-size: 2.8rem;
}
}
.p-wk-nav {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 31px 1fr 31px 1fr 31px 1fr;
grid-template-columns: repeat(4, 1fr);
gap: 31px;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-wk-nav {
-ms-grid-columns: 1fr 8px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 14px;
}
}
.p-wk-nav__item {
min-width: 0;
}
.p-wk-nav__btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 62px;
padding: 0 30px 0 14px;
border: 1px solid #3c3b3a;
background: #3c3b3a;
color: #ffffff;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2rem;
line-height: 1.2;
white-space: nowrap;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
}
.p-wk-nav__btn:hover, .p-wk-nav__btn.is-active {
background: #ffffff;
color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-wk-nav__btn {
height: 46px;
font-size: 1.6rem;
padding: 0 26px 0 12px;
}
}
.p-wk-nav__arrow {
position: absolute;
right: 10px;
top: 50%;
display: block;
width: 11px;
height: 13.002px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/*----------------------------------------
カテゴリセクション
----------------------------------------*/
.p-wk-sec {
margin-top: 106px;
scroll-margin-top: 195px;
}
@media screen and (max-width: 767px) {
.p-wk-sec {
margin-top: 46px;
scroll-margin-top: 190px;
}
}
.p-wk-sec__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.6rem;
line-height: 1.2;
color: #333333;
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-wk-sec__ttl {
font-size: 2.4rem;
margin-bottom: 14px;
}
}
/*----------------------------------------
カード一覧
----------------------------------------*/
.p-wk-list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 60px 1fr;
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
row-gap: 60px;
}
@media screen and (max-width: 767px) {
.p-wk-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
row-gap: 30px;
}
}
.p-wk-list__more {
position: relative;
grid-column: 1/-1;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 60px 1fr;
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
row-gap: 60px;
overflow: hidden;
max-height: 4000px;
-webkit-transition: max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
transition: max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-wk-list__more {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
row-gap: 30px;
}
}
/* SPのみ初期表示5件（6件目を少しだけ覗かせて白へフェード） */
@media screen and (max-width: 767px) {
.js-wk-list:not(.is-open) .p-wk-card:nth-child(n+6) {
display: none;
}
.js-wk-list:not(.is-open) .p-wk-card:nth-child(6) {
display: block;
position: relative;
max-height: 120px;
overflow: hidden;
}
.js-wk-list:not(.is-open) .p-wk-card:nth-child(6)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.95)));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.95) 100%);
pointer-events: none;
}
}
.js-wk-list:not(.is-open) .p-wk-list__more {
max-height: 190px;
}
@media screen and (max-width: 767px) {
.js-wk-list:not(.is-open) .p-wk-list__more {
max-height: 140px;
}
}
.js-wk-list:not(.is-open) .p-wk-list__more::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(55%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.88)));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0.88) 100%);
pointer-events: none;
}
.p-wk-card__img {
overflow: hidden;
}
.p-wk-card__img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
a:hover .p-wk-card__img img, .p-wk-card:hover .p-wk-card__img img {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
.p-wk-card__head {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-right: 40px;
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.p-wk-card__head {
margin-top: 14px;
padding-right: 34px;
}
}
.p-wk-card__award {
-webkit-box-flex: 0;
-ms-flex: 0 0 28px;
flex: 0 0 28px;
margin-right: 22px;
margin-top: 2px;
}
@media screen and (max-width: 767px) {
.p-wk-card__award {
-webkit-box-flex: 0;
-ms-flex: 0 0 22px;
flex: 0 0 22px;
margin-right: 12px;
}
}
.p-wk-card__award img {
display: block;
width: 100%;
height: auto;
}
.p-wk-card__ttl {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 28px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wk-card__ttl {
font-size: 1.5rem;
line-height: 26px;
}
}
.p-wk-card__video {
position: absolute;
right: 0;
top: 3px;
width: 27px;
}
@media screen and (max-width: 767px) {
.p-wk-card__video {
width: 23px;
}
}
.p-wk-card__video img {
display: block;
width: 100%;
height: auto;
}
.p-wk-card__meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
@media screen and (max-width: 767px) {
.p-wk-card__meta {
gap: 8px;
margin-top: 8px;
}
}
.p-wk-card__area {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.2rem;
line-height: 1;
color: #333333;
padding: 6px 10px;
border: 1px solid #707070;
}
@media screen and (max-width: 767px) {
.p-wk-card__area {
font-size: 1.1rem;
padding: 5px 8px;
}
}
.p-wk-card__size {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.2rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wk-card__size {
font-size: 1.1rem;
}
}
.p-wk-card a {
display: block;
color: #333333;
}
/*----------------------------------------
もっと見る
----------------------------------------*/
.p-wk-more {
display: block;
margin: 20px auto 0;
}
@media only screen and (min-width: 768px) {
.p-wk-more {
display: none;
}
}
.p-wk-more {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
color: #333333;
background: none;
border: 0;
cursor: pointer;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-wk-more:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.p-wk-more {
font-size: 1.4rem;
margin-top: 26px;
}
}
.p-wk-more__icon {
margin-left: 10px;
}
/* 最後のセクション下の余白 */
.p-wk-foot {
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-wk-foot {
padding-bottom: 56px;
}
}
/*========================================
WORK FLOW（workflow/） コンテンツ幅 1066px
========================================*/
.p-wf {
padding: 0 20px;
}
.p-wf__inner {
max-width: 1066px;
margin: 0 auto;
}
/*----------------------------------------
イントロ（見出し＋リード＋ページ内リンク）
----------------------------------------*/
.p-wf-intro__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-wf-intro__ttl {
font-size: 3.2rem;
margin-top: 102px;
}
}
.p-wf-intro__lead {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
margin-top: 37px;
}
@media screen and (max-width: 767px) {
.p-wf-intro__lead {
font-size: 1.4rem;
line-height: 30px;
margin-top: 24px;
}
}
/* ------ ページ内リンク（追従バー） ------ */
/* 追従する範囲を限定するラッパー */
.p-wf-wrap {
position: relative;
margin-top: 36px;
}
@media screen and (max-width: 767px) {
.p-wf-wrap {
margin-top: 22px;
}
}
.p-wf-navbar {
position: sticky;
top: 105px;
z-index: 20;
background: #ffffff;
margin: 0 -20px;
padding: 14px 20px;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
@media screen and (max-width: 767px) {
.p-wf-navbar {
top: 56px;
padding: 8px 20px;
}
}
.p-wf-navbar.is-stuck {
padding: 8px 20px;
}
.p-wf-navbar.is-stuck .p-wf-nav {
-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media screen and (max-width: 767px) {
.p-wf-navbar.is-stuck .p-wf-nav {
-ms-grid-columns: 1fr 6px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
}
.p-wf-navbar.is-stuck .p-wf-nav__btn {
height: 48px;
padding: 0 46px 0 20px;
font-size: 1.4rem;
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-wf-navbar.is-stuck .p-wf-nav__btn {
height: 38px;
padding: 0 26px 0 8px;
font-size: 1.05rem;
letter-spacing: 0;
}
}
.p-wf-navbar.is-stuck .p-wf-nav__arrow {
right: 18px;
width: 13px;
}
@media screen and (max-width: 767px) {
.p-wf-navbar.is-stuck .p-wf-nav__arrow {
right: 12px;
width: 11px;
}
}
.p-wf-nav {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 34px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 34px;
max-width: 1066px;
margin: 0 auto;
-webkit-transition: gap 0.3s;
transition: gap 0.3s;
}
@media screen and (max-width: 767px) {
.p-wf-nav {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 12px;
}
}
.p-wf-nav__btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 62px;
padding: 0 64px 0 33px;
border: 1px solid #333333;
background: #333333;
color: #ffffff;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.4;
letter-spacing: 0.08em;
-webkit-transition: background-color 0.4s, color 0.4s, height 0.3s, font-size 0.3s;
transition: background-color 0.4s, color 0.4s, height 0.3s, font-size 0.3s;
}
.p-wf-nav__btn:hover, .p-wf-nav__btn.is-active {
opacity: 1;
background: #ffffff;
color: #333333;
}
.p-wf-nav__btn.-outline {
background: #ffffff;
color: #333333;
}
.p-wf-nav__btn.-outline:hover, .p-wf-nav__btn.-outline.is-active {
background: #333333;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-wf-nav__btn {
height: 52px;
padding: 0 46px 0 20px;
font-size: 1.5rem;
}
}
.p-wf-nav__arrow {
position: absolute;
right: 31px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
width: 16px;
height: 18.912px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
-webkit-transition: background-color 0.4s, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: background-color 0.4s, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-wf-nav__arrow {
right: 18px;
width: 13px;
}
}
.p-wf-nav__btn:hover .p-wf-nav__arrow {
-webkit-transform: translate(0, calc(-50% + 5px));
transform: translate(0, calc(-50% + 5px));
}
/*----------------------------------------
セクション見出し
----------------------------------------*/
.p-wf-sec {
margin-top: 225px;
}
@media screen and (max-width: 767px) {
.p-wf-sec {
margin-top: 80px;
}
}
.p-wf-sec__head {
border-bottom: 1px solid #979797;
padding-bottom: 16px;
}
@media screen and (max-width: 767px) {
.p-wf-sec__head {
padding-bottom: 12px;
}
}
.p-wf-sec__head.-single {
padding-bottom: 37px;
}
@media screen and (max-width: 767px) {
.p-wf-sec__head.-single {
padding-bottom: 18px;
}
}
.p-wf-sec__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 4rem;
line-height: 1.2;
letter-spacing: 0.08em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wf-sec__ttl {
font-size: 2.2rem;
letter-spacing: 0.04em;
}
}
.p-wf-sec {
/* 所要期間 */
}
.p-wf-sec__term {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 1.4;
color: #333333;
margin-top: 0;
}
@media screen and (max-width: 767px) {
.p-wf-sec__term {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: 1.2rem;
margin-top: 8px;
}
}
.p-wf-sec__term-label {
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;
height: 23px;
padding: 0 13px;
border: 1px solid #333333;
margin-right: 14px;
}
@media screen and (max-width: 767px) {
.p-wf-sec__term-label {
height: 22px;
padding: 0 8px;
margin-right: 10px;
}
}
/*----------------------------------------
STEP 一覧
----------------------------------------*/
.p-wf-step {
position: relative;
margin-top: 111px;
}
@media screen and (max-width: 767px) {
.p-wf-step {
margin-top: 40px;
}
}
.p-wf-step__item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
.p-wf-step__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.p-wf-step__item {
/* 左端の縦ライン
自分のバッジ下端 →（間隔92px）→ 次のバッジ下端 まで。
最初のバッジの上と、最後のバッジの下には引かない */
}
.p-wf-step__item::before {
content: "";
position: absolute;
left: 38px;
top: 91px;
bottom: -183px;
width: 1px;
background: #e7e7e7;
}
@media screen and (max-width: 767px) {
.p-wf-step__item::before {
left: 22px;
top: 46px;
bottom: -66px;
}
}
.p-wf-step__item:last-child::before {
content: none;
}
.p-wf-step__item + .p-wf-step__item {
margin-top: 92px;
}
@media screen and (max-width: 767px) {
.p-wf-step__item + .p-wf-step__item {
margin-top: 40px;
}
}
.p-wf-step__item {
/* 最後のSTEPの下には罫線を引かない */
}
.p-wf-step__item:last-child .p-wf-step__body {
border-bottom: 0;
}
.p-wf-step {
/* ------ STEPバッジ ------ */
}
.p-wf-step__no {
-webkit-box-flex: 0;
-ms-flex: 0 0 77px;
flex: 0 0 77px;
width: 77px;
height: 77px;
margin: 14px 36px 0 0;
background: #dcdcdc;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wf-step__no {
width: 44px;
height: 44px;
-webkit-box-flex: 0;
-ms-flex: 0 0 44px;
flex: 0 0 44px;
margin: 2px 12px 0 0;
}
}
.p-wf-step__no-label {
display: block;
font-size: 1.8rem;
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-wf-step__no-label {
font-size: 1rem;
}
}
.p-wf-step__no-num {
display: block;
font-size: 4.2rem;
line-height: 1;
letter-spacing: 0.02em;
margin-top: 0;
}
@media screen and (max-width: 767px) {
.p-wf-step__no-num {
font-size: 2rem;
margin-top: 0;
}
}
.p-wf-step {
/* ------ 本文＋写真 ------ */
}
.p-wf-step__body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
border-bottom: 1px solid #e7e7e7;
padding-bottom: 23px;
}
@media screen and (max-width: 767px) {
.p-wf-step__body {
display: block;
padding-bottom: 20px;
min-width: 0;
}
}
.p-wf-step__txt {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
padding-top: 23px;
}
@media screen and (max-width: 767px) {
.p-wf-step__txt {
padding-top: 0;
}
}
.p-wf-step__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.09em;
color: #c0c0c0;
}
@media screen and (max-width: 767px) {
.p-wf-step__en {
font-size: 1.3rem;
}
}
.p-wf-step__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.4;
letter-spacing: 0.08em;
color: #333333;
margin-top: 3px;
}
@media screen and (max-width: 767px) {
.p-wf-step__ttl {
font-size: 1.9rem;
letter-spacing: 0.04em;
}
}
.p-wf-step {
/* アフターサポートへのリンク（AUN修正⑯⑰） */
}
.p-wf-step__link {
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-wf-step__link {
margin-top: 10px;
}
}
.p-wf-step__link a {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1.6;
color: #333333;
text-decoration: underline;
text-underline-offset: 4px;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-wf-step__link a:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.p-wf-step__link a {
font-size: 1.2rem;
}
}
.p-wf-step__link-arrow {
display: inline-block;
width: 14px;
height: 14px;
margin-left: 10px;
display: block;
width: 14px;
height: 12.026px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
@media screen and (max-width: 767px) {
.p-wf-step__link-arrow {
width: 12px;
margin-left: 8px;
}
}
.p-wf-step__desc {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
margin-top: 32px;
}
@media screen and (max-width: 767px) {
.p-wf-step__desc {
font-size: 1.3rem;
line-height: 24px;
margin-top: 14px;
}
}
.p-wf-step__img {
-webkit-box-flex: 0;
-ms-flex: 0 0 282px;
flex: 0 0 282px;
margin-left: 33px;
}
@media screen and (max-width: 767px) {
.p-wf-step__img {
margin: 16px 0 0;
}
}
.p-wf-step__img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 282/168;
-o-object-fit: cover;
object-fit: cover;
}
/*----------------------------------------
料金について
----------------------------------------*/
.p-wf-price__block {
margin-top: 41px;
}
.p-wf-price__block + .p-wf-price__block {
margin-top: 86px;
}
@media screen and (max-width: 767px) {
.p-wf-price__block {
margin-top: 24px;
}
.p-wf-price__block + .p-wf-price__block {
margin-top: 44px;
}
}
.p-wf-price__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.09em;
color: #c0c0c0;
}
@media screen and (max-width: 767px) {
.p-wf-price__en {
font-size: 1.3rem;
}
}
.p-wf-price__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.4;
letter-spacing: 0.08em;
color: #333333;
margin-top: 3px;
}
@media screen and (max-width: 767px) {
.p-wf-price__ttl {
font-size: 1.8rem;
letter-spacing: 0.04em;
}
}
.p-wf-price__txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 26px;
color: #333333;
margin-top: 36px;
}
@media screen and (max-width: 767px) {
.p-wf-price__txt {
font-size: 1.2rem;
line-height: 22px;
margin-top: 16px;
}
}
.p-wf-price {
/* 例：80㎡の物件の場合 */
}
.p-wf-price__ex-label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 26px;
padding: 0 12px;
border: 1px solid #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1;
color: #333333;
margin-top: 26px;
}
@media screen and (max-width: 767px) {
.p-wf-price__ex-label {
font-size: 1.2rem;
margin-top: 16px;
}
}
.p-wf-price__ex-txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 26px;
color: #333333;
margin-top: 2px;
}
@media screen and (max-width: 767px) {
.p-wf-price__ex-txt {
font-size: 1.2rem;
line-height: 22px;
}
}
.p-wf-price__note {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 26px;
color: #333333;
margin-top: 27px;
}
@media screen and (max-width: 767px) {
.p-wf-price__note {
font-size: 1.2rem;
line-height: 22px;
margin-top: 18px;
}
}
.p-wf-price__note li {
text-indent: -1em;
padding-left: 1em;
}
.p-wf__inner > .p-wf-sec:first-child {
margin-top: 211px;
}
@media screen and (max-width: 767px) {
.p-wf__inner > .p-wf-sec:first-child {
margin-top: 60px;
}
}
.p-wf-foot {
padding-bottom: 150px;
}
@media screen and (max-width: 767px) {
.p-wf-foot {
padding-bottom: 60px;
}
}
/*========================================
WORKS 詳細（works/detail/） コンテンツ幅 1080px
========================================*/
.p-wd {
padding: 0 20px;
}
.p-wd__inner {
max-width: 1080px;
margin: 0 auto;
}
/*----------------------------------------
キービジュアル（3:2／最大1280px）
----------------------------------------*/
.p-wd-kv {
margin-top: 191px;
padding: 0 20px;
}
@media screen and (max-width: 767px) {
.p-wd-kv {
margin-top: 102px;
}
}
.p-wd-kv__inner {
max-width: 1280px;
margin: 0 auto;
}
.p-wd-kv img {
display: block;
width: 100%;
aspect-ratio: 16/9;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-wd-kv img {
aspect-ratio: 4/3;
}
}
/*----------------------------------------
概要（左：受賞・タイトル・エリア／右：本文＋スペック）
----------------------------------------*/
.p-wd-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 74px;
}
@media screen and (max-width: 767px) {
.p-wd-info {
display: block;
margin-top: 34px;
}
}
.p-wd-info__left {
-webkit-box-flex: 0;
-ms-flex: 0 0 480px;
flex: 0 0 480px;
margin-right: 60px;
}
@media screen and (max-width: 767px) {
.p-wd-info__left {
margin: 0 0 26px;
}
}
.p-wd-info__right {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
.p-wd-info {
/* ------ 受賞 ------ */
}
.p-wd-info__award {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.p-wd-info__award-ico {
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
flex: 0 0 50px;
margin-right: 16px;
margin-top: -3px;
}
@media screen and (max-width: 767px) {
.p-wd-info__award-ico {
-webkit-box-flex: 0;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
margin-right: 12px;
margin-top: -2px;
}
}
.p-wd-info__award-ico img {
display: block;
width: 100%;
height: auto;
}
.p-wd-info__award-txt {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 22px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wd-info__award-txt {
font-size: 1.3rem;
line-height: 20px;
}
}
.p-wd-info {
/* ------ タイトル ------ */
}
.p-wd-info__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.2rem;
line-height: 1.4;
letter-spacing: 0.06em;
color: #333333;
margin-top: 44px;
}
@media screen and (max-width: 767px) {
.p-wd-info__ttl {
font-size: 2.4rem;
margin-top: 20px;
}
}
.p-wd-info__ttl-ja {
display: block;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.2rem;
line-height: 1.6;
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-wd-info__ttl-ja {
font-size: 1.7rem;
}
}
.p-wd-info {
/* ------ エリアタグ ------ */
}
.p-wd-info__area {
display: inline-block;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 1;
color: #333333;
padding: 13px 22px;
border: 1px solid #707070;
margin-top: 44px;
}
@media screen and (max-width: 767px) {
.p-wd-info__area {
font-size: 1.3rem;
padding: 10px 16px;
margin-top: 18px;
}
}
.p-wd-info {
/* ------ 本文 ------ */
}
.p-wd-info__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wd-info__txt {
font-size: 1.4rem;
line-height: 30px;
}
}
.p-wd-info__txt p + p {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.p-wd-info__txt p + p {
margin-top: 24px;
}
}
.p-wd-info {
/* ------ スペック ------ */
}
.p-wd-info__spec {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.p-wd-info__spec {
margin-top: 24px;
}
}
.p-wd-info__spec div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 40px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wd-info__spec div {
font-size: 1.3rem;
line-height: 28px;
}
}
.p-wd-info__spec dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 68px;
flex: 0 0 68px;
}
@media screen and (max-width: 767px) {
.p-wd-info__spec dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 52px;
flex: 0 0 52px;
}
}
.p-wd-info__spec dd {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
/*----------------------------------------
本文エリア
※ 実体は module/_editor.scss の .c-editor
----------------------------------------*/
.p-wd .c-editor {
margin-top: 110px;
}
@media screen and (max-width: 767px) {
.p-wd .c-editor {
margin-top: 46px;
}
}
/*----------------------------------------
Before / After
※ 方位マークは間取り図画像に含める（別要素では置かない）
----------------------------------------*/
.p-wd-ba {
margin-top: 130px;
}
@media screen and (max-width: 767px) {
.p-wd-ba {
margin-top: 56px;
}
}
.p-wd-ba__ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 3rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-wd-ba__ttl {
font-size: 2rem;
}
}
.p-wd-ba__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 70px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 70px;
margin-top: 52px;
}
@media screen and (max-width: 767px) {
.p-wd-ba__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 34px;
margin-top: 26px;
}
}
.p-wd-ba__label {
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;
width: 135px;
height: 46px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 1;
border: 1px solid #3c3b3a;
color: #333333;
background: #ffffff;
}
@media screen and (max-width: 767px) {
.p-wd-ba__label {
width: 110px;
height: 40px;
font-size: 1.3rem;
}
}
.p-wd-ba__label.-after {
background: #3c3b3a;
color: #ffffff;
}
.p-wd-ba__img {
margin-top: 48px;
}
@media screen and (max-width: 767px) {
.p-wd-ba__img {
margin-top: 20px;
}
}
.p-wd-ba__img img {
display: block;
width: 100%;
height: auto;
}
.p-wd-ba__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 42px;
}
@media screen and (max-width: 767px) {
.p-wd-ba__more {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
}
}
/*----------------------------------------
前後ナビ
----------------------------------------*/
.p-wd-nav {
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: 180px;
}
@media screen and (max-width: 767px) {
.p-wd-nav {
margin-top: 60px;
}
}
.p-wd-nav__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.8rem;
line-height: 1.4;
color: #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-wd-nav__link:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.p-wd-nav__link {
font-size: 1.3rem;
}
}
.p-wd-nav__link.-prev .p-wd-nav__arrow {
margin-right: 22px;
}
@media screen and (max-width: 767px) {
.p-wd-nav__link.-prev .p-wd-nav__arrow {
margin-right: 10px;
}
}
.p-wd-nav__link.-next .p-wd-nav__arrow {
margin-left: 22px;
}
@media screen and (max-width: 767px) {
.p-wd-nav__link.-next .p-wd-nav__arrow {
margin-left: 10px;
}
}
.p-wd-nav__link.-prev .p-wd-nav__arrow::before {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.p-wd-nav__arrow {
position: relative;
display: block;
width: 34px;
height: 34px;
border: 1px solid #3c3b3a;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-wd-nav__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: #3c3b3a;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-wd-nav__arrow {
-webkit-box-flex: 0;
-ms-flex: 0 0 34px;
flex: 0 0 34px;
}
@media screen and (max-width: 767px) {
.p-wd-nav__arrow {
width: 28px;
height: 28px;
-webkit-box-flex: 0;
-ms-flex: 0 0 28px;
flex: 0 0 28px;
}
.p-wd-nav__arrow::before {
width: 11px;
height: 9.724px;
margin: -4.862px 0 0 -5.5px;
}
}
/*----------------------------------------
関連事例
----------------------------------------*/
.p-wd-related {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 15px 1fr 15px 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 32px;
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-wd-related {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 20px;
padding-bottom: 60px;
}
}
.p-wd-related a {
display: block;
color: #333333;
}
.p-wd-related a:hover img {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
.p-wd-related__img {
overflow: hidden;
}
.p-wd-related__img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-wd-related__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 28px;
color: #333333;
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-wd-related__ttl {
font-size: 1.4rem;
line-height: 24px;
margin-top: 10px;
}
}
/*========================================
CONTACT（contact/） コンテンツ幅 1080px
========================================*/
.p-ct {
margin-top: 105px;
padding: 100px 20px 140px;
}
@media screen and (max-width: 767px) {
.p-ct {
margin-top: 56px;
padding: 46px 20px 56px;
}
}
.p-ct__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-ct__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ct__ttl {
font-size: 3rem;
}
}
/*----------------------------------------
問い合わせ種別カード
----------------------------------------*/
.p-ct-list {
margin-top: 120px;
}
@media screen and (max-width: 767px) {
.p-ct-list {
margin-top: 36px;
}
}
.p-ct-card + .p-ct-card {
margin-top: 58px;
}
@media screen and (max-width: 767px) {
.p-ct-card + .p-ct-card {
margin-top: 24px;
}
}
.p-ct-card a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-ct-card a {
display: block;
}
}
.p-ct-card__img {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
overflow: hidden;
}
.p-ct-card__img img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 540/335;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-ct-card__img img {
height: auto;
aspect-ratio: 16/10;
}
}
a:hover .p-ct-card__img img {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
.p-ct-card__body {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
min-width: 0;
background: #333333;
padding: 36px 90px 36px 36px;
}
@media screen and (max-width: 767px) {
.p-ct-card__body {
padding: 22px 60px 26px 20px;
}
}
.p-ct-card__en {
display: inline-block;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 1.5rem;
line-height: 1;
letter-spacing: 0.06em;
color: #ffffff;
padding: 9px 14px;
border: 1px solid #ffffff;
}
@media screen and (max-width: 767px) {
.p-ct-card__en {
font-size: 1.2rem;
padding: 7px 10px;
}
}
.p-ct-card__ja {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.8rem;
line-height: 1.4;
letter-spacing: 0.05em;
color: #ffffff;
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.p-ct-card__ja {
font-size: 1.9rem;
margin-top: 12px;
}
}
.p-ct-card__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 31px;
color: #ffffff;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-ct-card__txt {
font-size: 1.4rem;
line-height: 26px;
margin-top: 10px;
}
.p-ct-card__txt br {
display: none;
}
}
.p-ct-card__arrow {
position: relative;
display: block;
width: 46px;
height: 46px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-ct-card__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -7.072px 0 0 -8px;
display: block;
width: 16px;
height: 14.144px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-ct-card__arrow {
position: absolute;
right: 20px;
bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-ct-card__arrow {
right: 14px;
bottom: 14px;
width: 34px;
height: 34px;
}
.p-ct-card__arrow::before {
width: 13px;
height: 11.492px;
margin: -5.746px 0 0 -6.5px;
}
}
a:hover .p-ct-card__arrow {
background: #ffffff;
}
a:hover .p-ct-card__arrow::before {
background-color: #333333;
}
/*----------------------------------------
Q&A バナー
----------------------------------------*/
.p-ct-qa {
position: relative;
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;
min-height: 130px;
margin-top: 111px;
padding: 20px 90px;
background: #333333;
color: #ffffff;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ct-qa {
min-height: 90px;
margin-top: 36px;
padding: 18px 60px 18px 20px;
}
}
.p-ct-qa__txt {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.6;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-ct-qa__txt {
font-size: 1.4rem;
letter-spacing: 0.05em;
}
}
.p-ct-qa__arrow {
position: relative;
display: block;
width: 46px;
height: 46px;
border: 1px solid #ffffff;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-ct-qa__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -7.072px 0 0 -8px;
display: block;
width: 16px;
height: 14.144px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-ct-qa__arrow {
position: absolute;
right: 22px;
bottom: 19px;
}
@media screen and (max-width: 767px) {
.p-ct-qa__arrow {
right: 14px;
bottom: 14px;
width: 34px;
height: 34px;
}
.p-ct-qa__arrow::before {
width: 13px;
height: 11.492px;
margin: -5.746px 0 0 -6.5px;
}
}
.p-ct-qa:hover .p-ct-qa__arrow {
background: #ffffff;
}
.p-ct-qa:hover .p-ct-qa__arrow::before {
background-color: #333333;
}
/*========================================
お問い合わせフォーム（contact//）
コンテンツ幅 1080px
========================================*/
.p-fm {
margin-top: 105px;
padding: 100px 20px 140px;
}
@media screen and (max-width: 767px) {
.p-fm {
margin-top: 56px;
padding: 46px 20px 60px;
}
}
.p-fm__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-fm__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm__ttl {
font-size: 3rem;
}
}
/*----------------------------------------
ステップインジケーター
----------------------------------------*/
.p-fm-step {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
list-style: none;
width: 466px;
max-width: 100%;
margin: 112px auto 0;
}
@media screen and (max-width: 767px) {
.p-fm-step {
width: 280px;
margin-top: 40px;
}
}
.p-fm-step::before {
content: "";
position: absolute;
top: 7px;
left: 8px;
right: 8px;
height: 2px;
background: #dcdcdc;
}
.p-fm-step__done {
position: absolute;
top: 7px;
left: 8px;
height: 2px;
background: #333333;
}
.p-fm-step.-step1 .p-fm-step__done {
width: 0;
}
.p-fm-step.-step2 .p-fm-step__done {
width: calc(50% - 8px);
}
.p-fm-step.-step3 .p-fm-step__done {
width: calc(100% - 16px);
}
.p-fm-step__item {
position: relative;
z-index: 1;
width: 16px;
list-style: none;
}
.p-fm-step__dot {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #dcdcdc;
}
.p-fm-step__item.is-done .p-fm-step__dot, .p-fm-step__item.is-current .p-fm-step__dot {
background: #333333;
}
.p-fm-step__txt {
position: absolute;
top: 30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 22px;
color: #333333;
white-space: nowrap;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-fm-step__txt {
font-size: 1.2rem;
line-height: 18px;
top: 24px;
}
}
/*----------------------------------------
フォーム見出し
----------------------------------------*/
.p-fm-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
margin-top: 112px;
}
@media screen and (max-width: 767px) {
.p-fm-head {
display: block;
margin-top: 60px;
}
}
.p-fm-head.-single {
margin-top: 150px;
}
@media screen and (max-width: 767px) {
.p-fm-head.-single {
margin-top: 46px;
}
}
.p-fm-head__ja {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 4.4rem;
line-height: 1.3;
letter-spacing: 0.1em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-head__ja {
font-size: 2.4rem;
letter-spacing: 0.06em;
}
}
.p-fm-head__en {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2.6rem;
line-height: 1.3;
letter-spacing: 0.04em;
color: #333333;
margin-left: 36px;
}
@media screen and (max-width: 767px) {
.p-fm-head__en {
font-size: 1.6rem;
margin-left: 0;
display: block;
margin-top: 6px;
}
}
/*----------------------------------------
フォーム本体
----------------------------------------*/
.p-fm-body {
margin-top: 96px;
}
@media screen and (max-width: 767px) {
.p-fm-body {
margin-top: 30px;
}
}
.p-fm-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
.p-fm-row {
display: block;
}
}
.p-fm-row + .p-fm-row {
margin-top: 42px;
}
@media screen and (max-width: 767px) {
.p-fm-row + .p-fm-row {
margin-top: 24px;
}
}
.p-fm-row__label {
-webkit-box-flex: 0;
-ms-flex: 0 0 254px;
flex: 0 0 254px;
padding-top: 20px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 700;
font-synthesis: weight;
font-size: 1.6rem;
line-height: 1.5;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-row__label {
padding-top: 0;
font-size: 1.4rem;
margin-bottom: 8px;
}
}
.p-fm-row__label .req {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 1.2rem;
color: #d0021b;
margin-left: 4px;
vertical-align: super;
}
.p-fm-row__field {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
.p-fm-row__note {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.6;
color: #333333;
margin-top: 10px;
}
@media screen and (max-width: 767px) {
.p-fm-row__note {
font-size: 1.2rem;
}
}
.p-fm-row__note.-under {
margin-top: 8px;
margin-bottom: 12px;
color: #8a8a8a;
}
@media screen and (max-width: 767px) {
.p-fm-row__note.-under {
margin-bottom: 8px;
}
}
/* ------ 入力部品 ------ */
.p-fm-input,
.p-fm-select,
.p-fm-textarea {
display: block;
width: 100%;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.6;
color: #333333;
background: #ffffff;
border: 1px solid #d5d5d5;
border-radius: 0;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
@media screen and (max-width: 767px) {
.p-fm-input,
.p-fm-select,
.p-fm-textarea {
font-size: 1.5rem;
}
}
.p-fm-input:focus,
.p-fm-select:focus,
.p-fm-textarea:focus {
outline: none;
border-color: #333333;
}
.p-fm-input::-webkit-input-placeholder, .p-fm-select::-webkit-input-placeholder, .p-fm-textarea::-webkit-input-placeholder {
color: #b8b8b8;
}
.p-fm-input::-moz-placeholder, .p-fm-select::-moz-placeholder, .p-fm-textarea::-moz-placeholder {
color: #b8b8b8;
}
.p-fm-input:-ms-input-placeholder, .p-fm-select:-ms-input-placeholder, .p-fm-textarea:-ms-input-placeholder {
color: #b8b8b8;
}
.p-fm-input::-ms-input-placeholder, .p-fm-select::-ms-input-placeholder, .p-fm-textarea::-ms-input-placeholder {
color: #b8b8b8;
}
.p-fm-input::placeholder,
.p-fm-select::placeholder,
.p-fm-textarea::placeholder {
color: #b8b8b8;
}
.p-fm-input,
.p-fm-select {
height: 62px;
padding: 0 22px;
}
@media screen and (max-width: 767px) {
.p-fm-input,
.p-fm-select {
height: 52px;
padding: 0 14px;
}
}
/* 続けて並べる入力欄（住所の2段目など） */
.p-fm-input.-mt {
margin-top: 12px;
}
@media screen and (max-width: 767px) {
.p-fm-input.-mt {
margin-top: 8px;
}
}
/* 郵便番号は短く */
.p-fm-input.-zip {
width: 240px;
max-width: 100%;
}
@media screen and (max-width: 767px) {
.p-fm-input.-zip {
width: 180px;
}
}
.p-fm-textarea {
height: 330px;
padding: 18px 22px;
resize: vertical;
}
@media screen and (max-width: 767px) {
.p-fm-textarea {
height: 200px;
padding: 12px 14px;
}
}
/* セレクトの矢印 */
.p-fm-selectwrap {
position: relative;
}
.p-fm-selectwrap::after {
content: "";
position: absolute;
right: 26px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -8px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-fm-selectwrap::after {
right: 16px;
width: 8px;
height: 8px;
}
}
.p-fm-selectwrap.-multiple::after {
top: 22px;
margin-top: 0;
}
@media screen and (max-width: 767px) {
.p-fm-selectwrap.-multiple::after {
top: 18px;
}
}
/* 複数選択リスト（JSが効かない場合のフォールバック） */
.p-fm-list {
display: block;
width: 100%;
height: 325px;
padding: 14px 22px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 32px;
color: #333333;
background: #ffffff;
border: 1px solid #d5d5d5;
border-radius: 0;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
}
.p-fm-list:focus {
outline: none;
}
.p-fm-list option {
padding: 2px 0;
}
.p-fm-list option:checked {
background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f2f2f2));
background: #f2f2f2 linear-gradient(#f2f2f2, #f2f2f2);
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-list {
height: 240px;
font-size: 1.4rem;
line-height: 28px;
padding: 10px 14px;
}
}
/*----------------------------------------
p-fm-multi 複数選択（クリックで開くドロップダウン）
AUN修正② ご予算感と同じ見た目・複数選択可
----------------------------------------*/
.p-fm-multi {
position: relative;
}
.p-fm-multi::after {
content: none;
}
.p-fm-multi .p-fm-list {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.p-fm-multi {
/* ------ 閉じているときの見た目（select と同じ） ------ */
}
.p-fm-multi__btn {
position: relative;
display: block;
width: 100%;
height: 62px;
padding: 0 52px 0 22px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.6;
color: #333333;
background: #ffffff;
border: 1px solid #d5d5d5;
text-align: left;
cursor: pointer;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
@media screen and (max-width: 767px) {
.p-fm-multi__btn {
height: 52px;
padding: 0 38px 0 14px;
font-size: 1.5rem;
}
}
.p-fm-multi__btn:focus-visible {
outline: none;
border-color: #333333;
}
.p-fm-multi__btn::after {
content: "";
position: absolute;
right: 26px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -8px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: margin-top 0.3s, -webkit-transform 0.3s;
transition: margin-top 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, margin-top 0.3s;
transition: transform 0.3s, margin-top 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 767px) {
.p-fm-multi__btn::after {
right: 16px;
width: 8px;
height: 8px;
}
}
.p-fm-multi__txt {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.p-fm-multi__txt.-placeholder {
color: #b8b8b8;
}
.p-fm-multi.is-open .p-fm-multi__btn {
border-color: #333333;
}
.p-fm-multi.is-open .p-fm-multi__btn::after {
margin-top: -2px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.p-fm-multi {
/* ------ 選択肢パネル ------ */
}
.p-fm-multi__panel {
position: absolute;
z-index: 10;
top: calc(100% - 1px);
left: 0;
width: 100%;
max-height: 300px;
overflow-y: auto;
padding: 8px 0;
background: #ffffff;
border: 1px solid #333333;
-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 767px) {
.p-fm-multi__panel {
max-height: 240px;
}
}
.p-fm-multi__opt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 9px 22px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.5;
color: #333333;
cursor: pointer;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.p-fm-multi__opt:hover {
background: #f5f5f5;
}
@media screen and (max-width: 767px) {
.p-fm-multi__opt {
padding: 8px 14px;
font-size: 1.4rem;
}
}
.p-fm-multi__opt input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.p-fm-multi__opt .box {
-webkit-box-flex: 0;
-ms-flex: 0 0 18px;
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-right: 12px;
border: 1px solid #d5d5d5;
background: #ffffff;
position: relative;
-webkit-transition: border-color 0.2s, background-color 0.2s;
transition: border-color 0.2s, background-color 0.2s;
}
.p-fm-multi__opt .box::before {
content: "";
position: absolute;
top: 3px;
left: 6px;
width: 5px;
height: 10px;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
@media screen and (max-width: 767px) {
.p-fm-multi__opt .box {
-ms-flex-preferred-size: 16px;
flex-basis: 16px;
width: 16px;
height: 16px;
margin-right: 10px;
}
}
.p-fm-multi__opt input:checked + .box {
background: #333333;
border-color: #333333;
}
.p-fm-multi__opt input:checked + .box::before {
opacity: 1;
}
/* ------ ラジオ／チェック ------ */
.p-fm-radio {
display: block;
}
.p-fm-radio + .p-fm-radio {
margin-top: 18px;
}
@media screen and (max-width: 767px) {
.p-fm-radio + .p-fm-radio {
margin-top: 14px;
}
}
.p-fm-radio input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.p-fm-radio span {
position: relative;
display: inline-block;
padding-left: 30px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.5;
color: #333333;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-fm-radio span {
font-size: 1.4rem;
padding-left: 26px;
}
}
.p-fm-radio span::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 16px;
border: 1px solid #a9a9a9;
border-radius: 50%;
background: #ffffff;
}
.p-fm-radio span::after {
content: "";
position: absolute;
left: 4px;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #333333;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.p-fm-radio input:checked + span::before {
border-color: #333333;
}
.p-fm-radio input:checked + span::after {
opacity: 1;
}
/* ラジオを2列に並べる（その他フォームのご依頼内容） */
.p-fm-radios.-col2 {
display: -ms-grid;
display: grid;
-ms-grid-columns: -webkit-max-content 70px -webkit-max-content;
-ms-grid-columns: max-content 70px max-content;
grid-template-columns: repeat(2, -webkit-max-content);
grid-template-columns: repeat(2, max-content);
-webkit-column-gap: 70px;
-moz-column-gap: 70px;
column-gap: 70px;
row-gap: 18px;
}
@media screen and (max-width: 767px) {
.p-fm-radios.-col2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
row-gap: 14px;
}
}
.p-fm-radios.-col2 .p-fm-radio + .p-fm-radio {
margin-top: 0;
}
.p-fm-radios.-col3 {
display: -ms-grid;
display: grid;
-ms-grid-columns: -webkit-max-content 40px -webkit-max-content 40px -webkit-max-content;
-ms-grid-columns: max-content 40px max-content 40px max-content;
grid-template-columns: repeat(3, -webkit-max-content);
grid-template-columns: repeat(3, max-content);
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
row-gap: 18px;
}
@media screen and (max-width: 767px) {
.p-fm-radios.-col3 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
row-gap: 14px;
}
}
.p-fm-radios.-col3 .p-fm-radio + .p-fm-radio {
margin-top: 0;
}
/* 人数セレクト */
.p-fm-count {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 14px 40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 16px;
}
@media screen and (max-width: 767px) {
.p-fm-count {
gap: 10px 20px;
padding-top: 0;
}
}
.p-fm-count__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-count__item {
font-size: 1.4rem;
}
}
.p-fm-count__label {
margin-right: 14px;
}
.p-fm-count .p-fm-selectwrap {
width: 78px;
}
.p-fm-count .p-fm-select {
height: 34px;
padding: 0 24px 0 10px;
font-size: 1.4rem;
}
.p-fm-count .p-fm-selectwrap::after {
right: 10px;
width: 7px;
height: 7px;
margin-top: -6px;
}
/* ご希望日（カレンダー・第3希望まで） */
.p-fm-date__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-fm-date__item + .p-fm-date__item {
margin-top: 14px;
}
@media screen and (max-width: 767px) {
.p-fm-date__item + .p-fm-date__item {
margin-top: 10px;
}
}
.p-fm-date__label {
-webkit-box-flex: 0;
-ms-flex: 0 0 82px;
flex: 0 0 82px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-date__label {
-webkit-box-flex: 0;
-ms-flex: 0 0 66px;
flex: 0 0 66px;
font-size: 1.4rem;
}
}
.p-fm-date__input {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
max-width: 360px;
}
.p-fm-date__input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.55;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-fm-date__input:hover::-webkit-calendar-picker-indicator {
opacity: 1;
}
/* プライバシーポリシー同意 */
.p-fm-agree {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.p-fm-agree {
margin-top: 26px;
}
}
.p-fm-agree__note {
margin-top: 14px;
padding-left: 30px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1.8;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-agree__note {
margin-top: 10px;
padding-left: 26px;
font-size: 1.2rem;
line-height: 1.7;
}
}
.p-fm-agree a {
color: #333333;
font-weight: 700;
font-synthesis: weight;
border-bottom: 1px solid #333333;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-fm-agree a:hover {
opacity: 0.6;
}
.p-fm-note {
margin-top: 40px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1.8;
color: #333333;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-fm-note {
margin-top: 26px;
font-size: 1.2rem;
line-height: 1.7;
}
}
.p-fm-note + .p-fm-submit {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.p-fm-note + .p-fm-submit {
margin-top: 26px;
}
}
/*----------------------------------------
送信ボタン／戻る
----------------------------------------*/
.p-fm-submit {
display: block;
width: 270px;
height: 62px;
margin: 84px auto 0;
background: #333333;
color: #ffffff;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1;
border: 1px solid #333333;
cursor: pointer;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
}
.p-fm-submit:hover {
background: #ffffff;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-fm-submit {
width: 100%;
max-width: 280px;
height: 54px;
margin-top: 36px;
font-size: 1.5rem;
}
}
.p-fm-back {
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;
width: 100%;
margin-top: 34px;
background: none;
border: 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1;
color: #333333;
cursor: pointer;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-fm-back:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.p-fm-back {
margin-top: 22px;
font-size: 1.4rem;
}
}
.p-fm-back::before {
content: "";
width: 8px;
height: 8px;
margin-right: 12px;
border-left: 1px solid #333333;
border-bottom: 1px solid #333333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* ステップの表示切替 */
.p-fm-panel {
display: none;
}
.p-fm-panel.is-active {
display: block;
}
/*========================================
Premium Residence Gallery（residence/）
コンテンツ幅 1080px
========================================*/
.p-rg {
padding: 0 20px;
}
.p-rg__inner {
max-width: 1080px;
margin: 0 auto;
}
/*----------------------------------------
イントロ
----------------------------------------*/
.p-rg-intro__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-rg-intro__ttl {
font-size: 3rem;
margin-top: 102px;
}
}
.p-rg-intro__lead {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 40px;
color: #333333;
margin-top: 60px;
}
@media screen and (max-width: 767px) {
.p-rg-intro__lead {
font-size: 1.4rem;
line-height: 30px;
margin-top: 24px;
}
}
@media screen and (max-width: 767px) {
.p-rg-intro__lead br {
display: none;
}
}
.p-rg-intro__btn {
margin-top: 58px;
}
@media screen and (max-width: 767px) {
.p-rg-intro__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 26px;
}
}
.p-rg-intro {
/* ※注記（グレー地） */
}
.p-rg-intro__note {
background: #F2F2F2;
padding: 30px 36px;
margin-top: 100px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 28px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-rg-intro__note {
padding: 18px 16px;
margin-top: 40px;
font-size: 1.2rem;
line-height: 22px;
}
}
/*----------------------------------------
物件一覧
----------------------------------------*/
.p-rg-list {
margin-top: 96px;
}
@media screen and (max-width: 767px) {
.p-rg-list {
margin-top: 40px;
}
}
.p-rg-list__item {
padding-bottom: 42px;
border-bottom: 1px solid #b5b5b5;
}
@media screen and (max-width: 767px) {
.p-rg-list__item {
padding-bottom: 24px;
}
}
.p-rg-list__item + .p-rg-list__item {
margin-top: 90px;
}
@media screen and (max-width: 767px) {
.p-rg-list__item + .p-rg-list__item {
margin-top: 30px;
}
}
.p-rg-list__item > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
color: #333333;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
@media screen and (max-width: 767px) {
.p-rg-list__item > a {
display: block;
}
}
.p-rg-list__item > a:hover {
opacity: 0.7;
}
.p-rg-list__img {
-webkit-box-flex: 0;
-ms-flex: 0 0 434px;
flex: 0 0 434px;
margin-right: 36px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-rg-list__img {
margin: 0 0 16px;
}
}
.p-rg-list__img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-rg-list > li > a:hover .p-rg-list__img img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.p-rg-list__body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
padding-top: 78px;
}
@media screen and (max-width: 767px) {
.p-rg-list__body {
padding-top: 0;
}
}
.p-rg-list__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.2rem;
line-height: 42px;
letter-spacing: 0.04em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-rg-list__ttl {
font-size: 1.6rem;
line-height: 28px;
}
}
.p-rg-list__spec {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1.6;
color: #333333;
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-rg-list__spec {
font-size: 1.2rem;
margin-top: 10px;
}
}
.p-rg-list__area {
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;
min-width: 138px;
height: 36px;
padding: 0 16px;
border: 1px solid #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1;
color: #333333;
margin-top: 52px;
}
@media screen and (max-width: 767px) {
.p-rg-list__area {
min-width: 0;
height: 30px;
font-size: 1.2rem;
margin-top: 14px;
}
}
/*----------------------------------------
ページネーション（Information と共通仕様）
----------------------------------------*/
.p-rg-pager {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
margin-top: 76px;
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-rg-pager {
gap: 8px;
margin-top: 40px;
padding-bottom: 60px;
}
}
.p-rg-pager__num {
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;
width: 35px;
height: 35px;
border: 1px solid #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1;
color: #333333;
-webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.p-rg-pager__num:hover, .p-rg-pager__num.is-current {
opacity: 1;
background: #3c3b3a;
border-color: #3c3b3a;
color: #ffffff;
}
.p-rg-pager__next {
position: relative;
display: block;
width: 35px;
height: 35px;
border: 1px solid currentColor;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-rg-pager__next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-rg-pager__next {
-webkit-box-flex: 0;
-ms-flex: 0 0 35px;
flex: 0 0 35px;
color: #333333;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.p-rg-pager__next:hover {
opacity: 1;
background: #3c3b3a;
color: #ffffff;
}
/*========================================
Premium Residence Gallery 詳細（residence/detail/）
========================================*/
.p-rd {
padding: 0 20px;
}
.p-rd__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-rd__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-rd__ttl {
font-size: 3rem;
margin-top: 102px;
}
}
.p-rd {
/* ------ 物件名 ------ */
}
.p-rd__name {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.8rem;
line-height: 50px;
letter-spacing: 0.04em;
color: #333333;
margin-top: 117px;
}
@media screen and (max-width: 767px) {
.p-rd__name {
font-size: 1.9rem;
line-height: 34px;
margin-top: 40px;
}
}
.p-rd {
/* ------ 築年・物件名・住所 ------ */
}
.p-rd__spec {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.6;
color: #333333;
margin-top: 25px;
}
@media screen and (max-width: 767px) {
.p-rd__spec {
font-size: 1.3rem;
margin-top: 16px;
}
}
.p-rd {
/* ------ エリアタグ ------ */
}
.p-rd__area {
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;
height: 32px;
padding: 0 18px;
border: 1px solid #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1;
color: #333333;
margin-top: 31px;
}
@media screen and (max-width: 767px) {
.p-rd__area {
height: 28px;
padding: 0 12px;
font-size: 1.2rem;
margin-top: 16px;
}
}
.p-rd {
/* ------ 本文 ------ */
}
.p-rd__txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 30px;
color: #333333;
margin-top: 48px;
}
@media screen and (max-width: 767px) {
.p-rd__txt {
font-size: 1.3rem;
line-height: 24px;
margin-top: 22px;
}
}
.p-rd__txt p + p {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-rd__txt p + p {
margin-top: 20px;
}
}
/* ------ 写真（2列＋キャプション） ------ */
.p-rd-photo {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 24px 1fr;
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
row-gap: 79px;
margin-top: 90px;
}
@media screen and (max-width: 767px) {
.p-rd-photo {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
row-gap: 30px;
margin-top: 36px;
}
}
.p-rd-photo__img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 528/369;
-o-object-fit: cover;
object-fit: cover;
}
.p-rd-photo__cap {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 1.7;
color: #333333;
margin-top: 19px;
}
@media screen and (max-width: 767px) {
.p-rd-photo__cap {
font-size: 1.2rem;
margin-top: 10px;
}
}
/* ------ 一覧に戻る ------ */
.p-rd-back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 118px;
}
@media screen and (max-width: 767px) {
.p-rd-back {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 44px;
}
}
/* ------ 物件相談バー ------ */
.p-rd-cta {
position: relative;
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;
height: 131px;
background: #333333;
color: #ffffff;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.4rem;
line-height: 1.4;
letter-spacing: 0.02em;
margin-top: 130px;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
@media screen and (max-width: 767px) {
.p-rd-cta {
height: 84px;
font-size: 1.6rem;
margin-top: 44px;
}
}
.p-rd-cta:hover {
opacity: 0.82;
}
.p-rd-cta__arrow {
position: relative;
display: block;
width: 46px;
height: 46px;
border: 1px solid currentColor;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-rd-cta__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -7.514px 0 0 -8.5px;
display: block;
width: 17px;
height: 15.028px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-rd-cta__arrow {
position: absolute;
right: 23px;
bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-rd-cta__arrow {
right: 12px;
bottom: 10px;
width: 34px;
height: 34px;
}
.p-rd-cta__arrow::before {
width: 13px;
height: 11.492px;
margin: -5.746px 0 0 -6.5px;
}
}
.p-rd-foot {
padding-bottom: 150px;
}
@media screen and (max-width: 767px) {
.p-rd-foot {
padding-bottom: 60px;
}
}
/*========================================
Information 一覧（info/）／詳細（info/detail/）
コンテンツ幅 1080px
========================================*/
/*----------------------------------------
一覧
----------------------------------------*/
.p-inf {
padding: 0 20px;
}
.p-inf__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-inf__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-inf__ttl {
font-size: 3.2rem;
margin-top: 102px;
}
}
/* ------ カテゴリ切替 ------ */
.p-inf-cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px;
margin-top: 83px;
}
@media screen and (max-width: 767px) {
.p-inf-cat {
gap: 8px;
margin-top: 30px;
}
}
@media screen and (max-width: 767px) {
.p-inf-cat li {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
}
.p-inf-cat a {
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;
width: 97px;
height: 31px;
border: 1px solid #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1;
color: #333333;
-webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.p-inf-cat a:hover, .p-inf-cat a.is-active {
opacity: 1;
background: #3c3b3a;
border-color: #3c3b3a;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-inf-cat a {
width: 100%;
height: 30px;
font-size: 1.2rem;
}
}
/* ------ 記事リスト ------ */
.p-inf-list {
margin-top: 0;
}
.p-inf-list__item {
border-bottom: 1px solid #d5d5d5;
}
.p-inf-list a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
padding: 27px 0 10px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-inf-list a {
display: block;
padding: 16px 0 12px;
}
}
.p-inf-list__date {
-webkit-box-flex: 0;
-ms-flex: 0 0 92px;
flex: 0 0 92px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 30px;
color: #5b5b5b;
}
@media screen and (max-width: 767px) {
.p-inf-list__date {
display: block;
font-size: 1.2rem;
line-height: 1.6;
}
}
.p-inf-list__name {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 30px;
}
@media screen and (max-width: 767px) {
.p-inf-list__name {
font-size: 1.3rem;
line-height: 24px;
}
}
/* ------ ページネーション ------ */
.p-inf-pager {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
margin-top: 64px;
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-inf-pager {
gap: 8px;
margin-top: 40px;
padding-bottom: 60px;
}
}
.p-inf-pager__num {
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;
width: 35px;
height: 35px;
border: 1px solid #333333;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 1;
color: #333333;
-webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.p-inf-pager__num:hover, .p-inf-pager__num.is-current {
opacity: 1;
background: #3c3b3a;
border-color: #3c3b3a;
color: #ffffff;
}
.p-inf-pager__next {
position: relative;
display: block;
width: 35px;
height: 35px;
border: 1px solid currentColor;
-webkit-transition: border-color 0.4s, background-color 0.4s;
transition: border-color 0.4s, background-color 0.4s;
}
.p-inf-pager__next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -5.746px 0 0 -6.5px;
display: block;
width: 13px;
height: 11.492px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.p-inf-pager__next {
-webkit-box-flex: 0;
-ms-flex: 0 0 35px;
flex: 0 0 35px;
color: #333333;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.p-inf-pager__next:hover {
opacity: 1;
background: #3c3b3a;
color: #ffffff;
}
/*----------------------------------------
詳細
----------------------------------------*/
.p-infd {
padding: 0 20px;
}
.p-infd__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-infd__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-infd__ttl {
font-size: 3.2rem;
margin-top: 102px;
}
}
.p-infd {
/* 日付／カテゴリ */
}
.p-infd__meta {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
color: #333333;
margin-top: 76px;
}
@media screen and (max-width: 767px) {
.p-infd__meta {
font-size: 1.3rem;
margin-top: 30px;
}
}
.p-infd__meta time {
display: inline;
}
.p-infd {
/* 記事タイトル */
}
.p-infd__head-ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 3rem;
line-height: 1.5;
color: #333333;
margin-top: 12px;
}
@media screen and (max-width: 767px) {
.p-infd__head-ttl {
font-size: 2rem;
margin-top: 8px;
}
}
.p-infd {
/* 本文（.c-editor） */
}
.p-infd .c-editor {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-infd .c-editor {
margin-top: 20px;
}
}
.p-infd__back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 70px;
padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
.p-infd__back {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 40px;
padding-bottom: 60px;
}
}
/*========================================
EVENT／SEMINAR
一覧（event/）／アーカイブ（event/archive/）／詳細（event/detail/）
コンテンツ幅 1000px
========================================*/
/*----------------------------------------
p-ev-head ページ導入（一覧／アーカイブ共通）
----------------------------------------*/
.p-ev-head {
padding: 0 20px 66px;
}
@media screen and (max-width: 767px) {
.p-ev-head {
padding: 0 20px 36px;
}
}
.p-ev-head__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-ev-head__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-ev-head__ttl {
font-size: 3.2rem;
margin-top: 102px;
}
}
.p-ev-head__txt {
margin-top: 36px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 40px;
letter-spacing: -0.01em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ev-head__txt {
margin-top: 20px;
font-size: 1.4rem;
line-height: 28px;
}
.p-ev-head__txt br {
display: none;
}
}
/*----------------------------------------
p-ev-cat カテゴリ見出し（セミナー・見学会／個別相談会）
----------------------------------------*/
.p-ev-cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
border-bottom: 1px solid #333333;
}
.p-ev-cat__label {
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;
min-width: 236px;
height: 56px;
padding: 0 30px;
background: #3c3b3a;
color: #ffffff;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-ev-cat__label {
min-width: 0;
height: 44px;
padding: 0 20px;
font-size: 1.4rem;
}
}
/*----------------------------------------
p-ev-list / p-ev-card イベントカード
----------------------------------------*/
.p-ev-list {
margin-top: 30px;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-ev-list {
margin-top: 18px;
}
}
.p-ev-list > li + li {
margin-top: 33px;
}
@media screen and (max-width: 767px) {
.p-ev-list > li + li {
margin-top: 16px;
}
}
.p-ev-card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background: #ffffff;
color: #333333;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.p-ev-card:hover {
opacity: 1;
}
.p-ev-card:hover .p-ev-card__img img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
@media screen and (max-width: 767px) {
.p-ev-card {
display: block;
}
}
.p-ev-card__img {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
overflow: hidden;
}
.p-ev-card__img img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4/3;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-ev-card__img {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.p-ev-card__img img {
height: auto;
}
}
.p-ev-card__body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
padding: 36px 40px 41px 34px;
}
@media screen and (max-width: 767px) {
.p-ev-card__body {
padding: 20px;
}
}
.p-ev-card__ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 2.2rem;
line-height: 35px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ev-card__ttl {
font-size: 1.6rem;
line-height: 26px;
}
}
.p-ev-card__meta {
margin-top: 12px;
}
@media screen and (max-width: 767px) {
.p-ev-card__meta {
margin-top: 14px;
}
}
.p-ev-card__meta > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 35px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ev-card__meta > div {
font-size: 1.3rem;
line-height: 24px;
}
}
.p-ev-card__meta dt {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.p-ev-card__meta dt::after {
content: "：";
}
.p-ev-card__meta dd {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
.p-ev-card__badge {
position: absolute;
inset: 0;
z-index: 2;
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;
background: rgba(0, 0, 0, 0.3);
color: #ffffff;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 1;
letter-spacing: 0.17em;
text-indent: 0.17em;
}
@media screen and (max-width: 767px) {
.p-ev-card__badge {
font-size: 2rem;
}
}
.p-ev-card.-arch {
border: 1px solid #707070;
}
/*----------------------------------------
p-ev-now 開催中（グレー地）
----------------------------------------*/
.p-ev-now {
padding: 89px 20px 110px;
background: #F2F2F2;
}
@media screen and (max-width: 767px) {
.p-ev-now {
padding: 40px 20px 50px;
}
}
.p-ev-now__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-ev-now .p-ev-cat + .p-ev-list + .p-ev-cat {
margin-top: 118px;
}
@media screen and (max-width: 767px) {
.p-ev-now .p-ev-cat + .p-ev-list + .p-ev-cat {
margin-top: 50px;
}
}
/*----------------------------------------
p-ev-arch アーカイブ（白地）
----------------------------------------*/
.p-ev-arch {
padding: 95px 20px 150px;
}
@media screen and (max-width: 767px) {
.p-ev-arch {
padding: 50px 20px 60px;
}
}
.p-ev-arch__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-ev-arch__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-ev-arch__ttl {
font-size: 3rem;
}
}
.p-ev-arch .p-ev-list {
margin-top: 41px;
}
@media screen and (max-width: 767px) {
.p-ev-arch .p-ev-list {
margin-top: 24px;
}
}
.p-ev-arch__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.p-ev-arch__more {
margin-top: 36px;
}
}
.p-ev-arch__more .c-btn {
width: 320px;
height: 70px;
padding: 0 50px 0 24px;
background: #ffffff;
}
.p-ev-arch__more .c-btn__arrow {
right: 21px;
}
/*========================================
詳細ページ（event/detail/）
========================================*/
/*----------------------------------------
p-evd-hero タイトル＋キービジュアル
----------------------------------------*/
.p-evd-hero {
padding: 0 20px;
text-align: center;
}
.p-evd-hero__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-hero__date {
margin-top: 150px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 5rem;
line-height: 1.2;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-hero__date {
margin-top: 90px;
font-size: 2.6rem;
}
}
.p-evd-hero__date.-paren {
padding-left: 0.63em;
}
.p-evd-hero__time {
margin-top: 9px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.3;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-hero__time {
font-size: 1.8rem;
}
}
.p-evd-hero__ttl {
margin-top: 14px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-hero__ttl {
margin-top: 10px;
font-size: 2rem;
line-height: 1.5;
}
}
.p-evd-hero__place {
margin-top: 5px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.5rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-hero__place {
font-size: 1.5rem;
}
}
.p-evd-hero__img {
position: relative;
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.p-evd-hero__img {
margin-top: 28px;
}
}
.p-evd-hero__img img {
display: block;
width: 100%;
aspect-ratio: 5/3;
-o-object-fit: cover;
object-fit: cover;
}
.p-evd-hero__img::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.p-evd-hero__copy {
position: absolute;
z-index: 2;
top: 50%;
left: 0;
width: 100%;
translate: 0 -50%;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 3.2rem;
line-height: 1.2;
letter-spacing: 0.08em;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-evd-hero__copy {
font-size: 1.6rem;
}
}
/*----------------------------------------
p-evd-head タイトル＋写真（個別相談会）
----------------------------------------*/
.p-evd-head {
padding: 0 20px;
}
.p-evd-head__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-head__ttl {
margin-top: 150px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-head__ttl {
margin-top: 90px;
font-size: 2rem;
}
}
.p-evd-head__img {
margin-top: 66px;
}
@media screen and (max-width: 767px) {
.p-evd-head__img {
margin-top: 26px;
}
}
.p-evd-head__img img {
display: block;
width: 100%;
aspect-ratio: 2/1;
-o-object-fit: cover;
object-fit: cover;
}
.p-evd-head + .p-evd-band {
margin-top: 71px;
}
@media screen and (max-width: 767px) {
.p-evd-head + .p-evd-band {
margin-top: 36px;
}
}
/*----------------------------------------
p-evd-lecturer 講師
----------------------------------------*/
.p-evd-lecturer {
padding: 74px 20px 0;
}
@media screen and (max-width: 767px) {
.p-evd-lecturer {
padding-top: 34px;
}
}
.p-evd-lecturer__card {
position: relative;
width: 540px;
max-width: 100%;
margin: 0 auto;
}
.p-evd-lecturer__card img {
display: block;
width: 100%;
aspect-ratio: 9/5;
-o-object-fit: cover;
object-fit: cover;
}
.p-evd-lecturer__body {
position: absolute;
top: 48.3%;
left: 58.3%;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
color: #333333;
text-align: left;
}
.p-evd-lecturer__label {
display: block;
width: 115px;
padding-bottom: 7px;
border-bottom: 1px solid #333333;
font-size: 1.6rem;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-evd-lecturer__label {
width: 76px;
padding-bottom: 4px;
font-size: 1.1rem;
}
}
.p-evd-lecturer__role {
display: block;
margin-top: 12px;
font-size: 1.7rem;
line-height: 26px;
}
@media screen and (max-width: 767px) {
.p-evd-lecturer__role {
margin-top: 7px;
font-size: 1.1rem;
line-height: 17px;
}
}
.p-evd-lecturer__name {
display: block;
margin-top: 8px;
font-size: 2.8rem;
line-height: 1.2;
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-evd-lecturer__name {
margin-top: 5px;
font-size: 1.8rem;
}
}
/*----------------------------------------
p-evd-apply 申込はこちらから（ゴールドバー）
----------------------------------------*/
.p-evd-apply {
padding: 74px 20px 0;
}
@media screen and (max-width: 767px) {
.p-evd-apply {
padding-top: 34px;
}
}
.p-evd-apply.-wide {
padding-top: 122px;
}
@media screen and (max-width: 767px) {
.p-evd-apply.-wide {
padding-top: 40px;
}
}
.p-evd-apply.-dark .p-evd-apply__btn {
background: #333333;
color: #ffffff;
border-radius: 0;
}
.p-evd-apply.-dark .p-evd-apply__btn:hover .p-evd-apply__arrow {
background: rgba(255, 255, 255, 0.25);
}
.p-evd-apply.-dark .p-evd-apply__arrow {
border-color: #ffffff;
}
.p-evd-apply.-dark .p-evd-apply__arrow::after {
background-color: #ffffff;
}
.p-evd-apply__free {
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-box-flex: 0;
-ms-flex: none;
flex: none;
width: 76px;
height: 36px;
margin-left: 17px;
border: 1px solid currentColor;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.7rem;
line-height: 1;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.p-evd-apply__free {
width: 48px;
height: 24px;
margin-left: 8px;
font-size: 1.1rem;
vertical-align: middle;
}
}
.p-evd-apply__btn {
position: relative;
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;
max-width: 1000px;
margin: 0 auto;
height: 131px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
background: #c59f67;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.4rem;
line-height: 1.4;
letter-spacing: 0.12em;
color: #ffffff;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.p-evd-apply__btn:hover {
opacity: 1;
}
.p-evd-apply__btn:hover .p-evd-apply__arrow {
background: rgba(255, 255, 255, 0.35);
}
@media screen and (max-width: 767px) {
.p-evd-apply__btn {
display: block;
height: auto;
min-height: 76px;
padding: 18px 56px 18px 20px;
font-size: 1.5rem;
line-height: 1.7;
letter-spacing: 0.04em;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.p-evd-apply__label {
vertical-align: middle;
}
}
.p-evd-apply__arrow {
position: absolute;
right: 21px;
top: 50%;
translate: 0 -50%;
display: block;
width: 48px;
height: 48px;
border: 1px solid #ffffff;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
@media screen and (max-width: 767px) {
.p-evd-apply__arrow {
right: 13px;
width: 30px;
height: 30px;
}
}
.p-evd-apply__arrow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
display: block;
width: 19px;
height: 16.321px;
background-color: #ffffff;
-webkit-mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
height: 15px;
}
@media screen and (max-width: 767px) {
.p-evd-apply__arrow::after {
width: 13px;
height: 10px;
}
}
/*----------------------------------------
p-evd-band 帯見出し
----------------------------------------*/
.p-evd-band {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 110px;
margin-top: 110px;
padding: 0 20px;
background: #F2F2F2;
}
@media screen and (max-width: 767px) {
.p-evd-band {
height: auto;
margin-top: 50px;
padding: 18px 20px;
}
}
.p-evd-band__inner {
max-width: 1000px;
margin: 0 auto;
width: 100%;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-band__inner {
font-size: 1.8rem;
}
}
/*----------------------------------------
p-evd-sec 本文セクション
----------------------------------------*/
.p-evd-sec {
padding: 52px 20px 0;
}
@media screen and (max-width: 767px) {
.p-evd-sec {
padding-top: 26px;
}
}
.p-evd-sec__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-sec.-beige {
margin-top: 110px;
padding: 66px 20px 80px;
background: #f2ece1;
}
@media screen and (max-width: 767px) {
.p-evd-sec.-beige {
margin-top: 50px;
padding: 36px 20px 40px;
}
}
.p-evd-fig img {
display: block;
width: 100%;
height: auto;
}
.p-evd-fig + .p-evd-txt {
margin-top: 34px;
}
.p-evd-txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
.p-evd-txt + .p-evd-txt {
margin-top: 26px;
}
@media screen and (max-width: 767px) {
.p-evd-txt {
font-size: 1.4rem;
line-height: 24px;
}
.p-evd-txt + .p-evd-txt {
margin-top: 20px;
}
}
.p-evd-lead {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.9rem;
line-height: 1.6;
color: #333333;
margin-top: 70px;
}
.p-evd-lead + .p-evd-txt {
margin-top: 22px;
}
@media screen and (max-width: 767px) {
.p-evd-lead {
margin-top: 30px;
font-size: 1.5rem;
}
}
/*----------------------------------------
p-evd-point セミナーで分かること
----------------------------------------*/
/* ----------------------------------------
p-evd-gallery ショールームの事例写真（TOPのレジデンスギャラリーと同じ並び）
----------------------------------------*/
.p-evd-gallery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0;
margin: 33px 0 35px;
font-size: 0;
}
.p-evd-gallery li {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
.p-evd-gallery img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-evd-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 0 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin: 24px 0 26px;
}
}
.p-evd-point {
margin-top: 34px;
padding: 37px 20px 61px;
background: #f2ece1;
}
@media screen and (max-width: 767px) {
.p-evd-point {
margin-top: 24px;
padding: 28px 20px 30px;
}
}
.p-evd-point__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 1.4;
letter-spacing: 0.06em;
color: #333333;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding: 0 20px 7px;
border-bottom: 2px solid #c59f67;
}
@media screen and (max-width: 767px) {
.p-evd-point__ttl {
font-size: 1.7rem;
padding-bottom: 6px;
}
}
.p-evd-point__list {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 42px auto 0;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-evd-point__list {
margin-top: 22px;
width: 100%;
}
}
.p-evd-point__list li {
position: relative;
padding-left: 46px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.6;
color: #333333;
}
.p-evd-point__list li + li {
margin-top: 26px;
}
@media screen and (max-width: 767px) {
.p-evd-point__list li {
padding-left: 30px;
font-size: 1.4rem;
}
.p-evd-point__list li + li {
margin-top: 14px;
}
}
.p-evd-point__list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 26px;
height: 26px;
background: url(../img/common/ico_check.svg) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
.p-evd-point__list li::before {
width: 18px;
height: 18px;
top: 2px;
}
}
/*----------------------------------------
p-evd-voice 参加者の声
----------------------------------------*/
.p-evd-voice {
margin-top: 95px;
padding: 62px 20px 81px;
background: #f2ece1;
}
@media screen and (max-width: 767px) {
.p-evd-voice {
margin-top: 44px;
padding: 36px 20px 40px;
}
}
.p-evd-voice__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-voice__ttl {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding: 0 33px 10px;
border-bottom: 2px solid #c59f67;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.6rem;
line-height: 1.2;
letter-spacing: 0.06em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-voice__ttl {
font-size: 1.8rem;
padding-bottom: 8px;
}
}
.p-evd-voice__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 26px;
margin-top: 33px;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-evd-voice__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 14px;
margin-top: 22px;
}
}
.p-evd-voice__item {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
padding: 35px 30px 36px 37px;
background: #ffffff;
border: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
.p-evd-voice__item {
padding: 20px;
}
}
.p-evd-voice__who {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 1.4;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-voice__who {
font-size: 1.4rem;
}
}
.p-evd-voice__who img {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 90px;
height: 90px;
margin-right: 14px;
}
@media screen and (max-width: 767px) {
.p-evd-voice__who img {
width: 60px;
height: 60px;
margin-right: 10px;
}
}
.p-evd-voice__txt {
margin-top: 37px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 32px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-voice__txt {
margin-top: 14px;
font-size: 1.4rem;
line-height: 26px;
}
}
/*----------------------------------------
p-evd-outline 開催概要
----------------------------------------*/
.p-evd-outline {
padding: 100px 20px 0;
}
@media screen and (max-width: 767px) {
.p-evd-outline {
padding-top: 46px;
}
}
.p-evd-outline__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-outline__ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 2.2rem;
line-height: 1.5;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-outline__ttl {
font-size: 1.6rem;
}
}
.p-evd-outline__dl {
margin-top: 36px;
}
@media screen and (max-width: 767px) {
.p-evd-outline__dl {
margin-top: 24px;
}
}
.p-evd-outline__dl > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.8rem;
line-height: 1.6;
color: #333333;
}
.p-evd-outline__dl > div + div {
margin-top: 21px;
}
@media screen and (max-width: 767px) {
.p-evd-outline__dl > div {
font-size: 1.4rem;
}
.p-evd-outline__dl > div + div {
margin-top: 14px;
}
}
.p-evd-outline__dl dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 92px;
flex: 0 0 92px;
}
@media screen and (max-width: 767px) {
.p-evd-outline__dl dt {
-ms-flex-preferred-size: 64px;
flex-basis: 64px;
}
}
.p-evd-outline__dl dd {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
}
.p-evd-outline__note {
margin-top: 16px;
padding-left: 92px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.4rem;
line-height: 24px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-outline__note {
margin-top: 14px;
padding-left: 0;
font-size: 1.2rem;
line-height: 20px;
}
}
/*----------------------------------------
p-evd-consult セミナー後の個別相談
----------------------------------------*/
.p-evd-consult {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-top: 95px;
}
@media screen and (max-width: 767px) {
.p-evd-consult {
display: block;
margin-top: 40px;
}
}
.p-evd-consult__body {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
min-width: 0;
padding: 53px 47px 54px 36px;
background: #F2F2F2;
}
@media screen and (max-width: 767px) {
.p-evd-consult__body {
padding: 24px 20px;
}
}
.p-evd-consult__ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.8rem;
line-height: 1.5;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-consult__ttl {
font-size: 1.5rem;
}
}
.p-evd-consult__txt {
margin-top: 22px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-consult__txt {
margin-top: 12px;
font-size: 1.3rem;
line-height: 22px;
}
}
.p-evd-consult__img {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
min-width: 0;
}
.p-evd-consult__img img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-evd-consult__img img {
height: auto;
}
}
/*----------------------------------------
p-evd-place 会場情報
----------------------------------------*/
.p-evd-apply.-dark + .p-evd-place {
padding-top: 63px;
}
@media screen and (max-width: 767px) {
.p-evd-apply.-dark + .p-evd-place {
padding-top: 34px;
}
}
.p-evd-place {
padding: 118px 20px 0;
}
@media screen and (max-width: 767px) {
.p-evd-place {
padding-top: 50px;
}
}
.p-evd-place__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-place__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.4rem;
line-height: 1.5;
letter-spacing: 0.04em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-place__ttl {
font-size: 1.7rem;
}
}
.p-evd-place__map {
margin-top: 24px;
}
.p-evd-place__map iframe {
display: block;
width: 100%;
height: 500px;
border: 0;
}
@media screen and (max-width: 767px) {
.p-evd-place__map iframe {
height: 260px;
}
}
.p-evd-place__name {
margin-top: 43px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.2rem;
line-height: 1.4;
letter-spacing: 0.04em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-place__name {
margin-top: 24px;
font-size: 1.6rem;
}
}
.p-evd-place__info {
margin-top: 26px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 25px;
color: #333333;
}
.p-evd-place__info + .p-evd-place__info {
margin-top: 25px;
}
@media screen and (max-width: 767px) {
.p-evd-place__info {
margin-top: 16px;
font-size: 1.3rem;
line-height: 22px;
}
}
/*----------------------------------------
p-evd-entry ご参加申込み（フォーム）
----------------------------------------*/
.p-evd-entry {
margin-top: 124px;
padding: 0 20px 150px;
scroll-margin-top: 120px;
}
@media screen and (max-width: 767px) {
.p-evd-entry {
margin-top: 56px;
padding: 0 0 60px;
}
}
.p-evd-entry__panel {
max-width: 1284px;
margin: 0 auto;
padding: 96px 142px 110px;
background: #F2F2F2;
}
@media screen and (max-width: 767px) {
.p-evd-entry__panel {
padding: 40px 20px 50px;
}
}
.p-evd-entry__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-evd-entry__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.3;
letter-spacing: 0.04em;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-entry__ttl {
font-size: 2.2rem;
}
}
.p-evd-entry__lead {
margin-top: 50px;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 1.8;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-evd-entry__lead {
margin-top: 20px;
font-size: 1.3rem;
}
}
.p-evd-entry .p-fm-step {
margin-top: 127px;
}
@media screen and (max-width: 767px) {
.p-evd-entry .p-fm-step {
margin-top: 40px;
}
}
.p-evd-entry .p-fm-body {
margin-top: 140px;
}
@media screen and (max-width: 767px) {
.p-evd-entry .p-fm-body {
margin-top: 70px;
}
}
.p-evd-entry .p-fm-panel {
display: none;
}
.p-evd-entry .p-fm-panel.is-active {
display: block;
}
.p-evd-entry .p-fm-input,
.p-evd-entry .p-fm-select,
.p-evd-entry .p-fm-list,
.p-evd-entry .p-fm-textarea {
background: #ffffff;
}
/*----------------------------------------
p-evd-fix 追従ボタン（予約受付中）
PC：右下に円形／SP：右下に横長バー
----------------------------------------*/
.p-evd-fix {
position: fixed;
right: 40px;
bottom: 40px;
z-index: 90;
opacity: 0;
visibility: hidden;
translate: 0 14px;
-webkit-transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.p-evd-fix {
right: 0;
left: 0;
bottom: 0;
width: 100%;
translate: 0 100%;
}
}
.p-evd-fix.is-show {
opacity: 1;
visibility: visible;
translate: 0 0;
}
.p-evd-fix__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 160px;
height: 160px;
border-radius: 50%;
background: #c59f67;
color: #ffffff;
text-align: center;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.p-evd-fix__link:hover {
opacity: 1;
}
.p-evd-fix__link:hover .p-evd-fix__btn {
background: #333333;
color: #ffffff;
}
.p-evd-fix__link:hover .p-evd-fix__arrow {
background-color: #ffffff;
}
@media screen and (max-width: 767px) {
.p-evd-fix__link {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
height: 56px;
padding: 0 20px;
border-radius: 0;
}
}
.p-evd-fix__ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2.2rem;
line-height: 26px;
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-evd-fix__ttl {
font-size: 1.5rem;
line-height: 1;
margin-right: 14px;
}
}
.p-evd-fix__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;
width: 92px;
height: 32px;
margin-top: 11px;
border-radius: 5px;
background: #ffffff;
color: #333333;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.4rem;
line-height: 1;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
}
@media screen and (max-width: 767px) {
.p-evd-fix__btn {
width: 120px;
height: 32px;
margin-top: 0;
font-size: 1.3rem;
}
}
.p-evd-fix__arrow {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
margin-left: 10px;
display: block;
width: 13px;
height: 11.167px;
background-color: #333333;
-webkit-mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow2.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
@media screen and (max-width: 767px) {
.p-evd-fix__arrow {
margin-left: 6px;
width: 11px;
height: 9.449px;
}
}
/*========================================
qa / よくあるご質問
========================================*/
/*----------------------------------------
p-qa-head 上部メニュー（AUN修正①㉕）
通常は2列グリッド、追従（固定）時は横一列
----------------------------------------*/
.p-qa-head {
position: sticky;
top: 105px;
z-index: 20;
background: #ffffff;
margin-top: 191px;
padding: 14px 20px 24px;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
@media screen and (max-width: 767px) {
.p-qa-head {
top: 56px;
margin-top: 102px;
padding: 10px 20px 14px;
}
}
.p-qa-head__inner {
max-width: 1000px;
margin: 0 auto;
}
.p-qa-head__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-weight: 400;
font-size: 6rem;
line-height: 1.2;
color: #333333;
-webkit-transition: font-size 0.3s;
transition: font-size 0.3s;
}
@media screen and (max-width: 767px) {
.p-qa-head__ttl {
font-size: 3rem;
}
}
.p-qa-head {
/* ------ 追従時はコンパクトな横一列 ------ */
}
.p-qa-head.is-stuck {
padding: 10px 20px 14px;
}
.p-qa-head.is-stuck .p-qa-head__ttl {
font-size: 3rem;
}
@media screen and (max-width: 767px) {
.p-qa-head.is-stuck .p-qa-head__ttl {
font-size: 2.2rem;
}
}
.p-qa-head.is-stuck .p-qa-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: 10px;
margin-top: 12px;
}
@media screen and (max-width: 767px) {
.p-qa-head.is-stuck .p-qa-nav {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 6px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-top: 8px;
}
}
.p-qa-head.is-stuck .p-qa-nav__btn {
width: auto;
height: 48px;
padding: 0 30px 0 14px;
font-size: 1.2rem;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.p-qa-head.is-stuck .p-qa-nav__btn {
width: 100%;
height: auto;
min-height: 36px;
padding: 5px 18px 5px 8px;
font-size: 1.05rem;
line-height: 1.35;
}
}
.p-qa-head.is-stuck .p-qa-nav__arrow {
right: 11px;
width: 11px;
}
.p-qa-nav {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 34px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 33px 34px;
margin-top: 36px;
-webkit-transition: gap 0.3s, margin-top 0.3s;
transition: gap 0.3s, margin-top 0.3s;
}
@media screen and (max-width: 767px) {
.p-qa-nav {
-ms-grid-columns: 1fr 8px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 16px;
}
}
.p-qa-nav__item {
min-width: 0;
}
.p-qa-nav__btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 62px;
padding: 0 52px 0 31px;
border: 1px solid #3c3b3a;
background: #3c3b3a;
color: #ffffff;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.4;
letter-spacing: 0.02em;
white-space: nowrap;
-webkit-transition: background-color 0.4s, color 0.4s, height 0.3s, font-size 0.3s, padding 0.3s;
transition: background-color 0.4s, color 0.4s, height 0.3s, font-size 0.3s, padding 0.3s;
}
.p-qa-nav__btn:hover, .p-qa-nav__btn.is-active {
opacity: 1;
background: #ffffff;
color: #3c3b3a;
}
@media screen and (max-width: 767px) {
.p-qa-nav__btn {
height: auto;
min-height: 46px;
padding: 8px 24px 8px 10px;
font-size: 1.15rem;
line-height: 1.4;
letter-spacing: 0;
white-space: normal;
}
}
.p-qa-nav__arrow {
position: absolute;
right: 28px;
top: 50%;
display: block;
width: 15px;
height: 17.73px;
background-color: currentColor;
-webkit-mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
mask: url(../img/common/ico_arrow_down.svg) no-repeat center/contain;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: right 0.3s, width 0.3s;
transition: right 0.3s, width 0.3s;
}
@media screen and (max-width: 767px) {
.p-qa-nav__arrow {
right: 8px;
width: 11px;
}
}
.p-qa {
position: relative;
padding: 60px 20px 130px;
}
@media screen and (max-width: 767px) {
.p-qa {
padding: 30px 20px 60px;
}
}
.p-qa {
/* ------ ナビ＋本文 ------ */
}
.p-qa__wrap {
max-width: 1000px;
margin: 0 auto;
}
.p-qa {
/* ------ 本文 ------ */
}
.p-qa__body {
width: 100%;
min-width: 0;
}
.p-qa {
/* ------ カテゴリー ------ */
}
.p-qa__cat {
scroll-margin-top: 220px;
}
.p-qa__cat + .p-qa__cat {
margin-top: 100px;
}
@media screen and (max-width: 767px) {
.p-qa__cat {
scroll-margin-top: 130px;
}
.p-qa__cat + .p-qa__cat {
margin-top: 50px;
}
}
.p-qa__cat-ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-weight: 400;
font-size: 2rem;
line-height: 1.5;
color: #333333;
padding-bottom: 22px;
border-bottom: 1px solid #d5d5d5;
}
@media screen and (max-width: 767px) {
.p-qa__cat-ttl {
font-size: 1.7rem;
padding-bottom: 14px;
}
}
.p-qa {
/* ------ 1問1答 ------ */
}
.p-qa__item {
border-bottom: 1px solid #d5d5d5;
}
.p-qa__q {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 24px 50px 24px 0;
text-align: left;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-qa__q {
padding: 16px 34px 16px 0;
}
}
.p-qa__q .mark {
-webkit-box-flex: 0;
-ms-flex: 0 0 44px;
flex: 0 0 44px;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2rem;
line-height: 1;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-qa__q .mark {
-webkit-box-flex: 0;
-ms-flex: 0 0 26px;
flex: 0 0 26px;
font-size: 1.6rem;
}
}
.p-qa__q .txt {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.6;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-qa__q .txt {
font-size: 1.4rem;
}
}
.p-qa__icon {
position: absolute;
top: 50%;
right: 6px;
width: 20px;
height: 20px;
margin-top: -10px;
}
.p-qa__icon::before, .p-qa__icon::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #333333;
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
transition: -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-qa__icon::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
@media screen and (max-width: 767px) {
.p-qa__icon {
right: 0;
width: 16px;
height: 16px;
margin-top: -8px;
}
}
.p-qa__item.is-open .p-qa__icon::after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.p-qa__a {
display: none;
padding: 0 50px 30px 0;
}
@media screen and (max-width: 767px) {
.p-qa__a {
padding: 0 0 20px;
}
}
.p-qa__a-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.p-qa__a .mark {
-webkit-box-flex: 0;
-ms-flex: 0 0 44px;
flex: 0 0 44px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 2.47rem;
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-size: 2rem;
line-height: 1;
color: #c9c9c9;
}
@media screen and (max-width: 767px) {
.p-qa__a .mark {
-webkit-box-flex: 0;
-ms-flex: 0 0 26px;
flex: 0 0 26px;
height: 2.28rem;
font-size: 1.6rem;
}
}
.p-qa__a .txt {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.3rem;
line-height: 1.9;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-qa__a .txt {
font-size: 1.2rem;
}
}
.p-qa__a .txt p + p {
margin-top: 1.9em;
}
.p-qa__a-ttl {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 1.3rem;
line-height: 1.9;
}
@media screen and (max-width: 767px) {
.p-qa__a-ttl {
font-size: 1.2rem;
}
}
/*========================================
privacy/ プライバシーポリシー
コンテンツ幅 1080px
========================================*/
.p-pp {
padding: 0 20px 150px;
}
@media screen and (max-width: 767px) {
.p-pp {
padding: 0 20px 70px;
}
}
.p-pp__inner {
max-width: 1080px;
margin: 0 auto;
}
.p-pp {
/* ------ タイトル ------ */
}
.p-pp__ttl {
font-family: "Times New Roman", Times, "游明朝体", "Yu Mincho", YuMincho, serif;
font-weight: 400;
font-style: normal;
font-weight: 400;
font-size: 5rem;
line-height: 1.2;
color: #333333;
margin-top: 191px;
}
@media screen and (max-width: 767px) {
.p-pp__ttl {
font-size: 3rem;
margin-top: 102px;
}
}
.p-pp {
/* ------ リード文 ------ */
}
.p-pp__lead {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 40px;
color: #333333;
margin-top: 43px;
}
@media screen and (max-width: 767px) {
.p-pp__lead {
font-size: 1.4rem;
line-height: 28px;
margin-top: 30px;
}
.p-pp__lead br {
display: none;
}
}
.p-pp {
/* ------ 条項 ------ */
}
.p-pp__sec {
margin-top: 118px;
}
@media screen and (max-width: 767px) {
.p-pp__sec {
margin-top: 50px;
}
}
.p-pp__sec:first-of-type {
margin-top: 133px;
}
@media screen and (max-width: 767px) {
.p-pp__sec:first-of-type {
margin-top: 56px;
}
}
.p-pp__sec-ttl {
font-family: "游明朝体", "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
font-weight: 400;
font-weight: 400;
font-size: 2.4rem;
line-height: 1.5;
letter-spacing: 0.04em;
color: #333333;
padding-bottom: 26px;
border-bottom: 1px solid #dcdcdc;
}
@media screen and (max-width: 767px) {
.p-pp__sec-ttl {
font-size: 1.7rem;
padding-bottom: 14px;
}
}
.p-pp {
/* ------ 本文 ------ */
}
.p-pp__txt {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 30px;
color: #333333;
margin-top: 25px;
}
@media screen and (max-width: 767px) {
.p-pp__txt {
font-size: 1.3rem;
line-height: 26px;
margin-top: 18px;
}
}
.p-pp__txt + .p-pp__txt {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-pp__txt + .p-pp__txt {
margin-top: 22px;
}
}
.p-pp__txt.-tight {
margin-top: 0;
}
.p-pp {
/* ------ 番号付きの箇条書き ------ */
}
.p-pp__list {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-pp__list {
margin-top: 20px;
}
}
.p-pp__list li {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 30px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-pp__list li {
font-size: 1.3rem;
line-height: 26px;
}
}
.p-pp {
/* ------ 小見出し付きのかたまり（第10条・第12条） ------ */
}
.p-pp__block {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.p-pp__block {
margin-top: 22px;
}
}
.p-pp__sub {
font-family: "游ゴシック体 Std", "Yu Gothic Std", "YuGoStd", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGo-Medium", "YuGoStd-Medium", "YuGothic-Medium", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Noto Sans JP", sans-serif;
font-size: 1.5rem;
line-height: 30px;
color: #333333;
}
@media screen and (max-width: 767px) {
.p-pp__sub {
font-size: 1.3rem;
line-height: 26px;
}
}
.p-pp__link {
color: #333333;
text-decoration: underline;
text-underline-offset: 4px;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-pp__link:hover {
opacity: 0.6;
}