/*
Theme Name: vs_original
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: 繧ｦ繧｣繧ｸ繧ｧ繝�ヨ縺ｮCSS繧偵→繧翫∪縺ｨ繧√※縺�∪縺吶�
Version: 1.0.0
*/
/*-------------------------------
縲縲繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ
-------------------------------*/
.loadingArea {
width: 100vw;
height: 100vh;
transition: all 1s;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
opacity: 1;
visibility: visible;
background: var(--bgcolor-05);
}
.loadingArea.is-active {
opacity: 0;
visibility: hidden;
}
.loadingArea .catch {
width: 100vw;
height: 100vh;
transition: all 1s;
z-index: 9999;
display: grid;
place-content: center;
/*align-items: center;
justify-content: center;*/
opacity: 0;
visibility: hidden;
background: var(--bgcolor-05);
}
.loadingArea .catch.is-active {
opacity: 1;
visibility: visible;
}
.loadingArea .flexBox {
display: flex;
gap: 0 5px;
}
.loadingArea .opacityWords {
animation: opacityWords 1s ease forwards;;
opacity: 0;
}
@keyframes opacityWords{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.loadingArea .opacityWords.first { animation-delay: 0.5s; }
.loadingArea .opacityWords.second { animation-delay: 1.3s; }
.loadingArea .opacityWords.third { animation-delay: 2.1s; }
.loadingArea .opacityWords.fourth { animation-delay: 3s; }
/*-------------------------------
縲縲繝倥ャ繝繝ｼ
-------------------------------*/
.headerArea {
padding: 0 0 0 20px;
background: var(--bgcolor-02);
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
/* TOP蟆ら畑CSS */
.home .headerArea {
position: sticky;
top: 0;
}
.home .subHeader {
display: none;
}
/**/
.subHeader {
position: fixed;
z-index: 20;
top: 0;
left: 0;
}
.headerArea .flexBox {
display: flex;
justify-content: space-between;
align-items: center;
}
.headerArea .navList {
display: flex;
align-items: center;
}
.headerArea .navList > li {
padding: 15px;
}
.headerArea .navList > li > a::after {
display: none;
}
.headerArea .navList a {
width: fit-content;
}
.headerArea .navList a:hover {
color: var(--thcolor-02);
}
.headerArea .wrapCont {
position: relative;
width: fit-content;
}
.headerArea .wrapCont p {
cursor: pointer;
}
.headerArea .forPc .dropCont {
visibility: hidden;
opacity: 0;
transition: all 0.3s;
position: absolute;
top: 55px;
left: -35px;
display: grid;
padding: 20px 30px;
background: var(--bgcolor-02);
gap: 20px;
display: grid;
gap: 15px;
border: solid 1px var(--bgcolor-05);
}
.headerArea .forPc .aboutus {
width: 132%;
}
.headerArea .forPc .service {
width: 230%;
}
.headerArea .forPc .contactMenu {
display: none;
}
.headerArea .arrow::after {
font-size: 12px;
color: var(--thcolor-02);
border-color: var(--thcolor-02);
}
.headerArea .wrapCont p:hover {
color: var(--thcolor-02);
}
.headerArea .forPc .wrapCont:hover .dropCont {
visibility: visible;
opacity: 1;
z-index: 2;
box-shadow: 17px 19px 20px 0 rgba(247, 195, 140, 0.19);
}
.headerArea .contactBox {
background: var(--thcolor-02);
color: var(--bgcolor-02);
display: grid;
place-content: center;
padding: 30px 20px;
border: solid 1px var(--thcolor-02);
text-align: cenetr;
}
.headerArea .contactBox:hover {
background: var(--bgcolor-05);
color: var(--thcolor-02);
border-color: var(--bgcolor-05);
}
.headerArea .forSp {
display: none;
}
@media screen and (max-width: 1320px) {
.headerArea .navList > li {
padding: 25px 10px;
}
}
/*--繧ｹ繝槭�繝医ヵ繧ｩ繝ｳ繝｡繝九Η繝ｼ--*/
@media screen and (max-width: 1230px) {
.headerArea {
padding: 0;
}
.headerArea .forSp {
display: block;
}
.headerArea .forPc {
display: none;
}
.headerArea .flexBox {
height: 65px;
z-index: 90;
position: fixed;
top: 0;
width: 100%;
}
.headerArea.headeractive .flexBox {
background: var(--bgcolor-02);
}
.headerArea .logoBox {
position: fixed;
top: 10px;
left: 10px;
width: fit-content;
height: fit-content;
z-index: 90;
}
.headerArea .logoBox img {
width: 150px;
}
.headerArea .hamBtn {
position: fixed;
background: var(--thcolor-02);
width: 65px;
height: 65px;
top: 0;
right: 0;
cursor: pointer;
}
.headerArea .hamBtn p {
width: 46%;
height: 2px;
background: var(--bgcolor-02);
}
.headerArea .hamBtn p,
.headerArea .hamBtn .txt {
position: absolute;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s;
}
.headerArea .hamBtn p:first-of-type { top: 14px; }
.headerArea .hamBtn p:nth-of-type(2) { top: 22px; }
.headerArea .hamBtn p:nth-of-type(3) { top: 30px; }
.headerArea .hamBtn.active p:first-of-type,
.headerArea .hamBtn.active p:last-of-type {
left: 0;
width: 52%;
}
.headerArea .hamBtn.active p:first-of-type {
top: 16px;
transform: translateY(6px) rotate(-45deg);
}
.headerArea .hamBtn.active p:nth-of-type(3) {
top: 28px;
transform: translateY(-6px) rotate(45deg);
}
.headerArea .hamBtn.active p:nth-of-type(2) { opacity: 0; }
.headerArea .hamBtn .txt {
color: var(--bgcolor-02);
font-size: 13px;
bottom: 8px;
text-align: center;
}
.headerArea .hamMenu {
position:fixed;
z-index: -1;
opacity: 0;
top:0;
left: 0;
width:100%;
transition: all 0.3s;
}
.headerArea .hamMenu.panelactive {
opacity: 1;
z-index:10;
height: 100vh;
background:var(--bgcolor-02);
}
.headerArea .hamMenu.panelactive .hamInner {
position: fixed;
z-index: 10;
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 100px 20px;
}
.headerArea .navList {
display: none;
position: absolute;
z-index: 10;
inset: 0;
margin: auto;
}
.headerArea .hamMenu.panelactive .navList {
display: grid;
position: relative;
}
.headerArea .hamMenu .navList > li {
border-bottom: solid 2px var(--bgcolor-05);
width: 100%;
}
.headerArea .navList > li > a::after {
display: grid;
}
.headerArea .hamMenu .wrapCont p {
padding: 0 0 20px;
width: fit-content;
}
.headerArea .hamMenu .dropCont {
padding: 0 0 10px 20px;
display: grid;
gap: 20px;
}
.headerArea .flowArea {
position: relative;
inset: 0;
opacity: 1 !important;
margin: 40px auto 0;
display: none;
}
.headeractive .flowArea {
display: block;
}
.headerArea .flowArea .menbers {
display: flex;
border-radius: 10px;
border-width: 5px;
width: fit-content;
padding: 15px;
margin: auto;
flex-direction: inherit;
}
.headerArea .flowArea .txt {
writing-mode: inherit;
font-size: 17px;
}
}
@media screen and (max-width: 780px) {
.headerArea .flowArea .menbers {
padding: 15px 7px;
min-width: 250px;
justify-content: center;
}
}
/*-------------------------------
縲縲繝輔ャ繧ｿ繝ｼ
-------------------------------*/
.footerArea {
/*margin: 190px 0 0;*/
padding: 60px 20px 0;
background: var(--bgcolor-05);
}
.footerArea .flexBox {
max-width: var(--contwide-05);
margin: auto;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 0 60px;
}
.footerArea .navList {
display: grid;
align-items: baseline;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 80px 0;
}
.footerArea .navList > li {
color: var(--thcolor-01);
border-color: var(--thcolor-01);
}
.footerArea .dropCont {
display: grid;
gap: 15px;
padding: 20px 0 0 15px;
}
.footerArea .dropCont > li,
.footerArea .dropCont a {
color: var(--thcolor-05);
border-color: var(--thcolor-05);
}
.footerArea .arrow::after,
.footerArea .navList > li:first-of-type {
display: none;
}
.footerArea .secondBox {
padding: 20px 0 30px;
border-top: solid 1px var(--bgcolor-03);
}
.footerArea .guidBox {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.footerArea .guidBox a {
font-size: 15px;
}
.footerArea small {
font-size: 14px;
}
.footerArea a {
width: fit-content;
height: fit-content;
}
.footerArea a:hover {
color: var(--thcolor-02);
}
.footerArea .snsBox {
width: fit-content;
justify-content: end;
padding: 0 10px 20px;
display: flex;
gap: 10px;
align-items: flex-end;
}
.footerArea .comBanner li{
max-width: 270px;
height: fit-content;
}
.footerArea .snsIcon li {
max-width: 40px;
height: fit-content;
}
.footerArea .linkBox{
justify-content: space-between;
}
@media screen and (max-width: 1132px) {
.footerArea .linkBox{
flex-direction: column;
align-items: center;
justify-content: center;
}
.footerArea .comBanner{
flex-wrap: wrap;
}
.footerArea .comBanner li{
width: 100%;
}
}
/*
.footerArea .snsBox {
justify-content: end;
padding: 0 10px 20px;
}
.footerArea .snsBox li {
max-width: 40px;
height: fit-content;
}
*/
.footerArea a img {
transition: all 0.3s;
}
.footerArea a:hover img {
opacity: 0.5;
}
@media screen and (max-width: 1280px) {
.footerArea {
padding: 60px 20px 40px;
}
.footerArea .navList {
grid-template-columns: 1fr 1fr 1fr;
}
.footerArea .secondBox {
flex-direction: column;
gap: 50px;
}
.footerArea small {
text-align: center;
}
}
@media screen and (max-width: 1080px) {
.footerArea .firstBox {
justify-content: center;
}
.footerArea .navList {
display: none;
}
.footerArea .snsBox {
justify-content: center;
}
/*
.footerArea .guidBox a:nth-of-type(2) {
width: 65%;
}
*/
.footerArea small span {
display: block;
}
}
@media screen and (max-width: 580px) {
.footerArea .guidBox a {
font-size: 14px;
}
}
/*-------------------------------
縲縲繝壹�繧ｸ繧ｿ繧､繝医Ν
-------------------------------*/
.pagettlArea {
padding: 130px 20px 100px;
}
.pagettlArea .innerWide {
display: flex;
align-items: baseline;
gap: 25px 80px;
}
.pagettlArea .descBox {
line-height: 2.5;
font-weight: 500;
font-size: 18px;
}
.pagettlArea .pageTtl {
width: fit-content;
}
.pagettlArea .pageTtl .eng {
font-size: 100px;
color: var(--thcolor-02);
font-family: var(--ffamiliy-01);
display: flex;
line-height: 1.5;
overflow: hidden;
}
.pagettlArea .pageTtl .eng span:first-of-type {
text-transform: capitalize;
}
.pagettlArea .eng span{
display: block;
opacity: 0.4;
transform: translateY(100%);
}
.pagettlArea .space {
padding: 10px;
}
/*
.pagettlArea .pageTtl .eng::first-letter {
text-transform: capitalize;
}
*/
.pagettlArea .pageTtl .jp {
text-align: center;
font-size: 26.5px;
display: block;
font-weight: 600;
}
@media screen and (max-width: 1320px) {
.pagettlArea .innerWide {
flex-direction: column;
}
.pagettlArea .descBox {
align-self: end;
}
}
@media screen and (max-width: 1080px) {
.pagettlArea {
padding: 90px 20px 40px;
}
.pagettlArea .innerWide {
gap: 10px 80px;
}
.pagettlArea .pageTtl .eng {
font-size: 55px;
}
.pagettlArea .pageTtl .jp {
font-size: 23px;
text-align: unset;
padding: 0 0 0 10px;
}
.pagettlArea .space {
padding: 5px;
}
.pagettlArea .descBox {
font-size: 16.5px;
display: grid;
gap: 20px;
}
}
@media screen and (max-width: 580px) {
.pagettlArea .innerWide {
gap: 45px 80px;
}
}
.pagettlArea .eng span[data-emergence=hidden]{
transform: translateY(100%);
}
.pagettlArea .eng span[data-emergence=visible] {
animation: transIn 0.3s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes transIn{
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/*-------------------------------
縲縲繝壹�繧ｸ蜀�Μ繝ｳ繧ｯ
-------------------------------*/
.pagemapArea {
padding: 0 20px 90px;
}
.pagemapArea .flexBox {
display: flex;
gap: 0 30px;
}
.pagemapArea a {
display: flex;
gap: 0 5px;
align-items: center;
font-size: 23px;
font-weight: 600;
}
.pagemapArea a:hover {
color: var(--thcolor-02);
}
.pagemapArea .bar::after {
content: '';
display: inline-block;
height: 70px;
width: 2px;
background: var(--bgcolor-03);
margin: 0 0 0 25px;
}
.pagemapArea .bar:last-of-type::after {
display: none;
}
@media screen and (max-width: 1200px) {
.pagemapArea .flexBox {
gap: 0 15px;
}
.pagemapArea a {
font-size: 19.5px;
gap: 0 5px;
}
.pagemapArea .bar::after {
margin: 0 0 0 12px;
}
.pagemapArea a svg {
width: 30px;
}
}
@media screen and (max-width: 980px) {
.pagemapArea {
padding: 20px;
margin: 0 0 60px;
background: var(--bgcolor-05);
}
.pagemapArea .flexBox {
flex-direction: column;
gap: 10px 0;
}
.pagemapArea a {
font-size: 16.5px;
gap: 0 5px;
width: fit-content;
}
.pagemapArea a svg {
width: 30px;
}
.pagemapArea .bar::after {
display: none;
}
.pagemapArea a::before {
content: '';
display: inline-block;
height: 2px;
width: 25px;
background: var(--bgcolor-03);
margin: 0 10px 0 0;
}
}
/*-------------------------------
縲縲霑ｽ蠕薙Γ繝九Η繝ｼ
-------------------------------*/
.custom-html-widget > .flowArea {
position: fixed;
top: 17%;
left: 0;
transition: all 0.3s;
z-index: 50;
}
.flowArea a {
border-radius: 0 10px 10px 0;
padding: 15px 12px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.flowArea i {
font-size: 25px;
transition: all 0.3s;
}
.flowArea .calender {
background: var(--thcolor-02);
border: solid 1px var(--thcolor-02);
color: var(--bgcolor-02);
}
.flowArea .calender i {
padding: 0 0 0 2px;
}
.flowArea .gray {
background: var(--bgcolor-04);
border: solid 1px var(--bgcolor-04);
}
.flowArea .menbers i {
padding: 0 0 0 2px;
}
.flowArea .txt {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.flowArea .calender:hover {
background: var(--bgcolor-02);
color: var(--thcolor-02);
}
.flowArea .gray:hover {
background: var(--bgcolor-02);
}
.flowArea .contact {
display: none;
}
@media screen and (min-width: 1229px) {
.home .custom-html-widget > .flowArea {
opacity: 0;
}
.home .custom-html-widget > .flowArea.active {
opacity: 1;
}
}
@media screen and (max-width: 1230px) {
.custom-html-widget > .flowArea {
top: unset;
left: 0;
right: 0;
bottom: 0;
display: flex;
height: fit-content;
}
/*
.home .flowArea {
opacity: 1;
}
*/
.flowArea a {
width: 100%;
height: fit-content;
border-radius: 5px 3px 0 0;
flex-direction: inherit;
padding: 10px;
}
.flowArea .txt {
writing-mode: horizontal-tb;
font-size: 16px;
}
.flowArea .contact {
display: flex;
}
.flowArea .menbers {
display: none;
}
}
@media screen and (max-width: 580px) {
.flowArea a {
gap: 5px;
padding: 10px 5px;
}
}
/*-------------------------------
縲縲繝壹�繧ｸ繝九�
-------------------------------*/
.kneeArea {
padding: 0 20px;
width: 100%;
border-top: solid 15px var(--bgcolor-05);
margin: 120px 0 0;
}
.kneeArea .tileTtl {
padding: 50px 0 30px;
}
.kneeArea .gridBlock {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
.kneeArea .gridBlock a {
width: fit-content;
font-size: 20px;
}
.kneeArea .gridBlock a:hover {
color: var(--thcolor-02);
}
.kneeArea .arrow::after {
color: var(--thcolor-02);
font-size: 12px;
}
@media screen and (max-width: 1080px) {
.kneeArea .gridBlock {
gap: 30px 50px;
}
.kneeArea .gridBlock a {
font-size: 16.5px;
}
}
/*-------------------------------
縲縲蜈ｱ騾壹き繝�ざ繝ｪ繝ｪ繝ｳ繧ｯ
-------------------------------*/
.systemArea.categoryLink .innerBlock {
display: grid;
gap: 25px;
}
.categoryLink .boxFlex a {
font-size: 20px;
}
.categoryLink .catBox a:hover {
color: var(--thcolor-02);
}
.categoryLink .catBox.arrow::after {
font-size: 12px;
}
.categoryLink .arrow::after {
font-size: 12px;
color: var(--thcolor-02);
}
.categoryLink .whiteBtn {
color: var(--thcolor-02);
border: solid 1px var(--thcolor-02);
}
.categoryLink .whiteBtn::before {
content: '#';
}
@media screen and (max-width: 810px) {
.categoryLink .boxFlex a {
font-size: 15px;
}
}
/*-------------------------------
縲縲繝昴せ繝医ル繝ｼ
-------------------------------*/
.systemArea.postKnee {
padding: 120px 20px 0;
}
.systemArea.postHeader {
padding: 0 20px 100px;
}
/*-------------------------------
縲縲繧ｯ繝�く繝ｼ繝励Λ繧ｰ繧､繝ｳ
-------------------------------*/
.cookie-notice-container {
padding: 15px !important;
}
.cn-text-container,
.cn-buttons-container {
font-size: 0.9rem;
font-weight: 600;
font-family: var(--ffamiliy-01);
}
.cn-close-icon::before,
.cn-close-icon::after {
background-color: #fff !important;
}
/*-------------------------------
縲縲CTA
-------------------------------*/
.ctaArea {
margin: 190px 0 10px;
padding: 50px 10px;
}
.ctaArea .tileTtl .wrap {
margin: auto;
text-align: center;
}
.ctaArea .txtBox {
text-align: center;
padding: 20px 0 30px;
line-height: var(--wp--preset--line-height);
}
.ctaArea .ctaBtn {
color: var(--bgcolor-02);
background: var(--thcolor-02);
border-radius: 50px;
border: solid var(--thcolor-02) 2px;
padding: 20px 40px;
font-weight: 600;
width: fit-content;
font-size: 24px;
margin: auto;
text-align: center;
}
.ctaArea .ctaBtn:hover {
color: var(--thcolor-02);
background: var(--bgcolor-02);
}
@media screen and (max-width: 780px){
.ctaArea .txtBox {
display: grid;
gap: 20px;
}
.ctaArea .ctaBtn {
width: 100%;
padding: 20px;
font-size: 20px;
}
}