/*---------------------------------

  ●about.html

  １．発達障がいについて

    block-wrapper
      - block1
        -- block-top
          --- people
          --- fukidashi
        -- block-btm
              ￤
              ￤
      - block2
      - block3
      ------------------------
      - block4
        -- block-left
          --- img（
          --- trio-txt
        -- block-right
          --- img
          --- p

  ２．発達障がいや支援方法の情報一覧

    categories
      - category-1
        -- category-top
        -- category-btm
              ￤
              ￤
      - category-11
        -- category-top
        -- category-btm

---------------------------------*/
/*---------------------------------

  ●category1〜11.html
       
  各カテゴリー一覧

    category-list
      - a（リンク）
        -- category-item
          --- img（アイコン）
          --- p（カテゴリータイトル）

---------------------------------*/

/*――――――――――――
 block全体を囲むdiv
――――――――――――*/
.block-wrapper {
  margin: 0 30px;
}
/*――――――――――――
 各ブロック 
――――――――――――*/
.block {
  width: 100%;
  height: 300px;
  margin: 0 0 20px;
  border-radius: 20px;
  font-weight: 300;
}
/*
 各ブロック（top & btm） 
――――――――――――*/
.block-top,
.block-btm {
  height: 50%;
  padding: 20px;
}
/*
 各ブロックの上（top）
――――――――――――*/

