@charset "UTF-8";

@media screen and (min-width: 1200px) {
.pcview {
display: block;
}
}
@media screen and (max-width: 1199px) {
.pcview {
display: none;
}
}
@media screen and (max-width: 769px) {
.pcview {
display: none;
}
}
@media screen and (min-width: 1200px) {
.taview {
display: none;
}
}
@media screen and (max-width: 1199px) {
.taview {
display: block;
}
}
@media screen and (max-width: 769px) {
.taview {
display: block;
}
}
@media screen and (min-width: 1200px) {
.spview {
display: none;
}
}
@media screen and (max-width: 1199px) {
.spview {
display: none;
}
}
@media screen and (max-width: 769px) {
.spview {
display: block;
}
}
.site-blog .clumbox {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.site-blog .clumbox .leftside {
width: calc(100% - 280px);
order: 1;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside {
width: 100%;
}
}
.site-blog .clumbox .leftside .bloglist .box {
position: relative;
}
.site-blog .clumbox .leftside .bloglist .box:not(:first-child) {
margin-top: 20px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .bloglist .box:not(:first-child) {
margin-top: 12px;
}
}
.site-blog .clumbox .leftside .bloglist .box a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.site-blog .clumbox .leftside .bloglist .box_wrap {
display: flex;
gap: 16px;
border: #f4f3f3 8px solid;
padding: 16px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .bloglist .box_wrap {
border: #f4f3f3 4px solid;
padding: 8px;
}
}
.site-blog .clumbox .leftside .bloglist .box_wrap h4 {
font-size: 20px;
margin-top: 12px;
font-weight: bold;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .bloglist .box_wrap h4 {
font-size: 15px;
margin-top: 4px;
line-height: normal;
}
}
.site-blog .clumbox .leftside .bloglist .box_info {
display: flex;
color: #457c61;
font-weight: bold;
}
.site-blog .clumbox .leftside .bloglist .box_info span.category {
display: flex;
}
.site-blog .clumbox .leftside .bloglist .box_img {
width: 270px;
height: 195px;
object-fit: cover;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .bloglist .box_img {
width: 120px;
height: 87px;
}
}
.site-blog .clumbox .leftside .bloglist .box_img img {
width: 100%;
height: auto;
}
.site-blog .clumbox .leftside .bloglist .box_txt {
width: 60%;
}
.site-blog .clumbox .leftside .bloglist .box_link:hover {
opacity: 0.7;
}
.site-blog .clumbox .leftside .edit {
margin: 36px 0 60px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .edit {
margin: 28px 0 48px;
}
}
.site-blog .clumbox .leftside .single-title .info {
display: flex;
color: #457c61;
font-weight: bold;
}
.site-blog .clumbox .leftside .single-title .info span.category {
display: flex;
}
.site-blog .clumbox .leftside .single-title h3 {
font-size: 24px;
font-weight: bold;
margin-top: 12px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .single-title h3 {
font-size: 20px;
margin-top: 8px;
}
}
.site-blog .clumbox .leftside .single-thumbnail {
margin: 0 auto;
margin-top: 32px;
width: 600px;
height: 400px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .single-thumbnail {
margin-top: 24px;
width: 100%;
height: auto;
}
}
.site-blog .clumbox .leftside .single-thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
}
.site-blog .clumbox .leftside .single-pagenation {
display: flex;
justify-content: center;
gap: 40px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .single-pagenation {
gap: 16px;
}
}
.site-blog .clumbox .leftside .single-pagenation .prev {
position: relative;
}
.site-blog .clumbox .leftside .single-pagenation .prev::before {
content: "\f359";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
z-index: 1;
color: #fff;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .single-pagenation .prev::before {
left: 12px;
}
}
.site-blog .clumbox .leftside .single-pagenation .next {
position: relative;
}
.site-blog .clumbox .leftside .single-pagenation .next::after {
content: "\f35a";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 1;
color: #fff;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .single-pagenation .next::after {
right: 12px;
}
}
.site-blog .clumbox .leftside .single-pagenation a {
background: #967354;
border-radius: 4px;
color: #fff;
font-size: 15px;
text-align: center;
padding: 11px 64px;
font-weight: 700;
transition: all 120ms 0s ease-in-out;
position: relative;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .leftside .single-pagenation a {
padding: 8px 40px;
font-size: 13px;
}
}
.site-blog .clumbox .leftside .single-pagenation a:hover {
background: #735437;
}
.site-blog .clumbox .rightside {
width: 280px;
padding: 0 0 0 48px;
order: 2;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .rightside {
width: 100%;
padding: unset;
margin-top: 60px;
}
}
.site-blog .clumbox .rightside .catarea a {
font-size: 16px;
line-height: 32px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .rightside .catarea a {
font-size: 14px;
line-height: 28px;
}
}
.site-blog .clumbox .rightside .rankingarea {
margin-top: 40px;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list li {
margin-top: 32px;
position: relative;
counter-increment: wpp-count;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .rightside .ranking-list .wpp-list li {
display: flex;
gap: 16px;
}
}
.site-blog .clumbox .rightside .ranking-list .wpp-list li::before {
content: counter(wpp-count);
display: block;
position: absolute;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #555;
padding: 3px 15px;
border-radius: 50%;
z-index: 1;
top: -15px;
left: -15px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .rightside .ranking-list .wpp-list li::before {
font-size: 14px;
padding: 3px 11px;
top: -6px;
left: -6px;
}
}
.site-blog .clumbox .rightside .ranking-list .wpp-list li:nth-child(1)::before {
background-color: #EFAF00;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list li:nth-child(2)::before {
background-color: #9EACB4;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list li:nth-child(3)::before {
background-color: #BA6E40;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list img {
border: 1px solid #b99c82;
width: 100%;
height: auto;
aspect-ratio: 16/12;
object-fit: cover;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list p {
margin-top: 4px;
color: #457c61;
font-weight: bold;
font-size: 14px;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .rightside .ranking-list .wpp-list p {
margin-top: 0;
font-size: 12px;
line-height: 1.5;
}
}
.site-blog .clumbox .rightside .ranking-list .wpp-list h4 {
font-size: 18px;
font-weight: bold;
}
@media screen and (max-width: 769px) {
.site-blog .clumbox .rightside .ranking-list .wpp-list h4 {
margin-top: 6px;
font-size: 14px;
line-height: 1.4;
}
}
.site-blog .clumbox .rightside .ranking-list .wpp-list h4 a {
color: #3c342c;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list h4 a:hover {
opacity: 0.7;
}
.site-blog .clumbox .rightside .ranking-list .wpp-list .txt {
width: 100%;
}
.site-blog .pager {
text-align: center;
margin: 32px 0 0;
}
@media screen and (max-width: 769px) {
.site-blog .pager {
margin-bottom: 32px;
}
}
.site-blog .pager a, .site-blog .pager span {
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
display: inline-block;
color: #fff;
background: #b99c82;
}
.site-blog .pager span {
background: #735437;
}
.top-blog .top-blogList {
display: flex;
justify-content: center;
gap: 16px;
}
@media screen and (max-width: 769px) {
.top-blog .top-blogList {
flex-direction: column;
}
}
.top-blog .top-blogList .topBox {
position: relative;
width: 25%;
}
@media screen and (max-width: 769px) {
.top-blog .top-blogList .topBox {
width: 100%;
}
}
.top-blog .top-blogList .topBox a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
@media screen and (max-width: 769px) {
.top-blog .top-blogList .topBox_wrap {
display: flex;
gap: 16px;
}
}
.top-blog .top-blogList .topBox_wrap h4 {
font-size: 18px;
font-weight: bold;
}
@media screen and (max-width: 769px) {
.top-blog .top-blogList .topBox_wrap h4 {
font-size: 15px;
margin-top: 4px;
line-height: normal;
}
}
.top-blog .top-blogList .topBox_txt {
margin-top: 16px;
}
@media screen and (max-width: 769px) {
.top-blog .top-blogList .topBox_txt {
margin-top: unset;
width: 60%;
}
}
.top-blog .top-blogList .topBox_info {
color: #457c61;
font-weight: bold;
}
.top-blog .top-blogList .topBox_img {
aspect-ratio: 16/12;
object-fit: cover;
position: relative;
overflow: hidden;
}
.top-blog .top-blogList .topBox_img img {
width: 100%;
height: auto;
}
.top-blog .top-blogList .topBox_link:hover {
opacity: 0.7;
}
.top-blog .btnMore {
text-align: center;
margin-top: 60px;
}
@media screen and (max-width: 769px) {
.top-blog .btnMore {
margin-top: 36px;
}
}
.top-blog .btnMore a {
background: #967354;
border-radius: 4px;
color: #fff;
font-size: 15px;
text-align: center;
padding: 11px 64px;
font-weight: 700;
transition: all 120ms 0s ease-in-out;
position: relative;
}
.top-blog .btnMore a:hover {
background: #735437;
}
.top-blog .btnMore a::after {
content: "\f0a9";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.noPost {
text-align: center;
}
@media screen and (min-width: 1200px) {
.fixedMenu {
display: none;
}
}
@media screen and (max-width: 769px) {
.fixedMenu {
height: 60px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #eca380;
z-index: 10;
}
}
.fixedMenu .menuItem {
display: flex;
justify-content: space-between;
}
.fixedMenu .contact {
width: 100%;
}
.fixedMenu .contact a {
color: #fff;
display: block;
padding-block: 6px;
text-align: center;
}
.fixedMenu .contact a dl dd {
font-size: 20px;
line-height: 28px;
font-weight: 700;
}
.fixedMenu .contact a dl dd i {
display: inline-block;
margin: 0 8px 0 0;
font-size: 12px;
transform: rotateY(180deg) translateY(-1px);
}
.fixedMenu .contact a dl dt {
font-size: 12px;
}
.fixedMenu .access {
width: 100%;
display: flex;
justify-content: end;
}
.fixedMenu .mail, .fixedMenu .line {
background: #d6612c;
width: 100%;
color: #fff;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding-inline: 10px;
border-left: 1px solid #fff;
}
.fixedMenu .mail span, .fixedMenu .line span {
font-size: 11px;
color: #fff;
}
.fixedMenu .mail span i, .fixedMenu .line span i {
display: block;
width: 100%;
text-align: center;
font-size: 18px;
margin: 0 0 3px;
}
#site-footer .cta {
margin-block: clamp(1.25rem, -2.52rem + 7.84vw, 2.5rem);
}
#site-footer .cta__wrap {
background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(235, 235, 235) 100%);
border: 4px solid #d6612c;
padding: 10px 20px;
position: relative;
display: flex;
align-items: center;
gap: clamp(1rem, -3.524rem + 9.41vw, 2.5rem);
justify-content: space-evenly;
}
@media screen and (max-width: 769px) {
#site-footer .cta__wrap {
flex-direction: column;
}
}
#site-footer .cta .catch {
position: absolute;
color: #fff;
font-weight: 700;
font-size: clamp(1rem, 0.246rem + 1.57vw, 1.25rem);
background: #d6612c;
padding: 4px clamp(1.25rem, -2.52rem + 7.84vw, 2.5rem) 0px;
top: -24px;
left: 24px;
}
@media screen and (max-width: 769px) {
#site-footer .cta .catch {
position: unset;
}
}
#site-footer .cta .ctaBox {
display: flex;
align-items: center;
gap: 20px;
}
#site-footer .cta .ctaBox img {
width: clamp(5rem, -17.618rem + 47.06vw, 12.5rem);
}
@media screen and (max-width: 769px) {
#site-footer .cta .ctaBox img {
display: none;
}
}
#site-footer .cta .ctaBox h3 {
color: #d6612c;
font-size: clamp(1rem, 0.583rem + 2.08vw, 2.25rem);
font-weight: 900;
letter-spacing: 0.0065em;
line-height: 160%;
}
#site-footer .cta .ctaBox p {
font-weight: 900;
line-height: 150%;
}
#site-footer .cta .contact .tel {
display: flex;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 1199px) {
#site-footer .cta .contact .tel {
flex-direction: column;
gap: unset;
}
}
#site-footer .cta .contact .tel a {
font-size: clamp(1.25rem, -1.194rem + 5.09vw, 2.625rem);
font-weight: 900;
letter-spacing: 0.01em;
color: #d6612c;
line-height: 150%;
transition: 0.3s;
}
@media screen and (max-width: 769px) {
#site-footer .cta .contact .tel a {
font-size: 32px;
}
}
#site-footer .cta .contact .tel a:hover {
opacity: 0.7;
transition: 0.3s;
}
#site-footer .cta .contact .tel p {
font-size: 12px;
font-weight: 900;
line-height: 150%;
}
@media screen and (max-width: 769px) {
#site-footer .cta .contact .tel p {
font-size: 16px;
}
}
#site-footer .cta .contact .mail {
display: block;
width: 100%;
text-align: center;
background: #eca380;
background: linear-gradient(180deg, rgb(236, 163, 128) 0%, rgb(235, 100, 36) 100%);
padding-block: 10px 8px;
color: #fff;
font-weight: 900;
font-size: clamp(0.625rem, -0.044rem + 1.39vw, 1rem);
border-radius: 4px;
position: relative;
line-height: 120%;
margin-top: 4px;
transition: 0.3s;
}
@media screen and (max-width: 769px) {
#site-footer .cta .contact .mail {
font-size: 16px;
padding-inline: clamp(2.5rem, -0.179rem + 13.39vw, 6.25rem);
}
}
#site-footer .cta .contact .mail::after {
content: "\f0a9";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 50%;
right: 3%;
transform: translateY(-50%);
}
@media screen and (max-width: 769px) {
#site-footer .cta .contact .mail::after {
right: 20px;
}
}
#site-footer .cta .contact .mail:hover {
opacity: 0.7;
transition: 0.3s;
}
.top_kuchikomi {
margin: 32px auto 0;
max-width: 720px;
border: 8px solid #f6e1d7;
background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(235, 235, 235) 100%);
position: relative;
overflow: clip;
text-align: unset;
padding: 10px 20px;
z-index: 1;
}
.top_kuchikomi p {
font-size: 20px;
font-weight: 900;
color: #333;
line-height: 150%;
text-shadow: 2px 3px 3px #ddd;
margin-bottom: 12px;
}
.top_kuchikomi a {
background: #eca380;
background: linear-gradient(180deg, rgb(236, 163, 128) 0%, rgb(235, 100, 36) 100%);
color: #fff;
font-weight: 900;
font-size: 16px;
padding: 6px 40px 6px;
border-radius: 4px;
position: relative;
transition: 0.3s;
}
@media screen and (max-width: 769px) {
.top_kuchikomi a {
display: block;
text-align: center;
width: 100%;
font-size: 14px;
padding: 4px 20px 4px;
}
}
.top_kuchikomi a::after {
content: "\f0a9";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 50%;
right: 3%;
transform: translateY(-50%);
}
@media screen and (max-width: 769px) {
.top_kuchikomi a::after {
right: 10px;
}
}
.top_kuchikomi a:hover {
opacity: 0.7;
transition: 0.3s;
}
.top_kuchikomi img {
position: absolute;
width: 40%;
transform: rotate(15deg);
top: 0;
right: -5%;
border: 1px solid #ccc;
z-index: -1;
}
@media screen and (max-width: 769px) {
.top_kuchikomi img {
width: 45%;
}
} .menu {
position: relative;
}
.menu__txt__impact {
font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
font-weight: 900;
color: #735437;
}
.menu .newMenu {
position: absolute;
font-weight: 900;
background: #735437;
color: #fff;
font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
padding: 4px clamp(1.25rem, -2.52rem + 7.84vw, 2.5rem) 0px;
top: -8px;
left: -8px;
}