@charset "utf-8";
/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/

p.px2 {
    font-size: 10px;
}

p.px1 {
    font-size: 12px;
}

#sect05 .liBox a{
	opacity: 1;
    background-image: none;
}
/*2023.03.06*/
#sect03 .areaInner::after,
#sect03 .areaInner::before {
    content: none;
    } 
/*2024.08.21*/
#countDisplay_area{
	margin:1rem auto;
}
#countDisplay_area #countDisplay {
	text-align:center;
    margin: 0;
    font-size: 3.0rem;
    color: #17887f;
}
#countDisplay_area #countDisplay span{
color:#f9a945;
font-size: 4.0rem;
display:inline-block;
padding:0 .5rem;
}
#sect03 .headArea {
    margin: 0 0 70px;
}
#contents,footer{
	margin:200px 0 0 0;
	padding: 0;
}


#sect04 .area {
    text-align: center;
    display: inline-block;
    margin: 3rem auto 0;
    background: #0a6e66;
    color: #fff;
    font-size: 3rem;
    padding: 0 2rem;
}

#sect04 .headArea {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

#sect04 .headArea .catch {
    padding: 0px;
    margin-top: 1rem;
}

.flame {
    text-align: center;
}

#sect04 .mini02 .liBox {
    width: calc((100% - 34px) / 2);
    margin: 0;
}

#sect04 .mini02 .ulBox {
    justify-content: space-between;
}
#sect03 .areaInner .sectTtl {
    text-align: center;
}



/*20250731*/
#sect03 .areaInner {
    background: none;
    box-shadow: none;
}

#sect03 .areaInner::after,#sect03 .areaInner::before {
    content: none;
}

#sect03 .areaInner .sectTtlArea {
    color: #fff;
    padding: 0;
    margin-bottom: 4rem;
}

/* 親コンテナ */
.content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

/* 各ボックス */
.content-container .content-box {
    background-color: #ffffff;
    padding: 20px;
    width: 32%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
}

/* キャッチコピー（容量条件 + 説明） */
.content-container .catch {
    margin-bottom: 15px;
    margin: 0px -20px 10px;
}
.content-container .capacity {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    color: #a58660;
    text-align: center;
    font-size: 2rem;
}
.content-container .description {
    font-weight: bold;
    color: #666;
    line-height: 1.4;
    margin: 0 0 15px;
    padding: 12px 30px 15px;
    background: rgb(28, 164, 153);
    background: linear-gradient(-90deg, rgba(28, 164, 153, 1) 0%, rgba(71, 166, 178, 1) 22%, rgba(10, 110, 102, 1) 70%);
    font-size: 2rem;
    color: #fff;
    text-align: center;
}

/* 会社名・製品名 */
.content-container .company-name {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    min-height: 85px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* 画像と引用元 */
.content-container .image-container {
    text-align: center;
    margin-bottom: 15px;
    min-height: 180px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.content-container .image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    max-height: 100px;
    width: auto;
}
.content-container .image-container .caption {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    text-align: left;
}

/* 特徴ブロック（おすすめの理由） */
.content-container .features-reason {
    margin-bottom: 15px;
}

.content-container .features-reason .subcatch {
    font-size: 2rem;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    color: #FF3D02;
    margin-top: 2rem;
}

.content-container .features-reason ul li {
    font-size: 1.6rem;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.6;
    min-height: 185px;
    padding: 0;
    padding-left: 2rem;
}

/* 特徴ブロック（お悩み） */
.content-container .features-problem {
    margin-bottom: 15px;
}
.content-container .features-problem h4,.content-container .features-reason h4 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1b1b1b;
    text-align: center;
    background: hsl(0deg 0% 85% / 40%);
    padding: 1rem;
}
.content-container .features-problem ul {
    list-style-type: none;
    padding: 0;
    min-height: 180px;
}
.content-container .features-problem ul li {
    font-size: 1.6rem;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.5;
    padding: 0;
    padding-left: 2rem;
}


.content-container .description span {
    background: linear-gradient(transparent 60%, rgb(165 134 96) 0%) no-repeat bottom -2px left;
}

.content-container .company-name span {
    font-size: 1.4rem;
}

.content-container .features-reason ul li span {
    color: #17887F;
    font-weight: bold;
}

.index .content-container ul li::before {
    width: 12px;
    height: 12px;
    top: 8px;
    font-size: 1.4rem;
}

.content-container .features-reason ul {
    padding: 0;
}

.content-box .btn-web {
    width: 100%;
}

.content-box .btn-web a {
    box-shadow: none;
}















/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/

@media screen and (max-width: 480px) {
/*/////////////SP用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/

/*2023.08.21*/	
#countDisplay_area #countDisplay {
    font-size: 2.3rem;
}
#countDisplay_area #countDisplay span{
font-size: 3.3rem;

}

#sect04 .mini02 .liBox {
    width:100%;
    margin-bottom: 3rem;
}

#sect04 .area {
	font-size: 2rem;
}

#sect04 .wtBox .mini01 {
	margin: 0px 0 0;
}

    .content-container .content-box {
        width: 90%;
        margin: 0 auto;
    }

    #sect03 .areaInner .sectTtlArea {
        padding: 0 5% 20px;
    }
#contents,footer{
	margin:50px 0 0 0;
	padding: 0;
}
}