@charset "UTF-8";

.caseArea .listCase .itemCase .content .cap {
font-weight: bold;
}
.productArea .mod_w1210 .list .item .content .tit {
font-weight: bold;
}
.mvArea .type01 {
height: 100%;
margin: 0.1rem 0;
}
.mv_chach_batch {
width: 1.96rem;
height: 2.62rem;
position: absolute;
top: 1.08rem;
z-index: 10;
left: 50%;
margin-left: -6.2rem;
}
.mv_chach_batch img {
width: 100%;
vertical-align: bottom;
}
@media print,
screen and (min-width: 461px) {
.productArea .mod_w1210 .list .item .content .sub {
font-size: .16rem;
}
.productArea .mod_w1210 .list .item .content .tit {
font-size: .20rem;
}
.productArea .mod_w1210 .list .item .content .txt {
font-size: .15rem;
}
}
@media print,
screen and (min-width: 461px) {
.searchArea .list {
justify-content: left;
}
.searchArea .list .item.item {
margin-right: .21rem !important;
}
.searchArea .list .item.item:nth-of-type(5n) {
margin-right: 0 !important;
}
}
@media print,
screen and (min-width: 461px) {
.bnrArea {
margin: 1rem auto 0;
width: 12.1rem;
}
.bnrArea img {
width: 100%;
height: auto;
display: block;
}
.caseArea {
margin-top: 1.2rem;
}
}
@media print,
screen and (max-width: 460px) {
.bnrArea {
margin: .6rem 0 0;
width: 100%; overflow: hidden; box-sizing: border-box; }
.bnrArea img {
width: 100% !important;
height: auto !important;
}
.caseArea {
margin-top: .6rem;
}
.mv_chach_batch {
width: 0.98rem;
height: 1.31rem;
position: absolute;
top: 0.2rem;
z-index: 10;
left: 0;
margin-left: 0;
}
}
@media screen and (min-width: 768px) {
[data-slidephotofade] .slidephotofade_link {
object-fit: contain;
}
}
@media (max-width: 320px) {
.mvArea [data-slidephotofade] {
height: 84%; 
}
} .recommend_list {
width: 10.4rem;
margin: 1rem auto 0;
}
@media print,
screen and (max-width: 460px) {
.recommend_list {
width: 100%;
margin: .8rem auto 0;
}
}
.reson_wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
gap: 0.8rem;
margin-top: 1.4rem;
color: #333;
}
@media screen and (max-width: 460px) {
.reson_wrap {
display: block;
margin-top: 0.5rem;
}
}
.reson_wrap .reson_text_wrap {
width: 4.6rem;
}
@media screen and (max-width: 460px) {
.reson_wrap .reson_text_wrap {
width: 100%;
}
}
.reson_wrap .reson_title {
font-size: 0.24rem;
margin-top: 0.24rem;
letter-spacing: 0.04em;
}
@media screen and (max-width: 460px) {
.reson_wrap .reson_title {
font-size: 0.16rem;
margin-top: 0.14rem;
padding-left: .04rem;
}
}
.reson_wrap .reson_text {
font-size: 0.16rem;
margin-top: 0.24rem;
line-height: 1.8;
letter-spacing: 0.08em;
text-align: justify;
}
@media screen and (max-width: 460px) {
.reson_wrap .reson_text {
font-size: 0.14rem;
text-align: justify;
}
}
.reson_wrap .reson_photo img {
width: 100%;
height: auto;
}
@media screen and (max-width: 460px) {
.reson_wrap .reson_photo {
margin-top: 0.2rem;
}
}
.reson_wrap.photo_right {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.reson_wrap:first-child {
margin-top: 0.8rem;
}
@media screen and (max-width: 460px) {
.reson_wrap:first-child {
margin-top: 0.5rem;
}
}
.reson_wrap.reson_05 .reson_text_wrap {
width: 6.8rem;
}
@media screen and (max-width: 460px) {
.reson_wrap.reson_05 .reson_text_wrap {
width: 100%;
}
}
.reson_wrap.reson_06 {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.reson_wrap.reson_06 .reson_text_wrap {
width: 6.2rem;
}
@media screen and (max-width: 460px) {
.reson_wrap.reson_06 .reson_text_wrap {
width: 100%;
}
}
.no_photo_wrap {
margin-top: 1rem;
color: #333;
}
@media screen and (max-width: 460px) {
.no_photo_wrap {
margin-top: 0.9rem;
}
}
.no_photo_wrap .title_wrap {
padding-top: 0.02rem;
position: relative;
}
@media screen and (max-width: 460px) {
.no_photo_wrap .title_wrap {
gap: 0.14rem;
}
}
.no_photo_wrap .reson_title {
font-size: 0.24rem;
letter-spacing: 0.04em;
}
@media screen and (max-width: 460px) {
.no_photo_wrap .reson_title {
font-size: 0.17rem;
margin-top: 0.14rem;
padding-left: 0.04rem;
}
}
.no_photo_wrap .award_wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: solid 1px #E8E7E5;
padding-bottom: 0.12rem;
margin-top: 0.12rem;
}
@media screen and (max-width: 460px) {
.no_photo_wrap .award_wrap {
display: block;
}
}
.no_photo_wrap .award_title {
font-size: 0.14rem;
font-weight: bold;
}
.no_photo_wrap .award_title .year {
display: block;
font-size: 0.13rem;
font-weight: normal;
padding-bottom: 0.04rem;
}
.no_photo_wrap .award_result {
font-size: 0.16rem;
font-weight: bold;
color: #2CB3B3;
}
.no_photo_wrap .contents_wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0.42rem;
margin-top: 0.2rem;
}
@media screen and (max-width: 460px) {
.no_photo_wrap .contents_wrap {
display: block;
margin-top: 0.4rem;
}
}
.no_photo_wrap .left_wrap {
width: 4.74rem;
}
@media screen and (max-width: 460px) {
.no_photo_wrap .left_wrap {
width: 100%;
}
}
.no_photo_wrap .right_wrap {
width: 4.74rem;
}
@media screen and (max-width: 460px) {
.no_photo_wrap .right_wrap {
width: 100%;
}
}
.reson_07 .text {
font-size: 0.16rem;
margin-top: 0.24rem;
line-height: 1.8;
letter-spacing: 0.1em;
text-align: justify;
}
@media screen and (max-width: 460px) {
.reson_07 .text {
font-size: 0.14rem;
}
}
.reson_07 .sub_text {
font-size: 0.14rem;
margin-top: 0.16rem;
margin-left: 1em;
text-indent: -1em;
line-height: 1.8;
}
.reson_07 .sub_text+.sub_text {
margin-top: 0;
}
@media screen and (max-width: 460px) {
.reson_07 .title_wrap {
display: block;
}
}
.reson_08 .photo {
margin-top: 0.4rem;
}
.reson_08 .photo img {
width: 100%;
height: auto;
}
@media screen and (max-width: 460px) {
.reson_08 .photo {
margin-right: -0.2rem;
margin-top: 0.2rem;
}
}
@media screen and (max-width: 460px) {
.reson_08 .title_wrap {
display: block;
}
}
.reson_06_supplement {
background-color: #fff;
padding: 0.64rem 0.76rem;
margin-top: 0.6rem;
color: #333;
letter-spacing: 0.12em;
}
@media screen and (max-width: 460px) {
.reson_06_supplement {
padding: 0.32rem 0.18rem;
margin-top: 0.4rem;
}
}
.reson_06_supplement .suppletitle {
font-size: 0.24rem;
border-bottom: solid 1px #333;
padding-left: 0;
padding-bottom: 0.1rem;
}
@media screen and (max-width: 460px) {
.reson_06_supplement .suppletitle {
font-size: 0.17rem;
}
}
.reson_06_supplement .sub_title {
font-size: 0.2rem;
margin-top: 0.5rem;
letter-spacing: 0.04em;
}
@media screen and (max-width: 460px) {
.reson_06_supplement .sub_title {
font-size: 0.15rem;
margin-top: 0.3rem;
}
}
.reson_06_supplement .text {
font-size: 0.16rem;
margin-top: 0.16rem;
line-height: 1.8;
}
@media screen and (max-width: 460px) {
.reson_06_supplement .text {
font-size: 0.14rem;
}
}
.reson_06_supplement .sub_text {
font-size: 0.14rem;
margin-left: 1em;
text-indent: -1em;
line-height: 1.8;
margin-top: 0.16rem;
}
@media screen and (max-width: 460px) {
.reson_06_supplement .sub_text {
font-size: 0.12rem;
}
}
.reson_06_supplement .sub_text+.sub_text {
margin-top: 0;
}
.reson_06_supplement .list_wrap {
font-size: 0.16rem;
line-height: 1.8;
margin-top: 0.2rem;
}
@media screen and (max-width: 460px) {
.reson_06_supplement .list_wrap {
font-size: 0.14rem;
}
}
.reson_06_supplement .list_wrap li {
list-style: disc;
margin-left: 1.4em;
}
.reson_flag {
position: absolute;
top: -.9rem;
left: -.4rem;
}
.reson_flag img {
width: 100%;
max-width: 1.86rem;
height: auto;
}
@media screen and (max-width: 460px) {
.reson_flag { top: -.34rem;
left: -.12rem;
}
.reson_flag img {
width: 0.94rem;
height: auto;
}
}
.for_sp_wrap .title_02_wrap {
position: relative;
}
@media screen and (max-width: 460px) {
.for_sp_wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.for_sp_wrap .title_02_wrap {
width: 4.6rem;
letter-spacing: -0.02em;
}
}
.bnrDoubleArea {
max-width: 1000px;
margin: 60px auto;
padding: 0 10px;
box-sizing: border-box;
}
@media(max-width: 768px) {
.bnrDoubleArea li {
width: 100%;
margin-bottom: 20px;
}
.campaign-msg-box {
padding: 10px;
margin-bottom: 12px;
}
.campaign-msg-box .cp-text {
font-size: 15px;
font-weight: bold;
color: #ffff00;
margin: 0;
line-height: 1.2;
}
}
.campaign-msg-box .cp-date {
font-size: 11px;
display: inline-block;
background-color: #fff;
color: #d32f2f;
font-size: 13px;
font-weight: bold;
padding: 2px 10px;
border-radius: 20px;
margin-bottom: 5px;
line-height: 1.2;
}
@media(min-width: 768px) {
.campaign-msg-box .cp-date {
font-size: 13px;
}
.bnrDoubleArea ul {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
gap: 30px;
}
}
.campaign-msg-box {
background-color: #d32f2f;
color: #fff;
text-align: center;
padding: 15px 5px;
margin-bottom: 15px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
}
.campaign-msg-box::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-top: 10px solid #d32f2f;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.bnrDoubleArea a {
width: 100%;
display: block;
height: auto;
}
.bnrDoubleArea img {
height: auto;
width: 100%;
object-fit: contain;
}
.bnrDoubleArea li p.caution {
text-align: center;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
color: #333;
}
.campaign-msg-box .cp-text {
font-size: 21px;
font-weight: bold;
color: #ffff00;
margin: 0;
line-height: 1.2;
} .ph-after {
position: relative;
width: 100%;
overflow: hidden;
}
.ph-after::after {
font-weight: 600;
font-size: 24px;
top: 0;
position: absolute;
display: block;
content: "after";
left: 0;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background: #2cb3b3;
width: 100px;
height: 40px;
}
.ph-before {
position: relative;
width: 100%;
overflow: hidden;
}
.ph-before::after {
font-weight: 600;
font-size: 24px;
top: 0;
position: absolute;
display: block;
content: "before";
left: 0;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background: #2cb3b3;
width: 100px;
height: 40px;
}
.case_data {
text-align: center;
font-size: 16px;
display: flex;
justify-content: flex-start;
align-items: center;
width: 190px;
margin: 0 0 2% auto;
}
.case_data-sub {
margin-right: 3%;
font-size: 16px;
font-weight: 600;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background: #2cb3b3;
width: 80px;
height: 25px;
}
.price-red {
margin-top: 5%;
font-size: 32px;
font-weight: 700;
color: #D9060A;
text-align: right;
}
.case_content-ttl {
line-height: 1.5;
font-size: 24px;
font-weight: bold;
}
.caseArea .listCase .itemCase {
height: auto !important;
}
.itemCase .content ul.list {
margin: 5% 0;
}
.itemCase .content .list li {
font-size: 14px !important;
font-weight: 600;
width: auto;
}
.itemCase .content .list li:before {
display: none;
}
.case_content-ttl {
height: auto;
}
.itemCase .content ul.list {
display: flex;
margin: 5% 0;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 5px;
height: 60px;
}
.caseArea .listCase .itemCase .content .list li+li {
margin-top: 0;
}
.slick-slide {
margin-right: 10px;
}
@media screen and (min-width: 768px) {
.case_content-ttl {
height: 130px;
}
.listCase .itemCase .ph img {
height: 200px;
}
.itemCase-img {
display: flex;
}
.ph-before {
width: 50%;
}
.ph-after {
width: 50%;
}
.itemCase .content .list li {
font-size: 16px !important;
}
.case_inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.case_data {
width: 195px;
}
.listCase .slick-slide {
flex: none !important;
}
} .hokkaidoArea {
background-size: contain;
background-position: top;
padding: 12% 0;
width: 100%;
height: auto;
}
.hokkaidoArea .mod_w1210 {
display: flex;
flex-wrap: wrap;
padding-left: 0.35rem;
}
.hokkaidoArea .title {
font-size: 32px;
letter-spacing: 0.04em;
line-height: 2;
width: 100%;
padding-left: 0;
}
.hokkaidoArea .subtitle {
font-size: 0.16rem;
padding-left: 0;
}
.hokkaidoArea .subtitle:after {
height: 0.51rem;
top: -0.85rem;
width: 0.55rem;
left: -0.25rem;
}
.area {
width: 100%;
max-width: 1250px;
margin: 3% auto;
}
.area-title {
text-align: center;
margin-top: 50px;
}
.area-title h2 {
font-size: 36px;
}
.area_map_img {
text-align: center;
width: 95%;
margin: 0 auto;
}
.area_map_img img {
width: 100%;
height: auto;
}
.area_contents {
width: 80%;
margin: 0 auto;
}
.postscript p {
font-size: 12px;
text-align: left;
}
.postscript {
margin-top: 20px;
}
ul.area_list {}
ul.area_list li {
margin: 0 0 0 0;
line-height: 1;
cursor: pointer;
}
ul.area_list li a {
font-size: 16px;
display: block;
padding: 10px 0;
color: #1622FF;
}
ul.area_list li.city {
padding-left: 1em;
margin-left: 0em;
}
.mod-btn {
margin: 0 auto;
width: 100%;
max-width: 330px;
}
.mod-btn a {
padding: 0 0.2rem;
}
@media screen and (min-width: 768px) {
.hokkaidoArea .mod_w1210 {
padding-left: 0.65rem;
}
.hokkaidoArea .title {
font-size: 42px;
}
.hokkaidoArea .subtitle {
font-size: 24px;
padding-left: 0
}
.hokkaidoArea .subtitle:after {
height: 1.02rem;
width: 1.1rem;
top: -1.5rem;
left: -0.5rem;
}
.area {
display: flex;
justify-content: space-between;
gap: 5%;
}
.area_map_img {
text-align: center;
width: 70%;
}
.area_map_img img {
width: 100%;
height: auto;
}
.area_contents {
width: 30%;
}
} .priceArea {
margin: 0 auto 5% auto;
max-width: 1440px;
}
@media screen and (max-width: 768px) {
.priceArea {
margin: 0 auto 20% auto;
max-width: 1440px;
}
}
.priceArea .mod_w1210 {
width: 90%;
display: flex;
flex-wrap: wrap;
padding: 0;
}
.priceArea .title {
font-size: 32px;
letter-spacing: 0.04em;
line-height: 2;
width: 100%;
padding-left: 0;
}
.subtitle {
font-size: 16px;
padding-left: 0;
}
.priceArea .subtitle:after {
height: 0.51rem;
top: -0.85rem;
width: 0.55rem;
left: -0.2rem;
}
.priceArea .listCase img {
width: 100%;
height: 200px;
object-fit: cover;
}
.priceArea .listCase {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.3%;
margin: 0 auto;
}
.priceArea .listCase .itemCase {
border: 1px solid #ddd;
width: 90%;
height: auto;
margin-bottom: 3.5%;
max-width: 390px;
position: relative;
}
.priceArea .listCase .itemCase_ttl {
font-size: 0.28rem;
font-weight: bold;
color: #fff;
background-color: #2cb3b3;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 2.8rem;
height: 0.4rem;
display: flex;
justify-content: center;
align-items: center;
}
.priceArea .listCase .itemCase .ph {
width: 100%;
height: 200px;
}
.priceArea .listCase h3.cap {
width: 90%;
height: auto;
margin: 0.1rem auto 0.7rem auto;
}
.priceArea .listCase_price {
font-size: 0.2rem;
letter-spacing: 0.1em;
line-height: 1.5;
color: red;
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
padding-right: 10px;
font-weight: bold;
}
.priceArea .listCase_price .price1 {
font-size: 0.5rem;
}
.priceArea .listCase_price .price2 {
font-size: 0.4rem;
}
.priceArea .listCase .box {
width: 35px;
height: auto;
position: absolute;
overflow: hidden;
margin-left: auto;
border-right: 35px solid #2cb3b3;
border-top: 35px solid #fff;
right: 0;
bottom: 0;
}
.priceArea .mod-btn {
margin: 0 auto;
width: 100%;
max-width: 330px;
}
.mod-btn a {
padding: 0 0.2rem;
}
@media screen and (min-width: 430px) {
.priceArea .listCase .itemCase {
border: 1px solid #ddd;
width: 100%;
}
.priceArea .subtitle:after {
height: 0.51rem;
top: -1.2rem;
}
}
@media screen and (min-width: 768px) {
.priceArea .mod_w1210 {
padding-left: 0.65rem;
}
.priceArea .title {
font-size: 42px;
}
.priceArea .subtitle {
font-size: 24px;
}
.priceArea .subtitle:after {
height: 1.02rem;
width: 1.1rem;
top: -1.6rem;
left: -0.5rem;
}
.priceArea .listCase h3.cap {
margin: 0.25rem auto 1rem auto;
font-size: 0.16rem;
}
.priceArea .listCase_price .price1 {
font-size: 0.6rem;
}
.priceArea .listCase_price {
padding-right: 7%;
}
}
.mvArea {
height: 1.5rem!important;
padding-top: 1.3rem !important;
max-width: 1440px;
margin: 50px auto 0 auto;
}
@media screen and (min-width: 768px) {
.mvArea {
height: 7.3rem !important;
margin: 0 auto;
padding-top: 3.97rem !important;
}
.mvArea .type01 {
top: 0;
}
}
@media screen and (min-width: 1024px) {
.award {
margin: 0 auto 3% auto;
max-width: 1440px;
}
}
.productArea .mod_w1210 .list .item .in {
border: 1px solid #f2f2f2;
position: relative;
padding: 0.15rem;
padding-top: 0;
text-align: right;
background: #fff;
border-top: none;
}
.productArea .content {
border-top: 1px solid #f2f2f2;
margin-top: 5%;
}
.productArea .item {
margin-bottom: 5%;
}
.award .award_wrap .award_list {
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.award .award_wrap .award_list {
flex-wrap: nowrap;
}
}
li.award_wrap-inner {
display: flex;
justify-content: center;
align-items: center;height: 1rem;
}
.award .award_wrap .award_list .award_batch._04 {
max-width: 1.7rem;
aspect-ratio: 170 / 230;
}
.award .award_wrap .award_list .award_batch img {
display: block;
width: 100%;
height: 90%;
max-height: 300px;
object-fit: contain;
}
#kitchen-reform,
#bathroom-reform,
#toilet-reform,
#sink-reform,
#toilet-wall-reform,
#wallpaper-reform,
#siding-reform,
#paint-reform,
#antenna-reform {
scroll-margin-top: 100px !important;
}
.bg-wrap {
position: relative;
height: 100%;
}
.bg-img {
position: absolute;
inset: 0;
z-index: 0;
}
.bg-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bg-center {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.mvArea {
height: auto !important;
padding-top: 0 !important;
}
.mvArea [data-slidephotofade] {
position: relative !important;
height: auto !important;
top: auto !important;
}
[data-slidephotofade] .slidephotofade_wrap {
height: auto !important;
}
[data-slidephotofade] .slidephotofade_link {
position: relative !important;
width: 100% !important;
height: auto !important;
object-fit: unset !important;
}
.mvArea .type01 picture img {
width: 100% !important;
height: auto !important;
}
} .listCase .itemCase .content,
.listCase .itemCase .content .date,
.listCase .itemCase .content .cap,
.listCase .itemCase .content .price,
.listCase .itemCase .content .list li { font-family: "メイリオ", Meiryo, sans-serif;
font-weight: 700;
}
div#customFixedBanner {
position: fixed;
right: 10px;
bottom: 70px;
z-index: 9999;
}
button#customFixedBannerClose {
position: absolute;
width: 24px;
height: 24px;
font-size: 16px;
top: -8px;
right: -8px;
border: none;
border-radius: 50%;
background: #333;
color: #fff;
cursor: pointer;
line-height: 28px;
padding: 0;
}
div#customFixedBanner a img {
width: 100%;
max-width: 200px;
height: auto;
}
@media screen and (min-width: 768px) {
div#customFixedBanner {
right: 20px;
bottom: 120px;
}
}
.floating-double-banner {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility .3s ease;
}
.floating-double-banner.is-show {
opacity: 1;
visibility: visible;
pointer-events: auto;
} section.knowledgeArea {
margin-bottom: 1.1rem;
}
.knowledgeArea .title:after {
background: url(/img/ie_icon_gray.png);
background-size: cover;
content: "";
height: 1.02rem;
left: 0;
position: absolute;
top: -0.82rem;
width: 1.1rem;
display: block;
}
@media screen and (max-width: 460px) {
.knowledgeArea .title::after {
height: 0.51rem;
top: -0.42rem;
width: 0.55rem;
}
}
.knowledge-card-list {
display: grid;
gap: 18px;
}
.knowledge-card-item {
list-style: none;
max-width: 300px;
margin: 0 auto;
}
.knowledge-card-item a {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 10px 15px;
background: #fff;
border: 1px solid #e6e6e6;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
text-decoration: none;
position: relative;
transition: .25s;
align-items: center;
max-width: 380px;
min-height: 350px;
}
.knowledge-card-item a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.knowledge-card-img {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
}
.knowledge-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.knowledge-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.knowledge-card-cat {
font-weight: 700;
display: inline-flex;
align-items: center;
color: rgb(51, 51, 51);
font-size: 11px;
line-height: 1.4;
padding: 3px 8px;
border-width: 1px;
border-style: solid;
border-color: rgb(44, 179, 179);
color: #2cb3b3;
}
.knowledge-card-date {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
padding: 3px 0px;
}
.knowledge-card-title {
margin: 0 0 10px;
padding-right: 24px;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: #111;
}
.knowledge-card-text {
margin: 0;
padding-right: 24px;
font-size: 13px;
line-height: 1.8;
color: #333;
}
@media (min-width: 480px) {
.knowledge-card-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin: 0 auto;
}
}
@media (min-width: 1024px) {
.knowledge-card-item {
max-width: 320px;
}
}
@media (min-width: 1440px) {
.knowledge-card-item {
max-width: 380px;
}
} @media screen and (min-width: 768px) {
.mod_w1210 {
width: 13.1rem!important;
}
.contentsArea .list {
justify-content: center;
display: flex;
}
}
section.contentsArea {
margin-top: 1.2rem;
}
.caseArea .listCase .itemCase + .itemCase {
padding: 0;
}
.caseArea .listCase .itemCase a {
background: #f8f8f8;
display: block;
height: 100%;
}
.questionArea,
.voiceArea {
margin-bottom: 1.1rem;
}
.priceArea .title {
font-size: 0.26rem;
}
@media screen and (min-width: 768px) {
.priceArea .title {
font-size: 0.44rem;
}
}
.priceArea .mod_w1210 {
margin-bottom: 0.7rem;
}
.priceArea .mod_w1210 {
padding-left: 0;
margin-bottom: 1.1rem;
}
.priceArea .title {
padding-left: 0.1rem;
}
.priceArea .mod_w1210 {
margin-bottom: 0.5rem;
}
.priceArea .line {
background: #333;
margin: 5% 0 0 0;
}
.priceArea .subtitle:after {
left: -0.1rem;
}
.questionArea .mod_w1210 {
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
}
@media screen and (min-width: 768px) {
.priceArea .title {
padding-left: 0.5rem;
}
.priceArea .subtitle {
padding-left: 0.2rem;
}
.priceArea .subtitle:after {
left: -0rem;
}
.priceArea .line {
margin: 2% 0 0 0;
}
}
.knowledge-card-list .slick-dots {
position: static;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 32px;
}
.knowledge-card-list .slick-dots li {
width: 10px;
height: 10px;
margin: 0;
}
.knowledge-card-list .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
}
.knowledge-card-list .slick-dots li button::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #d9d9d9;
opacity: 1;
}
.knowledge-card-list .slick-dots li.slick-active button::before {
background: #333; 
}
.knowledge-card-item > a {
position: relative;
}
.knowledge-card-item > a.rank-1st::before {
position: absolute;
inset: 0 auto auto 5%;
z-index: 1;
display: grid;
place-items: center;
left: 0;
height: 20px;
width: 130px;
padding-inline: 0 5px;
padding-bottom: 5%;
font-size: 20px;
color: #fff;
text-align: center;
pointer-events: none;
content: "Ranking " counter(counter);
counter-increment: counter 1;
background: #b79168;
text-shadow: 1px 1px 1px #ccc;
clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
.knowledge-card-item > a.rank-2nd::before {
position: absolute;
inset: 0 auto auto 5%;
z-index: 1;
display: grid;
place-items: center;
left: 0;
height: 20px;
width: 130px;
padding-inline: 0 5px;
padding-bottom: 5%;
font-size: 20px;
color: #fff;
text-align: center;
pointer-events: none;
content: "Ranking " counter(counter);
counter-increment: counter 2;
background: #999;
clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
.knowledge-card-item > a.rank-3rd::before {
position: absolute;
inset: 0 auto auto 5%;
z-index: 1;
display: grid;
place-items: center;
left: 0;
height: 20px;
width: 130px;
padding-inline: 0 5px;
padding-bottom: 5%;
font-size: 20px;
color: #fff;
text-align: center;
pointer-events: none;
content: "Ranking " counter(counter);
counter-increment: counter 3;
background: #be7859;
clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
} .priceArea {
margin: 2rem auto;
}
.mod_w1210.knowledge-card-wrap, ol.dictionary-ranking__list {
margin-bottom: 0.5rem;
}
.Area-bg {
background: #f7f7f7;
padding-bottom: 1rem;
}
.dictionary-ranking {
width: 100%;
}
.dictionary-ranking__title {
margin-bottom: 24px;
font-size: 24px;
font-weight: 700;
}
.dictionary-ranking__list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
max-width: 1020px;
margin: 0 auto;
}
.dictionary-ranking__item {
margin: 0;
}
.dictionary-ranking__link {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: 18px;
width: 290px;
margin: 0 auto;
padding: 16px;
color: inherit;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 8px;
transition:
background-color 0.3s,
border-color 0.3s;
}
.dictionary-ranking__link:hover {
background-color: #f7f7f7;
border-color: #aaa;
}
.dictionary-ranking__number {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
color: #fff;
font-weight: 700;
background: #ddd;
border-radius: 50%;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 1px solid #ccc;
} .dictionary-ranking__item:nth-child(1) .dictionary-ranking__number {
background: #c8a15b;
color: #fff;
} .dictionary-ranking__item:nth-child(2) .dictionary-ranking__number {
background: #8f98a3;
color: #fff;
} .dictionary-ranking__item:nth-child(3) .dictionary-ranking__number {
background: #bf7b47;
color: #fff;
}
.dictionary-ranking__name {
flex: 1;
min-width: 0;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.dictionary-ranking__link {
flex-wrap: nowrap;
gap: 12px;
font-size: 20px;
}
}
@media screen and (min-width: 1440px) {
a.dictionary-ranking__link {
width: 350px;
font-size: 24px;
}
ol.dictionary-ranking__list {
max-width: 1400px;
}
}