@charset "Shift_JIS";
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ■ Variable */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
:root {
/* ---------------------------------- */
/* contents size */
--contents-mobile-width: 375px;
--contents-mobile-padding: 1rem;
--contents-tablet-width: 750px;
--contents-tablet-padding: 2rem;
--contents-desktop-width: 1024px;
--contents-desktop-padding: 3rem;
/* ---------------------------------- */
/* font-size Viewport 375 - 750 */
--font-size-12-13: clamp(0.75rem, 0.678rem + 0.36vw, 0.844rem);/* 1.125 */
--font-size-12-14: clamp(0.75rem, 0.653rem + 0.48vw, 0.875rem);/**/
--font-size-12-18: clamp(0.75rem, 0.46rem + 1.45vw, 1.125rem);/* 1.5 */
--font-size-12-22: clamp(0.75rem, 0.243rem + 2.54vw, 1.406rem);/* 1.875 */
--font-size-12-27: clamp(0.75rem, 0.025rem + 3.62vw, 1.688rem);/* 2.25 */
--font-size-14-16: clamp(0.875rem, 0.79rem + 0.42vw, 0.984rem);/* 1.125 */
--font-size-14-21: clamp(0.875rem, 0.537rem + 1.69vw, 1.313rem);/* 1.5 */
--font-size-14-24: clamp(0.875rem, 0.392rem + 2.42vw, 1.5rem);/**/
--font-size-14-26: clamp(0.875rem, 0.283rem + 2.96vw, 1.641rem);/* 1.875 */
--font-size-14-31: clamp(0.875rem, 0.03rem + 4.23vw, 1.969rem);/* 2.25 */
--font-size-16-18: clamp(1rem, 0.903rem + 0.48vw, 1.125rem);/* 1.125 */
--font-size-16-24: clamp(1rem, 0.614rem + 1.93vw, 1.5rem);/* 1.5 */
--font-size-16-30: clamp(1rem, 0.324rem + 3.38vw, 1.875rem);/* 1.875 */
--font-size-16-36: clamp(1rem, 0.034rem + 4.83vw, 2.25rem);/* 2.25 */
--font-size-18-20: clamp(1.125rem, 1.016rem + 0.54vw, 1.266rem);/* 1.125 */
--font-size-18-27: clamp(1.125rem, 0.69rem + 2.17vw, 1.688rem);/* 1.5 */
--font-size-18-34: clamp(1.125rem, 0.364rem + 3.8vw, 2.109rem);/* 1.875 */
--font-size-18-40: clamp(1.125rem, 0.038rem + 5.43vw, 2.531rem);/* 2.25 */
--font-size-18-24: clamp(1.125rem, 0.835rem + 1.45vw, 1.5rem);
--font-size-18-36: clamp(1.125rem, 0.255rem + 4.35vw, 2.25rem);
--font-size-20-42: clamp(1.25rem, 0.187rem + 5.31vw, 2.625rem);
--font-size-20-22: clamp(1.25rem, 1.129rem + 0.6vw, 1.406rem);/* 1.125 */
--font-size-20-30: clamp(1.25rem, 0.767rem + 2.42vw, 1.875rem);/* 1.5 */
--font-size-20-38: clamp(1.25rem, 0.405rem + 4.23vw, 2.344rem);/* 1.875 */
--font-size-20-45: clamp(1.25rem, 0.042rem + 6.04vw, 2.813rem);/* 2.25 */
--font-size-24-27: clamp(1.5rem, 1.355rem + 0.72vw, 1.688rem);/* 1.125 */
--font-size-24-36: clamp(1.5rem, 0.92rem + 2.9vw, 2.25rem);/* 1.5 */
--font-size-24-45: clamp(1.5rem, 0.486rem + 5.07vw, 2.813rem);/* 1.875 */
--font-size-24-54: clamp(1.5rem, 0.051rem + 7.25vw, 3.375rem);/* 2.25 */
/* ---------------------------------- */
/* icon */
--icon__angle-down-solid: url('data:image/svg+xml,');
--icon__angle-left-solid: url('data:image/svg+xml,');
--icon__angle-right-solid: url('data:image/svg+xml,');
--icon__angle-up-solid: url('data:image/svg+xml,');
--icon__bed-solid: url('data:image/svg+xml,');
--icon__caret-down-solid: url('data:image/svg+xml,');
--icon__caret-left-solid: url('data:image/svg+xml,');
--icon__caret-right-solid: url('data:image/svg+xml,');
--icon__caret-up-solid: url('data:image/svg+xml,');
--icon__check-solid: url('data:image/svg+xml,');
--icon__circle-check-regular: url('data:image/svg+xml,');
--icon__circle-check-solid: url('data:image/svg+xml,');
--icon__circle-chevron-down-solid: url('data:image/svg+xml,');
--icon__circle-chevron-left-solid: url('data:image/svg+xml,');
--icon__circle-chevron-right-solid: url('data:image/svg+xml,');
--icon__circle-chevron-up-solid: url('data:image/svg+xml,');
--icon__circle-exclamation-solid: url('data:image/svg+xml,');
--icon__circle-info-solid: url('data:image/svg+xml,');
--icon__circle-question-solid: url('data:image/svg+xml,');
--icon__circle-solid: url('data:image/svg+xml,');
--icon__circle-xmark-solid: url('data:image/svg+xml,');
--icon__coins-solid: url('data:image/svg+xml,');
--icon__crown-solid: url('data:image/svg+xml,');
--icon__desktop-solid: url('data:image/svg+xml,');
--icon__file-lines-regular: url('data:image/svg+xml,');
--icon__file-lines-solid: url('data:image/svg+xml,');
--icon__file-pdf-solid: url('data:image/svg+xml,');
--icon__graduation-cap-solid: url('data:image/svg+xml,');
--icon__heart-solid: url('data:image/svg+xml,');
--icon__house-chimney-window-solid: url('data:image/svg+xml,');
--icon__magnifying-glass-solid: url('data:image/svg+xml,');
--icon__mobile-screen-solid: url('data:image/svg+xml,');
--icon__person-falling-burst-solid: url('data:image/svg+xml,');
--icon__seedling-solid: url('data:image/svg+xml,');
--icon__star-regular: url('data:image/svg+xml,');
--icon__star-solid: url('data:image/svg+xml,');
--icon__square-check-regular: url('data:image/svg+xml,');
--icon__square-check-solid: url('data:image/svg+xml,');
--icon__square-full-solid: url('data:image/svg+xml,');
--icon__square-regular: url('data:image/svg+xml,');
--icon__triangle-exclamation-solid: url('data:image/svg+xml,');
--icon__wheelchair-solid: url('data:image/svg+xml,');
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ■ Elements */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
html {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 100vh;
background-color: var(--wh);
color: var(--ibk);
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
font-weight: 400;
}
main {display: block;}
ul, ol {font-size: 0;}
img {vertical-align: middle;}
em {font-style: normal;}
p,li,dt,dd {
text-align: justify;
word-break: break-all;
font-feature-settings: "palt";
font-size: 1rem;
}
header,
footer,
main,
div,
nav,
li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.section,
.section p,
.section li,
.section dt,
.section dd {
line-height: 1.625;
font-size: 16px;
}
label, label:hover, label:before, label:after, a, a:hover, a:before, a:after, button, input {
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ■ Mobile */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.for-mobile {
display: block;
}
.for-tablet {
display: none;
}
.for-desktop {
display: none;
}
/* ---------------------------------------------------------------------------------------------- */
/* header //////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-header {
position: fixed;
z-index: 9999;
width: 100%;
background-color: var(--deep);
color: var(--wh);
}
#site-header > .site-header-wrapper {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 0 0 0 var(--contents-mobile-padding);
width: 100%;
height: 70px;
}
#site-title, #site-tel {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
max-width: calc(100% / 2);
line-height: 1;
color: var(--wh);
font-size: var(--font-size-12-13);
}
#site-tel {
justify-content: flex-end;
padding: 0 var(--contents-mobile-padding);
height: 100%;
background-color: #87b41b;
text-align: center;
}
#site-catch, #site-logo {
flex-basis: 100%;
}
@media screen and (min-width: 510px) {
#site-catch {
margin-top: -.3em;
}
}
#site-catch a {
display: inline-block;
padding-bottom: .25em;
line-height: 1.2;
font-family: 'Zen Maru Gothic';
font-size: clamp(0.625rem, 0.48rem + 0.72vw, 0.813rem);
font-weight: 800;
}
#site-catch span {
display: inline-block;
}
#site-logo a {
display: inline-block;
line-height: 1;
font-size: clamp(1.1rem, 0.792rem + 1.54vw, 1.5rem);
font-weight: 800;
}
#site-tel a {
position: relative;
display: block;
padding-left: 1.25em;
line-height: 1;
font-size: clamp(1rem, 0.383rem + 3.08vw, 1.8rem);
font-weight: 600;
}
#site-tel a:before {
content: '';
display: inline-block;
position: absolute;
top: 0.15em;
margin-left: -1em;
mask-image: var(--icon__mobile-screen-solid);
mask-repeat: no-repeat;
justify-self: center;
inline-size: .85em;
aspect-ratio: 1;
background: linear-gradient(currentColor 0 0), CanvasText;
}
.site-tel-wrapper > span {
display: block;
margin-top: .35em;
}
#site-tel span span {
display: inline-block;
line-height: 1.2;
font-size: clamp(0.688rem, 0.591rem + 0.48vw, 0.813rem);
}
@media screen and (min-width: 510px) {
.site-tel-wrapper > span {
margin-right: -.75em;
}
}
/* ---------------------------------------------------------------------------------------------- */
/* footer //////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-footer {
padding-bottom: 1rem;
width: 100%;
/* border-top: 1px solid #e6f5a5; */
background: url(/assets/img/common/bg_footer.svg) no-repeat;
background-size: cover;
background-position: center bottom;
}
#site-footer > .site-footer-wrapper {
padding: 0 var(--contents-mobile-padding);
}
#site-footer nav {
margin-top: 2.5rem;
}
#site-footer ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
}
#site-footer ul li {
display: flex;
align-items: center;
flex-basis: calc((100% - 1rem) / 2);
border-radius: 100ch;
background: #fdfff7;
}
#site-footer ul li:not(:nth-of-type(1),:nth-of-type(2)) {
margin-top: 1rem;
}
#site-footer ul li:hover {
background-color: #e2f88d;
}
#site-footer ul a {
padding: .75em 1em;
flex-basis: 100%;
text-align: center;
line-height: 1.25;
color: var(--deep);
font-size: var(--font-size-12-13);
font-weight: 800;
letter-spacing: .1em;
}
#site-footer ul li:hover a {
color: #3b6900;
}
#site-footer ul span {
display: inline-block;
}
#site-footer dl {
margin-top: 2rem;
font-size: var(--font-size-16-18);
}
#site-footer dt {
font-size: var(--font-size-12-13);
font-weight: 800;
}
#site-footer dd {
margin-top: .25em;
line-height: 1.5;
font-size: var(--font-size-12-13);
font-weight: 400;
}
#site-footer dl + div {
margin-top: calc(1rem - .9rem);
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}
.siteseal img {
padding-top: .58rem;
width: 100px !important;
}
.approval_num {
margin-top: -.5rem;
text-align: right;
font-size: var(--font-size-12-13);
}
.copyright {
display: block;
width: 100%;
text-align: center;
font-size: var(--font-size-12-13);
font-weight: 500;
}
/* ---------------------------------------------------------------------------------------------- */
/* contents ////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-contents {
padding-top: 70px;
}
#site-contents > .site-contents-wrapper {
/* padding-bottom: 3rem; */
}
.site-main.full-width {
padding: 0 var(--contents-mobile-padding);
}
/* ---------------------------------------------------------------------------------------------- */
/* breadcrumbs /////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
.breadcrumbs {
display: none;
}
/* ---------------------------------------------------------------------------------------------- */
/* pagetop /////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#pagetop {
position: fixed;
right: 1rem;
z-index: 1000;
opacity: 0;/*初めは非表示*/
transform: translateY(100px);
}
/* 上に上がる動き */
#pagetop.UpMove {animation: UpAnime 0.5s forwards;}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 下に下がる動き */
#pagetop.DownMove {animation: DownAnime 0.5s forwards;}
@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}
#pagetop a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4rem;
background: var(--dark);
width: 4rem;
height: 4rem;
color: var(--wh);
font-size: 0.6rem;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
#pagetop a:before {
content: '';
position: absolute;
justify-self: center;
mask-image: var(--icon__angle-up-solid);
inline-size: 1rem;
aspect-ratio: .94;
display: block;
top: 0.25rem;
left: 50%;
transform: translateX(-50%);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: linear-gradient(currentColor 0 0), CanvasText;
}
#pagetop a:hover {background: var(--neutral);}
#pagetop a:hover:before {
top: calc(0.25rem - 3px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* ---------------------------------------------------------------------------------------------- */
/* error ///////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
section.error {
padding: 0 var(--contents-padding);
}
.error > header {
padding: 2em 0;
width: auto;
text-align: center;
font-size: var(--font-size-20-42);
}
.error h1 {
line-height: 1;
letter-spacing: 0;
color: var(--deep);
font-family: 'Zen Maru Gothic';
font-weight: 900;
}
.error h1 > span {
display: block;
}
/*----------------------------------------------------------------------------*/
/* server
------------------------------------------------------------------------------*/
#error__server .info p {
text-align: center;
}
#error__server .info p span {
display: inline-block;
}
/*----------------------------------------------------------------------------*/
/* message
------------------------------------------------------------------------------*/
#error__message .info dt {
color: var(--deep);
font-weight: 600;
}
#error__message .info dd {
margin-top: .5em;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ■ Tablet */ @media screen and (min-width: 751px) {
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.for-mobile {
display: none;
}
.for-tablet {
display: block;
}
.for-desktop {
display: block;
}
/* ---------------------------------------------------------------------------------------------- */
/* header //////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-header > .site-header-wrapper {
margin: 0 auto;
padding: 0 var(--contents-tablet-padding);
min-width: var(--contents-tablet-width);
}
#site-tel {
padding: 0;
background-color: transparent;
}
.site-tel-wrapper > span {
margin-right: -1em;
}
/* ---------------------------------------------------------------------------------------------- */
/* footer //////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-footer > .site-footer-wrapper {
margin: 0 auto;
padding: 0 var(--contents-tablet-padding);
min-width: var(--contents-tablet-width);
}
#site-footer ul li {
flex-basis: calc((100% - 4rem) / 5);
}
#site-footer ul li:not(:nth-of-type(1),:nth-of-type(2)) {
margin-top: 0;
}
#site-footer > .site-footer-wrapper nav + div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin-top: 2.5rem;
}
#site-footer dl {
margin-top: 0;
}
#site-footer dl + div {
margin-top: -.5rem;
display: flex;
align-items: flex-end;
flex-flow: column wrap;
}
.approval_num {
margin-top: 0rem;
}
.copyright {
margin-top: 2rem;
}
/* ---------------------------------------------------------------------------------------------- */
/* contents ////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
.site-main.full-width {
padding: 0 var(--contents-tablet-padding);
}
/* ---------------------------------------------------------------------------------------------- */
/* breadcrumbs /////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
.breadcrumbs {
display: block;
margin: .5em auto 0 auto;
padding: 0 var(--contents-padding);
min-width: 735px;
}
.breadcrumbs ol {
margin-left: 2.3em;
font-size: 0.875rem;
}
.breadcrumbs li {
display: inline-block;
color: var(--udgy);
font-size: 0.875rem;
font-weight: 600;
}
.breadcrumbs li:not(:last-child):after {
content: '/';
margin: 0 .55em 0 .75em;
}
.breadcrumbs li.active {
color: var(--ibk);
}
.breadcrumbs li a {
display: inline-block;
color: var(--dark);
transition: all 0.3s ease-out;
}
.breadcrumbs li:first-child a:before {
content: '';
position: absolute;
mask-image: var(--icon__house-chimney-window-solid);
justify-self: center;
inline-size: 1.6em;
aspect-ratio: 1.1;
margin-left: -2.3em;
background: linear-gradient(currentColor 0 0), CanvasText;
color: var(--dark);
transition: all 0.3s ease-out;
}
.breadcrumbs li a:hover,
.breadcrumbs li:first-child a:hover:before {
color: var(--laq);
transition: all 0.3s ease-out;
}
/* ---------------------------------------------------------------------------------------------------------------------------- */
} /* @media 閉じ括弧 削除注意 */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ■ Desktop */ @media screen and (min-width: 1025px) {
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.for-mobile {
display: none;
}
.for-tablet {
display: none;
}
.for-desktop {
display: block;
}
/* ---------------------------------------------------------------------------------------------- */
/* header //////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-header > .site-header-wrapper {
margin: 0 auto;
padding: 0 var(--contents-desktop-padding);
width: var(--contents-desktop-width);
}
/* ---------------------------------------------------------------------------------------------- */
/* footer //////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-footer > .site-footer-wrapper {
margin: 0 auto;
padding: 0 var(--contents-desktop-padding);
width: var(--contents-desktop-width);
}
/* ---------------------------------------------------------------------------------------------- */
/* contents ////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
#site-contents > .site-contents-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
.site-main {
width: calc(70% - 2rem);
}
.site-main.full-width {
margin: 0 auto;
padding: 0 var(--contents-desktop-padding);
width: var(--contents-desktop-width);
}
.sidebar {
position: sticky;
bottom: 0;
align-self: flex-end;
margin: 0 2rem 0 0;
width: calc(30% - 2rem);
}
/* ---------------------------------------------------------------------------------------------------------------------------- */
} /* @media 閉じ括弧 削除注意 */