@charset "UTF-8";

/* =====================================
　　　　　　Margin
 ===================================== */
.u-mb-none { margin-bottom:0 !important; }
.u-mb-xs { margin-bottom:0.25rem !important; }
.u-mb-s  { margin-bottom:0.5rem !important; }
.u-mb-m  { margin-bottom:1rem !important; }
.u-mb-l  { margin-bottom:1.5rem; }

@media (min-width: 768px){
    .u-mb-xs { margin-bottom:0.5rem !important; }
    .u-mb-s  { margin-bottom:0.75rem !important; }
    .u-mb-m  { margin-bottom:1.5rem !important; }
    .u-mb-l  { margin-bottom:1.75rem !important; }
}

@media (min-width: 1025px){
    .u-mb-xs { margin-bottom:0.5rem !important; }
    .u-mb-s  { margin-bottom:1rem !important; }
    .u-mb-m  { margin-bottom:1.5rem !important; }
    .u-mb-l  { margin-bottom:2rem !important; }
}

/* =====================================
　　　　　　Grid Gutenberg Adjust
 ===================================== */

.l-scope.l-page .u-gap-grid {
        gap: 2.5rem; 
        align-items: stretch;
    }
    
 
/* =====================================
　　　　　　Font Weight
 ===================================== */
 .u-fw-nomal {
    font-weight: normal !important;
 }

.u-fw-600 {
	font-weight: 600!important;

}

/*===================================== 
      List Gutenberg Adjust
=====================================*/

.l-scope.l-page .u-list-disc li::marker{
    color:var(--color-secondary);
}

/*===================================== 
      Border-bottom fon Column,Grid
=====================================*/
/*将来的な構造変更を考慮*/
.l-scope.l-page .u-divider-column--row > .wp-block-columns,
.l-scope.l-page .u-divider-column--row > * > .wp-block-columns {
    border-bottom:1px solid var(--color-border);
}

/*グリッド内直下のグループに下ボーダー*/
.l-scope.l-page .u-divider-grid--row > div{
    border-bottom:solid 1px var(--color-border);
    padding-bottom: 2rem;
}

/*===================================== 
      Gap fon Column,Grid
=====================================*/

.l-scope.l-page .u-gap--narrow,
.l-scope.l-page .u-gap--narrow .wp-block-columns{
    gap :1rem;
}

/*===================================== 
      Font
=====================================*/

/*font family*/
.l-scope.l-page .u-ff-en {
    font-family: var(--font-en);
    font-style: normal;
}

/*font size*/
.u-fs-xs {
    font-size: var(--font-size-xs)!important;
}

.u-fs-s {
    font-size: var(--font-size-s)!important;
}

.u-fs-m {
    font-size: var(--font-size-m)!important;
}

.u-fs-l {
    font-size: var(--font-size-l)!important;
}

.u-fs-xl {
    font-size: var(--font-size-xl)!important;
}

/*===================================== 
      display
=====================================*/
@media screen and (max-width:767px){
    .sp-dpNone {
        display: none !important;
    }
}

@media screen and (min-width:768px){
    .pc-dpNone{
        display: none !important;
    }
}


/*===================================== 
      Q&A
=====================================*/
/* Q&Aの詳細ブロック全体のスタイル */
.wp-block-details {
    overflow: hidden;
}

/* 回答エリアの段落（最初の1つ目）を指定 */
/* 入れ子構造に対応するため子孫セレクタ（半角スペース）を使用 */
.wp-block-details p.u-fw-600:first-of-type,
.wp-block-details .wp-block-group__inner-container > p:first-child {
    position: relative;
    padding-left: 2.2em !important; /* Aのアイコン分の余白 */
    min-height: 1.8em;
    display: block;
}

/* 「A」アイコンのデザイン生成 */
.wp-block-details p.u-fw-600:first-of-type::before,
.wp-block-details .wp-block-group__inner-container > p:first-child::before {
    content: "A";
    position: absolute;
    left: 0;
    top: 0;
    
    /* デザイン設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    background-color: #002D8B; /* メインカラーのブルー */
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8em;
	font-family:"Roboto",sans-serif;
    border-radius: 4px; /* お好みで50%にすると正円になります */
    
    /* 既存のテキストと被らないように調整 */
    line-height: 1.2;
	margin-top:4px;
}
/*===================================== 
      SP表示の際カラムに入れたイラストの大きさを小さくする
=====================================*/
@media screen and (max-width: 781px) {
  .u-column-illust .wp-block-column:last-child {
    margin-top: 1rem;
    text-align: center;
  }

  .u-column-illust .wp-block-column:last-child img {
    width: 50%;
    max-width: 50%;
    height: auto;
    display: inline-block;
  }
}