@charset "UTF-8";

/**
 * column.css
 *
 * #
 *
*/


/* #layout
   ----------------------------------------------------------------- */
.l-column-top,
.l-column { 
  padding: 5.33333vw 0 0;
  font-size: 13px;
  font-size: 3.46667vw;
}



/* #パンくず
   ----------------------------------------------------------------- */
.breadcrumb {
  overflow: hidden;
  padding: 3.86% 3.99%;
  color: #fff;
  line-height: 1.25;
  background-color: #1f3c79;
}

.breadcrumb-item {
  position: relative;
  float: left;
  margin-right: 1.44%;
  margin-right: 1.33vw;
  padding-right: 2.67%;
  padding-right: 2.39vw;
}

.breadcrumb-item:before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 0;
  width: 6px;
  width: 1.59vw;
  height: 6px;
  height: 1.59vw;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.breadcrumb a { color: #fff; }



/* ==================================================================
  # コラムTOP
================================================================== */
/*ページタイトル_TOP*/
.column-top-ttl {
  padding: 35px;
  padding: 9.33333vw;
  font-size: 20px;
  font-size: 6vw;
  font-weight: normal;
  color: #1f3c79;
  text-align: center;
  line-height: 1;
  background: url("../../images/layer/bg_headline.jpg") no-repeat bottom right;
  background-size: cover;
}


/*一覧ブロック*/
.relation-thum {
  position: relative;
  display: table;
  padding: 5.33333vw 0;
  margin: 0 5.33333vw;
  text-decoration: none;
  border-bottom: 1px solid #e6e6e6;
}

.relation-img {
  width: 26.66667vw;
  height: 26.13333vw;
  display: table-column;
  object-fit: cover;
}

.relation-txt {
  width: 66.66667vw;
  display: table-cell;
  padding-left: 4vw;
  font-size: 4.26667vw;
  vertical-align: top;
  color: #1a489c;
}

.relation-date {
  position: absolute;
  bottom: 5.33333vw;
  right: 0;
  font-size: 3.2vw;
  line-height: 1;
  text-align: right;
  color: #afafaf;
}

/*ページ送り*/
.page-nav {
	margin: 8vw 0;
	text-align: center;
}

.page-nav li {
	display: inline-block;
	margin: 0 0.4vw;
  font-size: 0;
	padding: 0;
}
.page-nav li:first-child {
	margin-left: 1.6vw;
}
.page-nav li:last-child {
	margin-right: 1.6vw;
}

.page-nav li a {
	display: inline-block;
	padding: 2.66667vw 3.2vw;
  font-size: 3.2vw;
  line-height: 1;
  color: #1f3c79;
	background-color: #f0fafe;
	border: 0.26667vw solid #84bef0;
  border-radius: 0.66667vw;
	text-decoration: none;
	vertical-align: middle;
}

.page-nav .direction {
	padding: 2.66667vw 4vw;
	background-color: #fff;
}

.current a {
	background-color: #1a489c !important;
  color: #f0fafe !important;
}


/* ==================================================================
  # コラム記事
================================================================== */
/*ページタイトル_記事ページ*/
.column-layer-ttl {
  padding: 10.66667vw 5.33333vw;
  background: url("../../images/layer/bg_headline.jpg") no-repeat bottom right;
  background-size: cover;
}

.column-layer-ttl-txt {
  font-size: 6vw;
  margin-bottom: 4vw;
  font-weight: normal;
  color: #1f3c79;
  text-align: left;
}

.column-layer-ttl-date {
  font-size: 3.2vw;
  font-weight: normal;
  color: #4f585c;
  text-align: left;
  line-height: 1;
}

/*見出し*/
.column-headline01 {
  font-size: 6vw;
  line-height: 1.5;
  color: #fff;
  padding: 4vw 5.33333vw;
  margin: 10.66667vw 0 5.33333vw;
  background: linear-gradient(to right, #006cc8 0%,#009ae9 100%);
  border-bottom: 0.53333vw solid #006CC8;
}

.column-headline02 {
  position: relative;
  font-size: 5.06667vw;
  line-height: 1.5;
  padding: 0.8vw 5.33333vw 0.8vw 2.66667vw;
  margin: 10.66667vw 5.33333vw 10.66667vw;
}
.column-headline02:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.8vw;
  height: 100%;
  background: linear-gradient(to top, #006cc8 0%,#009ae9 100%);
}
.column-headline02:after {
  content: "";
  position: absolute;
  bottom: -2.66667vw;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.column-headline03 {
  font-size: 5.06667vw;
  line-height: 1.5;
  color: #1a489c;
  padding: 2.66667vw;
  margin: 8vw 5.33333vw 5.33333vw;
  background-color: #ddebf6;
  border-radius: 0.66667vw;
}

.column-headline04 ,
.box .column-headline04 {
  font-size: 4.8vw;
  line-height: 2;
  color: #1a489c;
  margin: 8vw 5.33333vw 4vw;
}

/*原稿本文テキスト*/
.l-column p {
  font-size: 4.26667vw;
  line-height: 2;
  margin: 0 6.66667vw 8vw; 
}

.column-point01 {
  color: #df4900;
}

.column-point02 {
  background: linear-gradient(transparent 50%, #f1fa8f 0%);
  background-color: #f1fa8f\9;
}

/*リスト*/
.column-list-ul {
  position: relative;
  font-size: 4.53333vw;
  margin: 6.66667vw;
  padding-left: 5.33333vw;
}

.column-list-item {
  position: relative;
}

.column-list-ol {
  font-size: 4.53333vw;
  margin: 6.66667vw 6.66667vw 6.66667vw 5.33333vw;
  list-style: none;
}

.column-list-item {
  position: relative;
  margin-bottom: 1.33333vw;
}
.column-list-item:before {
  content: "・";
  position: absolute;
  top: 0;
  left: -5.33333vw;
  color: #009ae9;
}

.column-number-item01,
.column-number-item02,
.column-number-item03,
.column-number-item04,
.column-number-item05,
.column-number-item06,
.column-number-item07,
.column-number-item08,
.column-number-item09,
.column-number-item10 {
  position: relative;
  margin-bottom: 4vw;
}
.column-number-item01:before {
  content: "1";
}
.column-number-item02:before {
  content: "2";
}
.column-number-item03:before {
  content: "3";
}
.column-number-item04:before {
  content: "4";
}
.column-number-item05:before {
  content: "5";
}
.column-number-item06:before {
  content: "6";
}
.column-number-item07:before {
  content: "7";
}
.column-number-item08:before {
  content: "8";
}
.column-number-item09:before {
  content: "9";
}
.column-number-item10:before {
  content: "10";
}
.column-number-item01:before,
.column-number-item02:before,
.column-number-item03:before,
.column-number-item04:before,
.column-number-item05:before,
.column-number-item06:before,
.column-number-item07:before,
.column-number-item08:before,
.column-number-item09:before,
.column-number-item10:before {
  position: absolute;
  font-size: 2.66667vw;
  top: .666666vw;
  left: -6vw;
  margin: auto 0;
  padding-top: 1.06667vw;
  width: 4vw;
  height: 4vw;
  text-align: center;
  color: #fff;
  background-color: #009ae9;
  line-height: .75;
}

/*SNS*/
.sns {
  padding: 0 26vw 5.33333vw;
}
.sns a {
  float: left;
  width: 8vw;
  display: block;
}
.sns a+a {
  margin-left: 5.33333vw;
}

/*記事内写真*/
.column-img {
  margin: 0 5.33333vw 5.33333vw;
}
.column-img {
  margin: 0 5.33333vw 4vw;
}
.column-img-seet {
  width: 33.33333vw;
  margin: 8vw auto ;
}
.column-img img {
  width: 100%;
}
.column-img p {
  padding: 0;
}

/*youtube遅延読み込み*/
.youtube {
  position:relative;
  text-align: center;
}
.youtube img ,
.youtube iframe {
  position: relative;
  width: 74.66667vw;
  height: 42vw;
}
.yt-btn:before {
  position: relative;
}
.yt-btn:before {
  content: "";
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  width:64px;
  height:45px;
  background: url("../../images/column/ico_youtube_off.png") no-repeat;
  background-size: contain;
  z-index: 1;
}

/*ページ内リンクボタン*/
.column-page-btn {
  display: block;
  font-size: 4.26667vw;
  line-height: 2;
  text-align: center;
  color: #006cc8;
  border: 0.26667vw solid #006cc8;
  margin: 0 0 5.33333vw;
  border-radius: 0.66667vw;
}

.column-page-btn a {
  position: relative;
  display: block;
  padding: 4vw 9.06667vw;
  color: #006cc8;
}
.column-page-btn a:before {
  content: "▼";
  position: absolute;
  top: calc(50% - 4vw);
  bottom: calc(50% - 4vw);
  margin: auto;
  left: 3.73333vw;
  font-size: 3.73333vw;
}
.column-page-btn a:after {
  content: "▼";
  position: absolute;
  top: calc(50% - 4vw);
  bottom: calc(50% - 4vw);
  margin: auto;
  right: 3.73333vw;
  font-size: 3.73333vw;
}

/*キャラクター*/
.character-txtbox {
  position: relative;
  font-size: 4.26667vw;
  line-height: 1.769;
  color: #1a489c;
  margin: 8vw 6.66667vw 8vw 26.66667vw;
  padding: 4.26667vw 5.33333vw;
  border: 0.26667vw solid #1a489c;
  background-color: #f0fafe;
  border-radius: 0.66667vw;
}
.character-txtbox p {
  padding: 0;
}
.character01:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -23.73333vw;
  width: 21.33333vw;
  height: 24.93333vw;
  background: url("../../images/column/img_character01.png") no-repeat;
  background-size: 21.33333vw 24.93333vw;
}
.character02:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -23.73333vw;
  width: 21.33333vw;
  height: 23.73333vw;
  background: url("../../images/column/img_character02.png") no-repeat;
  background-size: 21.33333vw 23.73333vw;
}
.character03:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -23.73333vw;
  width: 21.33333vw;
  height: 23.73333vw;
  background: url("../../images/column/img_character03.png") no-repeat;
  background-size: 21.33333vw 23.73333vw;
}
.character04:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -23.73333vw;
  width: 21.33333vw;
  height: 24.8vw;
  background: url("../../images/column/img_character04.png") no-repeat;
  background-size: 21.33333vw 24.8vw;
}
.character01:after,
.character02:after,
.character03:after,
.character04:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -2.2vw;
  width: 2.26667vw;
  height: 4.13333vw;
  background: url("../../images/column/ico_balloon.png") no-repeat;
  background-size: 2.26667vw 4.13333vw;
}


