@charset "utf-8";


/*comment 10802*/
.area_button{display: flex; justify-content: center;width: 100%;margin: 20px auto;flex-direction: column;flex-wrap:wrap}
.area_button>div{width: 100%;    text-align: center;box-sizing: border-box;margin: 0 auto;padding:10px 30px}
.button_round{margin: 0 auto; align-items: center;justify-content: center;width: 100%;max-width: 320px;height: auto;padding: 8px 24px;font-size: 18px;font-weight: bold;color: #fff !important;text-align: center;overflow-wrap: anywhere;background-color: #0379c1;border-radius: 32px; text-decoration: none;display: block;}
.area_button a{cursor: pointer;}
.area_button a:visited {color:#fff;}
.comment { margin: 2em auto 2.5em;;padding:.5em .5em; position: relative;border:1px solid #0379c1; background: none;z-index: 0 }
.comment:after { position: absolute;inset: 5px -5px -5px 5px;  content: '';background:linear-gradient(130deg,rgba(3, 121, 193, 0.03) 0%, rgba(3, 121, 193, 0.13) 100%);z-index: -1;}
.comment p {  width: 100%; margin: 1em auto .5em; padding: .2em .4em; z-index: 1;}
.br-sp { display: none;}
.name {text-align:right;display: block;font-weight:bold;line-height:1.5;margin-top:1.2em}
.btn_pen:after {content: '';display: inline-block;background-image: url("../images/aoten/pen.png");background-size: contain; background-repeat: no-repeat;vertical-align: middle;width: 15px;height: 15px;margin: 0 0 0 5px;}

@media (max-width: 600px) {
 .br-sp {display: block;}
}
@media screen and (min-width: 480px) {
.area_button{flex-direction: row;flex-wrap: wrap;max-width:900px}
.area_button>div{flex:0 0 300px}
.area_button>div{padding:10px}
.comment p{padding: .5em 1em .2em;}
}