@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;
}
/*====================================================
////id | common
====================================================*/
html{
font-size: 10px;
font-size: 62.5%;
width: 100%;
max-width: 100vw;
}
body, button, input, select, optgroup, textarea {
color: var(--black);
font-size: min(3.73vw, 1.6rem);
font-family: var(--font_family);
font-weight: 500;
line-height: 1.8;
}
button, input, select, optgroup, textarea {
color: inherit;
font-family: inherit;
font-size: inherit;
}
body {
background: #F3F3F3;
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;
}
p {
letter-spacing: .05em;
}
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:"] {
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]),
ul:not(.page-numbers):not(.not_set):not(.menu):not(.sub-menu) li a:not([class]),
ol li a:not([class]),
dd a:not([class]),
a.underline {
color: var(--color_3);
-webkit-text-decoration: underline dotted 1px var(--color_3);
text-decoration: underline dotted 1px var(--color_3);
text-underline-position: under;
text-underline-offset: 0.1em;
}
@media (hover: hover) {
p a:not([class]):hover,
ul:not(.page-numbers):not(.not_set):not(.menu):not(.sub-menu) li a:not([class]):hover,
ol li a:not([class]):hover,
dd a:not([class]):hover,
a.underline:hover {
opacity: .8;
}
}
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:has(img)::after {
content: '';
display: block;
margin: auto;
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
figure img {
position: relative;
}
.coverImg {
overflow: hidden;
padding-top: 69%;
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: .2s 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: transform .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: .2s 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: .2s 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: .2s ease-in-out;
position: relative;
z-index: 1;
}
.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;
}
.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(--color_4);
border: none;
height: 1px;
opacity: .4;
}
::before,
::after {
pointer-events: none;
}
.innerBox {
margin: 0 auto;
padding: min(13vw, 100px) 0;
position: relative;
width: calc(100% - (var(--innerBox_margin) * 2));
z-index: 10;
}
.innerBox.is-style-padding-top-x_large {
padding-top: min(16vw, 140px);
}
.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-x_large {
padding-bottom: min(16vw, 140px);
}
.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.wide {
width: calc(100% - (var(--innerBox_wide_margin) * 2));
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.innerBox {
padding: min(18vw, 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:1290px) {
.display-middle {
display: block;
}
}
@media screen and (min-width:1290px) {
.hidden-wide {
display: none;
}
.display-wide {
display: block;
}
}
@media screen and (min-width:1600px) {
.hidden-maxwide {
display: none;
}
.display-maxwide {
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.03);
}
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);
}
.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 | 装飾系
====================================================*/
.triangle_arrow {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
display: inline-block;
transition: .2s ease-in-out;
width: .5em;
height: .6em;
}
.btn_wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 100%;
}
.btn_wrap:has(.btn-left) {
justify-content: flex-start;
}
.btn_wrap:has(.btn-right) {
justify-content: flex-end;
}
.wp-lightbox-container button.lightbox-trigger {
display: none;
}
.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 .is-style-outline .wp-block-button__link,
.linkBtn-small {
display: flex;
align-items: center;
}
.wp-block-button.is-style-outline .wp-block-button__link .arrow,
main .is-style-outline .wp-block-button__link .arrow,
.linkBtn-small .arrow {
margin-left: 1em;
width: 3.7em;
}
.wp-block-button.is-style-outline .wp-block-button__link .arrow::before,
main .is-style-outline .wp-block-button__link .arrow::before,
.linkBtn-small .arrow::before {
background: var(--black);
}
@media (hover: hover) {
.wp-block-button.is-style-outline .wp-block-button__link:hover,
main .is-style-outline .wp-block-button__link:hover,
.linkBtn-small:hover {
color: var(--color_1);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover .arrow::before,
main .is-style-outline .wp-block-button__link:hover .arrow::before,
.linkBtn-small:hover .arrow::before {
background: var(--color_1);
}
}
.wp-block-button .btn_wrap,
.single main .btn_wrap {
justify-content: flex-start;
}
.wp-block-button.is-style-outline .wp-block-button__link .linkBtn-inner,
main .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;
}
.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: .2s ease-in-out;
}
dl.accordion>dd>.accordion-inner,
.accordion>.accordion-cnt>.accordion-inner {
opacity: 0;
transition: .2s 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: .2s 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 {
padding-left: 0;
}
ul.markList>li {
position: relative;
padding-left: 1.0em;
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,
.bodyText.default_deco ul>li+li,
ol>li+li,
.bodyText.default_deco ol>li+li {
margin: .2em 0 0;
}
ul.markList>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 {
line-height: 1.4;
}
ul.markList.attentionMark>li:before {
background: transparent;
content: '\203B';
left: 0;
}
ul.markList.dot>li:before {
background: var(--color_1);
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 {
box-sizing: border-box;
counter-increment: number;
content: counter(number)'.';
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
font-weight: 700;
line-height: 1;
padding-bottom: .1em;
position: absolute;
top: -.07em;
left: -1.5em;
text-align: center;
width: 1.6em;
height: 1.6em;
line-height: 1;
}
.bodyText.default_deco ol>li::before {
top: auto;
}
ol.circleMark>li:before {
background: var(--color_1);
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: .75em;
font-weight: 700;
line-height: 1;
padding-bottom: .1em;
position: absolute;
top: .2em;
left: -2em;
text-align: center;
width: 1.6em;
height: 1.6em;
line-height: 1;
}
.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;
}
.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 | 【特殊装飾】 */
@media screen and (max-width: 769px) {}
@media print,
screen and (min-width: 769px) {}
.text_dots {
background-image: radial-gradient(circle at center, var(--color_2) 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;
}
.category-wrapper {
display: flex;
flex-wrap: wrap;
gap: .3em;
}
.article-tag {
color: var(--color_1);
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%;
}
.hover_shadow {
transition: .2s ease-in-out;
}
@media (hover: hover) {
.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);
}
#contents .has-small-font-size,
#contents [data-fontsize="12px"] {
font-size: .8em !important;
}
#contents .has-medium-font-size,
#contents [data-fontsize="16px"] {
font-size: 1.1em !important;
}
#contents .has-large-font-size,
#contents [data-fontsize="18px"] {
font-size: 1.3em !important;
}
#contents .has-x-large-font-size,
#contents [data-fontsize="21px"] {
font-size: 1.5em !important;
}
.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;
line-height: 1;
}
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;
}
@media screen and (max-width: 769px) {
.txt-center-mob {
text-align: center;
}
}
@media print,
screen and (min-width: 769px) {
.txt-center-pc {
text-align: center;
}
}
h1,h2,h3,h4,h5,h6 {
font-weight: 700;
line-height: 1.6;
}
h1 {
font-size: 2.2em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
h2 {
font-size: min(6.4vw, 3.3rem);
}
h2.big {
font-size: min(7.0vw, 4rem);
}
h3 {
font-size: min(6.0vw, 2.4rem);
}
h4 {
font-size: min(5.5vw, 1.25em);
}
h5 {
font-size: min(5vw, 1.2em);
}
}
@media screen and (max-width: 500px) {}
/* ////////// PC ////////// */
@media print,
screen and (min-width: 960.1px) {
h2 {
font-size: min(3.4vw, 3.3rem);
}
h2.big {
font-size: min(4.0vw, 4.6rem);
}
h3 {
font-size: min(3.1vw, 2.8rem);
}
h4 {
font-size: min(2.8vw, 1.25em);
}
h5 {
font-size: min(2.6vw, 1.2em);
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {}
@media screen and (min-width:1290px) {}
.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-logo {
background: #fff;
border-radius: 0 0 min(4.4vw, 40px) 0;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
transition: opacity .2s ease-in-out;
z-index: 999990;
}
.header-logo-link:hover {
animation: bounceHorizontal 0.6s ease;
}
@keyframes bounceHorizontal {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-5px) rotate(-5deg); } /* 少し左へ */
40% { transform: translateX(5px) rotate(5deg); } /* 少し右へ */
60% { transform: translateX(-5px) rotate(-3deg); } /* 少し左へ（小さく） */
80% { transform: translateX(5px) rotate(3deg); } /* 少し右へ（小さく） */
}
.header-logo-text .big {
font-size: 1.1em;
line-height: 1.2;
}
header {
transition: .2s ease-in-out;
position: relative;
z-index: 888888;
}
header .header-inner {
display: flex;
align-items: center;
height: 100%;
padding-left: var(--innerBox_wide_margin);
}
header img {
margin: 0;
}
header .headerBox {
position: fixed;
left: 0;
right: 0;
transition: .2s ease-in-out;
width: 100%;
height: var(--header_h);
z-index: 888888;
}
header .header-pc_menu {
display: flex;
align-items: center;
gap: min(3vw, 56px);
justify-content: flex-end;
flex: 1;
padding-left: min(25vw, 200px);
}
header .header-pc_menu>div {
height: 100%;
}
header .header-pc_menu .menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0 min(2.5vw, 60px);
font-size: min(1.4vw, 1.6rem);
height: 100%;
padding: 0;
/* max-width: min(30vw, 400px); */
}
header .header-pc_menu .menu>.menu-item {
display: flex;
align-items: center;
margin: 0;
padding: 0;
position: relative;
}
header .header-pc_menu .menu a {
padding: .2em;
position: relative;
z-index: 10;
}
header .header-pc_menu .menu>.menu-item>a {
display: grid;
place-content: center;
place-items: center;
}
header .header-pc_menu .menu>.menu-item>a:hover {
opacity: 1;
}
header .header-pc_menu .menu a::before {
border-bottom: solid 2px var(--color_2);
content: '';
display: block;
margin: auto;
position: absolute;
right: 0;
bottom: 0;
transition: .2s ease-in-out;
width: 0;
height: 0;
z-index: -1;
}
header .header-pc_menu .menu a:hover::before {
opacity: 1;
left: 0;
right: auto;
width: 100%;
}
header .header-pc_menu .menu li:has(.sub-menu-outer)>a {
/* margin-right: 1.2em; */
position: relative;
}
header .header-pc_menu li:has(.sub-menu-outer) {
position: relative;
}
header .header-pc_menu li:has(.sub-menu-outer)::before {
content: '';
display: block;
margin: auto;
pointer-events: auto;
position: absolute;
top: 100%;
left: -3em;
width: calc(100% + 6em);
height: 40px;
}
header .header-pc_menu li:has(.sub-menu-outer):hover::before {
pointer-events: auto;
}
header .header-pc_menu .sub-menu-outer {
margin: auto;
pointer-events: none;
position: absolute;
top: calc(100% + 0px);
left: 0;
text-align: center;
white-space: nowrap;
z-index: 30;
}
header .header-pc_menu .open .sub-menu-outer {
opacity: 1;
pointer-events: auto;
}
header .header-pc_menu .sub-menu-block {
padding: 1.5em;
text-align: center;
transition: .2s ease-in-out;
}
header .header-pc_menu .sub-menu-block::before {
background: rgba(255, 255, 255, 0.8);
border: solid 1px var(--color_4);
box-sizing: border-box;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
transition: .2s ease-in-out;
width: 100%;
height: 100%;
}
.headerBox:hover .header-pc_menu .sub-menu-block::before {
background: rgba(255, 255, 255, 1);
}
header .header-pc_menu .sub-menu {
display: inline-block;
text-align: left;
}
header .header-pc_menu .sub-menu {
pointer-events: auto;
font-weight: 500;
}
header .header-pc_menu .sub-menu li+li {
margin-top: .5em;
}
header .menu-outer {
z-index: 30;
}
.header-btn {
display: flex;
}
.header-btn a {
background-color: var(--s_color);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
text-align: center;
width: 170px;
height: var(--header_h);
}
.header-pc_menu .header-btn{
font-size: min(1.35vw, 1.5rem);
}
.header-btn a > span {
display: flex;
align-items: center;
justify-content: center;
gap: .5em;
}
.header-btn a .icon {
filter: brightness(0) invert(10);
}
.header-menuBtn {
background: rgba(243, 243, 243, .8);
backdrop-filter: blur(2px);
border: solid 1px var(--color_1);
border-radius: min(.5vw, 4px);
cursor: pointer;
display: grid;
grid-template-rows: 1fr auto;
overflow: hidden;
position: fixed;
top: 9px;
right: 11px;
transition: .2s ease-in-out;
width: calc(var(--header_h) - 18px);
height: calc(var(--header_h) - 18px);
z-index: 999995;
}
.header-menuBtn .humberger {
margin: 0;
position: relative;
transition: opacity .2s ease-in-out;
width: 100%;
height: 100%;
}
.header-menuBtn .humberger span {
border-top: solid 2px var(--color_1);
content: '';
margin: auto;
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .2s ease-in-out;
width: 45%;
height: 0;
}
.header-menuBtn .humberger span:nth-child(1) {
/* transform: translateY(-7px); */
transform: translateY(calc(var(--header_h) * -.12));
}
.header-menuBtn .humberger span:nth-child(2) {
transform: translateY(calc(var(--header_h) * .12));
}
header+.maskBox {
background: rgba(0, 0, 0, .5);
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: 888887;
}
header .menuBox {
backdrop-filter: blur(10px) brightness(1.2);
border-radius: 30px 0 0 30px;
color: var(--black);
margin: auto;
opacity: 0;
overflow-y: auto;
padding: min(5vw, 20px) 0 min(10vw, 40px);
pointer-events: none;
position: fixed;
top: var(--header_h);
right: 0;
transition: .5s ease-in-out;
transform: translateX(100px);
width: min(calc(100% - var(--innerBox_margin)), min(64vw, 450px));
height: calc(100vh - var(--header_h) - 30px);
height: calc(100svh - var(--header_h) - 30px);
z-index: 999999;
overflow-y: scroll;
-ms-overflow-style: none;
/* IE, Edge 対応 */
scrollbar-width: none;
/* Firefox 対応 */
}
header .menuBox::-webkit-scrollbar {
/* Chrome, Safari 対応 */
display: none;
}
header .menuBox::after {
background: #fff;
content: '';
display: block;
margin: auto;
opacity: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.menu-open .headerBox:hover {
}
.menu-open .headerBox {
}
.menu-open .header-pc_menu,
.menu-open .header-menuBtn {
}
.menu-open .header-menuBtn .humberger span {
width: 50%;
}
.menu-open .header-menuBtn .humberger span:nth-child(1) {
transform: rotate(-135deg);
}
.menu-open .header-menuBtn .humberger span:nth-child(2) {
opacity: 0;
}
.menu-open .header-menuBtn .humberger span:nth-child(3) {
transform: rotate(135deg);
}
.menu-open header+.maskBox {
opacity: 1;
pointer-events: auto;
}
.menu-open header .menuBox {
pointer-events: auto;
transform: none;
opacity: 1;
}
header .menuBox .menuBox-inner {
margin: auto;
position: relative;
width: min(75%, 300px);
z-index: 10;
}
header .menuBox-first {
display: flex;
justify-content: space-between;
/* margin: 0 -5%;
width: 110%; */
}
header .menu_logo_img {
height: var(--header_h);
}
header .menuBox-closeBtn {
cursor: pointer;
position: relative;
width: var(--header_h);
height: var(--header_h);
}
header .menuBox-closeBtn::before,
header .menuBox-closeBtn::after {
border-top: solid 2px var(--color_1);
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80%;
height: 0;
}
header .menuBox-closeBtn::before {
transform: rotate(-45deg);
}
header .menuBox-closeBtn::after {
transform: rotate(45deg);
}
header .menuBox-content {
margin: .5em auto 0;
}
header .menu-outer .menu-main {
margin-bottom: min(5vw, 40px);
}
header .menuBox .menu-main .menu>li {
border-bottom: solid 1px #D9D9D9;
padding: 0;
position: relative;
width: 100%;
}
header .menuBox .menu-main .menu>li>a {
display: block;
padding: 1.5em 0;
position: relative;
}
header .menuBox li+li {
margin-top: 0;
}
header .menuBox .menu li a {
position: relative;
}
/* header .menuBox .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: .2s ease-in-out;
width: .35em;
height: 1em;
} */
header .menu .sub-menu-outer {
overflow: hidden;
position: relative;
transition: .4s ease-in-out;
z-index: 10;
}
header .menuBox .sub-menu-outer {
transform: translateY(-.5em);
}
header .menuBox li:has(.sub-menu-btn)>a {
/* pointer-events: none; */
}
header .menuBox li:has(.sub-menu-btn)>a::after {
display: none;
}
header .menuBox li .sub-menu-btn {
cursor: pointer;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 3.5em;
}
header .menuBox li .sub-menu-btn::before,
header .menuBox li .sub-menu-btn::after {
border-top: solid 2px;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: .2em;
transition: .2s ease-in-out;
width: 1em;
height: 0;
}
header .menuBox li .sub-menu-btn::after {
transform: rotate(90deg);
}
header .menuBox li.open .sub-menu-btn::before {
transform: rotate(180deg);
}
header .menuBox li.open .sub-menu-btn::after {
transform: rotate(180deg);
}
header .menuBox li .sub-menu a {
display: block;
padding: .6em 1em .6em;
}
header .menuBox .header-btn {
display: grid;
grid-gap: 8px;
}
header .menuBox .header-btn a {
width: 100%;
}
.no_link {
pointer-events: none;
}
/* ////////// mobile ////////// NOTE header mobile */
@media screen and (max-width: 1080.0px) {
:root {
--header_h: min(14vw, 70px);
}
header,
header .headerBox {
height: var(--header_h);
}
header .header-inner {
padding-right: var(--header_h);
}
header.hide {
top: -130px;
}
.header-logo {
width: min(26.5vw, 160px);
height: min(22vw, 128px);
}
.header-logo_img {
width: min(16.3vw, 100px);
height: auto;
}
.header-logo-text {
font-size: calc(min(16.3vw, 100px) / 7.2);
}
header .header-pc_menu .menu ,
header .header-pc_menu .header-btn {
display: none;
}
}
@media screen and (max-width:768px) {
.header-pc_menu .header-cta-link-wrapper {
display: none;
}
}
@media screen and (max-width:500px) {}
@media screen and (min-width:769px) and (max-width:959.9px) {}
/* ////////// PC ////////// NOTE header PC */
@media print,
screen and (min-width: 769px) {}
@media print,
screen and (min-width: 1080.1px) {
:root {
--header_h: min(7vw, 76px);
}
.header-logo {
width: min(15vw, 240px);
height: min(12vw, 190px);
}
.header-logo_img {
width: min(9vw, 130px);
height: auto;
}
.header-logo-text {
font-size: calc(min(9vw, 130px) / 7.2);
}
header {
height: var(--header_h);
}
header .headerBox {
backdrop-filter: blur(3px);
background: rgba(243, 243, 243, .8);
position: fixed;
left: 0;
right: 0;
transition: .2s ease-in-out;
width: 100%;
height: var(--header_h);
z-index: 888888;
}
header.hide .headerBox {
transform: translateY(-130px);
}
header.global .headerBox:hover::before {
opacity: 1;
}
header.hide {
top: -180px;
}
.header-inner {
max-width: none;
}
.header-menuBtn,
header .menu-outer {
display: none;
}
}
@media (hover: hover) {
@media print,
screen and (min-width: 1220.1px) {
header .headerBox:hover {
background: rgba(255, 255, 255, 1);
}
}
.header-pc_menu .header-cta-link.contact:hover {
filter: brightness(1.1);
}
.header-pc_menu .header-cta-link.contact:hover .icon {
transform: rotate(-8deg);
}
header .header-pc_menu .sub-menu a:hover {
color: var(--color_1);
opacity: 1;
}
.header-menuBtn:hover {
filter: brightness(1.1) saturate(1.1);
}
header .menuBox .menu a:hover,
header .menuBox .menu .sub-menu-btn:hover {
color: var(--color_1);
opacity: 1;
}
header .menuBox .menu li a:hover::after {
right: 0;
}
.header-btn a:hover {
filter: brightness(1.1) saturate(1.1);
}
}
/*====================================================
////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: .8s ease-in-out forwards sa-show;
}
.sa.slow.show {
animation: 1.2s 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: #fff;
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 1.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.sa-imgScaleDown img {
transform: scale(1.1);
}
.show.sa-imgScaleDown img {
animation: 8s .6s ease-out forwards scaleDownImg;
}
@keyframes scaleDownImg {
to {
transform: none;
}
}
/*====================================================
////id | swiper
====================================================*/
#contents .swiper-button-prev,
#contents .swiper-button-next {
background-color: #fff;
border-radius: 100%;
cursor: pointer;
opacity: .6;
transition: opacity .2s ease-in-out;
width: min(8vw, 40px);
height: min(8vw, 40px);
}
#contents .swiper-button-prev {
left: calc(min(4vw, 20px) * -1);
}
#contents .swiper-button-next {
right: calc(min(4vw, 20px) * -1);
}
#contents .swiper-button-prev::after,
#contents .swiper-button-next::after {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .2s ease-in-out;
width: 100%;
height: 100%;
}
#contents .swiper-button-prev::after {
transform: scale(-1, 1);
}
#contents .swiper-button-prev.swiper-button-disabled,
#contents .swiper-button-next.swiper-button-disabled {
opacity: 0 !important;
pointer-events: none !important;
}
#contents .swiper-pagination {
position: unset;
}
#contents .swiper-pagination-bullet {
background-color: #DBDBDB;
border-radius: 8px;
outline: none;
width: 8px;
height: 8px;
}
#contents .swiper-pagination-bullet-active {
background-color: var(--color_2);
}
#contents .swiper-slide {
font-size: inherit;
}
#contents .swiper-scrollbar {
height: 2px;
position: relative;
top: unset;
bottom: unset;
}
#contents .swiper .vk_slider_item {
margin-top: 0 !important;
}
/* 対象限定：number_pagenation の中だけ */
.number_pagenation .swiper-pagination.is-fraction-enhanced .swiper-pagination-bullet {
display: none;
}
.number_pagenation .swiper-pagination.is-fraction-enhanced .js-swiper-fraction {
display: inline-block;
font-variant-numeric: tabular-nums;
/* 桁ブレ防止 */
line-height: 1;
}
.swiper-controls {
display: grid;
align-items: center;
grid-gap: min(3vw, 24px);
grid-template-columns: 1fr auto 1fr;
margin-top: min(3vw, 20px);
padding-bottom: 5px;
}
.swiper-controls:has(.swiper-pagination-lock) {
display: none;
}
.swiper-controls .swiper-controls-button-prev ,
.swiper-controls .swiper-controls-button-next {
cursor: pointer;
position: relative;
width: 20px;
height: 20px;
}
.swiper-controls .swiper-controls-button-prev.swiper-button-disabled ,
.swiper-controls .swiper-controls-button-next.swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.swiper-controls .swiper-controls-button-prev {
margin: 0 0 0 auto;
transform: scale(-1, 1);
}
.swiper-controls .swiper-controls-button-prev::before ,
.swiper-controls .swiper-controls-button-next::before {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
transition: transform .2s ease-in-out;
width: 100%;
height: 100%;
}
.swiper-controls .swiper-pagination {
margin-top: -6px;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1199.9px) {}
/* ////////// PC ////////// */
@media print,
screen and (min-width: 1200px) {}
@media (hover: hover) {
#contents .swiper-button-prev:hover,
#contents .swiper-button-next:hover {
opacity: 1;
}
}
/*====================================================
//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: .2s 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: .2s 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: .2s 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 {
display: inline-block;
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: .35em;
left: 0px;
transition: .2s 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: .35em;
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 {
margin: 0 auto 0;
}
.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);
border-radius: 2px;
color: #fff;
display: inline-block;
font-size: .6em;
font-weight: 700;
line-height: 1;
margin-left: 1em;
padding: .3em .5em .35em;
vertical-align: .1em;
}
.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: .2s ease-in-out;
}
.formBox dd {
position: relative;
text-align: left;
}
.formBox .h_radio .wpcf7-form-control {
display: flex;
flex-wrap: wrap;
grid-gap: 0 2em;
}
.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: var(--color_1) url('data:image/svg+xml;charset=UTF-8,') no-repeat center / auto 75%;
border-radius: 2em;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 1.5em;
transition: .2s ease-in-out;
width: 4.5em;
height: 1.2em;
z-index: 10;
}
.formBox .btn_wrap {
width: min(70vw, 340px);
min-width: min(70vw, 340px);
}
.formBox .linkBtn {
padding-right: 3em;
width: min(70vw, 340px);
}
.formBox .btn_wrap:has(.linkBtn:disabled) {
pointer-events: none;
opacity: .3;
}
.formBox .linkBtn:disabled {
pointer-events: none;
}
/* .formBox .linkBtn {
background: var(--color_1);
border: solid 1px var(--color_1);
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 {
font-size: 1.15em;
font-weight: 700;
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 min(5vw, 80px);
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: 340px;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {}
@media (hover: hover) {
.formBox .btn_wrap:hover::after {
width: 1.2em;
}
.formBox .linkBtn:hover {
filter: brightness(1.1);
}
}
/*====================================================
////class .wp-block-table
====================================================*/
/* p + .wp-block-table ,
.wp-block-table + .wp-block-table {
margin: 1.5em 0;
} */
table,
.wp-block-table table {
background: transparent;
border: solid 1px #CFCFCF;
border-collapse: separate;
border-spacing: 0;
line-height: 1.6;
/* overflow: hidden; */
vertical-align: middle;
width: 100%;
}
#contents .wp-block-table table {
border-collapse: separate;
border-spacing: 0;
}
table thead,
.wp-block-table thead {
border-bottom: none !important;
}
table th,
table td,
.wp-block-table thead th,
.wp-block-table tr td {
padding: .6em 1em .7em;
}
table thead th,
.wp-block-table thead th {
background: #468C4E;
border: solid #CFCFCF;
border-width: 0 1px 0 0;
color: #fff;
font-weight: 500;
}
table thead th:last-child,
.wp-block-table thead th:last-child {
border: none;
}
/* table thead th:last-child ,
.wp-block-table thead th:last-child {
border: solid 1px var(--color_4);
} */
table tbody th,
.wp-block-table tbody th {
background: var(--color_5);
border: solid #CFCFCF;
border-width: 0 1px 0 0;
font-weight: 500;
text-align: left;
white-space: nowrap;
}
table td,
.wp-block-table tr td {
background: #fff;
border: none;
border: solid #CFCFCF;
border-width: 0 1px 0 0;
}
table tbody td:last-child,
.wp-block-table tbody tr td:last-child {
border: none;
}
table tr:nth-child(even) td,
.wp-block-table tr:nth-child(even) td {
background: var(--l_gray);
}
table tr td a,
.wp-block-table tr td a {
color: var(--color_3);
-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-top: none;
}
table tfoot td,
.wp-block-table tfoot td {
background: var(--color_5);
border: none;
border: solid #CFCFCF;
border-width: 0 1px 0 0;
text-align: center;
}
table tfoot td:last-child,
.wp-block-table tfoot td:last-child {
border: none;
}
table figcaption,
.wp-block-table figcaption {
font-size: .8em;
margin: .5em 0 0 1em;
}
.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: 700; */
/* 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(--color_4);
box-sizing: border-box;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} */
.is-style-responsive table tbody tr td:first-child {
background: #D9E7F5;
text-align: center;
white-space: nowrap;
}
/* ////////// 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:1290px) {}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
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-color: transparent;
border: none;
/* border-bottom: solid 1px #CFCFCF; */
color: var(--color_1);
display: block;
font-size: 1.1em;
font-weight: 700;
padding: .3em 0;
text-align: left;
width: 100%;
}
.wp-block-table.is-style-first-td-head td:first-child {
background-color: transparent;
/* border-bottom: solid 1px #CFCFCF; */
display: block;
font-size: 1.1em;
padding: .3em 0;
text-align: left;
width: 100%;
}
table.responsive td,
.wp-block-table.is-style-responsive td,
.wp-block-table.is-style-first-td-head td {
background: transparent;
border: none;
/* padding: .6em 0; */
padding: 0 0 .4em;
/* 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 #CFCFCF;
} */
.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 {
border-bottom: solid 1px #CFCFCF;
margin-bottom: 1em;
padding-bottom: 1em;
}
/* 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(--color_4);
} */
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(--color_1);
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: 769.1px) {
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:1290px) {}
/*====================================================
////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(--color_4);
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(--color_4);
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:1290px) {}
/*====================================================
////id | mapBox
====================================================*/
.mapBox>div {
overflow: hidden;
position: relative;
width: 100%;
height: min(60vw, 350px);
}
.mapBox iframe {
margin: auto;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
/*====================================================
////id | archive-item
====================================================*/
.archive-item-link {
border-bottom: solid 1px #DBDBDB;
display: grid;
grid-gap: .5em 1.5em;
line-height: 1.4;
padding: 2em 0;
}
.archive-item-link:has(.arrow) {
padding-right: 1.8em;
position: relative;
}
.archive-item-link .arrow {
margin: auto;
opacity: 0;
position: absolute;
top: 0;
right: .8em;
bottom: 0;
}
.archive-item-text {
display: grid;
grid-gap: 6px;
place-content: flex-start;
}
.date_cate {
display: flex;
align-items: baseline;
}
.archive-item-date {
font-family: var(--f_serif);
width: 6em;
}
.archive-item-category {
display: flex;
gap: .5em;
}
/* .archive-item-date + .archive-item-category ,
.date + .category {
padding-left: 1em;
position: relative;
}
.archive-item-date + .archive-item-category::before ,
.date + .category::before {
color: var(--color_1);
content: '・';
display: block;
margin: auto;
position: absolute;
top: 0;
left: -.2em;
text-align: center;
width: 1em;
height: 1em;
} */
.archive-item-category:has(.cate_item-border) {
font-size: .75em;
}
.archive-item-tag {
font-size: min(3vw, 1.2rem);
}
.archive-item-title {
transition: .2s ease-in-out;
}
.archive-item-excerpt {
margin-top: .3em;
}
/* ////////// 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(--color_1);
}
.archive-item-link:hover .arrow {
opacity: 1;
right: 0;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {}
@media (hover: hover) {}
/*====================================================
////id | fixed_cta
====================================================*/
.fixed_cta {
display: grid;
grid-gap: min(5vw, 20px);
position: fixed;
right: min(2vw, 20px);
bottom: 70px;
z-index: 888888;
}
.fixed_cta a {
filter: drop-shadow(0 4px 3px rgba(68, 81, 70, .3));
width: min(20vw, 180px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
.fixed_cta {
bottom: 50px;
}
.fixed_cta a {
filter: drop-shadow(0 2px 3px rgba(68, 81, 70, .3));
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769.1px) {
}
@media (hover: hover) {
.fixed_cta a:hover {
opacity: 1;
transform: scale(1.03);
}
}
/*====================================================
////id | cmn_contact
====================================================*/
.cmn_contact-content-inner {
padding-bottom: 0;
}
.cmn_contact-wrapper {
position: relative;
}
.cmn_contact-wrapper::before {
background: #fff;
content: '';
display: block;
margin: auto;
position: absolute;
bottom: 0;
left: calc(var(--innerBox_margin) * -1);
width: calc(100% + (var(--innerBox_margin) * 2));
height: calc(100% - (min(15vw, 12rem) * .7));
z-index: -1;
}
.cmn_contact-wrapper::after {
background: url('img/cmn/cmn_contact-deco.svg') no-repeat center / contain;
content: '';
display: block;
margin: auto;
position: absolute;
}
.cmn_contact-head {
font-size: min(4.25vw, 3.3rem);
position: relative;
z-index: 5;
}
.cmn_contact-detail {
position: relative;
}
#cmn_contact .cmn_contact-head .en {
font-size: min(17.3vw, 12rem);
line-height: 1;
margin-bottom: .1em;
}
.cmn_contact-btn {
display: grid;
grid-gap: min(4.25vw, 22px);
}
.cmn_contact-btn .linkBtn .linkBtn-inner {
min-width: 13em;
text-align: left;
}
.cmn_contact-btn .linkBtn .tel_no {
font-size: 1.5em;
letter-spacing: .06em;
}
.cmn_contact-btn .linkBtn .icon {
filter: brightness(0) invert(10);
margin-right: 1em;
}
#cmn_contact .cmn_contact-btn .linkBtn .arrow::before {
background: transparent;
border: solid 1px #fff;
}
#cmn_contact .cmn_contact-btn .linkBtn .arrow::after {
filter: brightness(0) invert(10);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1080.0px) {
.cmn_contact-wrapper::after {
right: -3%;
top: min(12vw, 100px);
width: min(32vw, 250px);
height: min(15vw, 100px);
}
.cmn_contact-head {
margin-bottom: min(8.5vw, 40px);
}
.cmn_contact-detail {
display: grid;
grid-gap: min(8.5vw, 40px);
padding-bottom: min(8vw, 50px);
}
.cmn_contact-text {
width: calc(100% + 1em);
}
.cmn_contact-btn .linkBtn {
width: min(78vw, 500px);
}
.cmn_contact-btn .linkBtn .icon {
margin-right: .5em;
}
.cmn_contact-btn .linkBtn .tel_no {
font-size: 1.2em;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 1080.1px) {
.cmn_contact-wrapper::after {
right: 55%;
bottom: 30px;
width: min(20vw, 250px);
height: min(10vw, 120px);
}
.cmn_contact-detail {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
padding-bottom: min(10vw, 130px);
}
.cmn_contact-text {
padding: 2em 0;
width: min(45vw, 500px);
}
.cmn_contact-btn .linkBtn {
letter-spacing: .05em;
width: min(40vw, 500px);
}
}
@media (hover: hover) {}
/*====================================================
////id | cmn_message
====================================================*/
.cmn_message {
display: flex;
align-items: center;
min-height: min(58.5vw, 650px);
position: relative;
}
#cmn_contact + .cmn_message::before {
background: #fff;
content: '';
display: block;
margin: auto;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 52%;
}
.cmn_message-bg {
background: no-repeat center / cover;
border-radius: 0 min(4vw, 50px) min(4vw, 50px) 0;
position: absolute;
top: 0;
left: 0;
width: 95%;
height: 100%;
}
.cmn_message-text {
color: #fff;
font-size: min(4.8vw, 3rem);
text-align: center;
text-shadow: 0 0 1em #0F5F84;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769.1px) {
}
@media (hover: hover) {}
/*====================================================
////class .pagetop
====================================================*/
.pagetop {
font-size: 14px;
display: none;
position: fixed;
bottom: 15px;
right: 15px;
width: 50px;
height: 50px;
z-index: 800000;
/* border: solid 1px*/
}
.pagetop.stop {
position: absolute;
top: -70px;
bottom: auto;
}
.pagetop a {
background: var(--color_1);
border-radius: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
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:hover {
opacity: 1;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {}
@media screen and (min-width:1290px) {}
@media (hover: hover) {
.pagetop a:hover .arrow::after {
transform: none;
}
}
/*====================================================
////id | footer
====================================================*/
footer {
overflow: hidden;
position: relative;
z-index: 800000;
}
.footer-inner {
padding: min(13vw, 70px) 0;
}
.footer-logo {
width: min(50vw, 150px);
}
.footer-sns {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 1em;
}
.footer-sns img {
filter: invert(10);
width: 40px;
}
.footer-free {
line-height: 1.6;
margin-top: 1em;
}
.footer-menu {
display: flex;
gap: min(5vw, 58px);
flex: 1;
}
.footer-menu .menu {
display: grid;
grid-gap: .8em;
}
.footer-menu .sub-menu {
display: grid;
grid-gap: .6em;
margin-top: .6em;
}
.footer-menu .sub-menu li {
padding-left: 1.5em;
position: relative;
}
.footer-menu .sub-menu li::before {
border-top: solid 1px #fff;
content: '';
display: block;
margin: auto;
position: absolute;
top: .7em;
left: 0;
width: .8em;
height: 0;
}
/* .footer-menu .menu a {
padding-right: 1.3em;
} */
.footer-menu .menu a::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;
right: -.7em;
bottom: 0;
transition: .2s ease-in-out;
width: .8em;
height: .8em;
}
.footer-btn {
display: grid;
grid-gap: min(2vw, 26px) min(3.2vw, 20px);
place-content: baseline;
}
.footer-btn a {
background: rgba(255, 255, 255, 0);
border: solid 1px var(--s_color);
border-radius: 3em;
color: var(--s_color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
line-height: 1.3;
}
footer .copyright {
font-size: 10px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1080.0px) {
.footer-wrapper {
display: grid;
grid-gap: min(12vw, 60px);
margin: auto;
max-width: 600px;
}
.footer-information {
display: grid;
/* grid-gap: 20px; */
place-items: center;
}
.footer-menu {
justify-content: space-evenly;
}
.footer-btn {
display: grid;
grid-gap: min(3.2vw, 40px);
grid-template-columns: 1fr 1fr;
justify-content: center;
}
.footer-btn a {
min-height: 3.6em;
width: 100%;
}
}
@media screen and (max-width: 769.0px) {
.footer-menu {
display: grid;
grid-gap: min(10.5vw, 40px) min(5vw, 40px);
grid-template-columns: auto auto;
justify-content: space-evenly;
}
}
/* ////////// PC ////////// */
@media print,screen and (min-width: 1080.1px) {
.footer-wrapper {
display: flex;
gap: min(4vw, 50px);
}
.footer-menu {
flex: 1;
justify-content: flex-end;
}
.footer-btn a {
min-height: 5em;
width: min(25vw, 300px);
}
}
@media print,screen and (min-width: 1290.1px) {
.footer-btn {
margin-left: 50px;
}
}
@media (hover: hover) {
.footer-menu .menu a:hover {
opacity: 1;
}
.footer-menu .menu a:hover::after {
opacity: .8;
right: -1.2em;
}
.footer-btn a:hover {
background: rgba(255, 255, 255, 1);
}
}
.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) {}