@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-family: var(--font_family);
font-weight: 400;
letter-spacing: .05em;
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(3.734vw, 1.6rem);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
body, button, input, select, optgroup, textarea {
font-size: min(2vw, 1.6rem);
}
}
body {
background: #ffffff;
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]) ,
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: 10;
}
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: .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;
}
.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(15vw, 120px) 0;
position: relative;
width: calc(100% - (var(--innerBox_margin) * 2));
z-index: 2;
}
.innerBox.is-style-padding-top-x_large {
padding-top: min(20vw, 180px);
}
.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(20vw, 180px);
}
.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(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:1200px) {
.display-middle {
display: block;
}
}
@media screen and (min-width:1200px) {
.hidden-wide {
display: none;
}
.display-wide {
display: block;
}
}
@media screen and (min-width:1610px) {
.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.02);
}
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: .3s ease-in-out;
width: .5em;
height: .6em;
}
.btn_wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 100%;
}
.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 .arrow,
main .is-style-outline .wp-block-button__link .arrow,
.linkBtn-small .arrow {
/* width: 1.8em;
height: 1.8em; */
}
.wp-block-button .btn_wrap,
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: .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 {
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: .4em 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:before {
background: transparent;
content: '\203B';
top: .1em;
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{
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: .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;
}
.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(--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;
}
.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: .3s 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;
}
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) {
}
@media print, screen and (min-width: 769px) {
.txt-center-pc {
text-align: center;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--f_serif);
font-weight: 400;
line-height: 1.6;
}
h1 {font-size: 2.2em;}
/* ////////// mobile ////////// */
@media screen and (max-width: 991.9px) {
h2 {font-size: min(6vw, 2.8rem);}
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: 992px) {
h2 {font-size: min(3.0vw, 3.3rem);}
h3 {font-size: min(2.8vw, 2.6rem);}
h4 {font-size: min(2.6vw, 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) {
}
.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 {
display: flex;
align-items: center;
height: min(7vw, 90px);
position: fixed;
top: 0;
left: 3vw;
transition: opacity .3s ease-in-out;
z-index: 999990;
}
header {
transition: .3s ease-in-out;
position: relative;
z-index: 888888;
}
header .header-inner {
display: flex;
align-items: center;
margin: auto;
height: 100%;
width: 96%;
/* max-width: 1200px; */
}
header img {
margin: 0;
}
header .header-pc_menu {
display: flex;
align-items: center;
gap: min(3vw, 56px);
justify-content: flex-end;
flex: 1;
}
header .header-pc_menu > div {
height: 100%;
}
header .header-pc_menu .menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0 min(1.3vw, 50px);
font-size: min(1.3vw, 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: .3s 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: .3s 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: .3s 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-pc_menu-cta {
display: flex;
align-items: center;
gap: min(1.5vw, 30px);
}
.header-pc_menu-tel {
font-size: min(2vw, 2.4rem);
}
.header-pc_menu-tel .tel {
color: var(--black);
}
.header-pc_menu-contact .contactBtn {
font-size: min(1.3vw, 1.6rem);
letter-spacing: 0;
}
.header-pc_menu-contact .contactBtn .icon-mail {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
header .menu-outer {
z-index: 30;
}
.header-menuBtn {
cursor: pointer;
display: grid;
grid-template-rows: 1fr auto;
mix-blend-mode: difference;
overflow: hidden;
position: fixed;
top: min(5vw, 20px);
right: min(5vw, 20px);
transition: .3s ease-in-out;
width: min(12.8vw, 60px);
height: min(12.8vw, 60px);
z-index: 999995;
}
.header-menuBtn .humberger {
filter: invert(10);
margin: 0;
position: relative;
transition: opacity .3s ease-in-out;
width: 100%;
height: 100%;
}
.header-menuBtn .humberger span {
border-top: solid 2px;
content: '';
margin: auto;
opacity: 1;
position: absolute;
top: 0;
bottom: 0;
transition: .3s ease-in-out;
width: 100%;
height: 0;
}
.header-menuBtn .humberger span:nth-child(1) {
border-color: var(--color_1);
right: 0;
transform: translateY(-5px);
}
.header-menuBtn .humberger span:nth-child(2) {
border-color: var(--color_2);
left: 0;
transform: translateY(5px);
width: 62.5%;
}
header + .maskBox {
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: 888887;
}
header .menuBox {
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(40px) brightness(1.2);
border-radius: 3px;
margin: auto;
opacity: 0;
overflow-y: auto;
padding: 12px 0 min(10vw, 40px);
pointer-events: none;
position: fixed;
top: 16px;
left: 0;
right: 0;
transition: .5s ease-in-out;
transform: translateY(-100px);
width: 90%;
height: calc(100vh - 32px);
height: calc(100svh - 32px);
z-index: 999999;
overflow-y: scroll;
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
header .menuBox::-webkit-scrollbar { /* Chrome, Safari 対応 */
display:none;
}
.menu-open .header-logo {
opacity: 0;
}
.menu-open .header-menuBtn {
display: none;
transition: .3s ease-in-out;
}
.menu-open .header-menuBtn .humberger span {
border-top-width: 2px;
right: 0;
}
.menu-open .header-menuBtn .humberger span:nth-child(1) {
bottom: 0;
transform: rotate(-160deg);
}
.menu-open .header-menuBtn .humberger span:nth-child(2) {
border-color: var(--color_1);
top: 0;
right: 0;
transform: rotate(160deg);
width: 100%;
}
.menu-open .header-menuBtn-text {
opacity: 0;
height: 0;
}
.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;
width: 80%;
}
header .menuBox-first {
display: flex;
justify-content: space-between;
margin: 0 -5%;
width: 110%;
}
header .menu_logo_img {
height: min(12.8vw, 60px);
}
header .menuBox-closeBtn {
cursor: pointer;
position: relative;
width: min(12.8vw, 60px);
height: min(12.8vw, 60px);
}
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: 100%;
height: 0;
}
header .menuBox-closeBtn::before {
transform: rotate(-160deg);
}
header .menuBox-closeBtn::after {
transform: rotate(160deg);
}
header .menuBox-content {
margin: auto;
max-width: 450px;
}
header .menu-outer .menu-main {
margin-bottom: min(5vw, 40px);
}
header .menuBox .menu-main .menu > li {
border-bottom: solid 1px #BFBFBF;
padding: 0;
position: relative;
width: 100%;
}
header .menuBox .menu-main .menu > li > a {
display: block;
padding: 1em 1em 1em 0;
position: relative;
}
header .menuBox li + li {
margin-top: 0;
}
header .menuBox .menu li a {
letter-spacing: .1em;
position: relative;
transition: letter-spacing .2s ease-in-out;
}
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: .3s 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 .sub-menu-btn {
cursor: pointer;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 3.8em;
}
.menu .menu-item.no_link > a {
pointer-events: none;
}
.header-menuBox-tel {
margin-bottom: min(3vw, 20px);
}
.header-menuBox-tel .tel-link {
border: solid 1px #BFBFBF;
border-radius: 3px;
display: block;
font-size: min(6.4vw, 3rem);
padding: .5em;
text-align: center;
}
.header-menuBox-tel .tel {
color: var(--black);
}
.header-menuBox-tel .text {
color: var(--color_2);
}
.header-menuBox-contact .contactBtn {
border: solid 1px #BFBFBF;
border-radius: 3px;
width: 100%;
max-width: none;
min-height: 3.8em;
}
/* ////////// mobile ////////// NOTE header mobile */
@media screen and (max-width: 959.9px) {
header ,
header .headerBox {
/* height: calc(min(20vw, 100px) + 40px); */
height: 80px;
}
header.hide {
top: -130px;
}
.header-logo {
mix-blend-mode: difference;
top: 18px;
height: min(12.8vw, 60px);
}
.header-logo_img {
filter: invert(10);
height: 40px;
}
header .header-pc_menu {
display: none;
}
}
@media screen and (max-width:768px) {
.header-pc_menu .header-contact {
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: 960px) {
header {
height: min(7vw, 90px);
}
header .headerBox {
backdrop-filter: blur(3px);
background: rgba(255, 255, 255, .8);
position: fixed;
left: 0;
right: 0;
transition: .3s ease-in-out;
width: 100%;
height: min(7vw, 90px);
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-logo_img {
height: min(5vw, 53px);
}
header .header-logo a:hover {
color: inherit;
}
.header-menuBtn ,
header .menu-outer {
display: none;
}
}
@media screen and (min-width:1500px) {
header .header-pc_menu .menu {
letter-spacing: .1em;
max-width: none;
}
.header-pc_menu .header-contact {
gap: 24px;
}
.header-pc_menu-contact .contactBtn {
letter-spacing: .05em;
}
}
@media screen and (min-width:1800px) {
header .header-pc_menu .menu {
gap: 0 56px;
max-width: none;
}
}
@media (hover: hover) {
header .headerBox:hover {
background: rgba(255, 255, 255, 1);
}
header .header-pc_menu .sub-menu a:hover {
color: var(--color_1);
opacity: 1;
}
.header-menuBtn:hover .humberger span:nth-child(1) {
width: 62.5%;
}
.header-menuBtn:hover .humberger span:nth-child(2) {
width: 100%;
}
header .menuBox .menu a:hover {
letter-spacing: .18em;
opacity: 1;
}
header .menuBox .menu li a:hover::after {
right: 0;
}
}
/*====================================================
////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: var(--l_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.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;
cursor: pointer;
opacity: .6;
transition: opacity .2s ease-in-out;
width: min(3vw, 30px);
height: min(3vw, 30px);
}
#contents .swiper-button-prev {
left: 0;
}
#contents .swiper-button-next {
right: 0;
}
#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: .3s ease-in-out;
width: 70%;
height: 40%;
}
#contents .swiper-button-prev::after {
transform: scale(-1, 1);
}
#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_1);
}
#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;
}
/* ////////// 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;
}
}
/*====================================================
////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 {
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);
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;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 1em;
transition: .2s ease-in-out;
width: .4em;
height: 1em;
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(--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 {
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
====================================================*/
/* p + .wp-block-table ,
.wp-block-table + .wp-block-table {
margin: 1.5em 0;
} */
table ,
.wp-block-table table {
background: transparent;
border-collapse: separate;
/* border: solid var(--color_4);
border-width: 1px 0 0 1px; */
border-spacing: 0;
line-height: 1.6;
/* overflow: hidden; */
vertical-align: middle;
width: 100%;
}
.wp-block-table table {
border-collapse: collapse;
}
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: 1.2em 1em;
}
table thead th ,
.wp-block-table thead th {
background: var(--l_gray);
border: none;
/* border: solid 1px var(--color_4); */
}
/* 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: #CFCFCF;
font-weight: 500;
text-align: left;
white-space: nowrap;
}
table td ,
.wp-block-table tr td {
background: transparent;
border: solid #CFCFCF;
border-width: 0 0 1px 0;
vertical-align: text-bottom;
}
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(--l_gray);
border: none;
/* border-top: solid 1px var(--color_4); */
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: 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%;
} */
/* ////////// 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: 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-bottom: solid 1px #CFCFCF; */
display: block;
font-size: 1.1em;
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 {
border: none;
/* padding: .6em 0; */
padding: 0 0 .5em;
/* 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: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(--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:1580px) {}
/*====================================================
////id | mapBox
====================================================*/
.mapBox > div {
overflow: hidden;
position: relative;
}
.mapBox iframe {
margin: auto;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.mapBox > div {
width: 100%;
height: min(80vw, 400px);
}
}
@media screen and (max-width:580px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.mapBox > div {
width: 100%;
height: 400px;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1580px) {
}
/*====================================================
////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 {
line-height: 1.6;
transition: .3s ease-in-out;
}
.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(--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) {}
/*====================================================
////class .pagetop
====================================================*/
.pagetop {
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:1580px) {
}
@media (hover: hover) {
.pagetop a:hover .arrow::after {
transform: none;
}
}
/*====================================================
////id | footer
====================================================*/
footer {
background: var(--l_gray);
overflow: hidden;
position: relative;
z-index: 800000;
}
.footer-group_com-title {
margin-bottom: .5em;
}
.footer-group_com-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footer-group_com-item {
max-width: min(calc(50% - 4px), 200px);
}
.footer-group_com img {
max-height: 50px;
}
footer .copyright {
font-size: 10px;
font-weight: 400;
margin: min(7vw, 30px) auto 0;
text-align: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
footer .footer-inner {
padding: min(15vw, 70px) 0 min(7vw, 30px);
}
.footer-main {
text-align: center;
}
.footer-information {
display: grid;
place-items: center;
}
.footer-logo img {
height: min(27vw, 130px);
}
.footer-free {
margin-top: min(8vw, 40px);
}
.footer-group_com {
margin-top: min(8vw, 40px);
}
.footer-group_com-wrapper {
justify-content: center;
}
.footer-menu-mob {
border-top: solid 1px #dcdcdc;
display: flex;
font-size: min(3.2vw, 1.6rem);
margin: 27px calc(var(--innerBox_margin) * -1);
position: relative;
width: calc(100% + (var(--innerBox_margin) * 2));
}
.footer-menu-mob::before {
border-left: solid 1px #dcdcdc;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
}
.footer-menu-mob > div {
flex: 1;
}
.footer-menu-mob li {
border-bottom: solid 1px #dcdcdc;
}
.footer-menu-mob li + li {
margin: 0;
}
.footer-menu-mob a {
display: block;
padding: 1em var(--innerBox_margin) 1.1em;
}
.footer-menu-pc {
display: none;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
footer .footer-inner {
padding: min(10vw, 120px) 0 min(5vw, 60px);
}
.footer-wrapper {
display: grid;
grid-gap: 40px min(5vw, 50px);
grid-template-columns: 1fr auto;
grid-template-rows: 1fr auto;
font-size: min(1.3vw, 1.6rem);
}
.footer-main {
display: grid;
grid-gap: min(7vw, 100px);
grid-template-rows: 1fr auto;
grid-row: 1 / 3;
}
.footer-information {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px 30px;
}
.footer-logo {
}
.footer-logo_img {
width: min(8vw, 90px);
}
.footer-menu-pc {
display: flex;
gap: min(4vw, 95px);
justify-content: flex-end;
}
.footer-menu-pc .menu li + li {
margin-top: .7em;
}
.footer-menu-pc .menu a {
padding: .3em 0;
}
.footer-menu-pc .menu a::before {
border-bottom: solid 2px #707070;
content: '';
display: block;
margin: auto;
position: absolute;
right: 0;
bottom: 0;
transition: .3s ease-in-out;
width: 0;
height: 0;
z-index: -1;
}
footer .copyright {
margin-right: 0;
text-align: right;
}
.footer-menu-mob {
display: none;
}
}
@media (hover: hover) {
.footer-group_com-item a:hover {
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .15));
opacity: 1;
}
.footer-menu-pc .menu a:hover {
opacity: 1;
}
.footer-menu-pc .menu a:hover::before {
opacity: 1;
left: 0;
right: auto;
width: 100%;
}
.footer-menu-mob a:hover {
background-color: rgba(255, 255, 255, .1);
opacity: 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) {}