.block-top {
  position: relative;
  display: flex;
}
/*
 各ブロックの下（btm）
―――――――――――*/
.block-btm {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.block-btm .people {
  position: absolute;
  top: -9px;
}
/*
 人物画像とその下のテキスト 
――――――――――――*/
.people {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*
 人物画像
――――――――――――*/
.people img {
  width: 115px;
  height: 120px;
  margin-bottom: 5px;
}
/*
 人物テキスト
――――――――――――*/
.people-txt {
  font-size: 13px;
  line-height: 16px;
  font-family: "Hiragino Kaku Gothic ProN";
}
/*―――――――――――――
 吹き出し
――――――――――――*/
.fukidashi {
  width: 380px;
  height: fit-content;
  padding: 13px 18px 13px 18px;
  background: #fff;
  border: solid 2px #ff871b;
  border-radius: 10px;
  /* 吹き出しのフォント */
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.05em;
  font-feature-settings: "pkna" 1;
}
/*
 吹き出し(top)
――――――――――――*/
.block-top .fukidashi {
  position: absolute;
  top: 58px;
  left: 140px;
}
/*
 吹き出し(top)の疑似要素（上に重ねる◁）
――――――――――――*/
.block-top .fukidashi:before {
  content: "";
  position: absolute;
  top: 17px;
  left: -14px;
  border: 17px solid transparent;
  border-right: 17px solid #fff;
  border-width: 6px 18px 6px 0px;
  z-index: 2;
}
/*
 吹き出し(top)の疑似要素（下の◀） 
――――――――――――*/
.block-top .fukidashi:after {
  content: "";
  position: absolute;
  top: 17px;
  left: -20px;
  border: 19px solid transparent;
  border-right: 19px solid #ff871b;
  border-width: 6px 18px 6px 0px;
  z-index: 1;
}
/*
 吹き出し（btm）
――――――――――――*/
.block-btm .fukidashi {
  position: absolute;
  bottom: 59px;
  right: 142px;
}
/*
 吹き出し(btm)の疑似要素（上に重ねる▶）
――――――――――――*/
.block-btm .fukidashi:before {
  content: "";
  position: absolute;
  top: 17px;
  right: -14px;
  border: 17px solid transparent;
  border-left: 17px solid #fff;
  border-width: 6px 0px 6px 18px;
  z-index: 2;
}
/*
 吹き出し(btm)の疑似要素（下の▷）
――――――――――――*/
.block-btm .fukidashi:after {
  content: "";
  position: absolute;
  top: 17px;
  right: -20px;
  border: 19px solid transparent;
  border-left: 19px solid #ff871b;
  border-width: 6px 0px 6px 18px;
  z-index: 1;
}

/*
 block1 背景色
――――――――――――*/
.block1 {
  background-color: #ffe6cc;
}
/*
 block2 背景色
――――――――――――*/
.block2 {
  background-color: #ffe2e2;
}
/*
 block3 背景色
――――――――――――*/
.block3 {
  background-color: #cae6f7;
}
/*――――――――――――
 block4 （全体）
――――――――――――*/
.block4 {
  padding: 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}
/*
 block4 （左側）
――――――――――――*/
.block4-left img {
  width: 244px;
  height: 144px;
  margin-bottom: 3px;
}
.block4-left .trio-txt {
  width: 244px;
  display: flex;
  justify-content: space-evenly;
}
.block4-left .trio-txt p {
  font-size: 12px;
  line-height: 16px;
  font-weight: 300;
  font-family: "Hiragino Kaku Gothic ProN";
}
.block4-left .trio-txt p:nth-of-type(2) {
  padding-left: 6px;
}
/*
 block4（右側）
――――――――――――*/
.block4-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 327px;
  height: 157px;
  border: 1px solid #8d8d8d;
  box-shadow: 3px 3px #8d8d8d;
  margin-right: 20px;
  margin-bottom: 3px;
}
.block4-right img {
  position: absolute;
  top: -12px;
  left: calc(50% - 25px);
}
.block4-right p {
  text-align: center;
  padding: 3px 0 0 0;
  /* フォント */
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
}
.block4-right > p span {
  color: #ff7575;
}
/*―――――――――――
 カテゴリー一覧
――――――――――――*/
.categories {
  padding: 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/*
 各カテゴリーへのリンク 
――――――――――――*/
.categories > a {
  display: block;
  text-decoration: none;
}
/*――――――――――――
 各カテゴリー
――――――――――――*/
.category {
  background-color: #ffeeee;
  width: 360px;
  height: 190px;
  padding: 0px 21px 22px 21px;
  border-right: 23px solid #ff7575;
  border-radius: 6px;
  position: relative;
  margin-bottom: 20px;
  /* 各カテゴリーのフォント */
  font-family: "Hiragino Kaku Gothic ProN";
}
/*
 各カテゴリーの▷マーク
――――――――――――*/
.category:after {
  content: "";
  position: absolute;
  top: 102px;
  right: -24px;
  margin-top: -15px;
  border: 7px solid transparent;
  border-left: 10px solid #ffffff;
}
/*――――――――――――
 各カテゴリーの（上部）
――――――――――――*/
.category .category-top {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ff7575;
  margin-bottom: 12px;
  height: 85px;
}
/*
 アイコン
――――――――――――*/
.category .category-top img {
  width: 46px;
  height: 46px;
  margin-right: 18px;
}
/*
 文章
――――――――――――*/
.category .category-top p {
  /* フォント */
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-feature-settings: "pkna" 1;
}
/*――――――――――――
 各カテゴリーの中の（下部）
――――――――――――*/
.category .category-btm p {
  font-size: 14px;
  line-height: 24px;
}

/*---------------------------------

  category1〜11.html
       
  各カテゴリー一覧
  
    category-list
      - a（リンク）
        -- category-item
          --- img（アイコン）
          --- p（カテゴリータイトル）

---------------------------------*/

/*――――――――――――
 カテゴリー全体を囲むdiv
――――――――――――*/
.category-list {
  margin: 0 10px;
}
/*
 リンク 
――――――――――――*/
.category-list > a {
  display: block;
  text-decoration: none;
}
/*
 各category-item
――――――――――――*/
.category-item {
  height: 80px;
  display: flex;
  align-items: center;
  position: relative;
  border: 3px solid #ff7575;
  border-radius: 6px;
  padding: 0 47px 0 24px;
  margin: 0 0 20px;
}
/*
 各cateogry-itemのアイコン
――――――――――――*/
.category-item img {
  width: 45px;
  height: 45px;
  margin-right: 17px;
}
/*
 サイズの違うアイコンの調整
――――――――――――*/
.category-item img.overflow {
  object-fit: cover;
  object-position: top 0 right 0%;
}
/*
 category-itemの文章
――――――――――――*/
.category-item p {
  margin: 0;
  /* フォント */
  font-size: 20px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-feature-settings: "pkna" 1;
}
/*
 category-itemの中の▷マーク
――――――――――――*/
.category-item:after {
  content: "";
  position: absolute;
  /* 上部からの位置 */
  top: 30px;
  /* 右からの位置 */
  right: 10px;
  /* ▷のサイズ */
  border: 8px solid transparent;
  border-left: 12px solid #c4c4c4;
}
/*――――――――――――――――――――――――

 799px以下で適用

――――――――――――――――――――――――*/
@media (max-width: 799px) {
  /*―――――――――――――
   block全体を囲むdiv
  ――――――――――――*/
  .block-wrapper {
    margin: 0;
  }
  /*
   各ブロック（上部）の位置調整
  ――――――――――――*/
  .block-top {
    margin-bottom: 10px;
  }
  /*
   各ブロック（下部）の位置調整
  ――――――――――――*/
  .block-btm .fukidashi {
    bottom: 50px;
  }
  .categories {
    justify-content: center;
  }
}
/*――――――――――――――――――――――――

 559px以下で適用

――――――――――――――――――――――――*/
@media (max-width: 559px) {
  /*――――――――――――
   各ブロック 
  ――――――――――――*/
  .block {
    height: 230px;
    border-radius: 10px;
  }
  .block3 {
    margin-bottom: 23px;
  }
  .block4 {
    height: fit-content;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 30px;
  }
  /*
  各ブロックの上（top）
  ――――――――――――*/
  .block-top {
    padding: 10px;
    margin: 0;
  }
  /*
  各ブロックの下（btm）
  ―――――――――――*/
  .block-btm {
    padding: 10px 10px 10px 20px;
  }
  .block-btm .people {
    top: 0px;
  }
  /*
  人物画像
  ――――――――――――*/
  .people img {
    width: auto;
    height: 84px;
    margin-bottom: 3px;
  }
  /*
  人物テキスト
  ――――――――――――*/
  .people-txt {
    font-size: 12px;
    line-height: 11px;
  }
  /*――――――――――――
   吹き出し（共通）
  ――――――――――――*/
  .fukidashi {
    width: 222px;
    font-size: 12px;
    line-height: 18px;
    padding: 10px 10px;
    border: solid 1px #ff871b;
    border-radius: 7px;
  }
  /*――――――――――――
   吹き出しの位置調整
  ――――――――――――*/
  /*
   block-topの吹き出し
  ――――――――――――*/
  .block-top .fukidashi {
    left: 97px;
  }
  /*
   block-btmの吹き出し
  ――――――――――――*/
  .block-btm .fukidashi {
    right: 97px;
  }
  /* 吹き出し１ */
  .block-top .fukidashi-1 {
    top: 30px;
  }
  /* 吹き出し２ */
  .block-btm .fukidashi-2 {
    bottom: 15px;
  }
  /* 吹き出し３ */
  .block-top .fukidashi-3 {
    top: 20px;
  }
  /* 吹き出し４ */
  .block-btm .fukidashi-4 {
    bottom: 25px;
  }
  /* 吹き出し５ */
  .block-top .fukidashi-5 {
    top: 22px;
  }
  /* 吹き出し６ */
  .block-btm .fukidashi-6 {
    bottom: 33px;
  }
  /*
   吹き出し(top)の疑似要素（上に重ねる◁）
  ――――――――――――*/
  .block-top .fukidashi:before {
    content: "";
    position: absolute;
    top: 14px;
    left: -11px;
    border: 16px solid transparent;
    border-right: 16px solid #fff;
    border-width: 4px 13px 4px 0px;
    z-index: 2;
  }
  /*
   吹き出し(top)の疑似要素（下の◀）
  ――――――――――――*/
  .block-top .fukidashi:after {
    content: "";
    position: absolute;
    top: 14px;
    left: -14px;
    border: 18px solid transparent;
    border-right: 18px solid #ff871b;
    border-width: 4px 13px 4px 0px;
    z-index: 1;
  }
  /*
   吹き出し(btm)の疑似要素（上に重ねる▶）
  ――――――――――――*/
  .block-btm .fukidashi:before {
    content: "";
    position: absolute;
    top: 14px;
    right: -11px;
    border: 16px solid transparent;
    border-left: 16px solid #fff;
    border-width: 4px 0px 4px 13px;
    z-index: 2;
  }
  /*
   吹き出し(btm)の疑似要素（下の▷）
  ――――――――――――*/
  .block-btm .fukidashi:after {
    content: "";
    position: absolute;
    top: 14px;
    right: -14px;
    border: 18px solid transparent;
    border-left: 18px solid #ff871b;
    border-width: 4px 0px 4px 13px;
    z-index: 1;
  }
  /*
   block4 （左側）
  ――――――――――――*/
  .block4-left {
    order: 2;
  }
  .block4-left .trio-txt {
    font-size: 12px;
  }
  /***********************/
  /* block4（右側） */
  .block4-right {
    order: 1;
    margin: 0 0 10px;
    width: 337px;
    margin-right: 3px;
    height: fit-content;
  }
  .block4-right img {
    width: 20px;
    height: 22px;
    top: -10px;
    left: 152px;
  }
  .block4-right p {
    font-size: 15px;
    line-height: 24px;
    padding: 18px 0 10px;
  }
  /*――――――――――――
   カテゴリー一覧
  ――――――――――――*/
  .categories {
    padding: 0;
  }
  /*――――――――――――
   各カテゴリー
  ――――――――――――*/
  .category {
    width: 330px;
    height: 147px;
    padding: 0 20px 20px 20px;
    margin-bottom: 15px;
  }
  /*
   各カテゴリーの▷マーク
  ――――――――――――*/
  .category:after {
    top: 82px;
    margin-top: -15px;
    border: 7px solid transparent;
    border-left: 10px solid #ffffff;
  }
  /*――――――――――――
   各カテゴリーの（上部）
  ――――――――――――*/
  .category .category-top {
    margin-bottom: 10px;
    height: 60px;
  }
  /*
   アイコン
  ――――――――――――*/
  .category .category-top img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  /*
   文章
  ――――――――――――*/
  .category .category-top p {
    font-size: 16px;
    line-height: 24px;
  }
  /*――――――――――――
   各カテゴリーの中の（下部）
  ――――――――――――*/
  .category .category-btm p {
    font-size: 12px;
    line-height: 21px;
  }

  /*---------------------------------

    category1〜11.html
        
  ---------------------------------*/

  /*――――――――――――
   カテゴリー全体を囲むdiv
  ――――――――――――*/
  .category-list {
    margin: 0;
  }
  /*
   各category-item
  ――――――――――――*/
  .category-item {
    padding: 0px 20px 0px 19px;
    margin: 0 0 15px;
    border-radius: 5px;
  }
  /*
   各cateogry-itemのアイコン
  ――――――――――――*/
  .category-item img {
    margin-right: 22px;
  }
  /*
  category-itemの文章
  ――――――――――――*/
  .category-item p {
    font-size: 18px;
    line-height: 24px;
  }
  /*
   category-itemの中の▷マーク
  ――――――――――――*/
  .category-item:after {
    right: 0px;
  }
}