/*目次*/
.outline {
  position: relative;
  margin: 10.66667vw 5.33333vw;
  padding: 6.66667vw 2.66667vw;
  background-color: #f7f3e3;
  border: 1px solid #dad1a7;
}
.outline:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 4.8vw;
  height: 4.8vw;
  background: url("../../images/column/ico_outline.gif") no-repeat;
  background-size: 4.8vw;
}

.outline-txt {
  position: relative;
  font-size: 4.26667vw;
  margin-bottom: 10.66667vw;
  line-height: 1;
  text-align: center;
  color: #98883b;
}
.outline-txt:before {
  content: "";
  position: absolute;
  bottom: -4vw;
  left: 0;
  background-color: #98883b;
  width: 100%;
  height: 2px;
}
.outline-txt:after {
  content: "";
  position: absolute;
  bottom: -4.66667vw;
  left: 0;
  background-color: #98883b;
  width: 100%;
  height: 1px;
}

.outline-note {
}

.outline-list {
  position: relative;
  margin: 0 3.33333vw 5.33333vw;
  padding: 0 4vw;
  color: #1f3c79;
}
.outline-list:last-child {
  margin-bottom: 0;
}

.outline ul {
  position: relative;
  padding: 0 2.66667vw;
  margin: 2.66667vw 0;
  font-size: 3.73333vw;
  line-height: 1.8;
}
.outline ul a {
  text-decoration: none;
  color: #1f3c79;
}

