@charset "UTF-8";

/* 20210621 umeda */
@media screen and (max-width: 730px){
	.box_width{
		width:100%;
	}
	.img_adj{
		width:100% !important;
	}
    .tac_blog img{
		width: 100%;
        max-width: 100%;
        height: auto;          
    }
    /* 20210621 umeda db sample */
    .box_db1{
        display: block;
        width:100%;
        text-align: center;
    }
    .balloon2-right {
      position: relative;
      display: inline-block;
      margin: 0.5em 10px 0.5em 0;
      padding: 5px 10px;
      min-width: 16%;
      max-width: 100%;
      color: #333;
      font-size: 0.72em;
      background: #FFF;
      border: solid 2px var(--color);
      box-sizing: border-box;
      border-radius: 0px;
        text-align: center;
        font-weight: 700;
    }

    .balloon2-right:before {
      content: "";
      position: absolute;
      top: 50%;
      right: -28px;
      margin-top: -19px;
      border: 19px solid transparent;
      border-left: 10px solid #FFF;
      z-index: 2;
    }

    .balloon2-right:after {
      content: "";
      position: absolute;
      top: 50%;
      right: -32px;
      margin-top: -20px;
      border: 20px solid transparent;
      border-left: 10px solid var(--color);
      z-index: 1;
    }

    .balloon2-right p {
      margin: 0;
      padding: 0;
    }
    .balloon3 {
      position: relative;
      display: inline-block;
      margin: 0.5em 5px 0.5em 0.3em;
      padding: 5px 10px;
      min-width: 75%;
      max-width: 100%;
      color: #333;
      font-size: 0.72em;
      background: #FFF;
      border: solid 2px var(--color);
      box-sizing: border-box;
      border-radius: 10px;
        text-align: left;
        font-weight: 700;
    }    
    
}
@media screen and (min-width: 731px){
	.box_width{
		width:50%;
	}
	.img_adj{
		width:90%;
	}
    .tac_blog img{
		width: 70%;
        max-width: 100%;
        height: auto;          
    }
    /* 20210621 umeda db sample */    
    .box_db1{
        display: block;
        width:100%;
        text-align: center;
    }
    .balloon2-right {
      position: relative;
      display: inline-block;
      margin: 0.3em 15px 0.3em 0;
      padding: 7px 10px;
      min-width: 10%;
      max-width: 100%;
      color: #333;
      font-size: 1.2em;
      background: #FFF;
      border: solid 3px var(--color);
      box-sizing: border-box;
      border-radius: 0px;
        text-align: center;
        font-weight: 700;
    }

    .balloon2-right:before {
      content: "";
      position: absolute;
      top: 50%;
      right: -42px;
      margin-top: -21px;
      border: 21px solid transparent;
      border-left: 22px solid #FFF;
      z-index: 2;
    }

    .balloon2-right:after {
      content: "";
      position: absolute;
      top: 50%;
      right: -47px;
      margin-top: -22px;
      border: 22px solid transparent;
      border-left: 22px solid var(--color);
      z-index: 1;
    }

    .balloon2-right p {
      margin: 0;
      padding: 0;
    }
    .balloon3 {
      position: relative;
      display: inline-block;
      margin: 0.3em 15px 0.3em 0.3em;
      padding: 8px 10px;
      min-width: 45%;
      max-width: 100%;
      color: #333;
      font-size: 1.2em;
      background: #FFF;
      border: solid 3px var(--color);
      box-sizing: border-box;
      border-radius: 10px;
        text-align: left;
        font-weight: 700;
    }
}