@charset "UTF-8";
/*
Theme Name: オリジナルテーマ
Author: Yoko Dohi
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-style: normal;
/* vertical-align: baseline; */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type="text"],
input[type="password"],
textarea,
select,*:focus {
outline: none;
}
/* zen-kaku-gothic-new-regular - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
src: url('font/zen-kaku-gothic-new-v18-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-kaku-gothic-new-500 - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
src: url('font/zen-kaku-gothic-new-v18-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-kaku-gothic-new-700 - japanese */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
src: url('font/zen-kaku-gothic-new-v18-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
src: url('font/figtree-v8-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Figtree';
font-style: normal;
font-weight: 500;
src: url('font/figtree-v8-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
src: url('font/figtree-v8-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/*====================================================
////id | common
====================================================*/
html{
font-size: 10px;
font-size: 62.5%;
width: 100%;
max-width: 100vw;
}
:root {
--mainColor: #3f3f3f;
--d_mainColor: #333;
--l_mainColor: #ccc;
--red: #E64444;
--l_gray: #FAFAFA;
--gray: #ccc;
--d_gray: #888;
--black: #000;
--font_family: 'Figtree', "Zen Kaku Gothic New","Yu Gothic", "游ゴシック Medium", "YuGothic", 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
body, button, input, select, optgroup, textarea {
color: var(--black);
font-family: var(--font_family);
font-size-adjust: 0.5;
font-weight: 400;
letter-spacing: .02em;
line-height: 1.8;
}
button, input, select, optgroup, textarea {
color: inherit;
font-family: inherit;
font-size: inherit;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768.9px) {
body, button, input, select, optgroup, textarea {
font-size: min(4.3vw, 2rem);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
body, button, input, select, optgroup, textarea {
font-size: min(2.35vw, 2.2rem);
}
}
body {
background: #f6f6f6;
overflow-wrap: break-word;
position: relative;
width: 100%;
height: auto;
}
* {
min-height:0;
min-width : 0;
}
body * {
box-sizing: border-box;
}
body.scroll-lock {
position: fixed;
overflow: hidden;
width: 100%;
}
section {
position: relative;
max-width: 100vw;
z-index: 2;
}
a {
display: inline-block;
color: inherit;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
outline:none;
position: relative;
text-decoration: none;
transition: 0.3s ease-in-out;
/* vertical-align: middle; */
}
.tel_link a ,
a[href^="tel:"] {
color: inherit !important;
text-decoration: none !important;
}
@media print, screen and (min-width: 769px) {
.tel_link a ,
a[href^="tel:"] {
pointer-events: none;
}
}
.tel_linkBtn {
pointer-events: none;
}
.fax a {
color: inherit !important;
text-decoration: none !important;
pointer-events: none;
}
.underline {
-webkit-text-decoration: underline solid 1px;
text-decoration: underline solid 1px;
text-underline-position: under;
text-underline-offset: 0.1em;
}
p a:not([class]) ,
.bodyText ul:not(.page-numbers):not(.not_set) li a:not([class]) ,
.bodyText ol li a:not([class]) ,
dd a:not([class]) ,
a.underline {
color: var(--d_mainColor);
-webkit-text-decoration: underline dotted 1px var(--d_mainColor);
text-decoration: underline dotted 1px var(--d_mainColor);
text-underline-position: under;
text-underline-offset: 0.1em;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
/* margin: auto; */
}
p img {
display: inline-block;
}
figure {
margin: 0;
position: relative;
}
figure img {
position: relative;
}
.coverImg {
overflow: hidden;
padding-top: 56.5%;
width: 100%;
}
figure.coverImg img {
margin: auto;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .3s ease-in-out;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
}
figure.coverImg.contain img {
-o-object-fit: contain;
object-fit: contain;
}
figure figcaption.noImage {
background: #f2fff2;
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.0rem;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scaleUpImg {
overflow: hidden;
}
.scaleUpImg img {
transition: .3s ease-in-out;
}
.text-overlay {
overflow: hidden;
position: relative;
}
.text-overlay::before {
background: rgba(0, 0,0, .4);
backdrop-filter: blur(3px);
color: #fff;
content: '';
display: flex;
align-items: center;
justify-content: center;
margin: auto;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: .3s ease-in-out;
width: 100%;
height: 100%;
z-index: 10;
}
.text-overlay::after { /* 詳しくみる*/
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 1em;
bottom: 0;
transition: .3s ease-in-out;
width: 80%;
height: 1.8em;
z-index: 11;
}
.text-overlay.column-text-overlay::after { /* 記事を見る */
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
@media (hover: hover) {
a:hover .text-overlay::before {
opacity: 1;
}
a:hover .text-overlay::after {
opacity: 1;
transform: translateX(1em);
}
}
.round {
border-radius: 10px;
overflow: hidden;
}
figure.square {
display: block;
width: 100%;
padding-top: 100%;
}
figure.square img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#contents {
width: 100%;
transition: .3s ease-in-out;
position: relative;
z-index: 1;
}
.innerBox{
margin: 0 auto;
padding: min(10vw, 100px) 0;
position: relative;
width: 90%;
max-width: 1200px;
z-index: 2;
}
.innerBox.is-style-padding-top-middle {
padding-top: min(7vw, 70px);
}
.innerBox.is-style-padding-top-small {
padding-top: min(3vw, 30px);
}
.innerBox.is-style-padding-top-none {
padding-top: 0;
}
.innerBox.is-style-padding-bottom-middle {
padding-bottom: min(7vw, 70px);
}
.innerBox.is-style-padding-bottom-small {
padding-bottom: min(3vw, 30px);
}
.innerBox.is-style-padding-bottom-none {
padding-bottom: 0;
}
.innerBox.shortPadding {
padding: min(10vw, 70px) 0;
}
.innerBox.w100 {
width: 100%;
max-width: none;
}
.block {display: block;}
.inb {display: inline-block;}
.relative { position: relative; z-index: 1;}
.flexBox {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.flexCenter {
align-items: center;
justify-content: center;
}
.flexStart {
justify-content: flex-start;
}
.flexEnd {
justify-content: flex-end;
}
.flexWrap {
flex-wrap: wrap;
}
.flexColumn {
flex-direction: column;
justify-content: flex-start;
}
.align-center {
align-items: center;
}
.flex-1 {
flex: 1;
}
.gridBox {
display: grid;
}
dl.gridBox {
grid-template: 'dt dd';
grid-template-columns: auto 1fr;
}
dl.gridBox dd {
grid-column: 2;
word-break: break-word;
}
p + p {margin-top: 2em;}
.mw300 {max-width: 300px; margin: auto;}
.mw400 {max-width: 400px; margin: auto;}
.mw500 {max-width: 500px; margin: auto;}
.mw600 {max-width: 600px; margin: auto;}
.mw700 {max-width: 700px; margin: auto;}
.mw800 {max-width: 800px; margin: auto;}
.mw900 {max-width: 900px; margin: auto;}
.mw1000 {max-width: 1000px; margin: auto;}
.mw1100 {max-width: 1100px; margin: auto;}
.mw1200 {max-width: 1200px; margin: auto;}
.mw-none {max-width: none;}
input[type="radio"], input[type="checkbox"] {
display: none;
}
.hidden {
display: none;
}
hr {
background: var(--gray);
border: none;
height: 1px;
opacity: .4;
}
::before, ::after {
pointer-events: none;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.innerBox{
padding: min(15vw, 80px) 0;
}
.hidden-mob {
display: none;
}
.display-mob {
display: block;
}
figure figcaption.noImage {
font-size: 1.6rem;
}
.flexColumn-mob ,
.flexColumn-tab {
flex-direction: column;
}
dl.gridBox.responsive ,
dl.formItem {
grid-template: 'dt' 'dd';
}
dl.gridBox.responsive dd ,
dl.formItem dd {
grid-column: 1;
}
}
@media screen and (max-width:600px) {
.hidden-small {
display: none;
}
.display-small {
display: block;
}
}
@media screen and (max-width: 1060px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.hidden-pc_d-tab,
.hidden-pc {
display: none;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959.9px) {
.flexColumn-tab {
flex-direction: column;
}
.hidden-tab {
display: none;
}
.hidden-pc_d-tab ,
.display-tab {
display: block;
}
}
@media screen and (min-width:960px) and (max-width:1330px) {
.display-middle {
display: block;
}
}
@media screen and (min-width:1330px) {
.hidden-wide {
display: none;
}
.display-wide {
display: block;
}
}
@media (hover: hover) { /*NOTE ホバー処理*/
a:not([class]):hover ,
p a:hover {
opacity: .7;
}
a.opacity-1:hover {
opacity: 1;
}
.scaleUpImg:hover img {
transform: scale(1.05);
}
a.scaleUpImg:hover {
opacity: 1;
}
a.scaleUpLink:hover {
transform: scale(1.02);
}
}
.h100 {
height: 100%;
}
.w100 {
width: 100%;
}
/*====================================================
// NOTE | 余白
====================================================*/
.ma-auto {margin: auto !important}
.ma-0 {margin: 0 !important}
.ma-05em {margin: .5em !important}
.ma-10em {margin: 1.0em !important}
.ma-15em {margin: 1.5em !important}
.ma-20em {margin: 2em !important}
.ma-30em {margin: 3em !important}
.mt-0 {margin-top: 0 !important}
.mt-03em {margin-top: .3em !important}
.mt-05em {margin-top: .5em !important}
.mt-08em {margin-top: .8em !important}
.mt-10em {margin-top: 1.0em !important}
.mt-15em {margin-top: 1.5em !important}
.mt-20em {margin-top: 2em !important}
.mt-30em {margin-top: 3em !important}
.ml-0 {margin-left: 0 !important}
.ml-03em {margin-left: .3em !important}
.ml-05em {margin-left: .5em !important}
.ml-10em {margin-left: 1.0em !important}
.ml-15em {margin-left: 1.5em !important}
.ml-20em {margin-left: 2em !important}
.ml-30em {margin-left: 3em !important}
.mr-0 {margin-right: 0 !important}
.mr-02em {margin-right: .2em !important}
.mr-05em {margin-right: .5em !important}
.mr-10em {margin-right: 1.0em !important}
.mr-15em {margin-right: 1.5em !important}
.mr-20em {margin-right: 2em !important}
.mr-30em {margin-right: 3em !important}
.mb-0 {margin-bottom: 0 !important}
.mb-03em {margin-bottom: .3em !important}
.mb-05em {margin-bottom: .5em !important}
.mb-08em {margin-bottom: .8em !important}
.mb-10em {margin-bottom: 1.0em !important}
.mb-15em {margin-bottom: 1.5em !important}
.mb-20em {margin-bottom: 2em !important}
.mb-30em {margin-bottom: 3em !important}
.ma-10 {margin: 10px !important}
.ma-20 {margin: 20px !important}
.ma-30 {margin: 30px !important}
.ma-40 {margin: 40px !important}
.ma-50 {margin: 50px !important}
.mt-10 {margin-top: 10px !important}
.mt-20 {margin-top: 20px !important}
.mt-30 {margin-top: 30px !important}
.mt-40 {margin-top: 40px !important}
.mt-50 {margin-top: 50px !important}
.mt-60 {margin-top: 60px !important}
.mt-70 {margin-top: 70px !important}
.ml-10 {margin-left: 10px !important}
.ml-20 {margin-left: 20px !important}
.ml-30 {margin-left: 30px !important}
.ml-40 {margin-left: 40px !important}
.ml-50 {margin-left: 50px !important}
.mr-10 {margin-right: 10px !important}
.mr-20 {margin-right: 20px !important}
.mr-30 {margin-right: 30px !important}
.mr-40 {margin-right: 40px !important}
.mr-50 {margin-right: 50px !important}
.mb-10 {margin-bottom: 10px !important}
.mb-20 {margin-bottom: 20px !important}
.mb-30 {margin-bottom: 30px !important}
.mb-40 {margin-bottom: 40px !important}
.mb-50 {margin-bottom: 50px !important}
.mb-60 {margin-bottom: 60px !important}
.mb-70 {margin-bottom: 70px !important}
.pa-0 {padding: 0 !important}
.pa-05em {padding: .5em !important}
.pa-10em {padding: 1.0em !important}
.pa-15em {padding: 1.5em !important}
.pa-20em {padding: 2em !important}
.pt-0 {padding-top: 0 !important}
.pt-05em {padding-top: .5em !important}
.pt-10em {padding-top: 1.0em !important}
.pt-15em {padding-top: 1.5em !important}
.pt-20em {padding-top: 2em !important}
.pb-0 {padding-bottom: 0 !important}
.pb-05em {padding-bottom: .5em !important}
.pb-10em {padding-bottom: 1.0em !important}
.pb-15em {padding-bottom: 1.5em !important}
.pb-20em {padding-bottom: 2em !important}
/*====================================================
//class eachTextAnime
====================================================*/
.eachTextAnime:not(.anime_unset) {
opacity: 0;
}
.eachTextAnime.appeartext {
opacity: 1;
}
.eachTextAnime:not(.anime_unset) span {
opacity: 0;
}
.eachTextAnime.appeartext:not(.anime_unset) span {
-webkit-animation:text_anime_on 1s ease-out forwards;
animation:text_anime_on 1s ease-out forwards;
/* animation-delay: .4s; */
}
@-webkit-keyframes text_anime_on {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes text_anime_on {
0% {opacity:0;}
100% {opacity:1;}
}
.delay-01 {
transition-delay: .1s;
}
.delay-02 {
transition-delay: .2s;
}
.delay-03 {
transition-delay: .3s;
}
.delay-04 {
transition-delay: .4s;
}
.delay-05 {
transition-delay: .5s;
}
.delay-06 {
transition-delay: .6s;
}
.a_delay-01 {
animation-delay: .1s;
}
.a_delay-02 {
animation-delay: .2s;
}
.a_delay-03 {
animation-delay: .3s;
}
.a_delay-04 {
animation-delay: .4s;
}
.a_delay-05 {
animation-delay: .5s;
}
.a_delay-06 {
animation-delay: .6s;
}
/*====================================================
// NOTE | テキスト
====================================================*/
.f-default {
font-family: var(--font_family);
}
.f-maru {
font-family: var(--f_maru);
font-weight: 500;
}
.f-serif {
font-family: var(--f_serif);
}
.ff_setting {
font-feature-settings: "palt";
letter-spacing: .1em;
}
.tate {
display: inline-block;
line-height: 1; /* iOSのズレを軽減 */
text-orientation: upright;
writing-mode: vertical-rl;
}
ruby > rt {
font-size: min(.3em, 1rem);
font-weight: 400;
text-align: center;
}
/*====================================================
// NOTE | 装飾系
====================================================*/
.arrow {
border-radius: 100%;
display: inline-block;
margin-left: .3em;
overflow: hidden;
position: relative;
transition: .3s ease-in-out;
vertical-align: -.25em;
width: 1.3em;
height: 1.3em;
}
.arrow::before,
.arrow::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
transition: .3s ease-in-out;
width: 100%;
height: 100%;
}
.arrow::before {
left: 0;
}
.arrow::after {
left: -200%;
}
.triangle_arrow {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
display: inline-block;
transition: .3s ease-in-out;
width: .5em;
height: .8em;
}
.btn_wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.formBtn,
.linkBtn { /*class linkBtn */
background: var(--black);
border: solid 2px var(--black);
border-radius: 0;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
grid-gap: 0 .4em;
justify-content: center;
font-size: 1.1em;
font-weight: 400;
line-height: 1.4;
margin: 0;
opacity: 1;
overflow: hidden;
padding: .3em 1.2em .3em 1.5em;
position: relative;
text-align: center;
transition: .3s ease-in-out;
min-height: 2.5em;
max-width: 400px;
z-index: auto;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link .arrow ,
.formBtn .arrow,
.linkBtn .arrow {
filter: invert(10);
}
.linkBtn.bg-white {
color: var(--black);
}
.linkBtn.bg-white .arrow {
filter: invert(0);
}
.linkBtn.downloadBtn {
background: #fff;
border: solid 1px var(--blue);
color: var(--blue);
}
.linkBtn.downloadBtn::before {
opacity: .1;
}
.linkBtn.downloadBtn .arrow {
background: var(--blue);
filter: none;
}
.linkBtn.downloadBtn .arrow::before,
.linkBtn.downloadBtn .arrow::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center;
background-size: 50%;
width: 100%;
height: 100%;
}
.linkBtn.downloadBtn .arrow::after {
left: 0;
top: -200%;
}
.wp-block-button .wp-block-button__link .linkBtn-inner,
.linkBtn .linkBtn-inner {
flex: 1;
position: relative;
}
.linkBtn.btn-icon {
grid-gap: 0 1.5em;
padding: .3em 1.2em .3em 1.2em;
}
.linkBtn.btn-icon .linkBtn-inner {
display: flex;
align-items: center;
gap: 1em;
}
.linkBtn.btn-icon .icon {
background: no-repeat center / contain;
width: 2.6em;
height: 1.9em;
}
.linkBtn.btn-icon .text {
flex: 1;
}
.linkBtn .point_text {
color: var(--yellow);
display: inline-block;
font-size: .92em;
line-height: 1.2;
padding: 0 1.5em;
position: relative;
}
.linkBtn .point_text::before,
.linkBtn .point_text::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
width: .8em;
height: 1em;
}
.linkBtn .point_text::before {
left: 0;
}
.linkBtn .point_text::after {
right: 0;
transform: scale(-1, 1);
}
.glitter {
overflow: hidden;
position: relative;
}
.glitter::before ,
.glitter .wp-block-button__link::before {
animation: glitter 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-45deg);
content: '';
opacity: .8;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
z-index: 10;
}
.glitter:has(.wp-block-button__link)::before {
display: none;
}
@keyframes glitter {
0% {
left: -100%;
}
25% {
left: 100%;
}
100% {
left: 100%;
}
}
.smallBtn {
font-size: 1em;
min-width: 0;
min-height: 2.5em;
}
.wp-block-button.is-style-outline .wp-block-button__link,
main .bodyText .is-style-outline .wp-block-button__link,
.linkBtn-small {
background: transparent;
border: none;
border-bottom: solid 1px var(--d_gray);
border-radius: 0;
color: var(--black);
cursor: pointer;
display: flex;
align-items: center;
grid-gap: 0 .8em;
filter: none;
font-size: 1.0em;
line-height: 1.4;
opacity: 1;
padding: .3em .1em;
position: relative;
text-align: left;
width: auto;
}
.wp-block-button.is-style-outline .wp-block-button__link .arrow,
main .bodyText .is-style-outline .wp-block-button__link .arrow,
.linkBtn-small .arrow {
/* width: 1.8em;
height: 1.8em; */
}
.wp-block-button .btn_wrap,
main .bodyText .btn_wrap {
justify-content: flex-start;
}
.wp-block-button.is-style-outline .wp-block-button__link .linkBtn-inner,
main .bodyText .is-style-outline .wp-block-button__link .linkBtn-inner,
.linkBtn-small .linkBtn-inner {
position: relative;
}
.linkBtn img {
display: inline-block;
height: 1em;
margin-right: .5em;
transition: .1s ease-in-out;
vertical-align: -.1em;
}
.link_icon {
display: inline-block;
height: .8em;
margin-left: .5em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
/* .wp-block-button:not(.is-style-outline) .wp-block-button__link,
main .bodyText .wp-block-button:not(.is-style-outline) .wp-block-button__link, */
.linkBtn { /* class linkBtn mobile */
width: min(80%, 400px);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
main .bodyText .wp-block-button:not(.is-style-outline) .wp-block-button__link {
width: auto;
}
}
@media screen and (max-width:500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.linkBtn { /*class linkBtn */
min-width: 16.5em;
}
}
@media (hover: hover) {
.arrow:hover::before,
a:hover .arrow::before ,
button:hover .arrow::before ,
.formBox .btn-outer:hover .arrow::before {
left: 200%;
}
.arrow:hover::after,
a:hover .arrow::after ,
button:hover .arrow::after ,
.formBox .btn-outer:hover .arrow::after {
left: 0;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.formBox button[type="submit"]:hover,
.formBtn:hover,
.linkBtn:hover ,
a:hover .linkBtn {
box-shadow: 0 .2em .4em rgba(0, 0, 0, .2);
filter: brightness(1.1) saturate(1.1);
opacity: 1;
/* transform: scale(1.03); */
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover .triangle_arrow,
.formBox button[type="submit"]:hover .triangle_arrow,
.formBtn:hover .triangle_arrow,
.linkBtn:hover .triangle_arrow ,
a:hover .linkBtn .triangle_arrow {
transform: translateX(.3em);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
main .bodyText .is-style-outline .wp-block-button__link:hover,
.linkBtn-small:hover {
color: var(--d_mainColor);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover .triangle_arrow,
main .bodyText .is-style-outline .wp-block-button__link:hover .triangle_arrow,
.linkBtn-small:hover .triangle_arrow {
transform: translateX(.3em);
}
.is-style-outline .wp-block-button__link:hover,
main .bodyText .is-style-outline .wp-block-button__link:hover,
a:hover .linkBtn-small ,
.linkBtn-small:hover {
opacity: 1;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::after,
main .bodyText .is-style-outline .wp-block-button__link:hover::after,
.linkBtn-small:hover::after {
transform: translateX(.3em);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::before,
main .bodyText .is-style-outline .wp-block-button__link:hover::before,
.linkBtn-small:hover::before {
width: calc(100% + .3em);
}
.linkBtn.downloadBtn:hover .arrow::before {
left: 0;
top: 200%;
}
.linkBtn.downloadBtn:hover .arrow::after {
top: 0;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
.tax {
font-size: .5em;
margin-left: .3em;
}
dl.accordion > dt ,
dl.menu-accordion > dt,
.accordion > .accordion-ttl {
cursor: pointer;
position: relative;
}
dl.accordion > dd ,
dl.menu-accordion > dd,
.accordion > .accordion-cnt {
overflow: hidden;
transition: .3s ease-in-out;
}
dl.accordion > dd > .accordion-inner,
.accordion > .accordion-cnt > .accordion-inner {
opacity: 0;
transition: .3s ease-in-out;
}
dl.accordion.open > dd > .accordion-inner,
.accordion.open > .accordion-cnt > .accordion-inner {
opacity: 1;
}
.accordion-ttl:has(.plus_icon) {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 1em;
}
.accordion-ttl > .plus_icon {
display: block;
width: 1em;
height: 1em;
position: relative;
}
.accordion-ttl > .plus_icon::before,
.accordion-ttl > .plus_icon::after {
border-top: solid 3px #E3B7CD;
content: '';
display: block;
margin: auto;
position: absolute;
top: .1em;
left: 0;
right: 0;
bottom: 0;
transition: .3s ease-in-out;
width: .9em;
height: 0;
}
.accordion-ttl > .plus_icon::after {
transform: rotate(90deg);
}
.accordion.open > .accordion-ttl > .plus_icon::before {
transform: rotate(90deg);
opacity: 0;
}
.accordion.open > .accordion-ttl > .plus_icon::after {
transform: rotate(180deg);
}
.accordion_close {
cursor: pointer;
}
.bgBox {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
z-index: -1;
}
.bgBox img {
width: 100% !important;
height: 100% !important;
-o-object-fit: cover;
object-fit: cover;
}
.decoBox {
pointer-events: none;
position: absolute;
}
.opacity-6 {opacity: .6}
.opacity-8 {opacity: .8}
.opacity-10 {opacity: 1}
ul.markList, ul:not([class]) {
padding-left: 0;
}
ul.markList > li, ul:not([class]) > li {
position: relative;
padding-left: 1.3em;
line-height: 1.5;
}
ul > li ,
.bodyText.default_deco ul > li,
.bodyText.default_deco ol > li {
margin: 0;
line-height: 1.5;
position: relative;
}
ul.markList > li + li,
ul.normal > li + li ,
ul:not([class]) > li + li ,
.bodyText.default_deco ul > li + li ,
ol > li + li ,
.bodyText.default_deco ol > li + li {
margin: .4em 0 0;
}
ul.markList > li::before ,
ul:not([class]) > li::before {
content: '\30FB';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
}
ul.markList > li:after {
display: none !important;
}
ul.markList.attentionMark > li:before {
background: transparent;
content: '\203B';
top: .1em;
left: 0;
}
ul.markList.dot > li:before {
background: var(--mainColor);
border-radius: 100%;
content: '';
top: .5em;
left: 0;
width: .5em;
height: .5em;
}
ul.markList.dot.dot-blue > li:before {
background: var(--blue);
}
ul.markList.checkMark > li {
padding-left: 1.5em;
}
ul.markList.checkMark > li:before {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
top: 0;
left: 0;
width: 1em;
height: 1.5em;
}
ol{
counter-reset:number; /* 名前を付けたカウンターをリセット */
list-style:none; /* olが数字を付けることをキャンセル */
margin:0;
padding:0;
}
ol.markList > li{
line-height: 1.8;
margin-top: .2em;
padding-left: 1.8em;
position: relative;
}
ol > li:before{
background: var(--mainColor);
border-radius: 100%;
box-sizing: border-box;
color: #fff;
counter-increment: number;
content: counter(number);
display: flex;
align-items: center;
justify-content: center;
font-size: .8em;
font-weight: 700;
line-height: 1;
padding-bottom: .1em;
position: absolute;
top: .3em;
left: 0;
text-align: center;
width: 1.8em;
height: 1.8em;
line-height: 1;
}
.bodyText.default_deco ol > li::before {
top: auto;
}
ol.circleMark > li:before{
border: solid 1px;
border-radius: 100%;
font-size: .9em;
top: .05em;
}
.circleBox {
border-radius: 100%;
}
.markerline {
background: linear-gradient(transparent 50%, rgba(255, 244, 139, .8) 50%, rgba(255, 244, 139, .8) 100%);
margin: 0 .1em;
padding: 0 .1em;
}
.squareMark {
border: solid 1px;
display: inline-block;
padding: .2em .5em ;
line-height: 1;
text-align: center;
}
.circleMark {
border-radius: 100px;
display: inline-block;
line-height: 1.2;
padding: .25em .6em .3em;
}
.dataBox-dl {
display: grid;
grid-gap: min(2vw, 8px);
}
.dataBox-dl dl {
}
.dataBox-dl dt {
background: var(--w_gray);
}
@media screen and (max-width: 769px) {
.dataBox-dl dl > * {
padding: .5em 1em;
}
}
@media print, screen and (min-width: 769px) {
.dataBox-dl dl {
border-bottom: solid 1px var(--d_gray);
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
.dataBox-dl dl > * {
padding: .8em 1em;
}
}
/*
// NOTE | 【特殊装飾】 */
.en_jp {
display: grid;
place-items: center;
margin-bottom: 1em;
text-align: center;
}
.en_jp .jp {
font-size: .4em;
}
@media screen and (max-width: 769px) {
.en_jp {
font-size: min(8.5vw, 5rem);
}
}
@media print, screen and (min-width: 769px) {
.en_jp {
font-size: 5rem;
}
}
.bg-dot {
background: url('img/cmn/dot_bg.png');
background-size: 25px;
}
.circle_deco {
padding-left: 1.3em;
position: relative;
}
.circle_deco::before {
background: var(--mainColor);
border-radius: 100%;
content: '';
display: block;
margin: auto;
position: absolute;
top: .3em;
left: 0;
width: .83em;
height: .83em;
}
.wp-block-lazyblock-emphasis-text {
text-align: center;
}
.deco-emphasis_text {
display: inline-block;
font-size: min(5.2vw, 2.6rem);
font-weight: bold;
line-height: 1.4;
padding: 0 1.5em;
position: relative;
}
.deco-emphasis_text::before,
.deco-emphasis_text::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / contain;
content: '';
display: block;
margin: auto;
position: absolute;
bottom: 0;
width: 1.2em;
height: 100%;
}
.deco-emphasis_text::before {
left: 0;
}
.deco-emphasis_text::after {
right: 0;
transform: scale(-1, 1);
}
.text_dots {
background-image: radial-gradient(circle at center, var(--red) 20%, transparent 20%);
background-position: top right;
background-repeat: repeat-x;
background-size: .93em .3em;
padding-top: .3em;
}
.article-category {
display: flex;
grid-gap: .4em;
flex-wrap: wrap;
}
.cate_item {
border: solid 1px var(--d_gray);
font-size: .8em;
line-height: 1;
padding: .25em 1.2em;
}
.article-tag {
color: var(--mainColor);
display: flex;
gap: 0 .8em;
font-size: .75em;
font-weight: 500;
}
.icon {
display: inline-block;
vertical-align: -.1em;
width: .9em;
height: .9em;
}
.icon.icon-search {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center;
}
.icon.icon-new_window {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
background-size: 90%;
}
.icon-tel {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
gap: .2em;
line-height: 1;
}
.icon-tel::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center left / contain;
content: '';
display: block;
width: .6em;
height: .7em;
}
.icon-mail {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
gap: .8em .5em;
line-height: 1;
}
.icon-mail::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center left / contain;
content: '';
display: block;
width: 1.5em;
height: 1.1em;
}
.hover_shadow {
transition: .3s ease-in-out;
}
@media (hover: hover) {
a.cate_item:hover {
filter: brightness(1.02);
transform: scale(1.05);
}
.downloadBtn:hover .arrow::before ,
a:has(.downloadBtn):hover .arrow::before {
top: 120%;
right: 0;
}
.downloadBtn:hover .arrow::after ,
a:has(.downloadBtn):hover .arrow::after {
top: 0;
right: 0;
}
.hover_shadow:hover {
box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
}
}
.f-05em {font-size: .5em;}
.f-06em {font-size: .6em;}
.f-07em {font-size: .7em;}
.f-08em {font-size: .8em;}
.f-09em {font-size: .9em;}
.f-10em {font-size: 1.0em;}
.f-11em {font-size: 1.1em;}
.f-12em {font-size: 1.2em;}
.f-13em {font-size: 1.3em;}
.f-14em {font-size: 1.4em;}
.f-15em {font-size: 1.5em;}
.f-16em {font-size: 1.6em;}
.f-17em {font-size: 1.7em;}
.f-18em {font-size: 1.8em;}
.f-20em {font-size: 2.0em;}
.f-10 {font-size: 1.0rem;}
.f-11 {font-size: min(2.8vw, 1.1rem);}
.f-12 {font-size: min(3.0vw, 1.2rem);}
.f-13 {font-size: min(3.3vw, 1.3rem);}
.f-14 {font-size: min(3.6vw, 1.4rem);}
.f-15 {font-size: min(3.8vw, 1.5rem);}
.f-16 {font-size: min(4.1vw, 1.6rem);}
.f-17 {font-size: min(4.3vw, 1.7rem);}
.f-18 {font-size: min(4.6vw, 1.8rem);}
.f-20 {font-size: min(5.1vw, 2.0rem);}
.f-22 {font-size: min(5.6vw, 2.2rem);}
.f-24 {font-size: min(6.1vw, 2.4rem);}
.lh-10 {line-height: 1.0;}
.lh-12 {line-height: 1.2;}
.lh-14 {line-height: 1.4;}
.lh-16 {line-height: 1.6;}
.lh-18 {line-height: 1.8;}
.lh-20 {line-height: 2.0;}
.lh-20 {line-height: 2.2;}
.ls-0 {letter-spacing: 0;}
.ls-03 {letter-spacing: .03em;}
.ls-06 {letter-spacing: .06em;}
.ls-10 {letter-spacing: .1em;}
.ls-15 {letter-spacing: .15em;}
.ls-20 {letter-spacing: .2em;}
.ls-25 {letter-spacing: .25em;}
small, .small {
font-size: .8em;
}
big, .big {
font-size: 1.2em;
}
strong {
font-weight: bold;
}
sup {
font-size: .5em;
vertical-align: .5em;
}
.fw-normal {
font-weight: 400;
}
.fw-elight {
font-weight: 200;
}
.fw-light {
font-weight: 300;
}
.fw-medium {
font-weight: 500;
}
.fw-semibold {
font-weight: 600;
}
.fw-bold {
font-weight: 700;
}
.fw-black {
font-weight: 900;
}
.txt-left {
text-align: left;
}
.txt-right {
text-align: right;
}
.txt-center {
text-align: center;
}
.txt-justify {
text-align: justify;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--f_maru);
font-weight: 500;
line-height: 1.3;
}
h1 {font-size: 2.2em;}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
h2 {font-size: min(7.2vw, 3.2rem);}
h3 {font-size: min(5.4vw, 2.4rem);}
h4 {font-size: min(4.2vw, 1.25em);}
h5 {font-size: min(4.1vw, 1.2em);}
}
@media screen and (max-width: 500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
h2 {font-size: min(3.8vw, 3.5rem);}
h3 {font-size: min(3.2vw, 2.6rem);}
h4 {font-size: min(2.8vw, 1.25em);}
h5 {font-size: min(2.4vw, 1.2em);}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
/*====================================================
//// NOTE | カラー
====================================================*/
.bg-white {
background: #fff;
}
.bg-mainColor {
background: var(--mainColor);
color: #fff;
}
.bg-red {
background: var(--red);
color: #fff;
}
.bg-green {
background: var(--green);
color: #fff;
}
.bg-blue {
background: var(--blue);
color: #fff;
}
.bg-orange {
background: var(--orange);
color: #fff;
}
.bg-l_beige {
background: var(--l_beige);
}
.bg-l_pink {
background: var(--l_pink);
}
.bg-w_gray {
background: var(--w_gray);
}
.bg-l_gray {
background: var(--l_gray);
}
.bg-gray {
background: var(--gray);
color: #fff;
}
.bg-black {
background: var(--black);
color: #fff;
}
.bg-transparent {
background: transparent;
}
.white {
color: #fff;
}
.mainColor {
color: var(--mainColor);
}
.d_mainColor {
color: var(--d_mainColor);
}
.red {
color: var(--red);
}
.yellow {
color: var(--yellow);
}
.green {
color: var(--green);
}
.blue {
color: var(--blue);
}
.orange {
color: var(--orange);
}
.gray {
color: var(--gray);
}
.d_gray {
color: var(--d_gray);
}
.black {
color: var(--black);
}
.border-none {
border: none;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
/*====================================================
////id | .yt
====================================================*/
.yt,
.wp-block-embed__wrapper {
position: relative;
height: 0;
padding: 0px 0 56.3%;
overflow: hidden;
}
.yt iframe,
.wp-block-embed__wrapper iframe {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
/*====================================================
////id 【header】
====================================================*/
header {
height: 0;
transition: .3s ease-in-out;
position: relative;
}
.header-logo {
display: flex;
align-items: center;
mix-blend-mode: exclusion;
position: fixed;
top: min(3vw, 15px);
left: 20px;
transition: .3s ease-in-out;
z-index: 999999;
}
.header-logo_img {
margin: 0;
max-width: min(40vw, 250px);
max-height: min(8vw, 50px);
}
header .headerBox {
position: relative;
z-index: 900000;
}
header .menu-outer {
z-index: 30;
}
header .menuBtn {
background: #fff;
border-radius: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: .3s ease-in-out;
position: fixed;
top: 10px;
right: 10px;
width: min(10vw, 50px);
height: min(10vw, 50px);
z-index: 10;
}
header .menuBtn .humberger {
margin: 0;
position: relative;
transition: .3s ease-in-out;
width: 57%;
height: 100%;
}
header .menuBtn .humberger span {
border-top: solid 1px #000;
content: '';
margin: auto;
opacity: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
transition: .3s ease-in-out;
width: 100%;
height: 0;
}
header .menuBtn .humberger span:nth-child(1) {
transform: translateY(-7px);
}
header .menuBtn .humberger span:nth-child(2) {
width: 82%;
}
header .menuBtn .humberger span:nth-child(3) {
transform: translateY(7px);
width: 64%;
}
header .menuBtn-text {
color: #fff;
font-size: min(2vw, 9px);
line-height: 1;
height: 1em;
pointer-events: none;
text-align: center;
transform: translateY(-.8em);
}
.header-mask {
background: transparent;
backdrop-filter: blur(2px) grayscale(50%);
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
transition: .5s ease-in-out;
width: 100%;
height: 100vh;
height: 100svh;
z-index: 888888;
}
header .menuBox {
background: var(--black);
border-radius: 20px 20px;
color: #fff;
opacity: 0;
overflow-y: auto;
padding: min(10vw, 32px) min(5vw, 36px);
pointer-events: none;
position: fixed;
top: 70px;
right: -500px;
transition: .5s ease-in-out;
width: 88%;
max-width: 450px;
max-height: calc(100vh - 90px);
max-height: calc(100svh - 90px);
z-index: 1;
overflow-y: scroll;
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
header .menuBox::-webkit-scrollbar { /* Chrome, Safari 対応 */
display:none;
}
.menu-open .headerBox {
background: #fff;
}
header .menu-outer.open .menuBtn {
transition: .3s ease-in-out;
}
header .menu-outer.open .humberger span {
border-top-width: 2px;
width: 20px;
left: 0;
}
header .menu-outer.open .humberger span:nth-child(1) {
bottom: 0;
transform: rotate(-135deg);
}
header .menu-outer.open .humberger span:nth-child(2) {
width: 0;
opacity: 0;
}
header .menu-outer.open .humberger span:nth-child(3) {
top: 0;
transform: rotate(135deg);
}
header .menu-outer.open .menuBtn-text {
opacity: 0;
height: 0;
}
.menu-open .header-mask {
opacity: 1;
pointer-events: auto;
}
header .menu-outer.open .menuBox {
pointer-events: auto;
right: min(5vw, 20px);
opacity: 1;
}
header .menuBox .menuBox-inner {
}
header .menuBox ul {
}
header .menu-outer .menu-main .menu-pc {
display: none;
}
header .menuBox .menu-main .menu > li {
border-bottom: solid 1px rgba(255, 255, 255, .5);
padding: .5em 0;
position: relative;
width: 100%;
}
header .menuBox .menu-main .menu > li:last-child {
border-bottom: none;
}
header .menuBox .menu-main .menu > li > a {
display: block;
padding: .5em 2em .5em .5em;
position: relative;
}
header .menuBox .menu-main .menu > li > a::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
right: .5em;
bottom: 0;
transition: .3s ease-in-out;
width: 1.2em;
height: 1.2em;
}
header .menu .sub-menu-outer {
overflow: hidden;
position: relative;
transition: .3s ease-in-out;
z-index: 10;
}
header .menuBox .sub-menu-outer {
height: auto !important;
}
header .menuBox li .sub-menu-btn {
display: none;
cursor: pointer;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 3.8em;
}
header .menuBox .sub-menu a {
display: block;
padding: .3em 2em .3em 2em;
position: relative;
}
header .menuBox .sub-menu a::before {
border-top: solid 1px;
content: '';
display: block;
margin: auto;
position: absolute;
top: 1em;
left: .5em;
width: 1em;
height: 0;
}
header .menuBox .sub-menu a::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
right: .5em;
bottom: 0;
transition: .3s ease-in-out;
width: 1.2em;
height: 1.2em;
}
header .menuBox .menu li a {
position: relative;
}
.menu .menu-item.no_link > a {
pointer-events: none;
}
/* ////////// PC ////////// NOTE header PC */
@media print, screen and (min-width: 769px) {
}
@media print, screen and (min-width: 960px) {
}
@media (hover: hover) {
header .headerBox:hover {
background: rgba(255, 255, 255, 1);
}
header .menuBox .menu a:hover {
opacity: 1;
}
header .menuBox .menu-main .menu > li > a:hover::after ,
header .menuBox a:hover::after {
right: 0;
}
.pc_menu .header-contact-mail-link:hover {
box-shadow: none;
}
}
/*====================================================
////id | loader
====================================================*/
.is-hide {
display: none;
}
/* ローディング画面をフェードアウト */
.fadeout-bg {
transition-property: opacity;
transition-delay: 0s;
transition-duration: 1.7s;
opacity: 0;
pointer-events: none;
}
/* ローディング画面 */
#loader {
background: #fff;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
}
/*====================================================
//class .sa
====================================================*/
.sa {
opacity: 0;
}
.sa.show {
animation: .5s ease-in-out forwards sa-show;
}
.sa.slow.show {
animation: .8s ease-in-out forwards sa-show;
}
@keyframes sa-show {
to {
opacity: 1;
transform: none;
}
}
.sa.show_after {
opacity: 1;
transform: none;
transition: 0s;
}
.sa-lr {
transform: translate(-40px, 0);
}
.sa-rl {
transform: translate(40px, 0);
}
.sa-up {
transform: translate(0, 40px);
}
.sa-down {
transform: translate(0, -40px);
}
.sa-scaleUp {
transform: scale(.8);
}
.sa-scaleDown {
transform: scale(1.2);
}
.sa-rotateL {
transform: rotate(180deg);
}
.sa-rotateR {
transform: rotate(-180deg);
}
.sa.slideShow {
opacity: 1;
position: relative;
z-index: 1;
}
.sa.slideShow:before {
background: var(--gray);
content: '';
position: absolute;
top: 0;
left: 0;
right: auto;
transition: .5s ease-in-out;
width: 0;
height: 100%;
z-index: 10;
}
.sa.slideShow.slide-l_gray:before {
background: var(--l_gray);
}
.sa.slideShow.show:before {
-webkit-animation: anim-slide 1.3s ease-in-out forwards;
animation: anim-slide 1.3s ease-in-out forwards;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
@-webkit-keyframes anim-slide {
0% {}
55% { width: 100%; left: 0; right: 0;}
65% { width: 100%; left: auto; right: 0; }
100% { width: 0; left: auto; right: 0; }
}
@keyframes anim-slide {
0% {}
47% { width: 100%; left: 0; right: 0;}
53% { width: 100%; left: auto; right: 0; }
100% { width: 0; left: auto; right: 0; }
}
.sa.slideShow:not(.show) > * {
opacity: 0;
}
.sa.slideShow.show > * {
animation: anim-slide-item 1s ease-in-out forwards;
}
@keyframes anim-slide-item {
0%, 99% { opacity: 0; }
100% { opacity: 1; }
}
.sa.slideShow.slide-rl {
transform: rotate(180deg);
}
.sa.slideShow.slide-rl img {
transform: rotate(180deg);
}
.sa.slideShow.slide-white:before {
background: #fff;
}
.sa .scaleDown img {
transform: scale(1.15);
}
.sa.show .scaleDown img {
animation: 8s .6s ease-out forwards scaleDownImg;
}
@keyframes scaleDownImg {
to {
transform: none;
}
}
/*====================================================
////class .splide
====================================================*/
.splide__track {
position: relative;
}
.splide__arrows {
pointer-events: none;
position: absolute;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.splide__arrow {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
opacity: .8;
pointer-events: auto;
position: absolute;
top: 0;
bottom: 0;
transition: .3s ease-in-out;
width: min(8vw, 30px);
height: min(8vw, 30px);
}
.splide__arrow::before {
background: #fff url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
border-radius: 100%;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
transition: .3s ease-in-out;
width: 100%;
height: 100%;
}
.splide__arrow:hover::before {
transform: translateX(5px);
}
.splide__arrow--prev {
left: calc(min(4vw, 15px) * -1);
}
.splide__arrow--prev {
transform: rotate(180deg);
}
.splide__arrow--next {
right: calc(min(4vw, 15px) * -1);
}
.splide__arrow svg {
display: none;
}
.splide__arrow:disabled {
opacity: 0 !important;
}
.carousel-progress {
background: var(--gray);
margin-top: min(7vw, 40px);
}
.carousel-progress-bar {
background: var(--black);
height: 2px;
transition: width 400ms ease;
width: 0;
}
.splide:not( .is-overflow ) .splide__list {
justify-content: center;
}
/* gapオプション有効のときに最後のコンテンツのmarginを取り除く */
.splide:not( .is-overflow ) .splide__slide:last-child {
margin: 0 !important;
}
.splide:not( .is-overflow ) .splide__arrows ,
.splide:not( .is-overflow ) .carousel-progress {
display: none;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
@media screen and (max-width:480px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
@media (hover: hover) {
.splide__arrow:hover {
opacity: 1;
}
}
/*====================================================
////class .headBox
====================================================*/
.headBox {
position: relative;
z-index: 2;
}
.headBox h2 ,
.headBox h3 ,
.headBox h4 {
position: relative;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
@media screen and (max-width:500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
/*====================================================
//id | form
====================================================*/
input, button, select {
margin: 0;
padding: 0;
background: none;
background-image: none;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
cursor: pointer;
}
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="password"],input[type="url"],input[type="number"],input[type="date"], select, textarea {
-webkit-appearance: none;
background: #fff;
border: solid 1px #ACACAC;
border-radius: 2px;
color: var(--black);
display: block;
font-family: var(--font_family);
line-height: 1.4;
padding: .7em 1em;
width: 100%;
min-height: 3em;
flex: 1;
transition: .3s ease-in-out;
}
.input-s {
max-width: 15em;
}
textarea {
resize: vertical;
line-height: 1.6;
min-height: 80px;
width: 100%;
}
::-moz-placeholder {
color: #C9C9C9;
font-size: .85em;
}
:-ms-input-placeholder {
color: #C9C9C9;
font-size: .85em;
}
::placeholder {
color: #C9C9C9;
font-size: .85em;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
}
input[type="file"],
label {
cursor: pointer;
}
form label {
line-height: 1.6;
display: inline-block;
position: relative;
}
.wpcf7-acceptance > .wpcf7-list-item {
display: inline-block;
position: relative;
width: 1.5em;
height: 1em;
}
input[type="checkbox"] + span ,
input[type="checkbox"] + label {
position: relative;
padding-left: 1.5em;
display: inline-block;
}
.wpcf7-acceptance > .wpcf7-list-item:before ,
input[type="checkbox"] + span:before ,
input[type="checkbox"] + label:before {
position: absolute;
content: '';
width: 1em;
height: 1em;
border: solid 1px;
border-radius: 3px;
border-color: var(--black);
top: .05em;
left: 0px;
background: #fff;
transition: .3s ease-in-out;
}
input[type="checkbox"] + label:before {
top: -.15em;
}
.wpcf7-acceptance > .wpcf7-list-item:after ,
input[type="checkbox"] + span:after ,
input[type="checkbox"] + label:after {
position: absolute;
content: '';
width: .7em;
height: .35em;
border: solid;
border-width: 0 0 3px 3px;
border-color: transparent transparent var(--red) var(--red);
transform: rotate(-45deg);
top: .2em;
left: 3px;
opacity: 0;
transition: .3s ease-in-out;
}
input[type="checkbox"] + label:after {
top: -2px;
}
.wpcf7-acceptance > .wpcf7-list-item:has(input[type="checkbox"]:checked):after ,
input[type="checkbox"]:checked + span:after ,
input[type="checkbox"]:checked + label:after {
opacity: 1;
}
input[type="radio"] + span ,
input[type="radio"] + label {
position: relative;
padding-left: 1.5em;
}
input[type="radio"] + span:before,
input[type="radio"] + label:before {
background: #fff;
content: '';
border: solid 1px;
border-radius: 100%;
border-color: var(--d_gray);
position: absolute;
top: .1em;
left: 0px;
transition: .3s ease-in-out;
width: 1em;
height: 1em;
}
input[type="radio"] + span:after,
input[type="radio"] + label:after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center;
background-size: 60% 60%;
content: '';
border: solid 1px transparent;
border-radius: 100%;
opacity: 0;
position: absolute;
top: .1em;
left: 0px;
transition: .2s ease-in-out;
width: 1em;
height: 1em;
}
input[type="radio"]:checked + span:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
.select {
position: relative;
}
.select:before {
border: solid var(--black);
border-width: 0 1px 1px 0;
content: '';
display: block;
margin: auto;
pointer-events: none;
position: absolute;
top: 1.1em;
right: 10px;
transform: rotate(45deg);
width: .3em;
height: .3em;
z-index: 100;
}
#confirm .select:before {
display: none;
}
select {
cursor: pointer;
}
.tel input[type="text"] {
width: calc(100% / 3 - 10px);
max-width: 100px;
}
@media screen and (max-width: 769px) {
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="url"], input[type="number"], select, textarea,
.vkfs input[type="text"], .vkfs input[type="search"] {
padding: .7em .7em;
}
}
/*====================================================
////class コンタクトフォーム7
====================================================*/
.wpcf7-form .wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
grid-gap: .3em 1.2em;
}
.wpcf7-form .wpcf7-radio {
display: grid;
grid-gap: .4em;
}
.wpcf7-form .wpcf7-list-item {
margin-left: 0;
}
.wpcf7-form .wpcf7-not-valid-tip {
bottom: -7px;
background: var(--red);
color: #fff;
display: inline-block;
font-size: 1.2rem;
font-weight: bold;
margin: 5px 0 10px;
padding: .25em .5em .3em .8em;
position: relative;
text-align: center;
/* width: 12em; */
white-space: nowrap;
}
.wpcf7-not-valid-tip:before {
border: solid transparent;
border-width: 0 5px 12px 5px;
border-bottom-color: var(--red);
content: '';
margin: auto;
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
}
.wpcf7-spinner {
display: none !important;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
background: var(--red);
border-color: var(--red);
border-radius: 5px;
color: #fff;
margin: 1.5em auto 0;
max-width: 720px;
padding: .5em 1em;
}
/*====================================================
////class .formBox
====================================================*/
* + .wpcf7 {
margin-top: min(10vw, 60px);
}
.formBox {
background: #fff;
border: solid 1px var(--black);
margin: 0 auto 0;
padding: min(10vw, 40px) min(4vw, 80px);
}
.formBox.confirm {
text-align: center;
}
.formBox.confirm .whiteBox {
display: inline-block;
text-align: left;
}
.formBox .innerBox {
padding-bottom: min(25vw, 150px);
}
.formBox .formItem-outer {
grid-gap: 1.8em;
}
.formBox .formItem {
display: grid;
grid-gap: .5em 1em;
width: 100%;
}
.formBox .formItem.head {
border-bottom: 1px solid #00a1e9;
padding-bottom: 5px;
font-size: 1.2em;
grid-column: 1 / -1;
display: block;
}
.formBox .formItem dt {
font-weight: 500;
}
.formBox .required {
background: var(--red);
color: #fff;
display: inline-block;
font-size: .6em;
font-weight: 700;
line-height: 1;
margin-left: 1em;
padding: .3em .5em .25em;
vertical-align: .2em;
}
.formBox .formItem .form-date_time {
display: flex;
align-items: center;
gap: .3em min(2vw, .8em);
}
.formBox .formItem .form-date_time .date ,
.formBox .formItem .form-date_time .time {
flex: 1;
}
.formBox .formItem.form_file dd {
display: grid;
grid-gap: .4em;
}
.formBox .formItem.counter dd {
display: grid;
align-items: center;
grid-template-columns: 100px auto;
gap: .5em;
}
.formBox .formItem .mwform-tel-field input{
margin: 0 3px;
}
.formBox .formItem input[type="number"] {
width: 100px;
}
.formBox .backBtn {
position: relative;
}
.formBox .backBtn .linkBtn-small {
padding: 0;
}
.formBox .backBtn .linkBtn-small:after {
transform: rotate(-135deg);
right: auto;
left: 25px;
}
.formBox .backBtn .linkBtn-small:hover:after {
left: 15px !important;
}
.formBox .backBtn input[type="submit"] {
background: transparent;
color: inherit;
display: inline-block;
font-size: 1.4rem;
margin: 0 !important;
min-width: 140px;
/* padding: .2em 20px .1em 40px;*/
transition: .3s ease-in-out;
}
.formBox dd {
position: relative;
text-align: left;
}
.formBox .h_radioBox {
display: grid;
grid-gap: 0 2em;
grid-template-columns: auto 1fr;
}
.formBox .file {
display: grid;
grid-gap: .3em;
padding-top: .4em;
}
.formBox .consentBox {
margin: min(8vw, 50px) auto 0;
/* font-size: 1.3rem;*/
}
.formBox .consentBox .consent_check {
display: flex;
align-items: center;
position: relative;
}
/* .formBox .consentBox .consent_check .wpcf7-not-valid-tip {
position: absolute;
top: 100%;
left: 0;
} */
.formBox .consentBox .checkBox {
width: 1.5em;
}
.formBox .consentBox div {
position: relative;
}
.formBox .consentBox .mwform-checkbox-field {
display: block;
}
.formBox .btn-outer {
display: flex;
flex-direction: column;
place-items: center;
margin-top: min(10vw, 50px);
position: relative;
}
.formBox .btn_wrap {
position: relative;
}
.formBox .btn_wrap:after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
/* background-size: 1.1em;
border: solid 1px #fff;
border-radius: 100%; */
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 1em;
transition: .2s ease-in-out;
width: 1.3em;
height: 1.3em;
z-index: 10;
}
.formBox .linkBtn {
padding-right: 3em;
width: 100%;
}
.formBox .btn_wrap:has(.linkBtn:disabled) {
pointer-events: none;
opacity: .3;
}
.formBox .linkBtn:disabled {
pointer-events: none;
}
/* .formBox .linkBtn {
background: var(--mainColor);
border: solid 1px var(--mainColor);
color: #fff;
} */
.formBox .linkBox.flexBox {
grid-gap: .8em;
}
.formBox .linkBox .back .linkBtn {
background: transparent;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.formBox .formItem-outer {
grid-gap: 2em;
}
.formBox .formItem.head {
border-bottom: 1px solid #00a1e9;
padding-bottom: 0;
font-size: 1.2em;
line-height: 1.5;
}
.formBox .formItem dt {
text-align: left;
position: relative;
}
.formBox .formItem dd {
text-align: left;
width: 100%;
}
.mw_wp_form .formBox .error {
/* bottom: -2em;*/
left: 0;
padding-left: 1em;
}
.formBox .consentBox {
align-items: stretch;
/* flex-direction: column; */
}
.formBox .linkBox {
margin: auto;
max-width: calc(480px + 1em);
}
.formBox .linkBox.flexBox > div {
flex: 1;
}
.formBox .linkBox.flexBox input[type="submit"] ,
.formBox .linkBox.flexBox .linkBtn {
max-width: 240px;
min-width: 0;
width: 100%;
}
.formBox.confirm form {
display: grid;
place-items: center;
}
}
@media screen and (min-width:480px) and (max-width:769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.formBox .formItem-outer {
grid-template-columns: auto 1fr;
grid-gap: 1.8em 0;
}
.formBox .formItem {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
grid-gap: 0 2em;
line-height: 1.4;
width: 100%;
}
.formBox.input .formItem dt {
padding-top: .9em;
}
.formBox .formItem dd {
/* min-height: 50px; */
}
.wpcf7-form .formBox .formItem dd > span {
display: block;
width: 100%;
}
.wpcf7-form .formBox .wpcf7-checkbox {
padding-top: .5em;
}
#confirm .formBox .formItem dt {
padding-top: 0;
}
.mw_wp_form_confirm .formBox dd {
position: relative;
}
.formBox .formItem dd .wpcf7-radio {
padding: .7em 0;
}
.formBox .formItem.form_file dd {
padding: .3em 0;
}
.mw_wp_form_confirm .formBox .formItem dt,
.mw_wp_form_confirm .formBox .formItem dd {
padding: 20px 0;
}
.formBox dd .dateBox {
width: calc(50% - 5px);
}
.formBox .error {
}
.formBox .btn-outer:hover:before {
left: 0;
}
.formBox .linkBtn {
min-width: 438px;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media (hover: hover) {
.formBox .btn_wrap:hover::after {
right: .7em;
}
.formBox .linkBtn:hover {
filter: brightness(1.1);
}
}
/*====================================================
////class .wp-block-table
====================================================*/
.bodyText p + .wp-block-table ,
.bodyText .wp-block-table + .wp-block-table {
margin: 1.5em 0;
}
table ,
.bodyText .wp-block-table table {
background: #fff;
border-collapse: separate;
border: solid var(--gray);
border-width: 1px 0 0 1px;
border-spacing: 0;
line-height: 1.6;
/* overflow: hidden; */
vertical-align: middle;
width: 100%;
}
.bodyText .wp-block-table table {
border-collapse: collapse;
}
table thead ,
.bodyText .wp-block-table thead {
border: none;
}
table th ,
table td ,
.wp-block-table thead th ,
.wp-block-table tr td {
padding: .8em 1em;
}
table thead th ,
.wp-block-table thead th {
background: var(--l_gray);
border: solid 1px var(--gray);
}
table thead th:last-child ,
.wp-block-table thead th:last-child {
border: solid 1px var(--gray);
}
table tbody th ,
.wp-block-table tbody th {
background: var(--w_gray);
border-bottom: solid 1px var(--gray);
font-weight: 500;
text-align: left;
white-space: nowrap;
}
table td ,
.wp-block-table tr td {
background: #fff;
border: solid var(--gray);
border-width: 0 1px 1px 0;
}
table tr td a ,
.wp-block-table tr td a {
color: var(--mainColor);
-webkit-text-decoration: underline dotted 1px;
text-decoration: underline dotted 1px;
text-underline-position: under;
text-underline-offset: 0.1em;
}
table tr td .tel_link a ,
.wp-block-table tr td .tel_link a {
color: inherit;
}
table tfoot ,
.bodyText .wp-block-table tfoot {
border: none;
}
table tfoot td ,
.wp-block-table tfoot td {
background: var(--w_mainColor);
border-top: solid 1px var(--l_gray2);
text-align: center;
}
table figcaption ,
.wp-block-table figcaption {
font-size: .8em;
margin: .5em 0 0 1em;
}
/* .first-td-head table,
.wp-block-table.is-style-first-td-head table {
}
.first-td-head table th:first-child,
.wp-block-table.is-style-first-td-head th:first-child {
position: sticky;
left: 0;
} */
.first-td-head table td:first-child,
.wp-block-table.is-style-first-td-head td:first-child {
background: var(--l_pink);
font-weight: 500;
/* position: sticky;
left: 0; */
white-space: nowrap;
}
/* .first-td-head table th:first-child::before,
.wp-block-table.is-style-first-td-head th:first-child::before,
.first-td-head table td:first-child::before,
.wp-block-table.is-style-first-td-head td:first-child::before {
border-left: solid 1px var(--gray);
box-sizing: border-box;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} */
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
table thead th ,
table tr td ,
.wp-block-table thead th ,
.wp-block-table tr td {
padding: .7em .7em;
}
}
@media screen and (max-width:500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
/* .first-td-head {
overflow-x: scroll;
}
.first-td-head table {
width: 1000px;
} */
}
@media screen and (min-width:1580px) {
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
table.responsive,
.wp-block-table.is-style-responsive table ,
.wp-block-table.is-style-first-td-head table ,
table.responsive tbody,
.wp-block-table.is-style-responsive table tbody,
.wp-block-table.is-style-first-td-head table tbody,
table.responsive tr,
.wp-block-table.is-style-responsive table tr,
.wp-block-table.is-style-first-td-head table tr,
table.responsive td,
.wp-block-table.is-style-responsive table td ,
.wp-block-table.is-style-first-td-head table td {
display: block;
}
table.responsive,
.wp-block-table.is-style-responsive table ,
.wp-block-table.is-style-first-td-head table {
border: none;
}
table.responsive thead,
.wp-block-table.is-style-responsive thead ,
.wp-block-table.is-style-first-td-head thead {
display: none;
}
table.responsive tr,
.wp-block-table.is-style-responsive tr ,
.wp-block-table.is-style-first-td-head tr {
position: relative;
width: 100%;
}
table.responsive th,
table.responsive td:first-child,
.wp-block-table.is-style-responsive td:first-child ,
.wp-block-table.is-style-first-td-head td:first-child {
background: var(--mainColor);
color: #fff;
display: block;
font-size: 1.1em;
padding: .3em .6em;
text-align: center;
width: 100%;
}
.wp-block-table.is-style-first-td-head td:first-child {
background: var(--mainColor);
color: #fff;
font-weight: 500;
}
table.responsive td,
.wp-block-table.is-style-responsive td ,
.wp-block-table.is-style-first-td-head td {
border: none;
/* padding: .6em 0; */
padding: .5em 1em;
text-align: left;
transition: .4s ease;
width: 100%;
}
table.responsive td + td,
.wp-block-table.is-style-responsive td + td ,
.wp-block-table.is-style-first-td-head td + td {
border-top: dotted 1px var(--gray);
}
.wp-block-table.is-style-first-td-head td:nth-child(2) {
border-top: none;
}
table.responsive td:last-child,
.wp-block-table.is-style-responsive td:last-child ,
.wp-block-table.is-style-first-td-head td:last-child {
margin-bottom: .5em;
}
/* table.responsive tr:last-child td + td:last-child,
.wp-block-table.is-style-responsive tr:last-child td + td:last-child {
border-bottom: solid 1px var(--gray);
} */
table.responsive tr:has(.th_label) {
display: grid;
grid-template-columns: auto 1fr;
}
table.responsive tr:has(.th_label) > * {
display: grid;
align-items: center;
grid-template-columns: subgrid;
grid-column: span 2;
grid-gap: min(6vw, 40px);
}
table.responsive tr:has(.th_label) th > div{
grid-column: 1 / 3;
}
table.responsive tr:has(.th_label) td.th_label {
}
table.responsive td.th_label:before {
color: var(--mainColor);
content: attr(data-label);
font-weight: 500;
}
table.responsive td.th_label:first-child::before {
display: none;
}
table.responsive td.th_label:first-child > * {
grid-column: span 2;
}
table.responsive tr:has(.th_label):last-child td + td:last-child,
.wp-block-table.is-style-responsive tr:has(.th_label):last-child td + td:last-child {
border-bottom: none;
}
}
@media screen and (max-width:500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
table.responsive td.blank .blank_line {
background: #fff;
display: block;
margin: -8px auto -8px -12px;
position: relative;
width: 3px;
height: calc(100% + 16px);
z-index: 1;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
/*====================================================
////class .tabBox
====================================================*/
.tabBox {
overflow: hidden;
position: relative;
}
.tabBox .tabArea {
grid-gap: 4px;
position: relative;
z-index: 5;
}
.tabBox .tabArea li {
background: var(--l_gray);
border: solid 1px var(--gray);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 50px;
line-height: 1.2;
padding: 5px;
}
.tabBox .tabArea li.current {
background: #fff;
border-bottom-color: #fff;
cursor: default;
pointer-events: none;
}
.tabBox .tabArea li a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 100%;
height: 100%;
}
.tabBox .tabArea li.current a {
pointer-events: none;
}
.tabBox .contentArea {
background: #fff;
border: solid 1px var(--gray);
margin-top: -1px;
position: relative;
transition: .4s all;
}
.tabBox .contentArea .tab_content {
transition: 1.2s all;
transition-delay: .4s;
}
.tabBox .contentArea .tab_content:not(.current) {
opacity: 0;
pointer-events: none;
position: absolute;
transition: .6s all;
transition-delay: 0s;
width: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
.tabBox .tabArea {
display: flex;
}
.tabBox .tabArea .tab {
flex: 1;
font-size: 1.1rem;
height: auto;
min-height: 40px;
padding: 6px 3px;
}
.tabBox .contentArea .tab_content {
padding: 1.5em 1em;
}
}
@media screen and (max-width:500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.tabBox .contentArea .tab_content {
padding: 2em;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}
@media screen and (min-width:1580px) {}
/*====================================================
////id | mapBox
====================================================*/
.mapBox .box-inner {
overflow: hidden;
position: relative;
}
.mapBox iframe {
margin: auto;
position: absolute;
top: -200px;
width: 100%;
height: calc(100% + 400px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.mapBox .box-inner {
width: 100%;
height: min(80vw, 400px);
}
}
@media screen and (max-width:580px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.mapBox .box-inner {
width: 100%;
height: 400px;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
/*====================================================
////id | faq
====================================================*/
.faq-item-wrapper {
display: grid;
grid-gap: 16px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.faq-item {
overflow: hidden;
line-height: 1.6;
}
.faq-item dl {
}
.faq-item dt {
background: #fff;
border: solid 1px var(--gray);
border-radius: 10px;
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
font-weight: 500;
position: relative;
}
.faq-item dt::before ,
.faq-item .accordion-inner::before {
box-sizing: border-box;
display: block;
font-weight: 500;
line-height: 1;
text-align: center;
}
.faq-item dt::before {
border-radius: 100%;
content: 'Q.';
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 .15em .3em;
}
.faq-item dt > div {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
position: relative;
transition: .3s ease-in-out;
}
.faq-item .accordion-inner::before {
content: 'A.';
padding-left: .3em;
}
.faq-item dt .icon {
position: relative;
width: .8em;
height: .8em;
}
.faq-item dt .icon::before,
.faq-item dt .icon::after {
border-top: solid 1px var(--black);
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .3s ease-in-out;
width: 100%;
height: 0;
}
.faq-item dt .icon::after {
transform: rotate(90deg);
}
.faq-item.open dt .icon::before {
transform: rotate(180deg);
}
.faq-item.open dt .icon::after {
opacity: 0;
transform: rotate(180deg);
}
.faq-item .accordion-inner {
display: grid;
align-items: flex-start;
grid-template-columns: auto 1fr;
position: relative;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.faq-item dt::before {
font-size: 1.2em;
padding-left: .6em;
width: 2.6em;
height: 1.86em;
}
.faq-item dt > div {
border-radius: 6px;
line-height: 1.4;
padding: 10px 13px 12px;
}
.faq-item dt .text {
padding-top: .1em;
}
.faq-item .accordion-inner {
padding: 1em 0 1em 1em;
}
.faq-item .accordion-inner::before {
font-size: 1.2em;
padding-top: .2em;
width: 1.6em;
}
.faq-item .accordion-inner .text {
padding-left: .5em;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.faq-item dt::before {
font-size: 1.25em;
width: 3em;
}
.faq-item dt > div {
border-radius: 30px;
padding: .7em 1.5em .8em 0;
}
.faq-item dt .text {
padding-top: .1em;
}
.faq-item .accordion-inner .text {
padding: 1em 1em 1em 0;
}
.faq-item .accordion-inner::before {
font-size: 1.25em;
padding-top: .9em;
text-align: center;
width: 3em;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media (hover: hover) {
.faq-item dt:hover > div {
border-color: var(--mainColor);
}
}
/*====================================================
////id | archive-item
====================================================*/
.archive-item-link {
border-bottom: solid 1px var(--gray);
display: grid;
grid-gap: 0 1.5em;
line-height: 1.4;
padding: 1em 0;
}
.archive-item-link:has(.arrow) {
padding-right: 3em;
position: relative;
}
.archive-item-link .arrow {
margin: auto;
position: absolute;
top: 0;
right: 1em;
bottom: 0;
}
.archive-item-link .arrow::before {
display: none;
}
.archive-item-text {
display: grid;
grid-gap: 6px;
place-content: flex-start;
}
.date_cate {
display: flex;
align-items: baseline;
}
.archive-item-date {
font-size: .9em;
width: 7em;
}
.archive-item-title {
/* font-size: min(4.5vw, 2rem); */
transition: .3s ease-in-out;
}
.archive-item-category {
font-size: .8em;
}
.archive-item-tag {
font-size: min(3vw, 1.2rem);
}
.archive-item-excerpt {
margin-top: .3em;
}
.news-link-wrapper > .btn_wrap {
justify-content: flex-end;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 840px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.archive-item-link {
grid-template-columns: auto 1fr;
}
.archive-wrapper {
display: grid;
align-items: center;
place-content: center;
}
.archive-wrapper .archive-item-wrapper {
min-width: 600px;
}
}
@media screen and (min-width:960px) and (max-width:1280px) {
}
@media (hover: hover) {
a:hover .archive-item-title {
color: var(--mainColor);
}
.archive-item-link:hover .arrow {
opacity: 1;
right: .5em;
}
}
/*====================================================
////id | column-item
====================================================*/
.column-item-wrapper {
display: grid;
grid-gap: min(6.4vw, 24px) min(2vw, 30px);
}
.column-item-link {
background: #fff;
border: solid 2px var(--mainColor);
border-radius: 10px;
display: grid;
position: relative;
}
.column-item-img-figure {
border-radius: 7px 7px 0 0;
}
.column-item-category {
position: absolute;
top: 1.88em;
right: 0;
z-index: 10;
}
.column-item-date {
font-weight: 700;
}
.column-item-title {
font-weight: 700;
margin-top: .3em;
}
.column-item-tag {
font-size: .95em;
margin-top: .4em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.column-item-link {
grid-gap: min(3.2vw, 20px);
padding: min(3.2vw, 20px);
}
.column-item-img-figure {
padding-top: 64.3%;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.column-item-wrapper {
font-size: min(1.5vw, 1.7rem);
grid-template-columns: 1fr 1fr;
}
.column-item-link {
grid-gap: min(1.5vw, 20px);
padding: min(1.5vw, 20px);
}
.column-item-img-figure {
padding-top: 72.35%;
}
}
@media (hover: hover) {}
/*====================================================
////id | cmn_reservation
====================================================*/
#cmn_reservation {
position: relative;
z-index: 99999;
}
.cmn_reservation-content {
background: var(--black);
color: #fff;
position: relative;
}
.cmn_reservation-item-wrapper {
display: flex;
flex-wrap: wrap;
gap: min(3vw, 15px) min(3vw, 30px);
justify-content: center;
margin-top: min(6vw, 30px);
}
.cmn_reservation-item-link {
font-weight: 700;
min-height: 3.2em;
}
.cmn_reservation-attention ul {
margin-top: 1.5em;
}
@media screen and (max-width: 1330px) {
.cmn_reservation-inner {
width: 100%;
}
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.cmn_reservation-content {
padding: min(25vw, 100px) 5vw;
}
.cmn_reservation-content::before,
.cmn_reservation-content::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
width: 100%;
height: min(20vw, 80px);
}
.cmn_reservation-content::before {
top: 0;
left: 0;
}
.cmn_reservation-content::after {
bottom: 0;
left: 0;
transform: scale(1, -1);
}
.cmn_reservation-item-wrapper {
flex-direction: column;
}
.cmn_reservation-attention ul {
font-size: min(.8em, 1.4rem);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.cmn_reservation-content {
padding: min(10vw, 80px) min(7vw, 100px);
}
.cmn_reservation-content::before,
.cmn_reservation-content::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
width: min(7vw, 120px);
height: 100%;
}
.cmn_reservation-content::before {
top: 0;
left: 0;
}
.cmn_reservation-content::after {
top: 0;
right: 0;
transform: rotate(180deg);
}
/* .cmn_reservation-item-link {
font-size: 1em;
} */
.cmn_reservation-attention ul {
font-size: 1.4rem;
}
}
@media screen and (min-width: 960px) {
.cmn_reservation-item-link {
min-width: 400px;
}
}
@media (hover: hover) {}
/*====================================================
////id | fixed_reservation
====================================================*/
.fixed_reservation-item-wrapper {
display: flex;
grid-gap: min(2vw, 10px);
}
.fixed_reservation-item:has(.type-web) {
transition-delay: .1s;
}
.fixed_reservation-item-link {
background-color: var(--black);
border: solid 1px #f6f6f6;
border-radius: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .4em;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-align: center;
width: 6.5em;
height: 6.5em;
}
.fixed_reservation-item-link::before {
content: '';
display: block;
width: 2.5em;
height: 2em;
}
.fixed_reservation-item-link.type-line::before {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
.fixed_reservation-item-link.type-web::before {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
.fixed_reservation-item-link .small {
font-size: .65em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
#fixed_reservation {
font-size: min(3vw, 1.8rem);
position: fixed;
right: 60px;
bottom: 0;
z-index: 999999;
}
.fixed_reservation-item {
padding-bottom: 5px;
transition: .3s ease-in-out;
}
.body_wrapper.first .fixed_reservation-item ,
.footer-view .fixed_reservation-item {
transform: translateY(100%);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
#fixed_reservation {
font-size: min(3vw, 1.8rem);
padding-bottom: min(30%, 200px);
position: fixed;
right: 0;
bottom: 0;
z-index: 999999;
}
.fixed_reservation-item-wrapper {
flex-direction: column;
}
.fixed_reservation-item {
padding-right: 10px;
transition: .3s ease-in-out;
}
.body_wrapper.first .fixed_reservation-item ,
.footer-view .fixed_reservation-item {
transform: translateX(100%);
}
}
@media (hover: hover) {
.fixed_reservation-item-link:hover {
transform: scale(1.1);
}
}
/*====================================================
////class .pagetop
====================================================*/
.pagetop {
display: none;
position: fixed;
bottom: 15px;
right: 15px;
width: 50px;
height: 50px;
z-index: 1000;
/* border: solid 1px*/
}
.pagetop.stop {
position: absolute;
top: -70px;
bottom: auto;
}
.pagetop a {
background: var(--mainColor);
border-radius: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding-top: 3%;
position: relative;
opacity: .7;
width: 100%;
height: 100%;
}
.pagetop a .arrow {
margin: 0;
transform: rotate(-90deg);
width: 50%;
height: 50%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.pagetop {
right: 5px;
bottom: 5px;
}
.pagetop a {
transform: scale(.7);
transform-origin: right bottom;
}
}
@media screen and (min-width:480px) and (max-width:769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.pagetop a {
font-size: .6em;
}
.pagetop a:hover {
opacity: 1;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
@media (hover: hover) {
.pagetop a:hover .arrow::after {
transform: none;
}
}
/*====================================================
////id | footer
====================================================*/
footer {
background: var(--black);
color: #fff;
}
footer .copyright {
font-size: 10px;
font-weight: 400;
text-align: center;
padding-bottom: 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.footer-logo {
margin: 0 auto min(5vw, 30px);
width: min(50%, 200px);
}
.footer-nav {
text-align: center;
}
.footer-nav-menu {
display: inline-block;
text-align: left;
}
.footer-nav-menu .menu {
margin-top: 1em;
}
.footer-nav-menu .menu-item {
padding: .1em 0;
}
.footer-nav-menu .sub-menu {
position: relative;
}
.footer-nav-menu .sub-menu::before {
border-top: solid 1px;
content: '';
display: block;
margin: auto;
position: absolute;
top: .8em;
left: 0;
width: 1em;
height: 0;
}
.footer-nav-menu .sub-menu .menu-item {
padding-left: 1.7em;
}
.footer-nav-other {
font-size: .8em;
margin-top: 3em;
}
.footer-nav-other .menu {
display: flex;
flex-wrap: wrap;
gap: .5em 1.5em;
justify-content: center;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.footer-inner {
display: grid;
grid-template-columns: auto 1fr;
padding: 70px 0 50px;
}
.footer-logo_img {
width: 200px;
}
.footer-nav-menu {
display: flex;
gap: min(5vw, 60px);
justify-content: flex-end;
font-size: 2rem;
}
.footer-nav-menu .menu-item {
padding: .3em 0;
}
.footer-nav-menu .sub-menu {
padding-top: .3em;
position: relative;
}
.footer-nav-menu .sub-menu::before {
border-top: solid 1px;
content: '';
display: block;
margin: auto;
position: absolute;
top: 1.3em;
left: 0;
width: 2em;
height: 0;
}
.footer-nav-menu .sub-menu .menu-item {
padding-left: 3em;
}
.footer-nav-other {
font-size: 1.5rem;
margin-top: 3em;
}
.footer-nav-other .menu {
display: flex;
gap: 1.5em;
justify-content: flex-end;
}
}
@media (hover: hover) {}
.g-recaptcha {
margin-top: 50px;
text-align: center;
font-size: 0.8em;
}
.grecaptcha-badge { visibility: hidden; }
/*====================================================
////id | xxx
====================================================*/
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media (hover: hover) {}