@charset "utf-8";
/*=========================
イオングラフ レイアウト PCタブレットのみ表示
=========================*/

/*=========================
PC
=========================*/

.ion-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.ion-item{
    margin-left:-30px;   /* -60px → -30px程度に */
}

.ion-chart{
    width:220px;
    flex:0 0 220px;
    margin-right:-120px;   /* ボックスへ近づける */
    position:relative;
    top:15px;             /* 少し上へ */
    z-index:10;
}

.ion-chart img{
    width:100%;
    height:auto;
    display:block;
}

.ion-desc{
    flex:1;
}



/*=========================
スマホ
=========================*/

@media screen and (max-width:768px){

    .ion-wrap{
        display:block;
        margin-bottom:30px;
    }

    /* 円グラフを非表示 */
    .ion-chart{
        display:none;
    }

    /* PC用のレイアウトを解除 */
    .ion-desc{
        display:block;
        width:100%;
        margin:0;
        padding:0;
    }

    .ion-item{
        width:100%;
        margin:0;
        padding:0;
    }

    .ion-text2b,
    .ion-text2b01,
    .ion-text2b02{
        width:100%;
        margin:0 auto;
        box-sizing:border-box;
    }

}
.ph-table-wrap::after {
    content: "";
    position: absolute;
    top: 73%;
    left: 1%;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 60px solid #ff2400;
}
@media screen and (max-width: 560px) {
    .ph-table-wrap::after {
        content: "";
        position: absolute;
        top: 74% !important;
        left: 1% !important;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 20px solid #ff2400;
    }
}	
	
/* ==================================
   タブレット（768px～1024px）
================================== */
@media screen and (min-width:768px) and (max-width:1024px){

    .ion-chart{
        width:180px;
        flex:0 0 180px;
        margin-right:-50px;   /* -120 → -50 */
        top:10px;
    }

    .ion-item{
        margin-left:0;
    }

    .ion-wrap{
        gap:10px;
    }

}	
/* ==================================
メタほう酸
================================== */
.ion-text2c2 {
    width: 80% !important;
	
	  }


@media screen and (max-width: 560px) {
    .ion-text2c2 {
        width: 100% !important;
		margin-top: 30px !important;
    }
}