.outline ul li {
  margin-bottom: 2vw;
}
.outline ul li:before {
  position: relative;
  content: "▶︎";
  top: -0.5vw;
  left: -0.8vw;
  color: #98883b;
  font-size: 1.06667vw;
}

.outline ul ul li {
  position: relative;
  margin: 0 0 1.06667vw -5.33333vw;
  font-size: 3.46667vw;
  margin: 2.66667vw 0;
  line-height: 1.8;
}
.outline ul ul li a {
  color: #333;
  text-decoration: none;
}
.outline ul ul li:before {
  position: absolute;
  content: "-";
  top: 0.33vw;
  left: -2.5vw;
}

/*水の110番救急車のポリシー*/
.column-poricy {
  padding: 4vw 5.33333vw 5.33333vw;
  margin: 0 5.33333vw 5.33333vw;
  background-color: #f0fafe;
  border: 0.8vw solid #1a489c;
  border-radius: 1.33333vw;
}

.column-poricy-ttl {
  position: relative;
  background-color: #1a489c;
  color: #eadfa1;
  font-size: 6.13333vw;
  line-height: 1;
  text-align: center;
  font-weight: bold;: NotoSansJP-bold;
  padding: 2.66667vw 0;
  margin: 0 -7.33333vw 6.66667vw;
}
.column-poricy-ttl:before {
  content: "";
  position: absolute;
  bottom: -2vw;
  left: 0;
  width: 2vw;
  height: 2vw;
  background: url("../../images/column/ico_poricy_left.png") no-repeat;
  background-size: 2vw;
}
.column-poricy-ttl:after {
  content: "";
  position: absolute;
  bottom: -2vw;
  right: 0;
  width: 2vw;
  height: 2vw;
  background: url("../../images/column/ico_poricy_right.png") no-repeat;
  background-size: 2vw;
}

