/* =====全体========================================== */
body.Development_body{
    min-width: fit-content;
    text-align: center;
    background-color:#ebe9e9;
}
div.l_main_inner{
    margin: auto;
    padding: 30px 25px 15px;
    box-sizing: border-box;
    background: #ffffff;    
}
div.l_main_inner2{
    margin: auto;
    padding: 8px 10px 8px;
    box-sizing: border-box;
    background: #ffffff;    
}
div.l_main_inner3{
    margin: auto;
    padding: 8px 10px 16px;
    box-sizing: border-box;
    background: #ddddd6;    
}

/* ========================== */
/* ====== リンクボタン ====== */
/* ========================== */
div.linkbtn{
    margin-bottom: 30px;
}
/* ボタンのスタイル */
a.kaihatsu_way_link{
    display: inline-block;          /*widthで横幅を指定したい場合に必要*/
    width:90%;                      /*横幅*/
    background-color: #fff;       /*背景*/
    border-radius: 25px;            /*角*/
    padding:10px 0;                 /*余白*/
    color:#000000;                /*文字色*/
    text-align: center;             /*中央揃え*/
    text-decoration: none;          /*下線を削除*/
    box-shadow: 2px 2px 4px;        /*影*/
}
/* 丸矢印アイコン */
.dli-caret-circle-fill-right {
    left:10px;
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    position: relative;
    width: 0.8em;
    height: 0.8em;
    border: 0.075em solid currentColor;
    background: currentColor;
    border-radius: 50%;
    box-sizing: content-box;
  }
