@charset "UTF-8";

/* =================================================== */
/*以下htmlの共通CSSです
・company.html
・emergency.html
・about.html
*/
/* =================================================== */


/* =================================================== */
/*---------------以下company.html---------------*/
/* =================================================== */
/*---------会社概要------------------------------------*/
.company_wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.company_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
}

.company_row {
  border-bottom: 1px solid #d9d9d9;
}

.company_row:last-child {
  border-bottom: none;
}

.company_head,
.company_data {
  padding: 16px 20px;
  vertical-align: top;
}

.company_head {
  width: 280px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

.company_head_top {
  padding-top: 20px;
}

.company_data {
  text-align: left;
}

.company_list {
  margin: 0;
}

.company_list li {
  margin-bottom: 4px;
}

.company_list li:last-child {
  margin-bottom: 0;
}

/*---------マップ--------*/
.company_map{
  padding-top: 24px;
  height: 400px;
}



/*---------当社会館のご案内------------------------------------*/

.company_facility__wrap {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.company_card {
  background: #fff;
  border: 2px solid #726658;
}

.company_card__title {
  text-align: center;
  padding: 24px 16px;
  color: #726658;
}

.company_card__image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.company_card__info {
  padding: 30px;
}

.company_card__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.company_card__location img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.company_card__location p {
  font-size: 20px;
  margin-bottom: 8px;
}

.company_card__btn {
  max-width: 350px;
  height: 48px;
  border: 2px solid #726658;
  border-radius: 100px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s;
  color: #726658;
}

.company_card__btn:hover {
  opacity: 0.5;
}

.company_card__btn span {
  font-size: 16px;
  color: #726658;
}


/*---------ごあいさつ------------------------------------*/
.company_greeting {
  padding: 24px 0px;
  position: relative;
  overflow: hidden;
}

.company_greeting::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: 5%;
  width: 400px;
  height: 400px;
  background: url("../image/logo.png") no-repeat center center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
}

.company_greeting_inner {
  margin: 0 auto;
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.company_greeting_inner h2{
  text-align: center;
  padding-bottom: 40px;
  color: #726658;
}

.company_greeting_text p {
  font-size: 18px;
  line-height: 1.8;
  margin: 40px 0;
  letter-spacing: 0.08em;
}

.company_greeting_sign {
  margin-top: 80px;
  margin-left: auto;
  width: fit-content;
  text-align: left;
}

.company_greeting_sign span {
  display: block;
  font-size: 20px;
}

.company_greeting_sign strong {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.12em;
}



/*---------個人情報保護方針について------------------------------------*/
.company_privacy {
  padding: 64px 0px 52px;
  background-color: rgb(63, 106, 156,0.1);
}

.company_privacy_title {
  color: #3f6a9c;
  margin-bottom: 12px;
  line-height: 1.4;
}

.company_privacy_block {
  margin-bottom: 16px;
}

.company_privacy_subtitle {
  font-size: 18px;
  color: #3f6a9c;
  margin-bottom: 6px;
}

.company_privacy_text {
  margin: 0;
  margin-bottom: 12px;
}

.company_privacy_list {
  margin-top: 15px;
}

.company_privacy_list li {
  margin-bottom: 6px;
}



/**----以下レスポンシブ　---------------------------------------------------------------**/

/* =========================
   1024px以下（タブレット）
========================= */
@media (max-width: 1024px) {
  /*---------当社会館のご案内------------------------------------*/
  .company_card__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

  .company_facility__wrap {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

  .company_card__title {
  text-align: center;
  padding: 24px 8px 16px;
  color: #726658;
  }

  .company_card__info {
  padding: 16px 8px 24px;
}

.company_card__location p {
  font-size: 18px;
  margin-bottom: 0px;
}

.company_card__location span {
    font-size: 14px;
  }

.company_card__btn {
  font-size: 16px;
}

/*---------ごあいさつ------------------------------------*/

  .company_greeting::after {
    right: 5%;
    bottom: 5%;
    width: 350px;
    height: 350px;
  }

  /*---------個人情報保護方針について------------------------------------*/
  .company_privacy_list li {
  margin-bottom: 2px;
}


}



/* =================================
   スマホ
================================= */

@media screen and (max-width: 767px) {
  /*---------会社概要------------------------------------*/
  .company_table,
  .company_table tbody,
  .company_row,
  .company_head,
  .company_data {
    display: block;
    width: 100%;
  }

  .company_table {
  font-size: 16px;
}

  .company_head {
    padding-bottom: 8px;
  }

  .company_data {
    padding-top: 0;
    padding-bottom: 16px;
  }

/*---------マップ--------*/
.company_map{
  padding-top: 0px;
  height: 300px;

}

  /*---------当社会館のご案内------------------------------------*/
  .company_facility__wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .company_card__title {
    padding: 20px 8px 16px;
  }

  .company_card__info {
    padding: 16px 8px 20px;
  }

  .company_card__location {
    align-items: flex-start;
  }

.company_card__location p {
  font-size: 16px;
  margin-bottom: 0px;
}

  .company_card__btn {
    height: 40px;
    font-size: 16px;
    gap: 16px;
  }

  .company_card__btn span {
    font-size: 18px;
  }


  /*---------ごあいさつ------------------------------------*/
  .company_greeting {
    padding: 16px 0px;
  }

  .company_greeting::after {
    right: 5%;
    bottom: 0%;
    width: 250px;
    height: 250px;
  }

  .company_greeting_text p {
    font-size: 16px;
    line-height: 1.8;
    margin: 24px 0;
  }

  .company_greeting_inner h4 {
    font-size: 16px;
  }

  .company_greeting_sign {
  margin-top: 32px;
  margin-left: auto;
  width: fit-content;
  text-align: left;
}

  .company_greeting_sign span {
    font-size: 16px;
  }

  .company_greeting_sign strong {
    font-size: 20px;
  }

  /*---------個人情報保護方針について------------------------------------*/
  .company_privacy {
    padding: 48px 0px 36px;
  }

  .company_privacy_title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .company_privacy_subtitle {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .company_privacy_text,
  .company_privacy_list {
    font-size: 14px;
    line-height: 1.9;
  }

  .company_privacy_block {
    margin-bottom: 20px;
  }

  .company_privacy_list li {
  margin-bottom: 0px;
}

}



/* =================================================== */
/*---------------以下emergency.html---------------*/
/* =================================================== */

.sub-mv.space-down{
    margin-bottom: 0px;
}

.emergency__top{
    background-color: #A80000;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* アイコン */
.emergency__top img{
    width: 40px;
    height: auto;
    display: block;
}

/* 下の三角 */
.emergency__top::after{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 30px solid #A80000;
}

.emergency__top__text{
    padding-bottom: 32px;
    font-size: 18px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    font-weight: 700;
}


/*-- お葬式までの流れ ------------------------------------------------*/

.emergency{
  background:#fff;
  border:2px solid #A80000;
  padding:40px 32px;
}

.emergency--small{
  padding:40px 32px;
}

.emergency__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

.emergency__num{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#A80000;
  color: #fff;
  font-size:24px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}


.emergency__lead{
  margin-bottom:30px;
}

.emergency__contactImg{
  margin:24px 0;
}

.emergency__contactImg:first-of-type{
  margin-bottom: 8px;
}

.emergency__contactImg img{
  width:100%;
  border-radius:16px;
}

.emergency__title{
    background-color: #4A74AA;
    color: #fff;
    text-align: center;
    padding: 16px 0;
}


.emergency__text h4{
  color:#A80000;
  margin:28px 0 10px;
  background-color: #ffe3e3;
  display: inline-block;
}

.emergency__text h4:first-of-type{
  margin-top: 0;
}

.emergency__arrow{
  text-align:center;
  color:#A80000;
  font-size:40px;
}



/*-- ご用意いただくものと確認事項 ------------------------------------------------*/

.emergency_section {
  padding-top: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 0px;
}

.emergency_card {
    width: 30%;
}

.emergency_card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #d9d9d9;
    overflow: hidden;
}

.emergency_card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.emergency_card__title {
    background: #d5dfeb;
    text-align: center;
    padding: 8px 10px;
    margin: 16px 8px 10px;
    font-weight: 600;
}

.emergency_card__text {
  padding: 0 8px;
    text-align: left;
    margin: 0;
}



/*---------マップ------------------------------------*/

.emergency_inner {
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: center;
}

.emergency_map {
  width: 45%;
}

.emergency_map img {
  width: 100%;
  height: auto;
  max-height: 648px;
  object-fit: contain;
  display: block;
}

.emergency_info {
  width: 55%;
}

.emergency_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.emergency_list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 18px 0;
  gap: 12px;
}

.emergency_arrow {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #3f6a9c;
  flex-shrink: 0;
}

.emergency_list strong {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
}

.emergency_place {
  font-size: 18px;
  color: #333;
}

.emergency_legend {
  display: flex;
  gap: 30px;
  margin: 25px 0;
  font-size: 15px;
}

.emergency_legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emergency_blue,
.emergency_green {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 自社会館 */
.emergency_blue {
  background-image: url("../image/area-blue.svg");
}

/* 地域会館 */
.emergency_green {
  background-image: url("../image/area-green.svg");
}


/*----------ボタン------------------------------*/
.emergency_cta-btn {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 24px auto 0;
  max-width: 600px;
  flex-wrap: nowrap;
}

/* 左 */
.emergency_cta-left {
  flex: 1;
  border: solid 2px #726658;
  background: #fff;
}

.emergency_cta-left-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}

.emergency_cta-text {
  display: flex;
  flex-direction: column;
}

.emergency_cta-big {
  font-size: 18px;
  font-weight: bold;
  color: #8e5a7a;
}

.emergency_cta-small {
  font-size: 10px;
  color: #8e5a7a;
}

.emergency_cta-tel {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 16px;
}

/* 中央 */
.emergency_cta-middle {
  background: #726658;
  color: #fff;
  padding: 8px 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* 右 */
.emergency_cta-right {
  background: #8e5a7a;
  color: #fff;
  padding: 18px 8px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}









/* =================================
   タブレット
================================= */

@media (max-width: 1024px) {
/*---------バナー画像------------------------------------*/
.emergency__top__text{
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
}

    .emergency_section {
        flex-wrap: wrap;
    }


/*-- お葬式までの流れ ------------------------------------------------*/

.emergency-main--about .emergency{
  background:#fff;
  border:2px solid #A80000;
  padding:36px 24px;
}

.emergency--small{
  padding:16px 24px;
}


/*---------マップ------------------------------------*/

.emergency_inner {
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
}

.emergency_map img {
  max-height: 600px;
  display: block;
}

.emergency_list li {
  padding: 14px 0;
}

.emergency_list strong {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}

.emergency_place {
  font-size: 16px;
}

.emergency_legend {
  display: flex;
  gap: 24px;
  margin: 10px 0 20px;
  font-size: 15px;
}


/*----------ボタン------------------------------*/

.emergency_cta-left-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  height: 100%;
}

.emergency_cta-big {
  font-size: 16px;
  font-weight: bold;
  color: #8e5a7a;
}

.emergency_cta-small {
  font-size: 8px;
  color: #8e5a7a;
}

.emergency_cta-tel {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 8px;
}

/* 中央 */
.emergency_cta-middle {
  background: #726658;
  color: #fff;
  padding: 12px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* 右 */
.emergency_cta-right {
  background: #8e5a7a;
  color: #fff;
  padding: 18px 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
}



/* =================================
   スマホ
================================= */

@media(max-width:767px){
  /*---------バナー画像------------------------------------*/
.emergency__top__text{
    padding-bottom: 16px;
    font-size: 14px;
}
    .emergency__top{
        padding: 14px 0;
        font-size: 20px;
        gap: 10px;
    }

    .emergency__top img{
        width: 22px;
    }

    .emergency__top::after{
        bottom: -20px;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 20px solid #A80000;
    }


/*-- お葬式までの流れ ------------------------------------------------*/
  .emergency{
    padding:36px 24px;
  }

  .emergency__head{
    align-items:center;
    gap: 10px;
    margin-bottom:10px;
  }

  .emergency__num{
    width:32px;
    height:32px;
    font-size:16px;
  }

  .emergency__arrow{
    font-size:32px;
  }

  .emergency__lead{
  margin-bottom:24px;
}

.emergency__text h4{
  color:#A80000;
  margin:14px 0 10px;
  background-color: #ffe3e3;
  display: inline-block;
}

/*-- ご用意いただくものと確認事項 ------------------------------------------------*/
/*----2列の場合------*/
    .emergency_card {
        width: calc(50% - 4px);
    }

    .emergency_section {
        flex-wrap: wrap;
        gap: 0px;
    }

    .emergency_card__title {
        margin: 10px 0 8px;
        padding: 8px 6px;
    }

    .emergency_card__text {
    padding: 0 0px 20px 0;
  }

/*-- 葬儀会館・ホール一覧 ------------------------------------------------*/
  .emergency_inner {
    flex-direction: column;
  }

  .emergency_map,
  .emergency_info {
    width: 100%;
  }

  .emergency_map img {
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

  .emergency_list strong {
    font-size: 16px;
  }

  .emergency_place {
    font-size: 14px;
  }

  .emergency_list li {
  padding: 10px 0;
  gap: 8px;
}

.emergency_legend {
  display: flex;
  gap: 24px;
  margin: 10px 0 20px;
  font-size: 14px;
}

/*----------ボタン------------------------------*/

  .emergency_cta-btn{
    max-width: 500px;
    margin: 16px auto;
    position: relative;
    z-index: 10;
    flex-direction: row;
  }

  .emergency_cta-big{
    font-size: 18px;
  }

  .emergency_cta-small{
    font-size: 9px;
  }

  .emergency_cta-tel{
    font-size: 22px;
    padding: 0 16px;
  }

  .emergency_cta-middle{
    font-size: 12px;
    padding: 6px 6px;
  }

  .emergency_cta-right{
    font-size: 12px;
    padding: 13px 6px;
  }

}

/* =========================
   480px以下（スマホ）
========================= */
@media (max-width: 480px) {
/*-- ご用意いただくものと確認事項 ------------------------------------------------*/
    /*----1列の場合------*/
    /* .emergency_card {
        width: 100%;
        margin-bottom: 24px;
    }
    .emergency_section {
        display: block;
    } */
    .emergency_card__title {
        margin: 10px 0 8px;
        padding: 8px 2px;
    }
    .emergency_card__text {
    padding: 0 0px 16px 0;
    text-align: left;
    margin: 0;
}

/*-- 葬儀会館・ホール一覧 ------------------------------------------------*/
.emergency_place {
    font-size: 12px;
  }

.emergency_legend {
  display: flex;
  gap: 20px;
  margin: 8px 0 16px;
  font-size: 14px;
}

.emergency_list li {
  padding: 12px 0;
  gap: 6px;
}

.emergency_list strong {
    font-size: 15px;
  }

/*----------ボタン------------------------------*/

  .emergency_cta-btn{
    max-width: 500px;
    margin: 14px auto;
    position: relative;
    z-index: 10;
    flex-direction: row;
  }

  .emergency_cta-big{
    font-size: 14px;
  }

  .emergency_cta-small{
    font-size: 7px;
  }

  .emergency_cta-tel{
    font-size: 16px;
    padding: 0px;
  }

  .emergency_cta-middle{
    font-size: 9px;
    padding: 6px 3px;
  }

  .emergency_cta-right{
    font-size: 9px;
    padding: 13px 3px;
  }
}












/* ==========================================================================================
   以下about.html
========================================================================================== */
/*-- 大阪・豊中・北摂エリアで ------------------------------------------------*/
.consultation_detail{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:32px;
}

.consultation_mainimg{
  width:40%;
  aspect-ratio:4 / 3;
  flex-shrink:0;
}

.consultation_maintext h4{
  padding-bottom:10px;
}


/*-- 大阪葬祭の自社会館 ------------------------------------------------*/

.emergency-text{
  text-align: center;
}
.company_card__btn.about-top.about-top-full{
  max-width:100%;
  padding: 8px 64px;
}
.about-space-bottom{
  padding-bottom: 24px;
}

/*-- 葬儀後まで、トータルサポート ------------------------------------------------*/

.emergency_card__title.about-back{
  background: none;
  padding: 0px 0px;
  margin: 10px 0px;
}
.about-back-color{
  background-color: rgb(63, 106, 156,0.1);
  padding: 32px 0;
}

/*-- ご利用の流れ ------------------------------------------------*/
/* 上書き用 */
.emergency-main--about .emergency{
  border:2px solid #726658;
}
.emergency-main--about .emergency__num{
  background:#726658;
}
.emergency-main--about .emergency__arrow{
  color:#726658;
}

.emergency-main--about .emergency__content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* 新規about用 */
.emergency-main--about .emergency__textWrap{
  flex:1;
}

.emergency-main--about .emergency__photo{
  width:320px;
  aspect-ratio:4 / 3;
  flex-shrink:0;
}

.emergency-main--about .emergency__photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.emergency-main--about .emergency--small{
  padding:24px 32px;
}

.emergency__contactImg.about-bottom{
  margin:24px 0 0 0;
}



/*--------　ボタン　--------*/
.company_card__btn.about-top{
  margin-top: 24px;
  max-width:500px;
  height: 56px;
  padding: 8px 100px;
  color: #555;
  border: solid 2px #555;
}
.company_card__btn.about-top span {
  color: #555;
}





/*-- お葬式についてこんな疑問 ------------------------------------------------*/
/*-------- まずは無料でご相談ください --------*/
.about-title{
  background:#726658;
  color:#fff;
  text-align:center;
  padding:18px 32px;

  margin:0 auto -10px;
  position:relative;
  z-index:1;

  font-weight:700;
  letter-spacing:.08em;
}

/* 下の三角 */
.about-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-23px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:24px solid transparent;
  border-right:24px solid transparent;
  border-top:24px solid #726658;
}


.about-box{
  border:2px solid #726658;
  padding:170px 48px 32px;
  position:relative;
  background:#fff;
}

.about-box .consultation_inner{
  margin:auto;
}

 .about-box .consultation_box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:50px;

  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);

  width:85%;
  max-width:900px;

  background:#fff;
  border:none;
  padding:8px 40px;
  z-index:2;

  /* 追加 */
  position: absolute;
}

.about-box .consultation_box::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);

  width:80%;
  height:6px;
  background:#726658;
}

.about-box .consultation_title{
  margin-bottom: 0px;
}

.about-box .consultation_staff img{
  width: 115px;
}

.about-box .consultation_sub{
  line-height:1.8;
}

.about-box .consultation_maincopy{
  text-align:center;
  color:#726658;
  margin-bottom:60px;
}

.about-box .consultation_questions{
  display:flex;
  gap:14px;
  margin-bottom:32px;
}

.about-box .consultation_question{
  flex:1;
  padding: 16px 6px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.about-box .consultation_q{
  color:#726658;
  line-height:1;
}

.about-box .consultation_question p{
  line-height:1.7;
}

.about-box .consultation_bottom{
  display:flex;
  align-items:center;
  gap: 24px;
}

.about-box .consultation_img{
  flex:1;
}

.about-box .consultation_textbox{
  flex:1;
}

.about-box .consultation_textbox h4{
  color:#726658;
  margin-bottom:16px;
}

.about-box .consultation_textbox p{
  margin-bottom:16px;
  text-align: left;
}

.about-box .consultation_textbox .company_card__btn{
  margin:0 auto;
  max-width:420px;
  border-color:#726658;
  color:#726658;
}


/*-- お葬式についてこんな疑問 ------------------------------------------------*/
section.about-bottom{
  margin-bottom: 0px;
}













/* ===========================
tablet
=========================== */

@media(max-width:1024px){

.about-box{
  padding:160px 24px 32px;
}

.consultation_maincopy{
  font-size:34px;
}

.consultation_question p{
  font-size:14px;
}


/*---------- 葬儀後まで、トータルサポート ----------*/
.about-back-color .emergency_section {
    gap: 8px;
    flex-wrap: nowrap;
}

.about-back-color .emergency_card {
        width: 25%;
    }
.emergency_card__title.about-back{
  font-size: 14px;

}


/*-- まずは無料でご相談ください ------------------------------------------------*/
.about-box .consultation_staff img{
  width: 96px;
}

.about-box .consultation_question{
  padding: 16px 4px;
  gap:8px;
}

.about-box .consultation_box::after{
  bottom:-2px;
}

.about-box .consultation_questions{
  display:flex;
  gap:10px;
  margin-bottom:24px;
}

.about-box .consultation_textbox h4{
  font-size:15px;
  margin-bottom:8px;
}

.about-box .consultation_textbox p{
  font-size:14px;
  line-height:1.7;
  margin-bottom:16px
}

/*--------　ボタン　--------*/
.company_card__btn.about-top{
  max-width:500px;
  height: 56px;
  font-size: 15px;
  padding: 8px 100px;
}
.about-box .consultation_textbox .company_card__btn{
  font-size: 15px;
}

}











/* ===========================
sp
=========================== */

@media(max-width:767px){


/*-- お葬式についてこんな疑問 ------------------------------------------------*/
 .about-title{
  margin:0 auto;
}

.about-box{
    padding:136px 18px 40px;
  }

.about-box .consultation_box{
    top:16px;
    width: 100%;
    padding:8px 0;
    gap:0px;
    flex-direction:column;
    text-align:center;
  }

  .about-box .consultation_staff img{
    display:none;
  }

.about-box .consultation_title{
  font-size:18px;
  width: 100%;
  padding-left:0px;
}

.about-box .consultation_sub{
  font-size:13px;
  padding-left: 0px;
  text-align: center;
}

.about-box .consultation_maincopy{
  font-size:24px;
  margin-bottom:30px;
}

.about-box .consultation_questions{
  flex-direction:column;
  gap:10px;
  margin-bottom:8px;
}

.about-box .consultation_question{
  padding:8px 28px;
  gap:16px;
}

.about-box .consultation_q{
  font-size:40px;
}

.about-box .consultation_question p{
  font-size:14px;
}

.about-box .consultation_bottom{
  flex-direction:column;
  gap:16px;
}

.about-box .consultation_img{
  width:100%;
  height:220px;
}

.about-box .consultation_textbox h4{
  font-size:15px;
  margin-bottom:8px;
}

.about-box .consultation_textbox p{
  font-size:14px;
  line-height:1.7;
  margin-bottom:24px
}

.about-box .consultation_box::after{
  bottom:-8px;
  width:90%;
  height:2px;

}

}



/* スマホ */
@media (max-width:767px){
/*-- 大阪・豊中・北摂エリアで ------------------------------------------------*/
.consultation_detail{
  flex-direction: column;
  align-items: center;
  gap:16px;
  margin-bottom:32px;
}

.consultation_mainimg{
  width:100%;
  aspect-ratio:4 / 3;
  flex-shrink:0;
}

/*-- 大阪葬祭の自社会館 ------------------------------------------------*/

.emergency-text{
  text-align: left;
}
.company_card__btn.about-top.about-top-full{
  max-width:100%;
  padding: 8px 32px;
}

/*---------- 葬儀後まで、トータルサポート ----------*/

    .about-back-color .emergency_section {
        flex-wrap: wrap;
    }

    .about-back-color .emergency_card {
        width: calc(50% - 12px);
    }


/*-- ご利用の流れ ------------------------------------------------*/
  .emergency-main--about .emergency__content{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }

  .emergency-main--about .emergency__photo{
    width:100%;
  }

.emergency-main--about .emergency--small{
  padding:24px 24px;
}

.emergency-main--about .emergency{
  background:#fff;
  padding:16px 24px;
}
/*--------　ボタン　--------*/
.company_card__btn.about-top{
  max-width:500px;
  height: 48px;
  padding: 8px 10px;
}

}



/* =========================
   480px以下（スマホ）
========================= */
@media (max-width: 480px) {
/*---------------お葬式についてこんな疑問---------------*/
.about-box{
    padding:136px 18px 32px;
  }

  .about-box .consultation_title {
    text-align: center;
    margin-bottom: 0px;
    font-size: 15px;
    margin: 0 auto;
  }


  /*-- ご利用の流れ ------------------------------------------------*/
  .emergency-main--about .emergency__content{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  }