.column-poricy-img {
  width: 38.66667vw;
  margin: 0 auto;
  margin-bottom: 6.66667vw;
}

.column-poricy-txt {
  font-size: 4.26667vw;
  line-height: 2;
  margin-bottom: 4vw;
}
.column-poricy-solution {
  background-color: #fdf9bc;
  border: 0.26667vw solid #eadfa1;
  padding: 4vw 3.33333vw;
}

.column-poricy-solution-txt {
  position: relative;
  font-size: 4.26667vw;
  line-height: 2;
  font-weight: bold;: NotoSansJP-bold;
  margin-bottom: 2.66667vw;
  padding-left: 5.33333vw;
}
.column-poricy-solution-txt:before {
  content: "";
  position: absolute;
  top: 2vw;
  left: 0;
  width: 4.53333vw;
  height: 3.86667vw;
  background: url("../../images/column/ico_check.png") no-repeat;
  background-size: contain;
}

/* 問い合わせ
   ----------------------------------------------------------------- */
.l-column-contact-top {
  position: relative;
  width: 100%;
  padding: 5.33333vw 2.66667vw;
  margin-bottom: 2px;
  background: #1a489c;
  text-align: center;
}
.l-column-contact {
  position: relative;
  width: 100%;
  padding: 20px 10px;
  padding: 5.33333vw 2.66667vw;
  background: #1a489c;
  text-align: center;
  margin-bottom: 2px;
  margin-bottom: 0.53333vw;
}

.column-contact-coupon {
  margin-bottom: 20px;
  margin-bottom: 5.33333vw;
}

.column-contact-tel-info {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-size: 4.26667vw;
  line-height: 1;
  color: #fff;
  margin: 0 auto 8px;
  margin: 0 auto 2.13333vw;
}
.column-contact-tel-info:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -15px;
  left: -4.6875vw;
  background: url("../../images/top/contact/icn_balloon_left.png") no-repeat;
  background-size: contain;
  margin: auto;
  width: 8px;
  width: 2.26667vw;
  height: 12px;
  height: 3.2vw;
}
.column-contact-tel-info:after {
  content: "";
  background: url("../../images/top/contact/icn_balloon_right.png") no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: -15px;
  right: -4.6875vw;
  width: 8px;
  width: 2.26667vw;
  height: 12px;
  height: 3.2vw;
}

.column-contact-tel-info02 {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-size: 4.26667vw;
  line-height: 1;
  color: #fff;
  margin: 8px auto 0;
  margin: 2.13333vw auto 0;
}