.dli-caret-circle-fill-right::before {
    content: '';
    color: #fff;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.18em 0.31177em;
    border-left-color: currentColor;
    border-right: 0;
    transform: translateX(15%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/* インフォメーションアイコン */
.dli-information-circle {
    right: 0px;
    display: inline-block;
    vertical-align: middle;
    color: #d8ae26;
    line-height: 1;
    position: relative;
    width: 1em;
    height: 1em;
    border: 0.1em solid currentColor;
    border-radius: 50%;
    box-sizing: content-box;
  }
.dli-information-circle > span {
    width: 0.15em;
    height: 0.6em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.dli-information-circle > span::before, .dli-information-circle > span::after {
    content: '';
    display: block;
    width: inherit;
    background: currentColor;
}
.dli-information-circle > span::before {
    margin-bottom: 0.1em;
    height: 0.15em;
    border-radius: 50%;
}
.dli-information-circle > span::after {
    height: 0.35em;
    border-radius: 0.025em;
}


/* ====================================== */
/* ====================================== */
/* 750px未満のウィンドウサイズの時 */
/* ====================================== */
/* ====================================== */
@media screen and (max-width: 750px) {
    div.main{
        width:98%;
        /*=======alteration start 2024.12.13=======*/
        /*======= before =======*/
        /* margin:10px auto 20 auto; */
        /*======= after =======*/
        margin:0 auto; 
        margin-top:10px;
        /*=======alteration end 2024.12.13=======*/
        padding:0;
        background-color: #fff;
    }
    /* タイトル */
    h1.ttl_01{
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-bottom: 20px;
        font-size: 18px;
        color: #de0000;
        font-weight: normal;
        text-align: left;    
    }
    div.l_main_inner{
        margin: auto;
        padding: 10px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;    
    }
    /* ======add start 2024/12/13 ======*/
    /* ピンク背景 */
    div.l_main_inner2{
        width:98%;
        margin: 0 auto;
        margin-bottom:20px;
        padding: 10px 25px 15px;
        box-sizing: border-box;
        background: #ffe6e6;    
    }
    /* 総括フォント */
    p.text_info{
        color: #333333;
        font-size: 12px;
        margin-top:30px;
        margin-bottom: 30px;
        text-align: left;
    }
    /* リンクボタン */
    a.kaihatsu_way_link{
        display: inline-block;          /*widthで横幅を指定したい場合に必要*/
        width:90%;                      /*横幅*/
        font-size: 12px;                /*フォントサイズ*/
    }
    
    /* ======add end 2024/12/13 ======*/

    hr.ttl_01_hr {
        flex: 1;
        height: 1px;
        margin-left: 44px;
        background: #e5e5e5;
        overflow: visible;
        border: none;
    }
    /* TOP画像_PC版 */
    img.PC_top_img{    
        display: none;
    }
    img.PC_top_img2{
        display: block;
        width:100%;
        height:auto;
        margin:auto;
    }
    /* 文字表示設定 */
    div.text_space{
        margin:auto;
        width:100%;
        margin-top:2em;
        margin-bottom: 2em;
    }
    /* 前置き文 */
    p.preface_text{
        font-size: 14px;
        text-align: left;
        line-height: 1.8em;
    }
    /* 項目名 */
    /* タイトル */
    h2.job_info_title{
        margin-bottom: 20px;
        padding-left: 10px;
        border-left: 5px solid #dfbf5d;
        font-size: 14px;
        color: #333333;
        text-align: left;
    }

    /* 文字表示設定2 */
    div.text_space2{
        margin:auto;
        width:100%;
        margin-top:1em;
        margin-bottom: 1em;
    }
    /* 簡易説明 */
    p.Outline{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;        
    }
    img.developementflow{
        width:95%;
        padding:10px 0;
    }
    /* ============================= */
    /* 開発フロー */
    /* ============================= */
    div.detailflow{
        display:none;
    }
    div.detailflow2{
        display:block;
        width:100%;
    }
    div.step-container2 {
        margin:10px 0;
        border-radius: 8px;
        background-color: #ebebeb;
        padding:20px;
    }
    div.step2 {
        margin:0 auto;
        text-align: center;
    }
    div.step2 img {
        width: 100%;
    }
    .step-content {
        max-width: 60%;
    }
    .step-title {
        text-align: left;
        font-size:16px;
        font-weight: bold;
        color: #d9534f; /* 赤色 */
        margin:10px 0;
    }
    p.subtitle{
        text-align: left;
        font-size:15px;
        font-weight: bolder;
        color: #555;        
        margin:0;
        padding-top:15px;
        padding-bottom:10px;
    }
    .step-description {
        text-align: left;
        font-size:14px;
        color: #555;
        line-height: 1.8em;
        margin:0;
    }

    p.step-description2{
        font-size:14px;
        color: #555;
        margin-top:10px;  
        text-align: left; 
        line-height: 1.8em;     
    }

    /* ======================================== */
    /* ======================================== */
    /* ADD START 20241113 @moriyama */
    /* 階層構造表示 */
    /* ======================================== */
    /* ======================================== */
    /* ===== 階層 ===== */
    div.l_class{
        width:100%;
        margin:10px auto;
        padding:0;   
    }
    ul.l_class_li{
        margin: auto;
        padding: 10px 25px 10px 0;
        display: flex;
        font-size: 0;
    }
    li.l_class_li_item{
        list-style: none;
        margin-left: 3px;
        font-size: 12px;
    }
    a.l_class_li_item_link{
        color: #de0000;
        outline: none;
        text-decoration: none;
    }
    a.l_class_li_item_link::after{
        content: "＞";
        border-style: solid;
        padding-left:3px;
        border-width: 0;
        box-sizing: inherit;
        color:black;
    }

    /* ====================================== */
    /* 三角 */
    /* ====================================== */
    .triangle{
        width: 0;
        height: 0;
        margin:auto;
        text-align: center;
        padding:10px 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid rgb(255, 6, 6);
      }
}

/* ====================================== */
/* ====================================== */
/* 750px以上1000px未満のウィンドウサイズの時 */
/* ====================================== */
/* ====================================== */
@media screen and (min-width:750px) and (max-width:1000px) {
    div.main{
        width:98%;
        margin:10px auto 0 auto;
        padding:0;
        background-color: #fff;
    }
    /* タイトル */
    h1.ttl_01{
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-bottom: 20px;
        font-size: 26px;
        color: #de0000;
        font-weight: normal;
        text-align: left;    
    }
    div.l_main_inner{
        margin: auto;
        padding: 30px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;    
    }
    /* ======add start 2024/12/13 ======*/
    /* ピンク背景 */
    div.l_main_inner2{
        width:98%;
        margin: 0 auto;
        margin-bottom:20px;
        padding: 30px 25px 15px;
        box-sizing: border-box;
        background: #ffe6e6;    
    }
    /* 総括フォント */
    p.text_info{
        color: #333333;
        font-size: 16px;
        margin-top:30px;
        margin-bottom: 30px;
    }
    hr.ttl_01_hr {
        flex: 1;
        height: 1px;
        margin-left: 44px;
        background: #e5e5e5;
        overflow: visible;
        border: none;
    }
    /* リンクボタン */
    a.kaihatsu_way_link{
        display: inline-block;          /*widthで横幅を指定したい場合に必要*/
        width:60%;                      /*横幅*/
        font-size: 16px;                /*フォントサイズ*/
    }
    /* TOP画像_PC版 */
    img.PC_top_img{    
        display: block;
        width: 100%;
        height:auto;
        margin:auto;
    }
    img.PC_top_img2{
        display: none;
    }
    /* 文字表示設定 */
    div.text_space{
        margin:auto;
        width:100%;
        margin-top:2em;
        margin-bottom: 2em;
    }
    /* 前置き文 */
    p.preface_text{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;
    }
    /* 項目名 */
    h2.job_info_title{
        margin-bottom: 25px;
        padding-left: 10px;
        border-left: 5px solid #dfbf5d;
        font-size: 25px;
        color: #333333;
        text-align: left; 
    }
    /* 文字表示設定2 */
    div.text_space2{
        margin:auto;
        width:100%;
        margin-top:1em;
        margin-bottom: 1em;
    }
    /* 簡易説明 */
    p.Outline{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;        
    }
    img.developementflow{
        width:95%;
        padding:2em 0;
    }

    /*  ============================ */
    /*  雷紋 */
    /*  ============================ */
    img.raimon{
        width:100%;
    }
    /* ============================= */
    /* 開発フロー */
    /* ============================= */
    div.detailflow{
        display:none;
    }
    div.detailflow2{
        display:block;
        width:100%;
    }
    div.step-container2 {
        width:90%;
        margin:10px auto;
        border-radius: 8px;
        background-color: #ebebeb;
        padding:20px;
    }
    div.step2 {
        margin:0 auto;
        text-align: center;
    }
    div.step2 img {
        width: 60%;
    }
    .step-content {
        max-width: 60%;
    }
    .step-title {
        font-size:24px;
        font-weight: bold;
        color: #d9534f; /* 赤色 */
        margin-top: 10px;
    }
    p.subtitle{
        font-size:16px;
        font-weight: bolder;
        margin:10px 0;
    }
    .step-description {
        font-size:14px;
        color: #555;
        margin-bottom: 20px;
    }

    p.step-description2{
        font-size:14px;
        color: #555;
        margin-top:10px;        
    }

    /* ======================================== */
    /* ======================================== */
    /* ADD START 20241113 @moriyama */
    /* 階層構造表示 */
    /* ======================================== */
    /* ======================================== */
    /* ===== 階層 ===== */
    div.l_class{
        width:100%;
        margin:10px auto;
        padding:0;   
    }
    ul.l_class_li{
        margin: auto;
        padding: 10px 25px 10px 0;
        display: flex;
        font-size: 0;
    }
    li.l_class_li_item{
        list-style: none;
        margin-left: 10px;
        font-size: 13px;
    }
    a.l_class_li_item_link{
        color: #de0000;
        outline: none;
        text-decoration: none;
    }
    a.l_class_li_item_link::after{
        content: "＞";
        border-style: solid;
        padding-left:15px;
        border-width: 0;
        box-sizing: inherit;
        color:black;
    }

    /* ====================================== */
    /* 三角 */
    /* ====================================== */
    .triangle{
        width: 0;
        height: 0;
        margin:auto;
        text-align: center;
        padding:10px 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid rgb(255, 6, 6);
      }   
}
/* ====================================== */
/* ====================================== */
/* 1000px以上1300px未満のウィンドウサイズの時 */
/* ====================================== */
/* ====================================== */
@media screen and (min-width:1000px) and (max-width:1300px) {
    div.main{
        width:98%;
        margin:10px auto 0 auto;
        padding:0;
        background-color: #fff;
    }
    /* タイトル */
    h1.ttl_01{
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-bottom: 20px;
        font-size: 26px;
        color: #de0000;
        font-weight: normal;
        text-align: left;    
    }
    div.l_main_inner{
        margin: auto;
        padding: 30px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;    
    }
    /* ======add start 2024/12/13 ======*/
    /* ピンク背景 */
    div.l_main_inner2{
        width:98%;
        margin: 0 auto;
        margin-bottom:20px;
        padding: 30px 25px 15px;
        box-sizing: border-box;
        background: #ffe6e6;    
    }
    /* 総括フォント */
    p.text_info{
        color: #333333;
        font-size: 16px;
        margin-top:30px;
        margin-bottom: 30px;
    }
    hr.ttl_01_hr {
        flex: 1;
        height: 1px;
        margin-left: 44px;
        background: #e5e5e5;
        overflow: visible;
        border: none;
    }
    /* リンクボタン */
    a.kaihatsu_way_link{
        display: inline-block;          /*widthで横幅を指定したい場合に必要*/
        width:50%;                      /*横幅*/
        font-size: 16px;                /*フォントサイズ*/
    }
    /* TOP画像_PC版 */
    img.PC_top_img{    
        display: block;
        width: 100%;
        height:auto;
        margin:auto;
    }
    img.PC_top_img2{
        display: none;
    }
    /* 文字表示設定 */
    div.text_space{
        margin:auto;
        width:100%;
        margin-top:2em;
        margin-bottom: 2em;
    }
    /* 前置き文 */
    p.preface_text{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;
    }
    /* 項目名 */
    h2.job_info_title{
        margin-bottom: 25px;
        padding-left: 10px;
        border-left: 5px solid #dfbf5d;
        font-size: 25px;
        color: #333333;
        text-align: left; 
    }
    /* 文字表示設定2 */
    div.text_space2{
        margin:auto;
        width:100%;
        margin-top:1em;
        margin-bottom: 1em;
    }
    /* 簡易説明 */
    p.Outline{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;        
    }
    img.developementflow{
        width:95%;
        padding:2em 0;
    }

    /*  ============================ */
    /*  雷紋 */
    /*  ============================ */
    img.raimon{
        width:100%;
    }
    /* ============================= */
    /* 開発フロー */
    /* ============================= */
    .detailflow2{
        display:none;
    }
    .step-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        background-color: #ffffff;
        border-radius: 8px;
        border-color: #333;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    .step {
        display: flex;
        /* margin-bottom: 20px; */
        align-items: flex-start;
    }
    /* 画像 */
    .step img {
        width: 40%;
        margin-right: 20px;
    }
    .step-content {
        max-width: 60%;
    }
    /* サブタイトル */
    p.subtitle{
        text-align: left;
        font-size:18px;
        font-weight: bolder;
        color: #555;        
        margin:0;
    }
    .step-number {
        text-align: left;
        font-size: 1.2em;
        font-weight: bold;
        color: #d9534f; /* 赤色 */
    }
    .step-title {
        text-align: left;
        font-size: 1.5em;
        font-weight: bold;
        color: #d9534f; /* 赤色 */
        margin-bottom: 10px;
    }
    .step-description {
        text-align: left;
        font-size: 1em;
        color: #555;
        margin-bottom: 20px;
    }

    /* ======================================== */
    /* ======================================== */
    /* ADD START 20241113 @moriyama */
    /* 階層構造表示 */
    /* ======================================== */
    /* ======================================== */
    div.l_class{
        width:100%;
        margin:10px auto;
        padding:0;   
    }
    ul.l_class_li{
        margin: auto;
        padding: 10px 25px 10px 0;
        display: flex;
        font-size: 0;
    }
    li.l_class_li_item{
        list-style: none;
        margin-left: 10px;
        font-size: 13px;
    }
    a.l_class_li_item_link{
        color: #de0000;
        outline: none;
        text-decoration: none;
    }
    a.l_class_li_item_link::after{
        content: "＞";
        border-style: solid;
        padding-left:15px;
        border-width: 0;
        box-sizing: inherit;
        color:black;
    }

    /* ====================================== */
    /* 三角 */
    /* ====================================== */
    .triangle{
        width: 0;
        height: 0;
        margin:auto;
        text-align: center;
        padding:10px 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid rgb(255, 6, 6);
      }   
}

/* ====================================== */
/* ====================================== */
/* 1200px以上のウィンドウサイズの時 */
/* ====================================== */
/* ====================================== */
@media screen and (min-width: 1300px) {
    /*  =====背景白 全体======================================= */
    div.main{
        width:80%;
        margin:10px auto 0 auto;
        padding:0;
        background-color: #fff;
    }
    /* タイトル */
    h1.ttl_01{
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-bottom: 20px;
        font-size: 26px;
        color: #de0000;
        font-weight: normal;
        text-align: left;    
    }
    div.l_main_inner{
        margin: auto;
        padding: 30px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;    
    }
    /* ======add start 2024/12/13 ======*/
    /* ピンク背景 */
    div.l_main_inner2{
        width:80%;
        margin: 0 auto;
        margin-bottom:20px;
        padding: 30px 25px 15px;
        box-sizing: border-box;
        background: #ffe6e6;    
    }
    /* 総括フォント */
    p.text_info{
        color: #333333;
        font-size: 16px;
        margin-top:30px;
        margin-bottom: 30px;
    }
    /* リンクボタン */
    a.kaihatsu_way_link{
        display: inline-block;          /*widthで横幅を指定したい場合に必要*/
        width:50%;                      /*横幅*/
        font-size: 16px;                /*フォントサイズ*/
    }
    hr.ttl_01_hr {
        flex: 1;
        height: 1px;
        margin-left: 44px;
        background: #e5e5e5;
        overflow: visible;
        border: none;
    }
    /* TOP画像_PC版 */
    img.PC_top_img{    
        display: block;
        width: 100%;
        height:auto;
        margin:auto;
    }
    img.PC_top_img2{
        display: none;
    }
    /* 文字表示設定 */
    div.text_space{
        margin:auto;
        width:100%;
        margin-top:2em;
        margin-bottom: 2em;
    }
    /* 前置き文 */
    p.preface_text{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;
    }
    /* 項目名 */
    h2.job_info_title{
        margin-bottom: 25px;
        padding-left: 10px;
        border-left: 5px solid #dfbf5d;
        font-size: 25px;
        color: #333333;
        text-align: left; 
    }
    /* 文字表示設定2 */
    div.text_space2{
        margin:auto;
        width:100%;
        margin-top:1em;
        margin-bottom: 1em;
    }
    /* 簡易説明 */
    p.Outline{
        font-size: 16px;
        text-align: left;
        line-height: 1.8em;        
    }
    img.developementflow{
        width:95%;
        padding:2em 0;
    }
    /*  ============================ */
    /* ブラザーズコメント */
    /*  ============================ */
    div.brothers{
        display: flex;
        text-align:center;
        flex-wrap: wrap;
        width: 100%;
        margin:0 auto;
        padding:0;
    }
    div.brothers_item {
        width: calc(100% / 2 - 30px);
        padding: 50px 10px;
        text-align: center;
        padding:20px 0;
    }
    div.broters_comment{
        line-height:calc( 80px - 50px );	/*( BOXの高さ - padding幅 )*/
    }

    div.broters_comment {
        align-items: center;
        position: relative;
        margin-left: 15px;
        padding: .8em 1.2em;
        border-radius: 5px;
        background-color: #ffffff;
        color: #333333;
    }
    
    div.broters_comment::before {
        position: absolute;
        right: -15px;
        width: 20px;
        height: 30px;
        background-color: #ffffff;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        content: '';
    }
    /*  ============================ */
    /*  雷紋 */
    /*  ============================ */
    img.raimon{
        width:100%;
    }
    /* ============================= */
    /* 開発フロー */
    /* ============================= */
    .detailflow2{
        display:none;
    }
    .step-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    .step {
        display: flex;
        /* margin-bottom: 20px; */
        align-items: flex-start;
    }
    .step img {
        width: 40%;
        margin-right: 20px;
    }
    .step-content {
        max-width: 60%;
    }
    /* サブタイトル */
    p.subtitle{
        text-align: left;
        font-size:18px;
        font-weight: bolder;
        color: #555;        
        margin:0;
    }
    .step-number {
        text-align: left;
        font-size: 1.2em;
        font-weight: bold;
        color: #d9534f; /* 赤色 */
    }
    .step-title {
        text-align: left;
        font-size: 1.5em;
        font-weight: bold;
        color: #d9534f; /* 赤色 */
        margin-bottom: 10px;
    }
    .step-description {
        text-align: left;
        font-size: 1em;
        color: #555;
        margin-bottom: 20px;
    }

    /* ======================================== */
    /* ======================================== */
    /* ADD START 20241113 @moriyama */
    /* 階層構造表示 */
    /* ======================================== */
    /* ======================================== */
    div.l_class{
        width:80%;
        margin:10px auto;
        padding:0;   
    }
    ul.l_class_li{
        margin: auto;
        padding: 10px 25px 10px 0;
        display: flex;
        font-size: 0;
    }
    li.l_class_li_item{
        list-style: none;
        margin-left: 10px;
        font-size: 13px;
    }
    a.l_class_li_item_link{
        color: #de0000;
        outline: none;
        text-decoration: none;
    }
    a.l_class_li_item_link::after{
        content: "＞";
        border-style: solid;
        padding-left:15px;
        border-width: 0;
        box-sizing: inherit;
        color:black;
    }

    /* ====================================== */
    /* 三角 */
    /* ====================================== */
    .triangle{
        width: 0;
        height: 0;
        margin:auto;
        text-align: center;
        padding:10px 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid rgb(255, 6, 6);
      }    
}

/* ======================================= */
/* ======================================= */
/* 吹き出し PC版*/
/* ======================================= */
/* ======================================= */
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fffae1;
    border: 1px solid #c8c8c8;
    border-radius: 10px;
    width:80%;
    font-size: 14px;
    padding:3%;
}
.arrow_question {
    float: right;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
} 
.arrow_question:after,
.arrow_question:before {
    right: 100%;
}
.arrow_answer:after,
.arrow_answer:before{
     left: 100%;
}
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 8px;
    margin-top: -8px;
}
.arrow_answer:after{
    border-left-color: #fffae1;
}
.arrow_question:after{
    border-right-color: #fff;  
}
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 9px;
    margin-top: -9px;
}
.arrow_answer:before{
    border-left-color: #c8c8c8;
}
.arrow_question:before {
    border-right-color: #c8c8c8;    
}
.question_image{
     float: left;
     width:15%;
}
.answer_image{
     float: right;
     width:15%;
}
.answer_image img,
.question_image img{
    border-radius: 50px;
    display: block;
    margin: 0 auto;
    max-width: 60px;
    width: 100%;
} 
.question_Box .name {
    text-align: center;
    font-size: 12px;
}
.question_Box{
     width: 100%;
     overflow: hidden;
     margin-bottom: 8px;
}
.question_Box:nth-child(even){
     margin-bottom: 25px;
}

/* ======================================= */
/* ======================================= */
/* 吹き出し スマホ版*/
/* ======================================= */
/* ======================================= */
.balloon4 {
    position: relative;
   display: inline-block;
    margin: 1.5em 0;
   padding:1em;
   min-width:12em;
   max-width:100%;
   text-align:center;
    color: #333;
   font-size: 12px;
   background: #eee;
   background: #FFF;
   border: solid 3px #ccc;
   border-radius:.5em;
   box-sizing: border-box;
}
.balloon4:before{
   content: "";
   position: absolute;
   bottom: -24px;
   left: 50%;
   margin-left: -15px;
   border: 12px solid transparent;
   border-top: 12px solid #FFF;
   z-index: 2;
}
.balloon4:after{
 content: "";
 position: absolute;
 bottom: -30px;
 left: 50%;
 margin-left: -17px;
 border: 14px solid transparent;
 border-top: 14px solid #ccc;
 z-index: 1;
}
.comment_phone_img{
    margin:0 auto;
    width:30%;
}
.comment_phone_img img{
   border-radius: 50px;
   display: block;
   margin: 0 auto;
   max-width: 60px;
   width: 100%;
} 
.comment_phone_img .name {
    text-align: center;
    font-size: 12px;
}