@charset "UTF-8";
   .reformmenu-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: clamp(20px, 4vw, 40px);
}
.reformmenu-list .reformmenu-item {
font-family: "Kiwi Maru", serif;
font-size: clamp(1.2rem, 1.5vw, 3rem);
text-align: center;
width: 24.5%;
}
.reformmenu-list .reformmenu-item:nth-of-type(-n+3) {
width: 32.8333333333%;
}
.reformmenu-list .reformmenu-item:nth-of-type(n+4) {
margin-top: 1%;
}
@media screen and (max-width: 767px) {
.reformmenu-list .reformmenu-item {
width: 49.75%;
}
}
.reformmenu-list .reformmenu-item a {
display: block;
background: #fff;
padding: 0 0 1em;
border-radius: 10px;
transition-duration: 0.4s;
overflow: hidden;
width: 100%;
position: relative;
}
.reformmenu-list .reformmenu-item a::after {
background: #2b4740;
border-radius: 50%;
content: "";
display: block;
margin: auto;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
padding-top: 100%;
height: 0;
transform: translateY(-50%) scale(0.1);
transition: opacity 0.5s, transform 0s;
transition-delay: 0s, 0.4s;
}
.reformmenu-list .reformmenu-item a img {
position: relative;
z-index: 1;
width: 100%;
object-fit: cover;
aspect-ratio: 1.7777777778;
}
@media (hover: hover) {
.reformmenu-list .reformmenu-item a:hover:hover {
color: #fff;
}
.reformmenu-list .reformmenu-item a:hover:hover::after {
opacity: 1;
transform: translateY(-50%) scale(1.4);
transition-delay: 0s;
transition: opacity 0.8s, transform 0.6s ease-in-out;
}
.reformmenu-list .reformmenu-item a:hover:hover .item-icon {
fill: #fff;
}
.reformmenu-list .reformmenu-item a:hover:hover .item-ilst {
opacity: 0;
}
}
.reformmenu-list .reformmenu-item .item-icon, .reformmenu-list .reformmenu-item .item-ttl {
position: relative;
z-index: 1;
}
.reformmenu-list .reformmenu-item .item-icon {
fill: #343940;
width: 100%;
object-fit: scale-down;
aspect-ratio: 1.1739130435;
max-width: 90px;
transition-duration: 0.4s;
}
.reformmenu-list .reformmenu-item .item-ttl {
margin-top: 1em;
font-weight: normal;
border-bottom: 0;
}
.reformmenu-list .reformmenu-item .item-img-wrap {
position: relative;
}
.reformmenu-list .reformmenu-item .item-ilst {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #fff;
width: 100%;
height: 101%;
opacity: 1;
transition: 0.4s ease-in-out;
z-index: 4;
}
.reformmenu-list .reformmenu-item .item-ilst img {
width: auto;
aspect-ratio: auto;
}
.reformmenu-ideal .ideal-ttl {
font-family: "Kiwi Maru", serif;
font-weight: normal;
font-size: clamp(1.8rem, 2vw, 2.8rem);
letter-spacing: 0.1em;
position: relative;
margin: 1em 0;
}
.reformmenu-ideal .ideal-ttl::before {
content: "";
position: absolute;
top: calc(50% - 0.5px);
right: 0;
width: calc(100% - 12em);
height: 1px;
background: #aaa;
}
.ideal-body {
font-family: "Kiwi Maru", serif;
font-size: clamp(1.6rem, 2vw, 3rem);
}
@media screen and (min-width: 768px) {
.ideal-body {
display: flex;
justify-content: space-between;
}
}
.ideal-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.ideal-list {
width: 74.8%;
}
}
.ideal-list li {
width: 32.6666666667%;
text-align: center;
}
.ideal-list li:nth-of-type(n+4) {
margin-top: 1%;
}
@media screen and (max-width: 767px) {
.ideal-list li {
width: 49.75%;
}
.ideal-list li:nth-of-type(n+3) {
margin-top: 1%;
}
}
.ideal-list li a {
border-radius: 10px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 1em 0;
transition-duration: 0.4s;
overflow: hidden;
width: 100%;
position: relative;
}
.ideal-list li a::after {
background: #2b4740;
border-radius: 50%;
content: "";
display: block;
margin: auto;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
padding-top: 100%;
height: 0;
transform: translateY(-50%) scale(0.1);
transition: opacity 0.5s, transform 0s;
transition-delay: 0s, 0.4s;
}
@media (hover: hover) {
.ideal-list li a:hover:hover {
color: #fff;
}
.ideal-list li a:hover:hover::after {
opacity: 1;
transform: translateY(-50%) scale(1.4);
transition-delay: 0s;
transition: opacity 0.8s, transform 0.6s ease-in-out;
}
}
.ideal-list li .box-ttl {
position: relative;
z-index: 1;
font-weight: normal;
}
@media screen and (min-width: 768px) {
.reformmenu-flow {
width: 24.5%;
}
}
.reformmenu-flow a {
border-radius: 10px;
display: block;
width: 100%;
height: 100%;
background-color: #5a7069;
background-image: url(//www.w-kenso.com/wp/wp-content/themes/watanabekneso_renew//img/common/bg-flow.svg);
background-repeat: no-repeat;
background-size: 60%;
background-position: left -11% bottom -18%;
position: relative;
color: #fff;
padding: 0.5em 0 0;
transition-duration: 0.4s;
overflow: hidden;
width: 100%;
position: relative;
}
@media (hover: hover) {
.reformmenu-flow a:hover:hover {
background-color: #333;
}
}
@media screen and (max-width: 767px) {
.reformmenu-flow a {
padding: 2em 0 0;
aspect-ratio: 16/9;
font-size: 5vw;
}
}
.reformmenu-flow .flow-ttlEn {
position: absolute;
left: 0;
top: 0.1em;
width: 70%;
}
.reformmenu-flow .flow-ttlJa {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
-ms-text-orientation: upright;
text-orientation: upright;
font-weight: normal;
margin: 0 1em 0 auto;
display: block;
line-height: 1.2;
width: 2.5em;
}
.reformmenu-flow .flow-ttlJa span {
display: block;
padding: 3em 0 0;
}
.reformmenu-flow .flow-arw {
display: block;
position: absolute;
width: clamp(30px, 3vw, 37px);
right: 0.5em;
bottom: 0.5em;
}
.reformmenu-flow .flow-arw::before, .reformmenu-flow .flow-arw::after {
content: "";
height: 1px;
background: #fff;
display: block;
position: absolute;
}
.reformmenu-flow .flow-arw::before {
width: 100%;
bottom: 0;
right: 0;
}
.reformmenu-flow .flow-arw::after {
width: 8px;
transform: rotate(35deg);
right: 0;
bottom: 2px;
}
.sitemap-item {
margin-top: clamp(40px, 10vw, 100px);
}
.sitemap-item .item-ttl {
font-family: "Kiwi Maru", serif;
color: #2b4740;
font-weight: normal;
font-size: clamp(2.4rem, 2.4vw, 2.8rem);
border-bottom: 1px solid #ccc;
padding: 0 0 0.5em;
}
@media (hover: hover) {
.sitemap-item .item-ttl a:hover {
color: #2b4740;
}
}
.sitemap-item .item-child {
margin-top: clamp(20px, 4vw, 40px);
font-size: clamp(1.8rem, 2vw, 2rem);
}
@media screen and (min-width: 768px) {
.sitemap-item .item-child.row3 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.sitemap-item .item-child.row3::after {
content: "";
display: block;
width: 32%;
}
}
.sitemap-item .item-child.row3 li:nth-of-type(n+4) {
margin-top: 0.8em;
}
@media screen and (min-width: 768px) {
.sitemap-item .item-child.row3 li {
width: 32%;
}
}
@media screen and (max-width: 767px) {
.sitemap-item .item-child.row3 li:nth-of-type(n+2) {
margin-top: 0.8em;
}
}
.sitemap-item .item-child.column li:not(:last-child) {
margin-bottom: 0.8em;
}
.sitemap-item .item-child.lineC li {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
@media screen and (max-width: 767px) {
.sitemap-item .item-child.lineC li {
-webkit-line-clamp: 2;
}
}
.sitemap-item .item-child li a {
background-image: linear-gradient(#2b4740, #2b4740);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 0 2px;
transition: background-size 0.3s;
}
.sitemap-item .item-child li a::before {
content: "\f0da";
font-family: "Font Awesome 6 Free";
font-weight: 900;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: #2b4740;
margin-right: 0.2em;
}
@media (hover: hover) {
.sitemap-item .item-child li a:hover:hover {
color: #2b4740;
background-position: bottom left;
background-size: 100% 2px;
}
}
.sitemap-item .item-child li a .iconTB {
font-size: clamp(1.2rem, 1.4vw, 1.4rem);
margin-left: 0.2em;
}
@media screen and (min-width: 768px) {
.sitemapWrap.row2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
@media screen and (min-width: 768px) {
.sitemapWrap.row2 .row-block {
width: 48%;
}
}
@media screen and (min-width: 768px) {
.sitemapWrap.row3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sitemapWrap.row3::after {
content: "";
display: block;
width: 32%;
}
}
@media screen and (min-width: 768px) {
.sitemapWrap.row3 .row-block {
width: 32%;
}
}