@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bellefair&display=swap");
/* =================================================
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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0;
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: inherit;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, main, hgroup, menu, nav, section, summary {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: 400;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q::before, q::after,
blockquote::before, blockquote::after {
content: "";
content: none;
}
fieldset, img {
border: 0;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-size: 100%;
}
input, select {
vertical-align: middle;
}
/* =================================================
COMMON
================================================= */
html {
width: 100%;
height: auto;
}
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
word-break: normal;
word-wrap: break-word;
color: hsl(0, 0%, 0%);
text-align: left;
width: 100%;
height: 100%;
background: hsl(0, 0%, 100%);
}
nav ul {
list-style: none;
}
img {
vertical-align: middle;
}
figcaption {
display: block;
}
summary::-webkit-details-marker {
display: none; /* delete arrow */
}
a, a:link {
color: hsl(0, 0%, 0%);
text-decoration: none;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
background: transparent;
}
a:hover {
color: hsl(0, 0%, 0%);
}
/* -------------------------------------
font
------------------------------------- */
html,
body {
line-height: 1.75;
}
/* 320 : iPhone , 360 : Android , 375 : iPhone6 , 414 : iPhone6 Plus */
@media screen and (min-width: 0px) and (max-width: 320px) {
html,
body {
font-size: 62.5%; /* 10px */
font-size: 2.6666666667vw; /* 10px:375 */
}
}
@media screen and (min-width: 321px) and (max-width: 767px) {
html,
body {
font-size: 62.5%; /* 10px */
font-size: 2.6666666667vw; /* 10px:375 */
}
}
@media screen and (min-width: 768px) {
html,
body {
font-size: 62.5%; /* 10px */
line-height: 1.75;
}
}
body {
font-family: "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: normal;
}
.f_min {
font-family: "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
}
.f_go {
font-family: "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
}
/* =================================================
Global layout
================================================= */
/* -------------------------------------
magnific-popup
*/
.mfp-bg.mfp-popup {
z-index: 100002;
opacity: 0;
transition: all 0.15s ease-out;
}
.mfp-bg.mfp-popup.mfp-ready {
opacity: 0.8;
}
.mfp-bg.mfp-popup.mfp-removing {
opacity: 0;
}
.mfp-wrap.mfp-popup {
z-index: 100003;
}
.mfp-wrap.mfp-popup .mfp-content {
opacity: 0;
transition: all 0.15s ease-out;
}
.mfp-wrap.mfp-popup.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-wrap.mfp-popup.mfp-removing .mfp-content {
opacity: 0;
}
/* -----------------------------------------------
common
----------------------------------------------- */
#container {
/* -------------------------------------
Effects
*/
}
#container .sp img {
display: block;
width: 100%;
height: auto;
}
#container .pc {
display: none !important;
}
#container [data-ruby] {
display: inline-block;
margin: 0.9rem 0 0;
position: relative;
}
#container [data-ruby]:before {
content: attr(data-ruby);
display: block;
white-space: nowrap;
letter-spacing: 0.075em;
text-align: center;
font-size: 0.9rem;
width: auto;
margin: 0;
position: absolute;
top: -1.1em;
left: 50%;
transform: translateX(-50%);
}
#container .cover img,
#container .cover video,
#container img.cover,
#container video.cover {
width: 100%;
height: 100%;
object-fit: cover;
}
#container .fade_block {
opacity: 0;
transform: translateY(5.3333333333vw);
transition: opacity 1.5s, transform 1s;
}
#container .fade_block.active {
opacity: 1;
transform: translateY(0);
}
#container .fixfigure_2 {
display: flex;
flex-direction: column;
position: relative;
}
#container .fixfigure_2 figure {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
#container .fixfigure_2 figure img {
width: auto !important;
height: 100% !important;
position: relative;
z-index: -1;
left: 50%;
transform: translateX(-50%);
}
#container .fixfigure_3 {
position: relative;
}
#container .fixfigure_3 figure {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
#container .fixfigure_3 figure img {
height: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* -------------------------------------
Gloal Layout
------------------------------------- */
#container {
display: grid;
align-items: stretch;
grid-template-columns: 100%;
grid-template-rows: auto auto auto 1fr;
grid-template-areas: "header" "main" "footer_group" "footer";
font-size: 1.4rem;
text-align: left;
width: 100%;
padding: 13.3333333333vw 0 0;
min-height: 100vh;
min-height: 100dvh;
box-sizing: border-box;
overflow: hidden;
}
#container #py {
width: 100%;
height: 100vh;
height: 100svh;
box-sizing: border-box;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
#container .anchor {
position: relative;
z-index: 1;
}
#container .anchor a,
#container .anchor a:link {
text-decoration: none;
display: block !important;
position: absolute !important;
z-index: -1;
top: -18.6666666667vw;
}
#container .anchor a#aform,
#container .anchor a:link#aform {
top: -29.3333333333vw;
}
#container .anchor.nopos {
position: static;
}
#container #header {
grid-area: header;
}
#container #main {
grid-area: main;
}
#container .footer_group {
grid-area: footer_group;
}
#container #footer {
grid-area: footer;
}
#container.page #py {
height: 22.6666666667vw;
}
/* -------------------------------------
header
------------------------------------- */
#container {
/* -------------------------------------
normal
*/
/* -------------------------------------
fixed
*/
}
#container #header {
width: 100%;
position: fixed;
z-index: 9999;
top: 0;
/* -------------------------------------
b_open
------------------------------------- */
}
#container #header .inner {
height: 13.3333333333vw;
position: relative;
}
#container #header .inner .content {
/* -------------------------------
main
*/
/* -------------------------------
menu
*/
}
#container #header .inner .content.main {
width: 100%;
height: 100%;
background: hsl(0, 0%, 100%);
position: relative;
z-index: 9;
top: 0;
transition: 0.2s;
}
#container #header .inner .content.main h1.h1_1 {
width: 42.6666666667vw;
height: 100%;
}
#container #header .inner .content.main h1.h1_1 a,
#container #header .inner .content.main h1.h1_1 a:link {
text-decoration: none;
display: block;
width: 42.6666666667vw;
height: 100%;
padding: 0;
box-sizing: border-box;
position: relative;
z-index: 1;
}
#container #header .inner .content.main h1.h1_1 span {
display: block;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 500;
font-feature-settings: "palt";
letter-spacing: 0.075em;
color: hsl(0, 0%, 0%);
line-height: 1;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s;
}
#container #header .inner .content.main h1.h1_1 span.img {
width: 34.6666666667vw;
}
#container #header .inner .content.main h1.h1_1 span.img.top {
opacity: 0;
}
#container #header .inner .content.main #b_openmenu {
display: block;
width: 13.3333333333vw;
height: 13.3333333333vw;
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
#container #header .inner .content.main #b_openmenu .icon {
display: block;
width: 5.3333333333vw;
border-top: 2px solid hsl(0, 0%, 0%);
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
transition: opacity 0.2s, transform 0.1s;
}
#container #header .inner .content.main #b_openmenu .icon:before, #container #header .inner .content.main #b_openmenu .icon:after {
content: "";
display: block;
width: 100%;
border-top: 2px solid hsl(0, 0%, 0%);
box-sizing: border-box;
position: absolute;
z-index: 1;
transition: 0.2s;
}
#container #header .inner .content.main #b_openmenu .icon:before {
bottom: -1.6vw;
}
#container #header .inner .content.main #b_openmenu .icon:after {
bottom: 1.6vw;
}
#container #header .inner .content.menu nav {
width: 100%;
padding: 0;
margin: 0 auto;
position: relative;
}
#container #header .inner .content.menu nav ul {
list-style: none;
width: 100%;
padding: 0;
}
#container #header .inner .content.menu nav ul li {
display: block;
position: relative;
}
#container #header .inner .content.menu nav ul li a,
#container #header .inner .content.menu nav ul li a:link {
display: block;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.1em;
text-decoration: none;
box-sizing: border-box;
}
#container #header .inner .content.menu #menu_main.menu_1 {
display: none;
width: 100%;
height: 100vh;
height: 100dvh;
padding: 22.6666666667vw 0 0;
background: hsl(0, 0%, 100%);
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: auto;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel {
margin: 0 auto 4vw;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p {
text-align: center;
line-height: 1;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p i {
display: block;
width: 4vw;
margin-right: 0.5em;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p .tellink {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.01em;
font-size: 2.4rem;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p .tellink a,
#container #header .inner .content.menu #menu_main.menu_1 .tel p .tellink a:link {
text-decoration: none;
color: hsl(0, 0%, 0%);
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p:first-of-type {
display: flex;
align-items: center;
justify-content: center;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p:nth-of-type(2) {
font-size: 1.2rem;
margin: 4vw auto 0;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu {
display: block;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li {
line-height: 1;
width: 73.3333333333vw;
margin: 0 auto;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a:link {
color: hsl(0, 0%, 0%);
font-size: 1.4rem;
padding: 2vw 0 2vw 4vw;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a br,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a:link br {
display: none;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a br.sp,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a:link br.sp {
display: none;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a::before,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a:link::before {
content: "";
display: block;
width: 1.3333333333vw;
height: 1.3333333333vw;
border-top: 1px solid hsl(0, 0%, 0%);
border-right: 1px solid hsl(0, 0%, 0%);
box-sizing: border-box;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(45deg);
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_1 a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_1 a:link, #container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a:link {
padding: 2vw 0 2vw 8vw;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a:link {
padding: 2vw 0 2vw 12vw;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr {
display: block;
padding: 0 0 8vw;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li {
line-height: 1;
width: 50.6666666667vw;
margin: 1.3333333333vw auto 0;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:link {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
width: 100%;
height: 8vw;
border: 1px solid hsl(0, 0%, 60%);
position: relative;
z-index: 1;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a .txt_2,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:link .txt_2 {
display: none;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.sns {
display: flex;
align-items: center;
justify-content: center;
padding: 8vw 0;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.sns li {
line-height: 1;
width: 6.4vw;
margin: 0 2vw;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.sns li a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.sns li a:link {
width: 100%;
}
#container #header.open {
height: 100vh;
height: 100dvh;
}
#container #header.open .inner .content {
/* -------------------------------
main
*/
}
#container #header.open .inner .content.main {
box-shadow: 0px 6px 3px -3px rgba(0, 0, 0, 0.1);
}
#container #header.open .inner .content.main #b_openmenu .icon {
border-top: 1px solid rgba(177, 0, 32, 0);
}
#container #header.open .inner .content.main #b_openmenu .icon:before, #container #header.open .inner .content.main #b_openmenu .icon:after {
bottom: 50%;
}
#container #header.open .inner .content.main #b_openmenu .icon:before {
transform: translateY(50%) rotate(140deg);
}
#container #header.open .inner .content.main #b_openmenu .icon:after {
transform: translateY(50%) rotate(-140deg);
}
#container.fixed #header .inner .content {
/* -------------------------------
main
*/
}
#container.fixed #header .inner .content.main {
box-shadow: 0px 6px 3px -3px rgba(0, 0, 0, 0.1);
}
#container.header-fullimage {
padding: 0;
}
#container.header-fullimage #header .inner .content.main {
background: rgba(255, 255, 255, 0);
}
#container.header-fullimage #header .inner .content.main h1.h1_1 span.img.page {
opacity: 0;
}
#container.header-fullimage #header .inner .content.main h1.h1_1 span.img.top {
display: block;
opacity: 1;
}
#container.header-fullimage #header .inner .content.main #b_openmenu .icon {
border-top: 2px solid hsl(0, 0%, 100%);
}
#container.header-fullimage #header .inner .content.main #b_openmenu .icon:before, #container.header-fullimage #header .inner .content.main #b_openmenu .icon:after {
border-top: 2px solid hsl(0, 0%, 100%);
}
#container.header-fullimage #header.open .inner .content.main {
background: white;
}
#container.header-fullimage #header.open .inner .content.main h1.h1_1 span.img.page {
opacity: 1;
}
#container.header-fullimage #header.open .inner .content.main h1.h1_1 span.img.top {
opacity: 0;
}
#container.header-fullimage #header.open .inner .content.main #b_openmenu .icon {
border-top: 1px solid rgba(177, 0, 32, 0);
}
#container.header-fullimage #header.open .inner .content.main #b_openmenu .icon:before, #container.header-fullimage #header.open .inner .content.main #b_openmenu .icon:after {
border-top: 2px solid hsl(0, 0%, 0%);
}
#container.header-fullimage.fixed #header .inner .content.main {
background: white;
}
#container.header-fullimage.fixed #header .inner .content.main h1.h1_1 span.img.page {
opacity: 1;
}
#container.header-fullimage.fixed #header .inner .content.main h1.h1_1 span.img.top {
opacity: 0;
}
#container.header-fullimage.fixed #header .inner .content.main #b_openmenu .icon {
border-top: 2px solid hsl(0, 0%, 0%);
}
#container.header-fullimage.fixed #header .inner .content.main #b_openmenu .icon:before, #container.header-fullimage.fixed #header .inner .content.main #b_openmenu .icon:after {
border-top: 2px solid hsl(0, 0%, 0%);
}
#container.header-fullimage.fixed #header.open .inner .content.main #b_openmenu .icon {
border-top: 1px solid rgba(177, 0, 32, 0);
}
/* -------------------------------------
Contents Common
------------------------------------- */
#container {
/* -------------------------------------
aside
------------------------------------- */
/* -------------------------------------
section
------------------------------------- */
}
#container a,
#container a:link {
display: block;
}
#container a.txtlink,
#container a:link.txtlink {
display: inline-block;
color: hsl(0, 0%, 40%);
text-decoration: underline;
font-weight: bold;
}
#container a.txtlink:hover,
#container a:link.txtlink:hover {
color: #b3c4de;
text-decoration: none;
}
#container h2,
#container h3,
#container h4,
#container h5,
#container h6 {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
line-height: 1.5;
}
#container h2 span,
#container h3 span,
#container h4 span,
#container h5 span,
#container h6 span {
display: block;
letter-spacing: 0.075em;
}
#container p {
color: hsl(0, 0%, 20%);
font-size: 1.4rem;
line-height: 1.75;
margin-top: 0.5em;
}
#container p:first-of-type {
margin-top: 0;
}
#container p.bodytext {
line-height: 2;
}
#container .text.bodytext p {
line-height: 2;
}
#container ul li,
#container ol li {
color: hsl(0, 0%, 20%);
font-size: 1.4rem;
line-height: 1.75;
}
#container table tr th,
#container table tr td {
color: hsl(0, 0%, 20%);
font-size: 1.4rem;
}
#container img {
display: block;
width: 100%;
height: auto;
}
#container img.border {
border: 1px solid hsl(0, 0%, 80%);
box-sizing: border-box;
}
#container figure.border {
border: 1px solid hsl(0, 0%, 80%);
box-sizing: border-box;
}
#container .map iframe,
#container .matterport iframe {
width: 100% !important;
height: 100% !important;
}
#container .youtube {
width: 100%;
position: relative;
z-index: 1;
}
#container .youtube .pc {
width: 100%;
height: 200px;
}
#container .youtube iframe,
#container .youtube video {
width: 100% !important;
height: 100% !important;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
#container .link {
grid-column: 1/-1;
width: 100%;
margin: 0 auto;
}
#container .link a,
#container .link a:link {
display: block;
}
#container .link span {
display: grid;
align-items: center;
justify-content: center;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.075em;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
line-height: 1;
text-align: center;
width: 44vw;
height: 8vw;
margin: 0 auto;
background: #7D7F80;
box-sizing: border-box;
position: relative;
}
#container .link span.txt.en {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.01em;
font-size: 1.4rem;
}
#container .link.btn span {
color: hsl(0, 0%, 0%);
background: none;
border: 1px solid #7D7F80;
}
#container aside {
width: 100%;
/* -------------------------------------
consultation
*/
/* -------------------------------------
concept_in
*/
/* -------------------------------------
modelhouse
*/
/* -------------------------------------
shoplist
*/
/* -------------------------------------
fmenu
*/
/* -------------------------------------
contact_txt_in
*/
/* -------------------------------------
concept
&.concept{
.inner{
width: $inwidth;
padding: 0;
overflow: hidden;
.content{
position: relative;
figure{
display: block;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
top: 0;
left: 0;
img {
opacity: 0.15;
//-webkit-filter: blur(1px);
//filter: blur(1px);
}
}
h3{
&.h3_1{
text-align: center;
margin: 0 0 size(40);
//text-shadow: 0 0 10px rgba($monocolor,0.8);
span{
color: $monocolor;
font-size: 2.1rem;
//text-shadow: 0 0 8px rgba($monocolor,0.4);
}
}
}
p{
@include webfont_j2(300);
text-align: center;
}
.link{
display: flex;
align-items: center;
justify-content: center;
// weight : 300=L , 400=R , 500=M , 700=B , 900=BL
@include webfont_j2(300);
// proportional font
font-feature-settings : "palt";
letter-spacing: 0.175em;
color: $monocolor2;
font-size: 1.2rem;
line-height: 1;
text-align: center;
width: size(330);
height: size(60);
margin: size(40) 0 0;
background: $basecolor;
//border: 1px solid $monocolor;
box-sizing: border-box;
position: relative;
//@include linkarrow($monocolor);
}
.item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: size(60) 0;
box-sizing: border-box;
}
}
}
}
*/
}
#container aside h2.h2_1 {
display: flex;
align-items: center;
width: 92vw;
height: 20vw;
margin: 0 auto;
}
#container aside h2.h2_1 span {
line-height: 1;
}
#container aside h2.h2_1 span.txt {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-size: 2.4rem;
width: auto;
}
#container aside h2.h2_1 span.txt_2 {
font-size: 1.2rem;
margin-left: 1em;
transform: translateY(0.25em);
}
#container aside h3.h3_1 {
line-height: 1;
}
#container aside.consultation {
margin-top: 8vw;
}
#container aside.consultation .inner {
padding: 0;
overflow: hidden;
}
#container aside.consultation .inner .content {
width: 88vw;
margin: 0 auto;
position: relative;
}
#container aside.consultation .inner .content figure {
display: block;
width: 100%;
aspect-ratio: 4/3;
background: hsl(0, 0%, 0%);
}
#container aside.consultation .inner .content figure img {
opacity: 0.85;
}
#container aside.consultation .inner .content h3.h3_1 {
text-align: center;
}
#container aside.consultation .inner .content h3.h3_1 span {
letter-spacing: 0.1em;
color: hsl(0, 0%, 100%);
font-size: 1.4rem;
line-height: 1.5;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
#container aside.consultation .inner .content h3.h3_1 span.en {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.01em;
font-size: 1.6rem;
}
#container aside.consultation .inner .content h3.h3_1 span.txt {
margin-top: 1em;
}
#container aside.consultation .inner .content h3.h3_1 span.txt_2 {
font-size: 2.1rem;
line-height: 1.75;
margin-top: 0.25em;
}
#container aside.consultation .inner .content h3.h3_1 span.txt_3 {
margin-top: 0.35em;
}
#container aside.consultation .inner .content .link {
margin-top: 5.3333333333vw;
}
#container aside.consultation .inner .content .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
#container aside.concept_in {
background: hsl(0, 0%, 95%);
padding-bottom: 6.6666666667vw;
margin: 0 auto;
overflow: visible !important;
}
#container aside.concept_in h2.h2_1 {
display: block;
width: 84vw;
height: auto;
padding: 5.3333333333vw 0 0;
margin: 0 auto 5.3333333333vw;
}
#container aside.concept_in h2.h2_1 span.txt {
font-size: 1.6rem;
}
#container aside.concept_in h2.h2_1 span.txt_2 {
display: block;
font-size: 2.1rem;
margin: 2.6666666667vw 0 0;
}
#container aside.concept_in .content {
/* -------------------------------------
content_2
*/
}
#container aside.concept_in .content.content_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 4vw;
width: 84vw;
margin: 0 auto;
}
#container aside.concept_in .content.content_2 h4.h4_2 {
margin-top: 0.5em;
box-sizing: border-box;
}
#container aside.concept_in .content.content_2 h4.h4_2 span {
white-space: nowrap;
letter-spacing: 0.05em;
text-align: center;
font-size: 1.2rem;
line-height: 1.25;
}
#container aside.concept_in .content.content_2 p {
font-feature-settings: "palt";
}
#container aside.concept_in .content.content_2 figure {
aspect-ratio: 3/2;
overflow: hidden;
}
#container aside.concept_in .content.content_2 .item {
margin: 0 0 2.6666666667vw;
}
#container aside.modelhouse .inner .content {
position: relative;
}
#container aside.modelhouse .inner .content figure {
display: block;
width: 100%;
aspect-ratio: 3/2;
background: hsl(0, 0%, 0%);
}
#container aside.modelhouse .inner .content figure img {
opacity: 0.75;
}
#container aside.modelhouse .inner .content h3.h3_1 {
text-align: center;
}
#container aside.modelhouse .inner .content h3.h3_1 span {
color: hsl(0, 0%, 100%);
font-size: 1.4rem;
line-height: 1.5;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
#container aside.modelhouse .inner .content h3.h3_1 span.en {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.01em;
font-size: 1.6rem;
}
#container aside.modelhouse .inner .content h3.h3_1 span.txt {
margin-top: 1em;
}
#container aside.modelhouse .inner .content h3.h3_1 span.txt_2 {
font-size: 2.1rem;
line-height: 1.75;
margin-top: 0.5em;
}
#container aside.modelhouse .inner .content h3.h3_1 span.txt_3 {
margin-top: 0.5em;
}
#container aside.modelhouse .inner .content .link {
margin-top: 5.3333333333vw;
}
#container aside.modelhouse .inner .content .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
#container aside.shoplist .inner {
/* -------------------------------------
content
*/
}
#container aside.shoplist .inner .content {
width: 100%;
margin: 0 auto;
}
#container aside.shoplist .inner .content figure {
width: 100%;
}
#container aside.shoplist .inner .content h2 span {
display: block;
line-height: 1;
}
#container aside.shoplist .inner .content h2.h2_1 {
display: grid;
grid-template-rows: repeat(2, 1fr) 1.3333333333vw;
text-align: center;
height: 25.3333333333vw;
margin: 0 auto;
}
#container aside.shoplist .inner .content h2.h2_1 span.txt {
align-self: end;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.01em;
font-size: 2.4rem;
width: auto;
}
#container aside.shoplist .inner .content h2.h2_1 span.txt_2 {
align-self: center;
font-size: 1.2rem;
}
#container aside.shoplist .inner .content h4.h4_2 {
margin: 2.6666666667vw auto;
}
#container aside.shoplist .inner .content h4.h4_2 span {
color: hsl(0, 0%, 0%);
font-size: 1.6rem;
line-height: 1.5;
}
#container aside.shoplist .inner .content h4.h4_2 span i {
letter-spacing: 0.05em;
font-size: 1.2rem;
}
#container aside.shoplist .inner .content h4.h4_2 span b {
color: #f00;
font-weight: 700;
margin-left: 0.75em;
}
#container aside.shoplist .inner .content p {
margin: 0;
}
#container aside.shoplist .inner .content .item {
width: 92vw;
margin: 0 auto 6.6666666667vw;
}
#container aside.shoplist .inner .content .item a,
#container aside.shoplist .inner .content .item a:link {
text-decoration: none;
display: block;
box-sizing: border-box;
position: relative;
z-index: 1;
}
#container aside.shoplist .inner .content .tel {
display: block;
width: 100%;
}
#container aside.shoplist .inner .content .tel span {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
color: hsl(0, 0%, 0%);
line-height: 1;
}
#container aside.shoplist .inner .content .tel span.txt {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 0.3em;
align-items: baseline;
line-height: 1;
}
#container aside.shoplist .inner .content .tel span.txt b,
#container aside.shoplist .inner .content .tel span.txt i {
display: block;
width: 3.4666666667vw;
transform: translateY(0.4vw);
}
#container aside.shoplist .inner .content .tel span.txt .tellink {
font-size: 2.4rem;
}
#container aside.shoplist .inner .content .tel span.txt .tellink a,
#container aside.shoplist .inner .content .tel span.txt .tellink a:link {
text-decoration: none;
}
#container aside.shoplist .inner .content .link {
margin-top: 2.6666666667vw;
}
#container aside.shoplist .inner .content .link span {
width: 32vw;
height: 6.6666666667vw;
margin: 0;
}
#container aside.fmenu {
margin: 0 auto 2.6666666667vw;
}
#container aside.fmenu .inner {
position: relative;
z-index: 1;
}
#container aside.fmenu .inner figure {
height: 53.3333333333vw;
margin: 0 auto;
background: hsl(0, 0%, 0%);
}
#container aside.fmenu .inner figure img {
opacity: 0.3;
}
#container aside.fmenu .inner .content {
display: flex;
flex-wrap: wrap;
width: 92vw;
margin: 0;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#container aside.fmenu .inner .content h2.h2_1 span {
color: hsl(0, 0%, 100%);
}
#container aside.fmenu .inner .content h4.h4_1 {
margin: 0;
}
#container aside.fmenu .inner .content h4.h4_1 span {
letter-spacing: 0.075em;
text-align: center;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
line-height: 1;
}
#container aside.fmenu .inner .content .item {
width: 44vw;
padding: 0;
margin: 0 4vw 4vw 0;
}
#container aside.fmenu .inner .content .item:nth-of-type(even) {
margin: 0 0 4vw;
}
#container aside.fmenu .inner .content .item a,
#container aside.fmenu .inner .content .item a:link {
display: flex;
justify-content: center;
align-items: center;
color: hsl(0, 0%, 0%);
height: 10.6666666667vw;
background: rgba(242.25, 242.25, 242.25, 0.2);
box-sizing: border-box;
}
#container aside.contact_txt_in {
margin: 0 auto 8vw;
}
#container aside.contact_txt_in .content h2.h2_2 span {
letter-spacing: 0.05em;
text-align: center;
font-size: 1.2rem;
}
#container aside.contact_txt_in .content h3.h3_3 {
margin: 0 auto 2.6666666667vw;
}
#container aside.contact_txt_in .content h3.h3_3 span {
letter-spacing: 0.05em;
font-size: 1.2rem;
}
#container aside.contact_txt_in .content p {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.01em;
font-size: 1.2rem;
}
#container aside.contact_txt_in .content p i {
display: block;
font-size: 1rem;
margin: 0 2vw 0 0;
}
#container aside.contact_txt_in .content p i img {
width: 3.7333333333vw;
}
#container aside.contact_txt_in .content p.tel {
line-height: 1;
}
#container aside.contact_txt_in .content p.tel strong a,
#container aside.contact_txt_in .content p.tel strong a:link {
color: hsl(0, 0%, 0%);
}
#container aside.contact_txt_in .content .item {
width: 92vw;
padding: 2.6666666667vw 0;
margin: 0 auto;
border: 1px solid hsl(0, 0%, 0%);
}
#container aside.contact_txt_in .content .item.float {
display: flex;
}
#container aside.contact_txt_in .content .item .float_l {
width: 29.3333333333vw;
border-right: 1px solid hsl(0, 0%, 0%);
}
#container aside.contact_txt_in .content .item .float_r {
width: 62.6666666667vw;
padding: 0 4vw;
}
#container section.underline {
border-bottom: 1px solid hsl(0, 0%, 80%);
}
#container section .item.underline {
padding: 0 0 2.5rem;
border-bottom: 1px solid hsl(0, 0%, 80%);
}
#container section .item.framed {
padding: 1em;
border: 1px solid hsl(0, 0%, 80%);
}
/* -------------------------------------
Contents.Page
------------------------------------- */
#container.page {
/* -------------------------------------
nav_pankuzu
------------------------------------- */
/* -------------------------------------
aside
------------------------------------- */
/* -------------------------------------
section
------------------------------------- */
}
#container.page .nav_txt {
display: block;
width: 100%;
margin-bottom: 2.6666666667vw;
}
#container.page .nav_txt ul {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 92vw;
padding: 0;
margin: 0 auto;
}
#container.page .nav_txt ul li {
display: flex;
align-items: center;
font-size: 1rem;
letter-spacing: 0.05em;
line-height: 1;
margin: 1em 0.5em 0 0;
}
#container.page .nav_txt ul li a,
#container.page .nav_txt ul li a:link {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.05em;
color: hsl(0, 0%, 0%);
}
#container.page .nav_txt ul li:before {
content: "＞ ";
color: hsl(0, 0%, 80%);
font-size: 1rem;
line-height: 1;
margin: 0 0.5em 0 0;
}
#container.page .nav_txt ul li:first-of-type:before {
display: none;
}
#container.page #main {
grid-row: 2;
padding: 0;
margin: 0;
}
#container.page aside {
width: 100%;
overflow: hidden;
/* -------------------------------------
page_control
------------------------------------- */
}
#container.page aside.page_control {
padding: 0 0 8vw;
}
#container.page aside.page_control .inner {
width: 100%;
margin: 10.6666666667vw auto 0;
}
#container.page aside.page_control .inner .b_backforw {
width: 100%;
/* -------------------------------------
pager
------------------------------------- */
}
#container.page aside.page_control .inner .b_backforw .back,
#container.page aside.page_control .inner .b_backforw .forw {
width: 35.9375%;
margin: 0 auto;
}
#container.page aside.page_control .inner .b_backforw .back span.txt,
#container.page aside.page_control .inner .b_backforw .forw span.txt {
width: 100%;
}
#container.page aside.page_control .inner .b_backforw .back a,
#container.page aside.page_control .inner .b_backforw .back a:link,
#container.page aside.page_control .inner .b_backforw .forw a,
#container.page aside.page_control .inner .b_backforw .forw a:link {
display: block;
text-decoration: none;
font-feature-settings: "palt";
letter-spacing: 0.05em;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
line-height: 1;
text-align: center;
width: 100%;
height: 2.6rem;
padding: 0.8rem 0 0;
background: #B10020;
box-sizing: border-box;
position: relative;
}
#container.page aside.page_control .inner .b_backforw .back a:before, #container.page aside.page_control .inner .b_backforw .back a:after,
#container.page aside.page_control .inner .b_backforw .back a:link:before,
#container.page aside.page_control .inner .b_backforw .back a:link:after,
#container.page aside.page_control .inner .b_backforw .forw a:before,
#container.page aside.page_control .inner .b_backforw .forw a:after,
#container.page aside.page_control .inner .b_backforw .forw a:link:before,
#container.page aside.page_control .inner .b_backforw .forw a:link:after {
content: "";
display: block;
width: 0;
height: 0;
border: 1.3rem solid transparent;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 0;
}
#container.page aside.page_control .inner .b_backforw .back a:before,
#container.page aside.page_control .inner .b_backforw .back a:link:before {
left: -2.6rem;
border-right: 1.3rem solid #B10020;
}
#container.page aside.page_control .inner .b_backforw .back a:after,
#container.page aside.page_control .inner .b_backforw .back a:link:after {
display: none;
}
#container.page aside.page_control .inner .b_backforw .forw a:before,
#container.page aside.page_control .inner .b_backforw .forw a:link:before {
display: none;
}
#container.page aside.page_control .inner .b_backforw .forw a:after,
#container.page aside.page_control .inner .b_backforw .forw a:link:after {
right: -2.6rem;
border-left: 1.3rem solid #B10020;
}
#container.page aside.page_control .inner .b_backforw .pager {
display: flex;
width: 92vw;
margin: 0 auto;
justify-content: center;
align-items: center;
}
#container.page aside.page_control .inner .b_backforw .pager a,
#container.page aside.page_control .inner .b_backforw .pager a:link {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.075em;
color: hsl(0, 0%, 0%);
font-size: 1.4rem;
line-height: 1;
text-align: center;
width: 100%;
height: 8vw;
box-sizing: border-box;
position: relative;
}
#container.page aside.page_control .inner .b_backforw .pager .parent {
width: 46.6666666667vw;
margin: 0 2.6666666667vw;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a,
#container.page aside.page_control .inner .b_backforw .pager .parent a:link {
color: hsl(0, 0%, 100%);
background: #7D7F80;
}
#container.page aside.page_control .inner .b_backforw .pager .prev,
#container.page aside.page_control .inner .b_backforw .pager .next {
width: 20vw;
}
#container.page aside.page_control .inner .b_backforw .pager .parent span.txt {
width: 100%;
}
#container.page aside.page_control .inner .b_backforw .pager .prev a,
#container.page aside.page_control .inner .b_backforw .pager .prev a:link {
justify-content: flex-start;
}
#container.page aside.page_control .inner .b_backforw .pager .next a,
#container.page aside.page_control .inner .b_backforw .pager .next a:link {
justify-content: flex-end;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb {
align-items: stretch;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb a,
#container.page aside.page_control .inner .b_backforw .pager.thumb a:link {
color: hsl(0, 0%, 0%);
font-size: 1.2rem;
line-height: 1.25;
height: 100%;
padding: 0;
background: none;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .parent a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .parent a:link {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid hsl(0, 0%, 90%);
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next {
width: 33.3333333333vw;
margin: 0;
position: relative;
z-index: 1;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link {
text-align: left;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:before, #container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:before,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:before,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:before,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:after {
display: none;
border: none;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a figure,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link figure,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a figure,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link figure {
width: 28vw;
height: 18.6666666667vw;
margin: 0 auto 0.5rem;
overflow: hidden;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link {
padding: 0 0 0 5.3333333333vw;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:before, #container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:before,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 50%;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:after {
width: 0.6rem;
height: 0.6rem;
border-top: 1px solid hsl(0, 0%, 0%);
border-right: 1px solid hsl(0, 0%, 0%);
z-index: 9;
right: 5.3333333333vw;
transform-origin: center center;
transform: translateY(-50%) rotate(45deg);
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:after {
right: auto;
left: 2vw;
transform: translateY(-50%) rotate(-135deg);
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link {
padding: 0 5.3333333333vw 0 0;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:before, #container.page aside.page_control .inner .b_backforw .pager.thumb .next a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:before,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 50%;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:after {
width: 0.6rem;
height: 0.6rem;
border-top: 1px solid hsl(0, 0%, 0%);
border-right: 1px solid hsl(0, 0%, 0%);
z-index: 9;
right: 5.3333333333vw;
transform-origin: center center;
transform: translateY(-50%) rotate(45deg);
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:after {
right: 2vw;
transform: translateY(-50%) rotate(45deg);
}
#container.page section {
width: 100%;
padding: 0;
margin: 0 auto;
overflow: hidden;
}
#container.page section .inner .pager-infinite {
margin: 5.3333333333vw 0;
}
#container.page section .inner .pager-infinite #more-button {
-webkit-appearance: none;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.01em;
color: hsl(0, 0%, 100%);
font-size: 1.4rem;
line-height: 1;
width: 44vw;
height: 8vw;
margin: 0 auto;
background: #7D7F80;
border: none;
box-sizing: border-box;
cursor: pointer;
}
#container.page section .inner .pager-infinite .scroller-status .infinite-scroll-request,
#container.page section .inner .pager-infinite .scroller-status .infinite-scroll-last,
#container.page section .inner .pager-infinite .scroller-status .infinite-scroll-error {
display: none;
}
#container.page section .inner .content {
width: 100%;
}
#container.page section .inner.form_inner .content h2.h2_1 span.txt, #container.page section .inner.section_inner .content h2.h2_1 span.txt {
font-size: 1.8rem;
}
#container.page section .inner.form_inner .content h2.h2_2 span.txt, #container.page section .inner.section_inner .content h2.h2_2 span.txt {
font-size: 1.6rem;
}
#container.page section .inner.section_inner .content {
position: relative;
z-index: 1;
/* -------------------------------------
title_page
------------------------------------- */
/* -------------------------------------
content_1
*/
/* -------------------------------------
lead
*/
}
#container.page section .inner.section_inner .content.title_page {
width: 100%;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 22.6666666667vw;
box-sizing: border-box;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span {
display: block;
font-feature-settings: "palt";
color: hsl(0, 0%, 0%);
text-align: center;
line-height: 1.25;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span.txt {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
text-transform: capitalize;
letter-spacing: 0.01em;
font-size: 2.8rem;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span.txt.cap {
text-transform: capitalize;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span.txt_2 {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
letter-spacing: 0.2em;
font-size: 1.4rem;
margin: 1.8666666667vw auto 0;
}
#container.page section .inner.section_inner .content.lead .item figure {
width: 100%;
height: 56.2429696288vw;
overflow: hidden;
}
#container.page section .inner.section_inner .content.lead .item .float_c {
width: 92vw;
padding: 10.6666666667vw 0;
margin: 0 auto;
}
#container.page section .inner.section_inner .content h4.h4_1 {
display: flex;
align-items: center;
margin: 0 0 0.25em;
}
#container.page section .inner.section_inner .content h4.h4_1 span.num {
letter-spacing: -0.025em;
font-size: 4rem;
font-weight: 300;
line-height: 1;
margin: 0 1em 0 0;
}
#container.page section .inner.section_inner .content h4.h4_1 span.num.circle {
color: hsl(0, 0%, 100%);
font-size: 3rem;
text-align: center;
width: 4rem;
height: 4rem;
padding: 0.2em 0 0 0;
background: #B10020;
border-radius: 100%;
box-sizing: border-box;
}
#container.page section .inner.section_inner .content h4.h4_1 span.txt {
text-align: center;
font-size: 1.4rem;
line-height: 1.25;
margin: 0.5em 0;
}
#container.page section .inner.section_inner .content h4.h4_1.underline {
margin: 0 0 0.75em 0;
border-bottom: 2px solid #B10020;
}
#container.page section .inner.section_inner .content h4.h4_1.underline span.num {
font-size: 5.5rem;
margin: 0 1.4rem -0.17em 0;
}
#container.page section .inner.section_inner .content h4.h4_1.underline span.num.circle {
color: hsl(0, 0%, 100%);
font-size: 3rem;
text-align: center;
width: 4rem;
height: 4rem;
padding: 0.2em 0 0 0;
margin: 0 1.4rem 0 0;
background: #B10020;
border-radius: 100%;
box-sizing: border-box;
}
#container.page section .inner.section_inner .content ul {
padding: 0 0 0 1.5em;
margin: 0 0 0.5em 0;
}
#container.page section .inner.section_inner .content ul li {
padding: 0 0 0.5em 0;
}
#container.page section .inner.section_inner .content ul.border {
padding: 0.75em 0.5em 0.25em 2.2em;
border: 1px solid #B10020;
}
#container.page section .inner.section_inner .content ul.nolist {
list-style: none;
padding: 0.75em 0.5em 0.25em 0.5em;
}
#container.page section .inner.section_inner .content ul.nolist li {
text-indent: -1.25em;
padding: 0 0 0.5em 1.5em;
}
#container.page section .inner.section_inner .content .item {
margin: 0 auto;
box-sizing: border-box;
}
#container.page section .inner.section_inner .content table.base {
width: 92vw;
margin: 2.6666666667vw auto;
border-top: 1px solid hsl(0, 0%, 80%);
box-sizing: border-box;
}
#container.page section .inner.section_inner .content table.base th,
#container.page section .inner.section_inner .content table.base td {
display: block;
vertical-align: top;
width: 100%;
box-sizing: border-box;
}
#container.page section .inner.section_inner .content table.base th {
letter-spacing: 0.2em;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
padding: 2.6666666667vw 4vw 0.6666666667vw;
}
#container.page section .inner.section_inner .content table.base td {
font-feature-settings: "palt";
letter-spacing: 0.05em;
padding: 0.6666666667vw 4vw 2.6666666667vw;
border-bottom: 1px solid hsl(0, 0%, 80%);
}
#container.page section .inner.section_inner .content table.base td p {
padding: 0 0 1em;
}
#container.page section .inner.section_inner .content table.base td ul {
list-style: none;
padding: 0;
}
/* -------------------------------------
footer
------------------------------------- */
#footer {
margin: 16vw auto 0;
position: relative;
background: #7D7F80;
/* -------------------------------------
pagetop
------------------------------------- */
/* -------------------------------------
aside
------------------------------------- */
/* -------------------------------------
link
*/
}
#footer #pagetop {
width: 100%;
position: absolute;
z-index: 1;
top: -14.6666666667vw;
}
#footer #pagetop .inner {
width: 100%;
}
#footer #pagetop .inner a,
#footer #pagetop .inner a:link {
display: flex;
align-items: center;
justify-content: center;
width: 10.6666666667vw;
height: 10.6666666667vw;
margin: 0 auto;
background: hsl(0, 0%, 100%);
border-radius: 50%;
box-sizing: border-box;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
#footer #pagetop .inner a:after,
#footer #pagetop .inner a:link:after {
content: "";
display: block;
width: 3.2vw;
height: 3.2vw;
border-top: 1px solid #7D7F80;
border-right: 1px solid #7D7F80;
box-sizing: border-box;
transform: translateY(0.8vw) rotate(-45deg);
}
#footer #pagetop .inner a span.txt,
#footer #pagetop .inner a:link span.txt {
display: none;
}
#footer aside {
/* -------------------------------------
aside_1
*/
/* -------------------------------------
aside_2
*/
}
#footer aside.aside_1 {
width: 100%;
padding: 5.3333333333vw 0 2vw;
}
#footer aside.aside_1 .inner .content {
margin: 0 auto;
}
#footer aside.aside_1 .inner .content.content_1 h1.h1_2 span {
display: block;
text-align: center;
}
#footer aside.aside_1 .inner .content.content_1 h1.h1_2 span.img {
width: 34.6666666667vw;
margin: 0 auto;
}
#footer aside.aside_1 .inner .content.content_1 h1.h1_2 span.txt {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.075em;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
line-height: 1;
margin: 2.6666666667vw auto 0;
}
#footer aside.aside_1 .inner .content.content_1 nav {
margin: 3.3333333333vw auto 0;
}
#footer aside.aside_1 .inner .content.content_1 nav ul {
display: grid;
grid-template-columns: repeat(auto-fit, 5.3333333333vw);
column-gap: 2.6666666667vw;
justify-content: center;
}
#footer aside.aside_1 .inner .content.content_1 nav ul li a,
#footer aside.aside_1 .inner .content.content_1 nav ul li a:link {
width: 100%;
height: 5.3333333333vw;
}
#footer aside.aside_1 .inner .content.content_2 {
margin: 4vw auto 0;
}
#footer aside.aside_1 .inner .content.content_2 nav {
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: 1.5em;
margin-left: 8vw;
}
#footer aside.aside_1 .inner .content.content_2 nav .item {
padding: 0 0 1em;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul {
list-style: none;
padding: 0;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a,
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:link {
text-decoration: none;
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 1.3333333333vw;
align-items: center;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.05em;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
line-height: 1.25;
width: 100%;
padding: 1.3333333333vw 0;
box-sizing: border-box;
position: relative;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:before,
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:link:before {
content: "";
display: block;
width: 0.6666666667vw;
height: 0.6666666667vw;
border-top: 1px solid hsl(0, 0%, 100%);
border-right: 1px solid hsl(0, 0%, 100%);
box-sizing: border-box;
transform: translateY(0.05em) rotate(45deg);
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a.level_1,
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:link.level_1 {
padding-left: 1em;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a.level_2,
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:link.level_2 {
padding-left: 2em;
}
#footer aside.aside_1 .inner .content.content_3 {
margin: 2.6666666667vw auto 0;
}
#footer aside.aside_1 .inner .content.content_3 .text {
padding: 0 0 0 8vw;
}
#footer aside.aside_1 .inner .content.content_3 .text p {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.05em;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
}
#footer aside.aside_1 .inner .content.content_4 {
margin: 5.3333333333vw auto 0;
}
#footer aside.aside_1 .inner .content.content_4 small {
display: block;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-feature-settings: "palt";
letter-spacing: 0.025em;
text-align: center;
color: hsl(0, 0%, 100%);
font-size: 1.4rem;
line-height: 1.5;
width: 100%;
padding: 0.8rem 0;
margin: 0 auto;
}
#footer aside.aside_2 .inner .content.content_1 {
width: 100%;
position: relative;
z-index: 9;
}
#footer aside.aside_2 .inner .content.content_1 nav {
width: 100%;
background: #7D7F80;
}
#footer aside.aside_2 .inner .content.content_1 nav ul {
list-style: none;
display: flex;
width: 100%;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li {
width: 50vw;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li a,
#footer aside.aside_2 .inner .content.content_1 nav ul li a:link {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 3.4666666667vw 0;
border-top: 1px solid #7D7F80;
box-sizing: border-box;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li span {
display: block;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 500;
font-feature-settings: "palt";
letter-spacing: 0.075em;
text-align: center;
font-size: 1.4rem;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li:nth-of-type(1) img {
width: 5.0666666667vw;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li:nth-of-type(1) span {
color: hsl(0, 0%, 100%);
}
#footer aside.aside_2 .inner .content.content_1 nav ul li:nth-of-type(2) {
background: hsl(0, 0%, 100%);
}
#footer aside.aside_2 .inner .content.content_1 nav ul li:nth-of-type(2) img {
width: 2.2666666667vw;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li:nth-of-type(2) span {
color: #7D7F80;
}
#footer aside.aside_2 .inner .content.content_1 nav ul li img {
margin: 0 2vw 0 0;
}
#footer aside.aside_2 .inner .content.content_1 .banner_sp {
width: 100%;
background: hsl(0, 0%, 100%);
position: fixed;
z-index: 999;
left: 0;
bottom: 0;
}
#footer .link.consultation {
display: grid;
row-gap: 2.6666666667vw;
margin: 4vw auto 0;
}
#footer .link.consultation a,
#footer .link.consultation a:link {
text-decoration: none;
width: 48vw;
height: 8vw;
margin: 0 auto;
}
#footer .link.consultation span {
display: grid;
align-items: center;
justify-content: center;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
color: hsl(0, 0%, 100%);
font-size: 1.4rem;
line-height: 1;
width: 100%;
height: 100%;
background: none;
border: 1px solid hsl(0, 0%, 100%);
box-sizing: border-box;
}
/* =================================================
unique layout
================================================= */
/* -------------------------------------
article
------------------------------------- */
#article {
/* -------------------------------------
section
------------------------------------- */
}
#article section {
/* -------------------------------------
form
*/
}
#article section .inner.form_inner {
/* -------------------------------------
content
------------------------------------- */
}
#article section .inner.form_inner .content {
/* -------------------------------------
form_header
*/
/* -------------------------------------
form
*/
}
#article section .inner.form_inner .content.form_header {
width: 92vw;
margin: 10.6666666667vw auto 0;
}
#article section .inner.form_inner .content.form_header.border-top {
padding: 10.6666666667vw 0 0;
border-top: 1px solid #7D7F80;
}
#article section .inner.form_inner .content.form_header h2.h2_2 {
width: 92vw;
margin: 0 auto 8vw;
}
#article section .inner.form_inner .content.form_header h2.h2_2 span {
letter-spacing: 0.035em;
font-size: 1.4rem;
line-height: 1.75;
}
#article section .inner.form_inner .content.form_header h2.h2_2 span.txt_2 {
white-space: nowrap;
font-size: 1.8rem;
margin: 1.3333333333vw auto 0;
}
#article section .inner.form_inner .content.form_header h2.h2_2 span.txt_3 {
margin: 1.3333333333vw auto 0;
}
#article section .inner.form_inner .content.form_header h3.h3_3 {
margin: 0 auto 5.3333333333vw;
}
#article section .inner.form_inner .content.form_header h3.h3_3 span i {
display: block;
width: 4vw;
margin: 0 2.6666666667vw 0 0;
}
#article section .inner.form_inner .content.form_header h3.h3_3 span.txt {
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
color: hsl(0, 0%, 100%);
line-height: 1;
height: 9.3333333333vw;
background: hsl(0, 0%, 60%);
border-radius: 4.6666666667vw;
}
#article section .inner.form_inner .content.form_header h4.h4_2 span {
white-space: nowrap;
letter-spacing: 0.025em;
line-height: 2;
}
#article section .inner.form_inner .content.form_header h4.h4_2 span.txt_2 {
text-indent: -0.5em;
font-size: 1.6rem;
margin: 0.4vw auto 0;
}
#article section .inner.form_inner .content.form_header p {
margin: 0.75em 0 0 0;
}
#article section .inner.form_inner .content.form_header p.lead {
display: flex;
justify-content: center;
}
#article section .inner.form_inner .content.form_header p.tel {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 300;
}
#article section .inner.form_inner .content.form_header p.tel span {
display: block;
}
#article section .inner.form_inner .content.form_header p.tel span.txt {
display: flex;
align-items: baseline;
}
#article section .inner.form_inner .content.form_header p.tel span.txt i {
display: block;
width: 3.2vw;
margin-right: 0.5em;
transform: translateY(0.4vw);
}
#article section .inner.form_inner .content.form_header p.tel span.txt .tellink {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
font-size: 2.1rem;
}
#article section .inner.form_inner .content.form_header p.tel span.txt .tellink a,
#article section .inner.form_inner .content.form_header p.tel span.txt .tellink a:link {
text-decoration: none;
color: hsl(0, 0%, 0%);
}
#article section .inner.form_inner .content.form_header .item {
width: 92vw;
margin: 0 auto 10.6666666667vw;
}
#article section .inner.form_inner .content.form_header .item:nth-of-type(1) h3.h3_3 span.txt {
width: 53.3333333333vw;
}
#article section .inner.form_inner .content.form_header .item:nth-of-type(2) {
margin: 0 auto;
}
#article section .inner.form_inner .content.form_header .item:nth-of-type(2) h3.h3_3 span.txt {
width: 70.6666666667vw;
}
#article section .inner.form_inner .content.form {
width: 100%;
}
#article section .inner.form_inner .content.form h3.h3_1.wpcf7c-elm-step2 {
text-align: center;
font-weight: bold;
padding: 1em 0;
}
#article section .inner.form_inner .content.form h3.h3_1 {
text-align: center;
}
#article section .inner.form_inner .content.form h3.h3_1 span {
display: inline-block;
}
#article section .inner.form_inner .content.form h3.h3_1 span.txt strong {
font-size: 1.4rem;
}
#article section .inner.form_inner .content.form .item {
padding: 1rem 0;
}
#article section .inner {
/* -------------------------------------
form
*/
}
#article section .inner form {
position: relative;
z-index: 1;
/* alert-text */
/* alert-messege */
}
#article section .inner form.wpcf7-form {
margin: 2.6666666667vw auto 0;
}
#article section .inner form.wpcf7-form .wpcf7c-cfm-tit {
display: none !important;
}
#article section .inner form.wpcf7-form.init .wpcf7-not-valid-tip {
display: none;
}
#article section .inner form.wpcf7-form.init .thanks {
display: none !important;
}
#article section .inner form.wpcf7-form.custom-wpcf7cp-confirm {
margin: 13.3333333333vw auto 0;
}
#article section .inner form.wpcf7-form.custom-wpcf7cp-confirm.wpcf7cp-form-hide {
visibility: visible !important;
position: static;
}
#article section .inner form.wpcf7-form.custom-wpcf7cp-confirm.wpcf7cp-form-hide::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: hsl(0, 0%, 100%);
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
#article section .inner form.wpcf7-form.custom-wpcf7cp-confirm .wpcf7c-cfm-tit {
display: block !important;
font-weight: bold;
width: 92vw;
margin: 0;
position: absolute;
z-index: 1;
top: -8vw;
left: 50%;
transform: translateX(-50%);
}
#article section .inner form.wpcf7-form.invalid {
margin: 16vw auto 0;
}
#article section .inner form.wpcf7-form.invalid .wpcf7-not-valid-tip {
display: block;
color: #f00;
}
#article section .inner form.wpcf7-form.invalid .wpcf7-response-output {
display: block !important;
}
#article section .inner form.wpcf7-form.sent .thanks {
display: block !important;
}
#article section .inner form.wpcf7-form.sent .thanks .h2_1,
#article section .inner form.wpcf7-form.sent .thanks .txt,
#article section .inner form.wpcf7-form.sent .thanks p {
display: block !important;
}
#article section .inner form.wpcf7-form .wpcf7-response-output {
color: #f00;
font-weight: bold;
width: 92vw;
padding: 0;
margin: 0;
border: none;
position: absolute;
z-index: 1;
top: -13.3333333333vw;
left: 50%;
transform: translateX(-50%);
}
#article section .inner form .h2_1 {
margin: 0 auto 5.3333333333vw;
}
#article section .inner form .thanks {
width: 92vw;
margin: 0 auto;
}
#article section .inner form .imperative2,
#article section .inner form .imperative {
display: inline-block;
color: #f00;
font-size: 1rem;
line-height: 1;
font-weight: bold;
padding: 0.35em 0.5em;
margin: 0 0 0 0.5em;
}
#article section .inner form .imperative2 {
display: block;
letter-spacing: 0.05em;
padding: 0.35em 0;
margin: 0;
}
#article section .inner form .arbitrarily {
color: hsl(0, 0%, 80%);
}
#article section .inner form .confirm {
text-align: center;
font-weight: bold;
line-height: 1;
width: 92vw;
padding: 8vw 0;
margin: 5.3333333333vw auto 8vw;
background: hsl(0, 0%, 95%);
}
#article section .inner form .wpcf7-list-item {
display: block;
padding: 0;
margin: 0 1em 0 0;
}
#article section .inner form .wpcf7-list-item-label {
margin: 0 0 0 0.5em;
}
#article section .inner form table {
color: hsl(0, 0%, 20%);
width: 92vw;
margin: 0 auto;
}
#article section .inner form table th,
#article section .inner form table td {
display: block;
font-size: 1.4rem;
vertical-align: top;
box-sizing: border-box;
}
#article section .inner form table th {
letter-spacing: 0.125em;
width: 100%;
padding: 1.3333333333vw 0;
}
#article section .inner form table td {
letter-spacing: 0.03em;
width: 100%;
padding: 1.3333333333vw 0;
margin: 0 0 2.6666666667vw;
}
#article section .inner form table td .horizontal-item + .horizontal-item {
margin-left: 4vw;
}
#article section .inner form table td .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
#article section .inner form table td .wpcf7-form-control {
display: flex;
flex-wrap: wrap;
}
#article section .inner form table td .wpcf7-checkbox label,
#article section .inner form table td .wpcf7-radio label {
display: grid;
grid-template-columns: auto auto;
}
#article section .inner form table td .wpcf7-checkbox label input[type=checkbox],
#article section .inner form table td .wpcf7-checkbox label input[type=radio],
#article section .inner form table td .wpcf7-radio label input[type=checkbox],
#article section .inner form table td .wpcf7-radio label input[type=radio] {
align-self: center;
margin: 0;
}
#article section .inner form table td label {
display: flex;
align-items: baseline;
}
#article section .inner form table td .float {
display: flex;
flex-wrap: wrap;
align-items: center;
/*
label{
display: block;
word-wrap: normal;
text-align: center;
width: 20%;
}
*/
}
#article section .inner form table td .float .wpcf7-form-control-wrap {
display: inline;
width: auto;
}
#article section .inner form table td p {
display: flex;
flex-wrap: wrap;
padding: 0;
}
#article section .inner form table td ul {
list-style: none;
padding: 0 0 0 0;
}
#article section .inner form .button_area {
margin: 3rem auto 0;
}
#article section .inner form .button_area label {
display: flex;
justify-content: center;
}
#article section .inner form .consent {
text-align: center;
margin: 2rem auto 0;
}
#article section .inner form .consent p.notice {
margin: 0 auto 1rem;
}
#article section .inner form .consent .wpcf7-acceptance label {
display: grid;
grid-template-columns: auto auto;
/*
padding-left: 1.25em;
position: relative;
z-index: 1;
input[type=checkbox],
input[type=radio]{
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
}
*/
}
#article section .inner form .consent .wpcf7-acceptance label input[type=checkbox],
#article section .inner form .consent .wpcf7-acceptance label input[type=radio] {
align-self: center;
margin: 0;
}
#article section .inner form p.privacy {
line-height: 1.5;
padding: 1em;
margin: 3rem auto 0;
}
#article section .inner form p.privacy strong {
display: inline-block;
font-weight: bold;
margin: 0 0 1rem;
}
#article section .inner form select,
#article section .inner form input[type=text],
#article section .inner form input[type=number],
#article section .inner form input[type=email],
#article section .inner form input[type=tel],
#article section .inner form input[type=date],
#article section .inner form textarea {
width: 100%;
padding: 1em;
border: 2px solid hsl(0, 0%, 80%);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-sizing: border-box;
}
#article section .inner form select.size80,
#article section .inner form input[type=text].size80,
#article section .inner form input[type=number].size80,
#article section .inner form input[type=email].size80,
#article section .inner form input[type=tel].size80,
#article section .inner form input[type=date].size80,
#article section .inner form textarea.size80 {
width: 80vw;
}
#article section .inner form select.size70,
#article section .inner form input[type=text].size70,
#article section .inner form input[type=number].size70,
#article section .inner form input[type=email].size70,
#article section .inner form input[type=tel].size70,
#article section .inner form input[type=date].size70,
#article section .inner form textarea.size70 {
width: 69.3333333333vw;
}
#article section .inner form select.size60,
#article section .inner form input[type=text].size60,
#article section .inner form input[type=number].size60,
#article section .inner form input[type=email].size60,
#article section .inner form input[type=tel].size60,
#article section .inner form input[type=date].size60,
#article section .inner form textarea.size60 {
width: 60vw;
}
#article section .inner form select.size50,
#article section .inner form input[type=text].size50,
#article section .inner form input[type=number].size50,
#article section .inner form input[type=email].size50,
#article section .inner form input[type=tel].size50,
#article section .inner form input[type=date].size50,
#article section .inner form textarea.size50 {
width: 56vw;
}
#article section .inner form select.size40,
#article section .inner form input[type=text].size40,
#article section .inner form input[type=number].size40,
#article section .inner form input[type=email].size40,
#article section .inner form input[type=tel].size40,
#article section .inner form input[type=date].size40,
#article section .inner form textarea.size40 {
width: 40vw;
}
#article section .inner form select.size30,
#article section .inner form input[type=text].size30,
#article section .inner form input[type=number].size30,
#article section .inner form input[type=email].size30,
#article section .inner form input[type=tel].size30,
#article section .inner form input[type=date].size30,
#article section .inner form textarea.size30 {
width: 33.3333333333vw;
}
#article section .inner form select.size20,
#article section .inner form input[type=text].size20,
#article section .inner form input[type=number].size20,
#article section .inner form input[type=email].size20,
#article section .inner form input[type=tel].size20,
#article section .inner form input[type=date].size20,
#article section .inner form textarea.size20 {
width: 26.6666666667vw;
}
#article section .inner form select::placeholder,
#article section .inner form input[type=text]::placeholder,
#article section .inner form input[type=number]::placeholder,
#article section .inner form input[type=email]::placeholder,
#article section .inner form input[type=tel]::placeholder,
#article section .inner form input[type=date]::placeholder,
#article section .inner form textarea::placeholder {
color: hsl(0, 0%, 80%);
}
#article section .inner form input[type=date] {
padding: 0.86em;
}
#article section .inner form .wpcf7c-conf,
#article section .inner form input[type=text].wpcf7c-conf,
#article section .inner form input[type=number].wpcf7c-conf,
#article section .inner form input[type=tel].wpcf7c-conf,
#article section .inner form input[type=email].wpcf7c-conf,
#article section .inner form input[type=date].wpcf7c-conf,
#article section .inner form textarea.wpcf7c-conf {
color: hsl(0, 0%, 60%);
border: 2px solid hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 80%);
}
#article section .inner form input[type=text]:focus,
#article section .inner form input[type=number]:focus,
#article section .inner form input[type=email]:focus,
#article section .inner form input[type=tel]:focus,
#article section .inner form input[type=date]:focus,
#article section .inner form textarea:focus {
border: solid 2px hsl(0, 0%, 60%);
}
#article section .inner form input[type=radio].wpcf7c-conf,
#article section .inner form input[type=checkbox].wpcf7c-conf {
background-color: transparent;
}
#article section .inner form input[type=radio],
#article section .inner form input[type=checkbox] {
margin-top: 0;
margin-bottom: 0;
}
#article section .inner form #submit {
-webkit-appearance: none;
text-align: center;
padding: 3em 0 0 0;
}
#article section .inner form .btn_reset,
#article section .inner form input[type=submit],
#article section .inner form input[type=reset],
#article section .inner form input[type=button],
#article section .inner form button[type=button] {
-webkit-appearance: none;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 500;
letter-spacing: 0.2em;
color: hsl(0, 0%, 100%);
font-size: 1.2rem;
line-height: 1;
height: 10.6666666667vw;
padding: 0;
border: none;
cursor: pointer;
}
#article section .inner form input[type=submit] {
width: 62.6666666667vw;
margin: 5.3333333333vw auto 0;
background: #7D7F80;
}
#article section .inner form .btn_reset,
#article section .inner form input[type=reset],
#article section .inner form input[type=button],
#article section .inner form input.b_back,
#article section .inner form button[type=button] {
width: 40vw;
margin: 0 auto;
background: hsl(0, 0%, 80%);
}
#article section .inner form .wpcf7-not-valid-tip {
font-weight: bold;
padding: 0.5em 0 0 0;
}
#article section .inner form .wpcf7-validation-errors {
color: #f00;
border: none;
}
#article section .inner #wpcf7cpcnf table {
color: hsl(0, 0%, 20%);
width: 92vw;
margin: 0 auto;
}
#article section .inner #wpcf7cpcnf table th,
#article section .inner #wpcf7cpcnf table td {
display: block;
font-size: 1.4rem;
vertical-align: top;
box-sizing: border-box;
}
#article section .inner #wpcf7cpcnf table th {
letter-spacing: 0.125em;
width: 100%;
padding: 1.3333333333vw 0;
}
#article section .inner #wpcf7cpcnf table td {
letter-spacing: 0.03em;
width: 100%;
padding: 1.3333333333vw 2.6666666667vw;
margin: 0 0 2.6666666667vw;
background: hsl(0, 0%, 95%);
box-sizing: border-box;
}
#article section .inner #wpcf7cpcnf table td p {
display: flex;
flex-wrap: wrap;
padding: 0;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns {
-webkit-appearance: none;
display: flex;
flex-direction: column-reverse;
text-align: center;
padding: 3em 0 0 0;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns button {
display: block;
-webkit-appearance: none;
color: hsl(0, 0%, 100%);
letter-spacing: 0.2em;
line-height: 1;
border: none;
cursor: pointer;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns .wpcf7cp-cfm-submit-btn,
#article section .inner #wpcf7cpcnf .wpcf7cp-btns .wpcf7cp-cfm-edit-btn {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 500;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns .wpcf7cp-cfm-submit-btn {
font-size: 1.8rem;
width: 62.6666666667vw;
padding: 1.5em 0;
margin: 0 auto;
background: #7D7F80;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns .wpcf7cp-cfm-edit-btn {
font-size: 1.4rem;
width: 40vw;
padding: 1em 0;
margin: 5.3333333333vw auto 0;
background: hsl(0, 0%, 80%);
}
/* -------------------------------------
ui-datepicker-div
------------------------------------- */
#ui-datepicker-div.ui-datepicker {
font-size: 1.4rem;
width: auto;
padding: 0.8em 0.8em 0.4em;
}
#ui-datepicker-div.ui-datepicker .ui-datepicker-header.ui-widget-header {
background: hsl(0, 0%, 100%);
border: none;
}
#ui-datepicker-div.ui-datepicker thead th.ui-datepicker-week-end span {
color: #f00;
}
#ui-datepicker-div.ui-datepicker thead th.ui-datepicker-week-end:last-of-type span {
color: #00f;
}
#ui-datepicker-div.ui-datepicker tbody tr td .ui-state-default {
padding: 0.2em 0.6em;
background: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 90%);
box-sizing: border-box;
}
#ui-datepicker-div.ui-datepicker tbody tr td .ui-state-default:hover, #ui-datepicker-div.ui-datepicker tbody tr td .ui-state-default.ui-state-hover {
color: hsl(0, 0%, 100%);
background: hsl(0, 0%, 80%);
border: 1px solid hsl(0, 0%, 90%);
}
#ui-datepicker-div.ui-datepicker tbody tr td.ui-datepicker-days-cell-over .ui-state-default {
/*
color: $monocolor2;
background: $monocolor5;
border: 1px solid $monocolor4;
*/
}
@media screen and (min-width: 768px) {
/* =================================================
Global layout
================================================= */
/* -------------------------------------
animation
*/
@keyframes motion-btn-link {
0% {
height: 0px;
}
100% {
height: 48px;
}
}
@keyframes motion-btn-link2 {
0% {
transform: scaleX(0);
opacity: 1;
}
50% {
transform: scaleX(1);
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes motion-pager-pv {
0% {
left: 96px;
opacity: 0;
}
50% {
opacity: 0.4;
}
100% {
left: -48px;
opacity: 1;
}
}
@keyframes motion-pager-nx {
0% {
right: 96px;
opacity: 0;
}
50% {
opacity: 0.4;
}
100% {
right: -48px;
opacity: 1;
}
}
/* -----------------------------------------------
common
----------------------------------------------- */
#container {
/* -------------------------------------
// Effects
*/
}
#container .sp {
display: none !important;
}
#container .pc {
display: block !important;
}
#container .fade_block {
transform: translateY(48px);
}
#container .ahover {
transition: 0.3s;
}
#container .ahover:hover {
opacity: 0.6;
}
#container .pahover a,
#container .pahover a:link {
display: block;
transition: 0.3s;
}
#container .pahover a:hover,
#container .pahover a:link:hover {
opacity: 0.6;
}
#container .transhover,
#container .transhover:link,
#container .transhover2,
#container .transhover2:link {
transition: 0.3s;
}
#container .transhover figure img,
#container .transhover:link figure img,
#container .transhover2 figure img,
#container .transhover2:link figure img {
transition: 0.5s;
}
#container .transhover:hover figure img,
#container .transhover2:hover figure img {
transform: scale(1.1) !important;
}
#container .transhover:hover {
opacity: 0.6;
}
#container .transhover:hover figure img {
opacity: 0.6;
}
#container .transhover2:hover figure img {
opacity: 1 !important;
}
#container .fixfigure {
position: relative;
}
#container .fixfigure figure {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
#container .fixfigure figure img {
height: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* -------------------------------------
Gloal Layout
------------------------------------- */
#container {
grid-template-columns: 100%;
padding: 0;
}
#container .anchor a,
#container .anchor a:link {
top: -120px;
}
#container .anchor a#aform,
#container .anchor a:link#aform {
top: -120px;
}
#container.page #py {
height: 160px;
}
/* -------------------------------------
header
------------------------------------- */
#container {
/* -------------------------------------
normal
*/
}
#container #header {
width: 100%;
height: 80px;
background: hsl(0, 0%, 100%);
transition: background 0.3s, height 0.3s;
/* -------------------------------------
b_open
------------------------------------- */
}
#container #header .inner {
display: grid;
grid-template-columns: minmax(140px, 208px) 1fr 80px;
width: 100%;
height: auto;
}
#container #header .inner .content {
/* -------------------------------
main
*/
/* -------------------------------
menu
*/
}
#container #header .inner .content.main {
grid-column: 1;
width: 100%;
height: 80px;
padding: 0 16px;
margin: 0;
background: transparent;
box-sizing: border-box;
position: static;
}
#container #header .inner .content.main h1.h1_1 {
width: 100%;
max-width: 160px;
margin: 0 auto;
}
#container #header .inner .content.main h1.h1_1 a,
#container #header .inner .content.main h1.h1_1 a:link {
width: 160px;
padding: 0;
}
#container #header .inner .content.main h1.h1_1 span.img {
width: 160px;
}
#container #header .inner .content.main #b_openmenu {
width: 80px;
height: 80px;
cursor: pointer;
}
#container #header .inner .content.main #b_openmenu .icon {
width: 32px;
border-top: 1px solid hsl(0, 0%, 0%);
}
#container #header .inner .content.main #b_openmenu .icon:before, #container #header .inner .content.main #b_openmenu .icon:after {
border-top: 1px solid hsl(0, 0%, 0%);
}
#container #header .inner .content.main #b_openmenu .icon:before {
bottom: -12px;
}
#container #header .inner .content.main #b_openmenu .icon:after {
bottom: 12px;
}
#container #header .inner .content.menu {
grid-column: 2;
width: 100%;
}
#container #header .inner .content.menu #menu_main.menu_1 {
padding: 96px 0 0;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel {
margin: 0 auto 32px;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p i {
width: 26px;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p .tellink {
font-size: 4rem;
}
#container #header .inner .content.menu #menu_main.menu_1 .tel p:nth-of-type(2) {
font-size: 1.8rem;
margin: 24px auto 0;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li {
width: 300px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a:link {
white-space: nowrap;
padding: 16px 0 16px 24px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a::before,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li a:link::before {
width: 6px;
height: 6px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_1 a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_1 a:link, #container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a:link {
padding: 16px 0 16px 48px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.menu li.level_2 a:link {
padding: 16px 0 16px 64px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr {
padding: 0 0 48px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li {
width: 288px;
height: 48px;
margin-top: 8px;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:link {
font-size: 2.1rem;
height: 48px;
transition: 0.3s;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a::before,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:link::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:hover,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:link:hover {
color: hsl(0, 0%, 100%);
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:hover:before,
#container #header .inner .content.menu #menu_main.menu_1 nav ul.bnr li a:link:hover:before {
transform: scaleX(1);
transform-origin: left;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.sns {
padding: 48px 0;
}
#container #header .inner .content.menu #menu_main.menu_1 nav ul.sns li {
width: 32px;
margin: 0 16px;
}
#container #header .inner .content.menu .menu_2 {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 0;
}
#container #header .inner .content.menu .menu_2.pc.tb {
display: none !important;
}
#container #header .inner .content.menu .menu_2 nav {
display: flex;
justify-content: flex-end;
width: 100%;
}
#container #header .inner .content.menu .menu_2 nav ul {
display: grid;
grid-template-columns: repeat(8, max-content);
column-gap: 8px;
justify-content: flex-end;
align-items: center;
background: none;
position: relative;
}
#container #header .inner .content.menu .menu_2 nav ul > li {
display: flex;
align-items: center;
width: 100%;
height: 80px;
background: inherit;
position: relative;
box-sizing: border-box;
}
#container #header .inner .content.menu .menu_2 nav ul > li:hover .txt {
opacity: 1;
}
#container #header .inner .content.menu .menu_2 nav ul > li:hover .txt_2 {
opacity: 0;
}
#container #header .inner .content.menu .menu_2 nav ul > li a,
#container #header .inner .content.menu .menu_2 nav ul > li a:link,
#container #header .inner .content.menu .menu_2 nav ul > li .txt,
#container #header .inner .content.menu .menu_2 nav ul > li .txt_2 {
display: flex;
align-items: center;
justify-content: center;
font-feature-settings: "palt";
white-space: nowrap;
text-align: center;
line-height: 1;
width: 100%;
min-height: 28px;
box-sizing: border-box;
}
#container #header .inner .content.menu .menu_2 nav ul > li .txt,
#container #header .inner .content.menu .menu_2 nav ul > li .txt_2 {
padding: 0 8px;
cursor: pointer;
}
#container #header .inner .content.menu .menu_2 nav ul > li .txt {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 400;
color: hsl(0, 0%, 100%);
letter-spacing: 0.15em;
font-size: 1.2rem;
background: hsl(0, 0%, 60%);
opacity: 0;
transition: 0.3s;
}
#container #header .inner .content.menu .menu_2 nav ul > li .txt_2 {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: bold;
font-weight: 300;
text-transform: capitalize;
letter-spacing: 0.075em;
font-size: 1.4rem;
position: absolute;
z-index: 1;
transition: 0.1s;
}
#container #header .inner .content.menu .menu_2 nav ul > li .txt_2.nocap {
text-transform: inherit;
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) {
padding-left: 8px;
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link, #container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link {
height: 32px;
border: 1px solid hsl(0, 0%, 60%);
transition: 0.3s;
position: relative;
z-index: 1;
overflow: hidden;
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a .txt,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link .txt, #container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a .txt,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link .txt {
color: hsl(0, 0%, 0%);
background: none;
opacity: 1;
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a .txt_2,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link .txt_2, #container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a .txt_2,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link .txt_2 {
display: none;
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a::before,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link::before, #container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a::before,
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:hover .txt, #container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:hover .txt {
color: hsl(0, 0%, 100%);
}
#container #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:hover:before, #container #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:hover:before {
transform: scaleX(1);
transform-origin: left;
}
#container #header .inner .content.menu .menu_2 nav ol {
display: none;
list-style: none;
text-align: center;
width: auto;
padding: 0;
margin: 0;
position: absolute;
z-index: 1;
top: 60px;
left: 50%;
transform: translateX(-50%);
}
#container #header .inner .content.menu .menu_2 nav ol li {
display: block;
width: auto;
}
#container #header .inner .content.menu .menu_2 nav ol li a,
#container #header .inner .content.menu .menu_2 nav ol li a:link {
white-space: nowrap;
display: block;
text-decoration: none;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
font-weight: bold;
font-weight: 400;
font-feature-settings: "palt";
letter-spacing: 0.15em;
color: hsl(0, 0%, 0%);
font-size: 1.2rem;
line-height: 1;
width: auto;
height: auto;
padding: 8px 16px 8px 8px;
background: hsl(0, 0%, 100%);
transition: background 0.3s;
}
#container #header .inner .content.menu .menu_2 nav ol li a:hover {
color: hsl(0, 0%, 100%);
background: hsl(0, 0%, 60%);
opacity: 1;
}
#container #header .inner .content.menu .menu_2 nav ol li a:hover:before {
border-top: 1px solid rgba(255, 255, 255, 0.6);
border-right: 1px solid rgba(255, 255, 255, 0.6);
}
#container #header.open .inner .content.main {
box-shadow: none;
}
#container #header.fixed {
position: fixed;
z-index: 99999;
top: 0;
left: 0;
}
#container #header.fixed .inner .content.main {
box-shadow: none;
}
#container.header-fullimage {
position: relative;
z-index: 1;
}
#container.header-fullimage::before {
content: "";
display: block;
width: 100%;
height: 400px;
background: -moz-linear-gradient(top, hsl(0, 0%, 0%) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(top, hsl(0, 0%, 0%) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, hsl(0, 0%, 0%) 0%, rgba(0, 0, 0, 0) 100%);
position: absolute;
z-index: 1;
top: 0;
left: 0;
opacity: 0.4;
}
#container.header-fullimage #header {
background: rgba(255, 255, 255, 0);
}
#container.header-fullimage #header .inner .content.main {
background: none;
}
#container.header-fullimage #header .inner .content.main #b_openmenu .icon {
border-top: 1px solid hsl(0, 0%, 100%);
}
#container.header-fullimage #header .inner .content.main #b_openmenu .icon:before, #container.header-fullimage #header .inner .content.main #b_openmenu .icon:after {
border-top: 1px solid hsl(0, 0%, 100%);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li a,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li a:link,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li .txt,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li .txt_2 {
color: hsl(0, 0%, 100%);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link, #container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link {
border: 1px solid hsl(0, 0%, 100%);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a .txt,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link .txt, #container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a .txt,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link .txt {
color: hsl(0, 0%, 100%);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:hover, #container.header-fullimage #header .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:hover {
border: 1px solid hsl(0, 0%, 60%);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ol li a,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ol li a:link {
color: hsl(0, 0%, 100%);
background: rgba(255, 255, 255, 0);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ol li a:before,
#container.header-fullimage #header .inner .content.menu .menu_2 nav ol li a:link:before {
border-top: 1px solid rgba(255, 255, 255, 0.6);
border-right: 1px solid rgba(255, 255, 255, 0.6);
}
#container.header-fullimage #header .inner .content.menu .menu_2 nav ol li a:hover {
color: hsl(0, 0%, 100%);
background: hsl(0, 0%, 60%);
}
#container.header-fullimage #header.fixed {
background: white;
}
#container.header-fullimage #header.fixed .inner .content.main {
background: none;
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li .txt {
color: hsl(0, 0%, 100%);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li .txt_2 {
color: hsl(0, 0%, 0%);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(7) a,
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link, #container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(8) a,
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link {
border: 1px solid hsl(0, 0%, 60%);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(7) a .txt,
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:link .txt, #container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(8) a .txt,
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:link .txt {
color: hsl(0, 0%, 0%);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(7) a:hover .txt, #container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ul > li:nth-child(8) a:hover .txt {
color: hsl(0, 0%, 100%);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ol li a,
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ol li a:link {
color: hsl(0, 0%, 0%);
background: white;
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ol li a:before,
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ol li a:link:before {
border-top: 1px solid rgba(51, 51, 51, 0.6);
border-right: 1px solid rgba(51, 51, 51, 0.6);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ol li a:hover {
color: hsl(0, 0%, 100%);
background: hsl(0, 0%, 60%);
}
#container.header-fullimage #header.fixed .inner .content.menu .menu_2 nav ol li a:hover:before {
border-top: 1px solid rgba(255, 255, 255, 0.6);
border-right: 1px solid rgba(255, 255, 255, 0.6);
}
/* -------------------------------------
Contents Common
------------------------------------- */
#main {
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#container {
/* -------------------------------------
aside
------------------------------------- */
/* -------------------------------------
section
------------------------------------- */
}
#container p:first-of-type {
margin-top: 0.5em;
}
#container .link {
display: grid;
align-items: center;
width: 288px;
height: 48px;
margin: 32px auto 0;
position: relative;
z-index: 1;
}
#container .link a,
#container .link a:link {
width: 100%;
}
#container .link::after {
content: "";
display: block;
width: 100%;
height: 0%;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#container .link span {
color: hsl(0, 0%, 0%);
font-size: 1.4rem;
width: 100%;
height: auto;
background: none;
position: relative;
z-index: 1;
}
#container .link span::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid hsl(0, 0%, 20%);
position: absolute;
z-index: -2;
bottom: 1px;
left: 0;
}
#container .link span.txt.en {
font-size: 1.8rem;
}
#container .link:hover span {
color: hsl(0, 0%, 100%);
}
#container .link:hover span::after {
opacity: 0;
}
#container .link:hover::after {
animation-fill-mode: forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
#container .link.btn {
grid-column: 2/3;
}
#container .link.btn::after {
display: none;
}
#container .link.btn a,
#container .link.btn a:link {
height: 100%;
position: relative;
z-index: 1;
overflow: hidden;
}
#container .link.btn a::before,
#container .link.btn a:link::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}
#container .link.btn a:hover .txt,
#container .link.btn a:link:hover .txt {
color: hsl(0, 0%, 100%);
}
#container .link.btn a:hover:before,
#container .link.btn a:link:hover:before {
transform: scaleX(1);
transform-origin: left;
}
#container .link.btn span {
height: 100%;
}
#container .link.btn span::after {
display: none;
}
#container aside {
/* -------------------------------------
consultation
*/
/* -------------------------------------
concept_in
*/
/* -------------------------------------
modelhouse
*/
/* -------------------------------------
shoplist
*/
/* -------------------------------------
fmenu
*/
/* -------------------------------------
contact_txt_in
*/
/* -------------------------------------
concept
&.concept{
width: $outwidth;
margin: 0 auto;
background: $monocolor4;
.inner{
width: $outwidth;
.content{
figure{
width: 1920px;
img {
transition: 0.3s;
}
}
h3{
&.h3_1{
margin: 0 0 size_px(3);
span{
font-size: 3.6rem;
line-height: 1;
}
}
}
p{
//font-size: 1.6rem;
//line-height: 2;
}
.link{
color: $monocolor;
font-size: 1.4rem;
width: 288px;
height: 48px;
margin: size_px(6) 0 0;
background: none;
position: relative;
z-index: 1;
span{
width: 100%;
position: relative;
z-index: 1;
&::after{
content: "";
display: block;
width: 100%;
border-bottom: 1px solid $monocolor8;
position: absolute;
z-index: -2;
bottom: -1px;
left: 0;
}
}
&::after{
content: "";
display: block;
width: 100%;
height: 0px;
background: $basecolor;
position: absolute;
z-index: -1;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.item{
height: 640px;
padding: size_px(5) 0 size_px(4);
}
a:hover{
figure{
img {
opacity: 0.3;
//-webkit-filter: blur(0);
//filter: blur(0);
}
}
.link{
color: $monocolor2;
span{
&::after{
opacity: 0;
}
}
&::after{
//animation
animation-fill-mode:forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
}
}
}
}
}
*/
}
#container aside h2.h2_1 {
width: 100%;
height: 160px;
}
#container aside h2.h2_1 span.txt {
font-size: 3.2rem;
}
#container aside h2.h2_1 span.txt_2 {
display: block;
font-size: 1.4rem;
margin-left: 32px;
}
#container aside.consultation {
width: 100%;
margin-top: 64px;
}
#container aside.consultation .inner .content {
width: 1056px;
}
#container aside.consultation .inner .content figure {
height: 640px;
}
#container aside.consultation .inner .content figure img {
transition: 0.3s;
}
#container aside.consultation .inner .content h3.h3_1 span {
font-size: 3.2rem;
line-height: 1;
}
#container aside.consultation .inner .content h3.h3_1 span.en {
font-size: 3.2rem;
}
#container aside.consultation .inner .content h3.h3_1 span.txt {
margin: 80px 0 0;
}
#container aside.consultation .inner .content h3.h3_1 span.txt_2 {
font-size: 4.6rem;
line-height: 1;
margin: 48px 0 0;
}
#container aside.consultation .inner .content h3.h3_1 span.txt_3 {
margin: 48px 0 0;
}
#container aside.consultation .inner .content .link {
width: 288px;
height: 48px;
margin: 96px 0 0;
background: none;
position: relative;
}
#container aside.consultation .inner .content .link span {
font-size: 1.8rem;
color: hsl(0, 0%, 100%);
height: max-content;
}
#container aside.consultation .inner .content .link span::after {
border-bottom: 1px solid hsl(0, 0%, 100%);
bottom: 0px;
}
#container aside.consultation .inner .content .link::after {
background: hsl(0, 0%, 100%);
}
#container aside.consultation .inner .content .item {
justify-content: flex-end;
padding: 0 0 80px;
}
#container aside.consultation .inner .content a:hover figure img {
opacity: 1;
}
#container aside.consultation .inner .content a:hover .link span {
color: hsl(0, 0%, 0%);
}
#container aside.consultation .inner .content a:hover .link span::after {
opacity: 0;
}
#container aside.consultation .inner .content a:hover .link::after {
animation-fill-mode: forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
#container aside.concept_in {
padding: 0 0 48px;
margin: 32px auto 0;
}
#container aside.concept_in h2.h2_1 {
width: 1056px;
padding: 48px 0 0;
margin: 0 auto 48px;
}
#container aside.concept_in h2.h2_1 span.txt {
font-size: 2.6rem;
}
#container aside.concept_in h2.h2_1 span.txt_2 {
font-size: 3.6rem;
margin: 16px 0 0;
}
#container aside.concept_in .content {
/* -------------------------------------
content_2
*/
}
#container aside.concept_in .content.content_2 {
grid-template-columns: repeat(5, 1fr);
column-gap: 17px;
width: 1056px;
}
#container aside.concept_in .content.content_2 h4.h4_2 {
margin-top: 0.75em;
}
#container aside.concept_in .content.content_2 h4.h4_2 span {
font-size: 1.4rem;
line-height: 1.5;
}
#container aside.concept_in .content.content_2 .item {
margin: 0;
}
#container aside.modelhouse {
background: hsl(0, 0%, 90%);
}
#container aside.modelhouse .inner .content {
width: 1056px;
margin: 0 auto;
}
#container aside.modelhouse .inner .content figure {
width: 1920px;
height: 528px;
aspect-ratio: initial;
position: relative;
z-index: 1;
left: 50%;
transform: translateX(-50%);
}
#container aside.modelhouse .inner .content figure img {
transition: 0.3s;
}
#container aside.modelhouse .inner .content h3.h3_1 span {
font-size: 2.8rem;
}
#container aside.modelhouse .inner .content h3.h3_1 span.en {
font-size: 2.8rem;
}
#container aside.modelhouse .inner .content h3.h3_1 span.txt {
margin-top: 64px;
}
#container aside.modelhouse .inner .content h3.h3_1 span.txt_2 {
font-size: 3.6rem;
}
#container aside.modelhouse .inner .content h3.h3_1 span.txt_3 {
margin-top: 0.5em;
}
#container aside.modelhouse .inner .content .link {
width: 288px;
height: 48px;
margin-top: 96px;
background: none;
position: relative;
}
#container aside.modelhouse .inner .content .link span {
color: hsl(0, 0%, 100%);
height: max-content;
}
#container aside.modelhouse .inner .content .link span::after {
border-bottom: 1px solid hsl(0, 0%, 100%);
bottom: 0px;
}
#container aside.modelhouse .inner .content .link::after {
background: hsl(0, 0%, 100%);
}
#container aside.modelhouse .inner .content a:hover figure img {
opacity: 1;
}
#container aside.modelhouse .inner .content a:hover .link span {
color: hsl(0, 0%, 0%);
}
#container aside.modelhouse .inner .content a:hover .link span::after {
opacity: 0;
}
#container aside.modelhouse .inner .content a:hover .link::after {
animation-fill-mode: forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
#container aside.shoplist {
width: 100%;
}
#container aside.shoplist .inner {
width: 1056px;
margin: 0 auto;
/* -------------------------------------
content
*/
}
#container aside.shoplist .inner .content {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
width: 1056px;
}
#container aside.shoplist .inner .content figure {
overflow: hidden;
}
#container aside.shoplist .inner .content h2.h2_1 {
grid-column: 1/-1;
grid-template-rows: 4fr repeat(4, 1fr);
min-width: 1056px;
width: 100%;
height: 160px;
}
#container aside.shoplist .inner .content h2.h2_1 span.txt {
font-size: 3.2rem;
}
#container aside.shoplist .inner .content h2.h2_1 span.txt_2 {
grid-row: 3;
font-size: 1.4rem;
margin: 0;
}
#container aside.shoplist .inner .content h4.h4_2 {
margin: 12px auto;
}
#container aside.shoplist .inner .content h4.h4_2 span {
font-size: 1.8rem;
}
#container aside.shoplist .inner .content .item {
width: 100%;
margin: 0;
}
#container aside.shoplist .inner .content .item:hover .link span {
color: hsl(0, 0%, 100%);
}
#container aside.shoplist .inner .content .item:hover .link span::after {
opacity: 0;
}
#container aside.shoplist .inner .content .item:hover .link::after {
animation-fill-mode: forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
#container aside.shoplist .inner .content .tel {
margin-top: 0.5em;
}
#container aside.shoplist .inner .content .tel span.txt b,
#container aside.shoplist .inner .content .tel span.txt i {
width: 14px;
transform: translateY(3px);
}
#container aside.shoplist .inner .content .tel span.txt .tellink {
font-size: 2.4rem;
}
#container aside.shoplist .inner .content .link {
width: 160px;
height: 36px;
margin: 16px 0 0;
}
#container aside.shoplist .inner .content .link span {
font-size: 1.4rem;
width: 160px;
height: auto;
}
#container aside.fmenu {
margin: 0 auto 32px;
}
#container aside.fmenu .inner figure {
height: 368px;
}
#container aside.fmenu .inner .content {
width: 1056px;
}
#container aside.fmenu .inner .content h2.h2_1 {
margin: 0 auto 48px;
}
#container aside.fmenu .inner .content h4.h4_1 span {
font-size: 1.4rem;
}
#container aside.fmenu .inner .content .item {
width: 252px;
margin: 0 16px 0 0;
}
#container aside.fmenu .inner .content .item:nth-of-type(even) {
margin: 0 16px 0 0;
}
#container aside.fmenu .inner .content .item:last-of-type {
margin: 0;
}
#container aside.fmenu .inner .content .item a,
#container aside.fmenu .inner .content .item a:link {
height: 48px;
transition: 0.3s;
position: relative;
z-index: 1;
overflow: hidden;
}
#container aside.fmenu .inner .content .item a:before,
#container aside.fmenu .inner .content .item a:link:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}
#container aside.fmenu .inner .content .item a:hover:before,
#container aside.fmenu .inner .content .item a:link:hover:before {
transform: scaleX(1);
transform-origin: left;
}
#container aside.contact_txt_in {
width: 1056px;
margin: 0 auto 48px;
}
#container aside.contact_txt_in .content {
width: 1056px;
margin: 0 auto;
}
#container aside.contact_txt_in .content h2.h2_2 span {
letter-spacing: 0.2em;
font-size: 1.8rem;
}
#container aside.contact_txt_in .content h3.h3_3 {
margin: 0 auto 8px;
}
#container aside.contact_txt_in .content h3.h3_3 span {
letter-spacing: 0.2em;
font-size: 1.8rem;
}
#container aside.contact_txt_in .content p {
display: flex;
align-items: baseline;
font-size: 1.8rem;
}
#container aside.contact_txt_in .content p i {
display: block;
font-size: 1.4rem;
margin: 0 8px 0 0;
}
#container aside.contact_txt_in .content p i img {
width: 20px;
}
#container aside.contact_txt_in .content .item {
width: 100%;
padding: 32px 0;
}
#container aside.contact_txt_in .content .item .float_l {
width: 208px;
}
#container aside.contact_txt_in .content .item .float_r {
width: 848px;
padding: 0 48px;
}
#container section .item {
width: 100%;
margin: 0 0 40px;
}
#container section .item.float {
display: flex;
}
#container section .item.float.justify {
justify-content: space-between;
}
#container section .item.float.wrap {
flex-wrap: wrap;
}
#container section .item.float.reverse {
flex-direction: row-reverse;
}
#container section .item.float .float_l {
width: 340px;
}
#container section .item.float .float_r {
width: 540px;
}
#container section .item.underline {
padding: 0 0 40px;
}
#container section .item.framed {
padding: 40px;
}
#container section .item.framed.float .float_l {
width: 340px;
}
#container section .item.framed.float .float_r {
width: 460px;
}
/* -------------------------------------
Contents.Page
------------------------------------- */
#container.page {
padding: 80px 0 0;
/* -------------------------------------
nav_pankuzu
------------------------------------- */
/* -------------------------------------
aside
------------------------------------- */
/* -------------------------------------
section
------------------------------------- */
}
#container.page .nav_txt {
width: 1056px;
margin: 0 auto 32px;
}
#container.page .nav_txt ul {
width: 100%;
padding: 0 !important;
}
#container.page aside {
width: 100%;
/* -------------------------------------
page_control
------------------------------------- */
}
#container.page aside.page_control {
padding: 0 0 80px;
}
#container.page aside.page_control .inner {
width: 1056px;
margin: 64px auto 0;
}
#container.page aside.page_control .inner .b_backforw {
/* -------------------------------------
pager
------------------------------------- */
}
#container.page aside.page_control .inner .b_backforw .back,
#container.page aside.page_control .inner .b_backforw .forw {
width: 350px;
}
#container.page aside.page_control .inner .b_backforw .back a,
#container.page aside.page_control .inner .b_backforw .back a:link,
#container.page aside.page_control .inner .b_backforw .forw a,
#container.page aside.page_control .inner .b_backforw .forw a:link {
letter-spacing: 0.175em;
font-size: 1.6rem;
height: 40px;
padding: 1.5rem 0 0;
}
#container.page aside.page_control .inner .b_backforw .back a:before, #container.page aside.page_control .inner .b_backforw .back a:after,
#container.page aside.page_control .inner .b_backforw .back a:link:before,
#container.page aside.page_control .inner .b_backforw .back a:link:after,
#container.page aside.page_control .inner .b_backforw .forw a:before,
#container.page aside.page_control .inner .b_backforw .forw a:after,
#container.page aside.page_control .inner .b_backforw .forw a:link:before,
#container.page aside.page_control .inner .b_backforw .forw a:link:after {
border: 20px solid transparent;
}
#container.page aside.page_control .inner .b_backforw .back a:before,
#container.page aside.page_control .inner .b_backforw .back a:link:before {
left: -40px;
border-right: 20px solid #B10020;
}
#container.page aside.page_control .inner .b_backforw .forw a:after,
#container.page aside.page_control .inner .b_backforw .forw a:link:after {
right: -40px;
border-left: 20px solid #B10020;
}
#container.page aside.page_control .inner .b_backforw .pager {
width: 100%;
justify-content: center;
}
#container.page aside.page_control .inner .b_backforw .pager a,
#container.page aside.page_control .inner .b_backforw .pager a:link {
font-size: 1.8rem;
height: 48px;
}
#container.page aside.page_control .inner .b_backforw .pager .parent {
width: 288px;
}
#container.page aside.page_control .inner .b_backforw .pager .prev,
#container.page aside.page_control .inner .b_backforw .pager .next {
width: 144px;
}
#container.page aside.page_control .inner .b_backforw .pager .parent {
margin: 0;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a,
#container.page aside.page_control .inner .b_backforw .pager .parent a:link {
color: hsl(0, 0%, 0%);
background: none;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a span,
#container.page aside.page_control .inner .b_backforw .pager .parent a:link span {
width: 100%;
position: relative;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a span::after,
#container.page aside.page_control .inner .b_backforw .pager .parent a:link span::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid hsl(0, 0%, 20%);
position: absolute;
z-index: -2;
bottom: 1px;
left: 0;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a span.txt.en,
#container.page aside.page_control .inner .b_backforw .pager .parent a:link span.txt.en {
font-size: 1.8rem;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a::after,
#container.page aside.page_control .inner .b_backforw .pager .parent a:link::after {
content: "";
display: block;
width: 100%;
height: 0%;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#container.page aside.page_control .inner .b_backforw .pager .parent a:hover {
color: hsl(0, 0%, 100%);
}
#container.page aside.page_control .inner .b_backforw .pager .parent a:hover span::after {
opacity: 0;
}
#container.page aside.page_control .inner .b_backforw .pager .parent a:hover::after {
animation-fill-mode: forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
#container.page aside.page_control .inner .b_backforw .pager .prev a:before, #container.page aside.page_control .inner .b_backforw .pager .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager .prev a:link:before,
#container.page aside.page_control .inner .b_backforw .pager .prev a:link:after {
right: auto;
left: -48px;
}
#container.page aside.page_control .inner .b_backforw .pager .prev a:hover:before, #container.page aside.page_control .inner .b_backforw .pager .prev a:hover:after,
#container.page aside.page_control .inner .b_backforw .pager .prev a:link:hover:before,
#container.page aside.page_control .inner .b_backforw .pager .prev a:link:hover:after {
animation-fill-mode: backwards;
animation-name: motion-pager-pv;
animation-delay: 0s;
animation-duration: 0.7s;
animation-timing-function: ease-in-out;
}
#container.page aside.page_control .inner .b_backforw .pager .next a:hover:before, #container.page aside.page_control .inner .b_backforw .pager .next a:hover:after,
#container.page aside.page_control .inner .b_backforw .pager .next a:link:hover:before,
#container.page aside.page_control .inner .b_backforw .pager .next a:link:hover:after {
animation-fill-mode: backwards;
animation-name: motion-pager-nx;
animation-delay: 0s;
animation-duration: 0.7s;
animation-timing-function: ease-in-out;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .parent a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .parent a:link {
height: 60px;
transform: translateY(25px);
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next {
width: 200px;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a figure,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link figure,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a figure,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link figure {
width: 160px;
height: 106.6666666667px;
margin: 0 auto 10px;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link {
padding: 0 0 0 40px;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:after {
width: 10px;
height: 10px;
right: 40px;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .prev a:link:after {
top: 50px;
right: auto;
left: 0;
transform: rotate(-135deg);
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link {
padding: 0 40px 0 0;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:after {
width: 10px;
height: 10px;
right: 40px;
}
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:after,
#container.page aside.page_control .inner .b_backforw .pager.thumb .next a:link:after {
top: 50px;
right: 0;
transform: rotate(45deg);
opacity: 1;
}
#container.page section {
width: 100%;
}
#container.page section .inner {
display: grid;
grid-template-columns: 1fr 1056px 1fr;
width: 100%;
position: relative;
z-index: 1;
}
#container.page section .inner .pager-infinite {
grid-column: 2/3;
margin: 48px auto;
}
#container.page section .inner .pager-infinite #more-button {
align-items: flex-end;
color: hsl(0, 0%, 0%);
font-size: 1.8rem;
width: 288px;
height: 48px;
background: none;
position: relative;
opacity: 1;
transition: 0.5s;
}
#container.page section .inner .pager-infinite #more-button::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid hsl(0, 0%, 20%);
position: absolute;
z-index: 1;
bottom: 1px;
left: 0;
}
#container.page section .inner .pager-infinite #more-button::before {
content: "";
display: block;
width: 100%;
height: 0px;
margin: 12px 0 0;
background: #7D7F80;
position: absolute;
z-index: -1;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#container.page section .inner .pager-infinite #more-button:hover {
color: hsl(0, 0%, 100%);
opacity: 0.6;
}
#container.page section .inner .pager-infinite #more-button:hover::after {
opacity: 0;
}
#container.page section .inner .pager-infinite #more-button:hover:before {
animation-fill-mode: forwards;
animation-name: motion-btn-link;
animation-delay: 0s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
#container.page section .inner.aside_inner aside,
#container.page section .inner.aside_inner .content, #container.page section .inner.form_inner aside,
#container.page section .inner.form_inner .content, #container.page section .inner.section_inner aside,
#container.page section .inner.section_inner .content {
grid-column: 2/3;
}
#container.page section .inner.form_inner .content h2.h2_1 span.txt, #container.page section .inner.section_inner .content h2.h2_1 span.txt {
font-size: 2.4rem;
}
#container.page section .inner.form_inner .content h2.h2_2 span.txt, #container.page section .inner.section_inner .content h2.h2_2 span.txt {
font-size: 2.4rem;
}
#container.page section .inner.section_inner .content {
margin: 0;
/* -------------------------------------
main
------------------------------------- */
/* -------------------------------------
lead
*/
}
#container.page section .inner.section_inner .content.title_page {
grid-column: 1/4;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 {
height: 160px;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span {
color: hsl(0, 0%, 0%);
font-size: 3rem;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span.txt {
font-size: 4.4rem;
}
#container.page section .inner.section_inner .content.title_page h1.h1_2 span.txt_2 {
font-size: 1.6rem;
margin: 12px auto 0;
}
#container.page section .inner.section_inner .content.lead .item figure {
height: 512px;
padding: 0 0 32px;
}
#container.page section .inner.section_inner .content.lead .item p.lead {
display: block;
text-align: left;
font-size: 1.4rem;
width: 100%;
margin: 0 auto;
}
#container.page section .inner.section_inner .content.lead .item .float_c {
width: 100%;
padding: 16px 0 64px;
}
#container.page section .inner.section_inner .content h4.h4_1 {
width: 100%;
margin: 0 0 10px 0;
}
#container.page section .inner.section_inner .content h4.h4_1 span.num {
font-size: 9rem;
font-weight: 300;
line-height: 1;
margin: 0 16px 0 0;
}
#container.page section .inner.section_inner .content h4.h4_1 span.num.circle {
font-size: 5.5rem;
width: 7rem;
height: 7rem;
padding: 0.15em 0 0 0;
}
#container.page section .inner.section_inner .content h4.h4_1 span.txt {
font-size: 2.4rem;
margin: 0.5em 0;
}
#container.page section .inner.section_inner .content h4.h4_1.underline {
margin: 0 0 30px 0;
}
#container.page section .inner.section_inner .content h4.h4_1.underline span.num {
font-size: 9rem;
margin: 0 2.5rem -0.15em 0;
}
#container.page section .inner.section_inner .content h4.h4_1.underline span.num.circle {
font-size: 5.5rem;
width: 7rem;
height: 7rem;
padding: 0.15em 0 0 0;
}
#container.page section .inner.section_inner .content ul {
margin: 0 0 1em;
}
#container.page section .inner.section_inner .content table.base {
display: table;
width: 100%;
margin: 16px auto;
border: none;
}
#container.page section .inner.section_inner .content table.base th,
#container.page section .inner.section_inner .content table.base td {
display: table-cell;
border-bottom: 1px solid hsl(0, 0%, 80%);
}
#container.page section .inner.section_inner .content table.base th {
width: 272px;
padding: 16px 16px 16px 48px;
}
#container.page section .inner.section_inner .content table.base td {
width: 784px;
padding: 16px 48px 16px 0;
}
#container.page section .inner.section_inner .content table.base td ul {
padding: 0 3em 0 0;
float: left;
}
/* -------------------------------------
footer
------------------------------------- */
#footer {
width: 100%;
padding: 0;
margin: 48px auto 0;
/* -------------------------------------
pagetop
------------------------------------- */
/* -------------------------------------
aside
------------------------------------- */
/* -------------------------------------
link
*/
}
#footer #pagetop {
width: 100%;
position: fixed;
top: auto;
bottom: 50px;
}
#footer #pagetop .inner {
width: 100%;
}
#footer #pagetop .inner a,
#footer #pagetop .inner a:link {
width: 60px;
height: 60px;
margin: 0;
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
position: absolute;
right: 30px;
bottom: 0;
}
#footer #pagetop .inner a:after,
#footer #pagetop .inner a:link:after {
width: 20px;
height: 20px;
border-top: 1px solid #7D7F80;
border-right: 1px solid #7D7F80;
transform: translateY(6px) rotate(-45deg);
}
#footer aside {
/* -------------------------------------
aside_1
*/
}
#footer aside.aside_1 {
width: 100%;
padding: 32px 0 8px;
}
#footer aside.aside_1 .inner {
display: grid;
grid-template-rows: repeat(2, max-content);
grid-template-columns: max-content 1fr 300px;
justify-content: center;
width: 1056px;
margin: 0 auto;
}
#footer aside.aside_1 .inner .content.content_1 {
grid-row: 1;
grid-column: 1;
width: 224px;
}
#footer aside.aside_1 .inner .content.content_1 h1.h1_2 {
width: 180px;
}
#footer aside.aside_1 .inner .content.content_1 h1.h1_2 span.img {
width: 100%;
}
#footer aside.aside_1 .inner .content.content_1 h1.h1_2 span.txt {
font-size: 1.4rem;
width: 180px;
margin: 12px auto 0;
}
#footer aside.aside_1 .inner .content.content_1 nav {
margin: 24px auto 0;
}
#footer aside.aside_1 .inner .content.content_1 nav ul {
grid-template-columns: repeat(auto-fit, 28px);
column-gap: 16px;
width: 180px;
}
#footer aside.aside_1 .inner .content.content_1 nav ul li a,
#footer aside.aside_1 .inner .content.content_1 nav ul li a:link {
height: 28px;
}
#footer aside.aside_1 .inner .content.content_2 {
grid-row: 1;
grid-column: 2;
width: 100%;
padding-top: 4px;
margin: 0;
}
#footer aside.aside_1 .inner .content.content_2 nav {
column-gap: 24px;
line-height: 1.2;
width: 100%;
margin: 0;
}
#footer aside.aside_1 .inner .content.content_2 nav .item {
padding: 0;
}
#footer aside.aside_1 .inner .content.content_2 nav .item:nth-child(2) {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: repeat(2, max-content);
column-gap: 24px;
}
#footer aside.aside_1 .inner .content.content_2 nav .item:nth-child(2) ul:nth-of-type(2) {
grid-row: 2;
}
#footer aside.aside_1 .inner .content.content_2 nav .item:nth-child(2) ul:nth-of-type(3) {
grid-row: 1/3;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li {
white-space: nowrap;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a,
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:link {
column-gap: 0.25em;
letter-spacing: 0.075em;
font-size: 1.2rem;
line-height: 1.5;
padding: 0 0 9.6px;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:before,
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:link:before {
width: 6px;
height: 6px;
margin: 0 8px 0 0;
}
#footer aside.aside_1 .inner .content.content_2 nav .item ul li a:hover {
text-decoration: underline;
}
#footer aside.aside_1 .inner .content.content_3 {
grid-row: 1;
grid-column: 3;
margin: 0;
}
#footer aside.aside_1 .inner .content.content_3 .text {
padding: 0;
}
#footer aside.aside_1 .inner .content.content_3 .text p {
white-space: nowrap;
line-height: 2;
margin: 0 0 0.5em;
}
#footer aside.aside_1 .inner .content.content_4 {
grid-row: 2;
grid-column: 1/4;
width: 100%;
margin: 0 auto;
}
#footer aside.aside_1 .inner .content.content_4 small {
font-size: 1.2rem;
padding: 20px 0;
}
#footer .link.consultation {
row-gap: 8px;
margin-top: 20px;
}
#footer .link.consultation::after {
display: none;
}
#footer .link.consultation a,
#footer .link.consultation a:link {
width: 180px;
height: 24px;
margin: 0;
}
#footer .link.consultation a:hover span,
#footer .link.consultation a:link:hover span {
color: #7D7F80;
}
#footer .link.consultation a:hover span:before,
#footer .link.consultation a:link:hover span:before {
transform: scaleX(1);
transform-origin: left;
}
#footer .link.consultation span {
font-size: 1.2rem;
width: 160px;
margin: 0 auto;
position: relative;
z-index: 1;
overflow: hidden;
}
#footer .link.consultation span:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: hsl(0, 0%, 100%);
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}
#footer .link.consultation span::after {
border: none;
}
}
@media screen and (min-width: 768px) {
/* =================================================
unique layout
================================================= */
/* -------------------------------------
article
------------------------------------- */
#article {
/* -------------------------------------
section
------------------------------------- */
}
#article section .inner.form_inner {
padding: 0 0 48px;
/* -------------------------------------
content
------------------------------------- */
}
#article section .inner.form_inner .content {
/* -------------------------------------
form_header
*/
/* -------------------------------------
form
*/
}
#article section .inner.form_inner .content.form_header {
width: 100%;
margin: 32px auto 0;
}
#article section .inner.form_inner .content.form_header.border-top {
padding: 64px 0 0;
margin: 64px auto 0;
}
#article section .inner.form_inner .content.form_header h2.h2_2 {
width: 100%;
margin: 0 auto 48px;
}
#article section .inner.form_inner .content.form_header h2.h2_2 span {
letter-spacing: 0.2em;
font-size: 1.8rem;
}
#article section .inner.form_inner .content.form_header h2.h2_2 span.txt {
font-size: 1.8rem;
}
#article section .inner.form_inner .content.form_header h2.h2_2 span.txt_2 {
font-size: 3rem;
}
#article section .inner.form_inner .content.form_header h3.h3_3 {
margin: 0 0 32px;
}
#article section .inner.form_inner .content.form_header h3.h3_3 span i {
width: 20px;
margin: 0 16px 0 0;
}
#article section .inner.form_inner .content.form_header h3.h3_3 span.txt {
font-size: 1.8rem;
height: 48px;
border-radius: 24px;
}
#article section .inner.form_inner .content.form_header h4.h4_2 {
padding: 0 16px;
margin: 0 auto 16px;
}
#article section .inner.form_inner .content.form_header h4.h4_2 span {
letter-spacing: 0.2em;
font-size: 1.8rem;
}
#article section .inner.form_inner .content.form_header h4.h4_2 span.txt_2 {
font-size: 2.4rem;
margin: 4px auto 0;
}
#article section .inner.form_inner .content.form_header p {
font-size: 1.4rem;
padding: 0 16px;
margin: 16px auto 0;
}
#article section .inner.form_inner .content.form_header p.lead {
word-break: keep-all;
font-size: 1.8rem;
text-align: left;
width: 100%;
}
#article section .inner.form_inner .content.form_header p.tel {
font-size: 1.8rem;
}
#article section .inner.form_inner .content.form_header p.tel span.txt i {
width: 17px;
transform: translateY(3px);
}
#article section .inner.form_inner .content.form_header p.tel span.txt .tellink {
font-size: 2.8rem;
}
#article section .inner.form_inner .content.form_header p.tel span.txt_2 {
transform: translateY(-3px);
}
#article section .inner.form_inner .content.form_header .item {
width: 100%;
margin: 0 auto 48px;
}
#article section .inner.form_inner .content.form_header .item:nth-of-type(1) h3.h3_3 span.txt {
width: 280px;
}
#article section .inner.form_inner .content.form_header .item:nth-of-type(2) h3.h3_3 span.txt {
width: 340px;
}
#article section .inner.form_inner .content.form {
width: 1056px;
padding: 0;
margin: 0 auto;
}
#article section .inner.form_inner .content.form h3.h3_1.wpcf7c-elm-step2 {
font-size: 1.8rem;
}
#article section .inner.form_inner .content.form h3.h3_1 {
display: flex;
justify-content: center;
align-items: baseline;
}
#article section .inner.form_inner .content.form h3.h3_1 span {
display: inline-block;
}
#article section .inner.form_inner .content.form h3.h3_1 span.txt strong {
font-size: 1.8rem;
}
#article section .inner.form_inner .content.form .item {
display: flex;
justify-content: center;
font-size: 1.4rem;
padding: 30px 0;
}
#article section .inner {
/* -------------------------------------
form
*/
}
#article section .inner form {
/* alert-text */
/* alert-messege */
}
#article section .inner form.wpcf7-form {
margin: 16px auto 0;
}
#article section .inner form.wpcf7-form.custom-wpcf7cp-confirm {
margin: 80px auto 0;
}
#article section .inner form.wpcf7-form.custom-wpcf7cp-confirm .wpcf7c-cfm-tit {
width: 100%;
top: -40px;
}
#article section .inner form.wpcf7-form.invalid {
margin: 64px auto 0;
}
#article section .inner form.wpcf7-form .wpcf7-response-output {
width: 1056px;
top: -40px;
}
#article section .inner form .h2_1 {
margin: 0 auto 32px;
}
#article section .inner form .thanks {
width: 100%;
}
#article section .inner form .imperative2 {
line-height: 1.5;
padding: 0 16px 0 0;
margin: 8px 0 0;
}
#article section .inner form .confirm {
width: 940px;
padding: 12px 0 !important;
margin: 32px auto 32px;
}
#article section .inner form .wpcf7-form-control-wrap {
display: block;
}
#article section .inner form table {
width: 100%;
margin: 0 auto;
border-top: 1px solid hsl(0, 0%, 80%);
}
#article section .inner form table th,
#article section .inner form table td {
display: table-cell;
font-size: 1.6rem;
border-bottom: 1px solid hsl(0, 0%, 80%);
box-sizing: border-box;
}
#article section .inner form table th {
font-weight: bold;
width: 256px;
padding: 30px 0 30px 1.5em;
}
#article section .inner form table th p {
font-size: inherit;
margin: 0;
}
#article section .inner form table td {
vertical-align: middle;
width: 800px;
padding: 30px 30px;
margin: 0;
background: hsl(0, 0%, 95%);
overflow: hidden;
}
#article section .inner form table td .horizontal-item + .horizontal-item {
margin-left: 16px;
}
#article section .inner form table td .wpcf7-form-control-wrap {
margin: 0 0.5rem 0;
}
#article section .inner form table td .float p {
width: 100%;
}
#article section .inner form table td .float select.size80, #article section .inner form table td .float select.size70, #article section .inner form table td .float select.size60, #article section .inner form table td .float select.size50, #article section .inner form table td .float select.size40, #article section .inner form table td .float select.size30, #article section .inner form table td .float select.size20,
#article section .inner form table td .float input[type=text].size80,
#article section .inner form table td .float input[type=text].size70,
#article section .inner form table td .float input[type=text].size60,
#article section .inner form table td .float input[type=text].size50,
#article section .inner form table td .float input[type=text].size40,
#article section .inner form table td .float input[type=text].size30,
#article section .inner form table td .float input[type=text].size20,
#article section .inner form table td .float input[type=number].size80,
#article section .inner form table td .float input[type=number].size70,
#article section .inner form table td .float input[type=number].size60,
#article section .inner form table td .float input[type=number].size50,
#article section .inner form table td .float input[type=number].size40,
#article section .inner form table td .float input[type=number].size30,
#article section .inner form table td .float input[type=number].size20,
#article section .inner form table td .float input[type=email].size80,
#article section .inner form table td .float input[type=email].size70,
#article section .inner form table td .float input[type=email].size60,
#article section .inner form table td .float input[type=email].size50,
#article section .inner form table td .float input[type=email].size40,
#article section .inner form table td .float input[type=email].size30,
#article section .inner form table td .float input[type=email].size20,
#article section .inner form table td .float input[type=tel].size80,
#article section .inner form table td .float input[type=tel].size70,
#article section .inner form table td .float input[type=tel].size60,
#article section .inner form table td .float input[type=tel].size50,
#article section .inner form table td .float input[type=tel].size40,
#article section .inner form table td .float input[type=tel].size30,
#article section .inner form table td .float input[type=tel].size20,
#article section .inner form table td .float input[type=date].size80,
#article section .inner form table td .float input[type=date].size70,
#article section .inner form table td .float input[type=date].size60,
#article section .inner form table td .float input[type=date].size50,
#article section .inner form table td .float input[type=date].size40,
#article section .inner form table td .float input[type=date].size30,
#article section .inner form table td .float input[type=date].size20,
#article section .inner form table td .float textarea.size80,
#article section .inner form table td .float textarea.size70,
#article section .inner form table td .float textarea.size60,
#article section .inner form table td .float textarea.size50,
#article section .inner form table td .float textarea.size40,
#article section .inner form table td .float textarea.size30,
#article section .inner form table td .float textarea.size20 {
width: 100%;
}
#article section .inner form table td p {
font-size: inherit;
margin: 0;
}
#article section .inner form table td ul {
padding: 0 3em 0 0;
float: left;
}
#article section .inner form .button_area {
padding: 40px 0 0 0;
margin: 0 auto;
}
#article section .inner form .button_area p {
padding: 0;
}
#article section .inner form .consent {
margin: 0 auto;
}
#article section .inner form .consent p.notice {
margin: 0 auto 10px;
}
#article section .inner form p.privacy {
font-size: 1.2rem;
width: 960px;
margin: 50px auto 0;
}
#article section .inner form p.privacy strong {
margin: 0 0 10px;
}
#article section .inner form select,
#article section .inner form input[type=text],
#article section .inner form input[type=number],
#article section .inner form input[type=email],
#article section .inner form input[type=tel],
#article section .inner form input[type=date],
#article section .inner form textarea {
padding: 0.75em 1em 0.5em 1em;
}
#article section .inner form select.size80,
#article section .inner form input[type=text].size80,
#article section .inner form input[type=number].size80,
#article section .inner form input[type=email].size80,
#article section .inner form input[type=tel].size80,
#article section .inner form input[type=date].size80,
#article section .inner form textarea.size80 {
width: 80%;
}
#article section .inner form select.size70,
#article section .inner form input[type=text].size70,
#article section .inner form input[type=number].size70,
#article section .inner form input[type=email].size70,
#article section .inner form input[type=tel].size70,
#article section .inner form input[type=date].size70,
#article section .inner form textarea.size70 {
width: 70%;
}
#article section .inner form select.size60,
#article section .inner form input[type=text].size60,
#article section .inner form input[type=number].size60,
#article section .inner form input[type=email].size60,
#article section .inner form input[type=tel].size60,
#article section .inner form input[type=date].size60,
#article section .inner form textarea.size60 {
width: 60%;
}
#article section .inner form select.size50,
#article section .inner form input[type=text].size50,
#article section .inner form input[type=number].size50,
#article section .inner form input[type=email].size50,
#article section .inner form input[type=tel].size50,
#article section .inner form input[type=date].size50,
#article section .inner form textarea.size50 {
width: 50%;
}
#article section .inner form select.size40,
#article section .inner form input[type=text].size40,
#article section .inner form input[type=number].size40,
#article section .inner form input[type=email].size40,
#article section .inner form input[type=tel].size40,
#article section .inner form input[type=date].size40,
#article section .inner form textarea.size40 {
width: 40%;
}
#article section .inner form select.size30,
#article section .inner form input[type=text].size30,
#article section .inner form input[type=number].size30,
#article section .inner form input[type=email].size30,
#article section .inner form input[type=tel].size30,
#article section .inner form input[type=date].size30,
#article section .inner form textarea.size30 {
width: 30%;
}
#article section .inner form select.size20,
#article section .inner form input[type=text].size20,
#article section .inner form input[type=number].size20,
#article section .inner form input[type=email].size20,
#article section .inner form input[type=tel].size20,
#article section .inner form input[type=date].size20,
#article section .inner form textarea.size20 {
width: 20%;
}
#article section .inner form select {
padding: 0.75em 1em 0.75em 1em;
}
#article section .inner form .btn_reset,
#article section .inner form input[type=submit],
#article section .inner form input[type=reset],
#article section .inner form input[type=button],
#article section .inner form button[type=button] {
line-height: 1;
height: 80px;
transition: 0.5s;
}
#article section .inner form .btn_reset:hover,
#article section .inner form input[type=submit]:hover,
#article section .inner form input[type=reset]:hover,
#article section .inner form input[type=button]:hover,
#article section .inner form button[type=button]:hover {
opacity: 0.6;
}
#article section .inner form input[type=submit] {
font-size: 1.8rem;
width: 288px;
margin: 20px auto 0;
}
#article section .inner form .btn_reset,
#article section .inner form input[type=reset],
#article section .inner form input[type=button],
#article section .inner form input.b_back,
#article section .inner form button[type=button] {
font-size: 1.4rem;
width: 200px;
height: 60px;
margin: 10px auto 0;
}
#article section .inner form .wpcf7-validation-errors {
color: #f00;
text-align: center;
width: 790px;
padding: 0;
margin: 0;
position: absolute;
z-index: 1;
top: 0;
}
#article section .inner #wpcf7cpcnf table {
width: 100%;
margin: 0 auto;
border-top: 1px solid hsl(0, 0%, 80%);
}
#article section .inner #wpcf7cpcnf table th,
#article section .inner #wpcf7cpcnf table td {
display: table-cell;
font-size: 1.4rem;
border-bottom: 1px solid hsl(0, 0%, 80%);
box-sizing: border-box;
}
#article section .inner #wpcf7cpcnf table th {
font-weight: bold;
width: 256px;
padding: 30px 0 30px 1.5em;
}
#article section .inner #wpcf7cpcnf table td {
width: 800px;
padding: 30px 30px;
margin: 0;
background: hsl(0, 0%, 95%);
overflow: hidden;
}
#article section .inner #wpcf7cpcnf table td p {
margin: 0;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns button {
transition: 0.5s;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns button:hover {
opacity: 0.6;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns .wpcf7cp-cfm-submit-btn {
width: 260px;
}
#article section .inner #wpcf7cpcnf .wpcf7cp-btns .wpcf7cp-cfm-edit-btn {
width: 200px;
margin: 40px auto 0;
}
}/*# sourceMappingURL=global.css.map */