.column-contact-tel-copy {
  position: relative;
  display: inline-block;
  font-size: 22px;
  font-size: 6vw;
  line-height: 1.3;
  font-weight: bold;: "NotoSansJP-bold";
  color: #ffe400;
  margin: 0 auto 12px;
  margin: 0 auto 4.44444vw;
  border-bottom: 1px solid #fff;
  border-bottom: 0.26667vw solid #fff;
}
.column-contact-tel-copy:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -15px;
  left: -4.6875vw;
  background: url("../../images/top/contact/icn_balloon_left.png") no-repeat;
  background-size: contain;
  margin: auto;
  width: 11px;
  width: 3.06667vw;
  height: 16px;
  height: 4.26667vw;
}
.column-contact-tel-copy:after {
  content: "";
  background: url("../../images/top/contact/icn_balloon_right.png") no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: -15px;
  right: -4.6875vw;
  width: 11px;
  width: 3.06667vw;
  height: 16px;
  height: 4.26667vw;
}

.column-contact-balloon {
  position: relative;
  float: left;
  width: 168px;
  width: 44.8vw;
  padding: 15px 0;
  padding: 4.6875vw 0;
  color: #1a489c;
  font-size: 13px;
  font-size: 3.46667vw;
  line-height: 1.5;
  font-weight: bold;: "NotoSansJP-medium";
  background: #fff;
  border-radius: 5px;
  border-radius: 1.33333vw;
}

.column-contact-balloon:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  margin-left: -2.13333vw;
  border: 8px solid transparent;
  border: 2.13333vw solid transparent;
  border-top: 8px solid #fff;
  border-top: 2.13333vw solid #fff;
}

.column-contact-img {
  float: right;
  width: 187px;
  width: 49.86667vw;
  margin-right: -5px;
  margin-right: -1.33333vw;
}

/* ミニコラム
   ----------------------------------------------------------------- */
.l-minicolumn {
  background: 
    url("../../images/column/bg_note01.gif") repeat-x,
    url("../../images/column/bg_note02.gif")  repeat;
  background-size: 
    7.86667vw 7.6vw,
    0.13333vw 5.06667vw;
  padding: 8vw 2.66667vw 2.66667vw;
  margin: 8vw 6.66667vw;
  border: 1px solid #ccc;
  box-shadow: 0.4vw 0.4vw 0 0 #e4e4e4;
}

.minicolumn-ttl {
  position: relative;
  display: inline-block;
  background-color: #009ae9;
  color: #fff;
  font-weight: bold;: "NotoSansJP-bold";
  font-size: 4.26667vw;
  line-height: 1;
  border-left: 1.33333vw solid #1a489c;
  padding: 2.66667vw 4vw;
  margin-left: -5.33333vw;
}
.minicolumn-ttl:before {
  content: "";
  position: absolute;
  top: 0;
  right: -2.66667vw;
  width: 2.66667vw;
  height: 2.66667vw;
  border-style: solid;
  border-width: 2.66667vw 0 0 2.66667vw;
  border-color: transparent transparent transparent #2c6a9d;
}
.minicolumn-ttl:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -2.66667vw;
  width: 2.66667vw;
  height: calc(100% - 2.66667vw);
  background-color: #009ae9;
}

.l-minicolumn .column-list-ul  {
  margin-left: 0;
  margin-right: 0;
}
.l-minicolumn .column-list-ol {
  margin-left: 7.33333vw;
  margin-right: 0;
  padding-left: 0;
}

/* 開閉ボックス
   ----------------------------------------------------------------- */
.box {
  position: relative;
  margin: 5.33333vw;
  padding: 0;
  border-radius: 0.66667vw;
  border: 1px solid #cde3ec;
  background-color: #f0fafe;
}

p.box-btn {
  display: block;
  width: 66.66667vw;
  padding: 4vw 0;
  margin: 8vw auto;
  font-size: 3.46667vw;
  line-height: 1;
  text-align: center;
  border-radius: 1.33333vw;
  border: 1px solid #cccccc;
  background: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
  background: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
  -webkit-box-shadow: 0px 1.06667vw 0px 0px #ccc;
  box-shadow: 0px 1.06667vw 0px 0px #ccc;
  color: #333;
  text-decoration: none;
}

/* 表 */

.column-table-wrap { overflow: auto; }

.column-table {
  font-size: 3.75vw;
  line-height: 1.5;
  margin: 8vw;
  border-collapse: collapse; 
}
.column-table-head {
  color: #0039ab;
  white-space: nowrap;
  padding: 5.33333vw 2.66667vw;
  text-align: left;
  background-color: #eee ;
  border: 1px solid #8a99ab;
}

.column-table-txt {
  padding: 5.33333vw 2.66667vw;
  border: 1px solid #8a99ab;
}

/* 合わせて読みたい */
.linkcard {
  position: relative;
  display: table;
  margin: 6.66667vw 5.33333vw 10.66667vw;
  padding: 2.66667vw;
  border: 1px solid #006cc8;
  text-decoration: none;
}

.linkcard-img {
  display: table-cell;
  width: 26.66667vw;
}
.linkcard-txt {
  position: relative;
  display: table-cell;
  padding: 8vw 0 0 4vw;
  vertical-align: middle;
  width: 53.33333vw;
  font-size: 3.46667vw;
  line-height: 1.8;
  color: #1a489c;
}
.linkcard-txt:before {
  content: "合わせて読みたい";
  position: absolute;
  top: 0;
  left: 4vw;
  padding: 1.33333vw 2.66667vw;
  font-size: 3.2vw;
  line-height: 1;
  color: #333;
  background-color: #fff77b;
}

/* アソシエイトリンク */
.column-shop {
  margin: 0 5.33333vw 8vw;
  padding: 5.3333333333vw;
  line-height: 1;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 0.66667vw;
}

.column-shop a {
  display: block;
  padding: 2.6666666667vw 0;
  text-align: center;
  background-color: #fff;
}

.column-shop .column-shop-info {
  padding-top: 10px;
}

.column-shop .column-shop-name a {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 6.25vw;
  padding: 0;
  text-align: left;
  font-size: 4.26667vw;
  line-height: 1.2;
  background-color: #eee;
}

.column-shop .column-shop-btn a {
  display: block;
  width: auto;
  height: auto;
  padding: 4vw 0;
  color: #333;
  font-size: 3.46667vw;
  line-height: 1;
  text-decoration: none;
  border-radius: 1.33333vw;
  border: 1px solid #b78b20;
  background: #eeb732;
  background: -webkit-gradient(linear, left top, left bottom, from(#f5d68a), to(#eeb732));
  background: linear-gradient(to bottom, #f5d68a 0%, #eeb732 100%);
  -webkit-box-shadow: 0px 1.06667vw 0px 0px #b78b20;
  box-shadow: 0px 1.06667vw 0px 0px #b78b20;
}


/* Q&A */
.question {
  margin: 0 5.33333vw 6.66667vw;
  padding: 5.33333vw 2.66667vw;
  border: 1px solid #006cc8;
  border-radius: 0.66667vw;
}

.question-q {
  position: relative;
  margin: 0 0 4.26667vw;
  padding-left: 8vw;
  font-weight: bold;: NotoSansJP-bold;
  font-size: 4.26667vw;
  line-height: 1.5;
  color: #006cc8;
}
.question-q:before {
  content: "Q";
  position: absolute;
  top: 2vw;
  left: 0;
  padding-top: 1.06667vw;
  width: 5.33333vw;
  height: 5.33333vw;
  border-radius: 50%;
  text-align: center;
  color: #009ae9;
  border: 1px solid #009ae9;
  background-color: #fdf9bc;
  font-size: 2.93333vw;
  line-height: 1;
}

.question-a {
  position: relative;
  margin: 0 0 4.26667vw;
  padding-left: 8vw;
  font-size: 4.26667vw;
  line-height: 1.5;
  color: #333;
}
.question-a:before {
  content: "A";
  position: absolute;
  top: 2vw;
  left: 0;
  padding-top: 1.06667vw;
  width: 5.33333vw;
  height: 5.33333vw;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  background-color: #009ae9;
  font-size: 2.93333vw;
  line-height: 1;
}

.question-inner {
  position: relative;
  padding-top: 5.33333vw;
}
.question-inner:before {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  width: 84vw;
  height: 1px;
  background-color: #ccc;
}