@charset "UTF-8";
@import url(animate.css);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/*========================================================
                      Main Styles
=========================================================*/
body {
  color: #777777;
  margin: 0;
  padding: 0;

  /* fontショートハンドを分解 */
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  -webkit-text-size-adjust: none; }

img {
  max-width: 100%;
  height: auto; }

h3, h4, h5 {
  color: #333333; }

/* ======== H1（会社名） ======== */
h1.brand_name {
  font-family: "BIZ UDPMincho", "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0 0 10px 0; }

/* ==== ロゴ：H1文頭ロゴ（同色） ====*/

/* デフォルトは非表示（mask非対応で四角が出るのを防ぐ） */
header .brand h1.brand_name a::before {
  content: "";
  display: none; }

/* mask対応ブラウザのみ：ロゴを表示 */
@supports (-webkit-mask-image: none) or (mask-image: none) {

  header .brand h1.brand_name a {
    --brand-logo-url: url("../images/logo_540_en.png");
    display: inline-flex;
    align-items: center;
    gap: 0.35em; }

  header .brand h1.brand_name a::before {
    display: inline-block;
    width: 1.4em;  /* ロゴのサイズ1→1.4 */
    height: 1.4em;/* ロゴのサイズ1→1.4 */
    background-color: currentColor;

    -webkit-mask-image: var(--brand-logo-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: var(--brand-logo-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    flex: 0 0 auto; } }

h2 {
  font-weight: 400;
  font-size: 72px;
  line-height: 72px;
  font-family: "BIZ UDPMincho", "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0; }

h3 {
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0; }

h4 {
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  letter-spacing: 0.04em; }

h5 {
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0; }

h4 a:hover,
h5 a:hover {
  color: #ad5a55; }

h4 a:active,
h5 a:active {
  color: #8c4743; }

p a:hover,
.marked-list a:hover,
.list a:hover {
  text-decoration: underline; }

p .fa,
.marked-list .fa,
.list .fa {
  text-decoration: none; }

time {
  display: block;}

a {
  font: inherit;
  color: inherit;
  text-decoration: none;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

a:focus {
  outline: none; }

a:active {
  background-color: transparent;}

a[href^="tel:"],
a[href^="callto:"] {
  color: inherit;
  text-decoration: none; }

strong {
  font-weight: 700; }

address {
  color: #ad5a55;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif; }

.fa {
  line-height: inherit; }

[class*='fa-']:before {
  font-weight: 400;
  font-family: "FontAwesome"; }

.page {
  overflow: hidden;
  min-height: 500px; }

.lt-ie9 .page {
  min-width: 1200px; }

/*=======================================================
                       Main Layout
=========================================================*/
hh2 + p, img + h4 {
  margin-top: 31px; }

p + .phone-btn {
  margin-top: 53px; }

h3 + h5 {
  margin-top: 20px; }

.thumb + h5 {
  margin-top: 25px; }

h4 + p {
  margin-top: 15px; }

h5 + p {
  margin-top: 7px; }

** + .btn {
  margin-top: 35px; }

img + .off, * + .line {
  margin-top: 75px; }

.row__off, .flex-list + .flex-list__md, * + .mailform {
  margin-top: 45px; }

.row__off-1 {
  margin-top: 140px; }

.well-1 h5 + ul {
    margin-top: 8px;
    margin-bottom: 14px; }   

/*=======================================================
                        Components
=========================================================*/

/*==================     Brand     ======================*/
.brand {
  display: inline-block; }

.brand_slogan {
  font-weight: 600;  /* 900→600 */
  font-size: 18px;  /* 14→18 */
  line-height: 18px;  /* 14→18 */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  text-transform: lowercase;
  color: #FFF;
}

/*==================  Backgrounds  ======================*/
.bg-default {
  background: #eeebe4; }

.bg-default-1 {
  background: #f7f7f7; }

/*==================  Gradient  ======================*/
.gradient {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#00ffffff', GradientType=0);
  border-top: solid 1px rgba(255, 255, 255, 0.2); }

/*==================     Icons     ======================*/
/*==================    Buttons    ======================*/
.btn {
  display: inline-block;
  color: #FFF;
  background: #ad5a55;

  font-weight: 900;
  font-size: 18px;
  line-height: 18px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  padding: 27px 52px 28px 48px; }

  .btn:hover {
  background: #333333; }
  .btn:active {
  background: #1a1a1a; }

.btn__md {
  border: solid 2px #ad5a55;
  padding: 25px 50px 26px 46px; }
  .btn__md:hover {
    background: rgba(173, 90, 85, 0.5); }
  .btn__md:active {
    background: rgba(173, 90, 85, 0.2); }

.phone-btn {
  display: inline-block;
  position: relative;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  font-weight: 700; /* ← 900は禁止（Safari事故る） */
  font-size: 61px;
  line-height: 61px;

  min-width: 770px;
  border: solid 2px #FFF;
  padding: 38px 0 42px 70px; /* ← 60→70px：左の余白を増やして数字と分離 */
  border-radius: 10px;  /* 黒影ではなく “白い発光” にする */
  box-shadow: 0 6px 16px rgba(0,0,0,0.18); }

.phone-btn:before {
  position: absolute;
  content: '\f095';
  font-family: "FontAwesome";
  font-size: 66px;
  line-height: 66px;
  top: 50%;

  /* 縦位置は現行のまま固定（変更しない） */
  -moz-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  -o-transform: translateY(-40%);
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);

  left: 80px;  /* ← 122px→80px */ }

.phone-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ad5a55; }

/*==================      Box      ======================*/
.box:before,
.box:after {
  display: table;
  content: "";
  line-height: 0; }

.box:after {
  clear: both; }

.box_aside {
  float: left; }

.box_cnt__no-flow {
  overflow: hidden; }

/*==================     Center     ======================*/
.center {
  text-align: center; }

/* 3カラム（PC/SP共通） - p：左寄せ＋左右余白 - ul：中央寄せ */
.well-1 .col-sm-4.center p{
  text-align: left;
  padding: 0 20px;
  box-sizing: border-box; }

.well-1 .col-sm-4.center ul{
  text-align: center;
  list-style: none;
  padding-left: 0;
  margin-left: 0; }

/*==================     ToTop     ======================*/
.toTop {
  font-size: 37px;
  line-height: 37px;
  color: #ad5a55;
  position: fixed;
  right: 40px;
  bottom: 40px;
  display: none;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  z-index: 20; }

  .toTop:hover {
    color: #777;
    text-decoration: none; }

.mobile .toTop,
.tablet .toTop {
  display: none !important; }

/*==================  RD Parallax    ======================*/
.parallax {
  position: relative;
  overflow: hidden;
  color: #FFF; }

.parallax p.indent {
  font-size: 24px;
  line-height: 28px; }

.parallax .title-wr h3,
.parallax .title-wr h5 {
  color: #FFF; }

.parallax_image,
.parallax_pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-position: center center;
  will-change: transform; }

.parallax_image {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover; }

.parallax_pattern {
  background-repeat: repeat; }

.parallax_cnt {
  position: relative; }

@media (max-width: 767px) {
  .parallax p.indent {
    font-size: 20px;
    line-height: 24px;
  }
}

/*==================   Thumbnail    ======================*/
.thumb {
  display: block;
  position: relative;
  overflow: hidden; }

.thumb img {
  width: 100%;
  height: auto;
  -moz-transition: 0.5s all ease;
  -o-transition: 0.5s all ease;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease; }

.thumb_overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  color: #FFF;
  background: transparent; }

.thumb_overlay:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font: 400 30px "FontAwesome";
  line-height: 30px;
  margin-top: -15px;
  text-align: center;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

.lt-ie9 .thumb_overlay:before {
  display: none; }

.thumb:hover .thumb_overlay {
  opacity: 1;
  background: rgba(173, 90, 85, 0.5); }

.lt-ie9 .thumb:hover .thumb_overlay {
  background: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80AD5A55', endColorstr='#80AD5A55')";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80AD5A55', endColorstr='#80AD5A55');
  zoom: 1; }

.thumb:hover .thumb_overlay:before {
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg); }

.lt-ie9 .thumb:hover .thumb_overlay:before {
  display: block; }

.thumb:hover img {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2); }

/*========================================================
  HEADER / FV（ヘッダー + ファーストビュー）統合
=========================================================*/
header {
  text-align: center; }
  header .brand {
    padding-bottom: 52px; }
  header .gradient {
    padding-top: 20px;/*156→20 */
    position: relative; }

header .gradient h1.brand_name,
header .gradient .brand_name {
  margin: 0 0 8px 0;  /* 下だけ少し */ }

header .gradient h2 {
  margin: 0 0 10px 0;
  font-family: "BIZ UDPMincho", "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
}

header .gradient .fv-center {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center; }

header .gradient p.indent {
  margin: 0;
  padding-top: 24px; }

/*========================================================
                     CONTENT  Section
=========================================================*/
main {
  display: block; }

/*==================      Well     ======================*/
.well {
  padding: 78px 0 175px; }

.well-1 {
  padding: 156px 0 160px; }
  .well-1__off {
    padding-bottom: 72px; }
  .well-1__off-1 {
    padding-bottom: 213px; }

.well-2 {
  padding: 73px 0 79px; }

.well-3 {
  padding: 99px 0 88px; }

/*==================     Indent    ======================*/
.indent {
  padding: 0 200px; }

/*==================    Title Wrap   ======================*/
.title-wr {
  text-align: center; }

.title-wr h5 {
  font-style: normal;
  font-weight: 400;
  padding: 0 100px;
  text-transform: none;
  color: #777777;
  letter-spacing: 0; }

/*==================   Flex List   ======================*/
.flex-list {
  display: table;
  table-layout: fixed;
  width: 71%;
  margin: 0 auto; }

  .flex-list li {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }

  .flex-list li img {
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s; }

  .flex-list li a:hover img {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

@media (max-width: 767px) {
  .flex-list,
  .flex-list li {
    display: block; }

  .flex-list li+li {
    margin-top: 20px; } }

.flex-list__md {
  width: 41%; }

/*==================   Img Wrap   ======================*/
.img-wr {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: solid 8px #FFF; }

.img-wr__md {
  border-color: #e5e5e5; }

/*==================   Unir Wrap   ======================*/
.unit-wr {
  position: relative;
  text-align: right;
  padding-right: 40px;
  padding-left: 70px;
  z-index: 0; }

  .unit-wr h4+p {
    margin-top: 8px; }

  .unit-wr img {
    position: absolute;
    top: -32px;
    left: 99%;
    z-index: 1; }

.unit-wr__md {
  text-align: left;
  padding-left: 37px;
  padding-right: 70px; }

  .unit-wr__md img {
  left: auto;
  right: 100%; }

/*==================   Line   ======================*/
.line {
  position: relative;
  z-index: 0; }

  .line:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 3px;
    z-index: 0;
    background: #d6d6d6;
    top: 40px;
    left: 50%;
    margin-left: -2px; }

/*========  service-area: area-list  =============*/
.service-area { /* ：中央寄せ＋上下余白 */
  text-align: center;
  margin-bottom: 24px; }

.service-area .area-list{
  margin: 6px 0 0;
  padding-left: 1.2em; }

.service-area .area-list li{
  margin: 0 0 4px; }  
/*========================================================
                     FOOTER  Styles
=========================================================*/
footer:before,
footer:after {
  display: table;
  content: "";
  line-height: 0; }

footer:after {
  clear: both; }

footer .privacy,
footer .social {
  float: left; }

footer address {
  float: right; }

footer .privacy {
  color: #333333;
  font-size: 14px; }

footer .privacy,
footer address {
  display: inline-block;
  margin-top: 10px; }

footer .social {
  padding-left: 126px; }

/*==================   Social   ======================*/
.social>li {
  display: inline-block; }

.social>li a {
  display: inline-block;
  font-size: 22px;
  line-height: 44px;
  width: 44px;
  height: 44px;
  text-align: center;
  color: #FFF;
  background: #333333;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;}

.social>li a:hover {
  background: #ad5a55; }

.social>li a:active {
  background: #8c4743; }

.social>li+li {
  margin-left: 4px; }

/* ======画面には出さず、HTML上は存在（レイアウト崩さない） ======*/
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}  

/*========================================================
                     RESPONSIVE
=========================================================*/

/*=========   sp1199 =============*/
@media (max-width: 1199px) {
  .indent {
    padding: 0 30px;}

  .title-wr h5 {
    padding: 0 20px;}

  h4 {
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0.8px;}

  h5 {
    letter-spacing: 0;}

  .unit-wr {
    padding-left: 0;}
  .unit-wr img {
    left: 95%;}

  .unit-wr__md {
    padding-right: 0;
    padding-left: 35px;}
    .unit-wr__md img {
    left: auto;
    right: 95%;}

  .flex-list {
    width: 100%;}

  .flex-list__md {
    width: 75%;}

  footer .social {
    padding-left: 50px;} }

/*=========   sp991=============*/
@media (max-width: 991px) {
  h4 {
    font-size: 17px;
    line-height: 17px;
    letter-spacing: 0.5px;}

  .phone-btn {
    min-width: 100%;}
    .phone-btn:before {
    left: 75px;}

  .title-wr h5 {
    padding: 0;}

  .line:before {
    display: none;}

  footer {
    text-align: center;}

  footer .privacy,
  footer .social,
  footer address {
    float: none;}

  footer .social {
    padding-left: 0;}

  footer .social,
  footer address {
    margin-top: 20px;} }

/*=========   sp767 =============*/
@media (max-width: 767px) {
  h2 {
    font-size: 57px;
    line-height: 57px; }

  .indent {
    padding: 0; }

  .phone-btn {
    font-size: 40px;
    line-height: 40px; }
    .phone-btn:before {
      font-size: 45px;
      line-height: 45px;
      left: 50%;
      transform: translateY(-40%) translateX(-500%); }

  header .gradient {
    padding-top: 50px; }

  [class*='well'] {
    padding: 50px 0; }

  .well-bottom {
    padding-bottom: 100px; }

  .row__off, .row__off-1, * + .mailform {
    margin-top: 0; }

  img + .off-1 {
    margin-top: 30px; }

  main p {
    margin-bottom: 14px; }  /* SP：本文（p）の余白 */

  .unit-wr {
    padding: 0;
    text-align: center; }
    .unit-wr img {
      position: static; }    

  .flex-list + .flex-list__md {
    margin-top: 20px; } }

/*=========   sp479 =============*/
@media (max-width: 479px) {
   /* 479だけ改行 */
  .sp-break {
    display: block;}

  h2 {
    font-size: 40px;
    line-height: 40px; }

  .phone-btn {
    font-size: 27px;
    line-height: 24px;
    padding-left: 30px; }
    .phone-btn:before {
      font-size: 27px;
      line-height: 24px;
      transform: translateY(-40%) translateX(-540%); } }

/*=========   SE最適化（375/390/360/320）　 =============*/
@media (max-width: 394px)  {
  header .gradient h2{
    font-size: 32px;      /* 40→34→32 */
    line-height: 36px;    /* 40→36 */  }
  
  /* H2の下のp「大切な方…」サイズ調整 */
  header .gradient p.indent{
    font-size: 18px;   /* 20px→18px */
    line-height: 22px; /* 24px→22px */ }  

  /* ヒーローを薄く */
  header .gradient {
    padding-top: 20px;  /* 20 → 12 → 20 */
    padding-bottom: 48px;  /* 140 → 48→32 →48 */  }

  /* H1＋スローガン ヒーロー白部分 サイズ調整 52px → 28px */
  header .brand{
    padding-bottom: 28px; }

  /* FV内（H2〜CTA）を上げる（72 → 20） */
  header .gradient .container {
    top: 20px; }

  /* CTA周辺余白を詰める（53 → 8） */
  header .gradient p+.phone-btn {
    margin-top: 8px;  /* 53(base) → 8 */  }

  /* 次セクション（well-1）を薄くして、h3/h5を1画面内に入れる */
  [class*='well'] {
    padding: 10px 0; }

  /* 28 → 14→10 */
  main>section.well-1.bg-default {
    padding: 6px 0;  /* 14 → 8→6 */  } 
  
  /* 電話CTAの高さ */
  .phone-btn{ 
    font-size: 27px;
    line-height: 24px;
    padding-top: 20px;  /* ここが本丸：ベースの padding: 38/42 を上書きして小さくする */
    padding-bottom: 22px;
    padding-left: 30px;  /* 479と揃える（必要なら） */ }

   /* 電話マークの位置 */
    .phone-btn:before{
    font-size: 27px;
    line-height: 24px;
    transform: translateY(-40%) translateX(-540%); } }

/*=========   SE最適化（360）　 =============*/
/* 360以下：FVのpと、次セクション（well-1）の見出し折れ対策だけ */

@media (max-width: 360px){

  /* FV：p「大切な方…」をもう1段だけ */
  header .gradient p.indent{
    font-size: 17px; /* 18px→17px */
    line-height: 21px; }/* 22px→21px */

  /* 次セクション：SE最適化でやってる“薄くする”を360にも（高さ条件なし） */
  [class*='well']{
    padding: 10px 0; }
  main>section.well-1.bg-default{
    padding: 6px 0; }

  /* 「葬儀のご依頼について」がh3想定：ここだけ1段下げる */
  main>section.well-1.bg-default h3{
    font-size: 30px;
    line-height: 32px; } }

/*=========   SE最適化（320）　 =============*/

@media (max-width: 320px){

  /* ① FV：p「大切な方…」だけ、もう1段下げる */
  header .gradient p.indent{
    font-size: 15px;
    line-height: 19px; }

  /* ② 次セクション：h3の下のh5（タイトル補足）1文字はみ出し対策 */
  main > section.well-1.bg-default .title-wr h5{
    font-size: 16px;
    line-height: 18px;

    /* “1文字だけ溢れる”保険（日本語でも効く） */
    overflow-wrap: anywhere;
    word-break: break-word; } }

/* ================== Social Icons (Image in Circle) ================== */
.social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #222;  /* 丸の色（必要なら変更） */ }

.social li a img {
  width: 22px;  /* 中のロゴサイズ */
  height: 22px;
  display: block;
  filter: brightness(0) invert(1); }

/* LINE icon size adjustment */
.social li a img[src*="icons8-line-48"] {
  width: 34px;
  height: 34px; }

/* ================== Service Logo (Size + Center) ================== */
/* 3カラム先頭ロゴ：（画像自体は1024pxでもOK） */
.service-logo {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto 18px;
  /* 下に余白 */
  width: clamp(96px, 10vw, 160px); }

/* ================== Voice ================== */
.voice-item .voice-title {
  display: block;
  margin: 16px 0 8px;  /* 18px→16px（最終値に統一） */
  font-weight: 700;}

/* ================== PC (min-width: 768px) ==================
   - Safari(PC) 太すぎ対策（検証1）
   - 3カラム：ボタン位置を揃える
=========================================================== */
@media (min-width: 768px) {

  /* --- Safari(PC) 太すぎ対策（検証1） --- */
  h3,
  h4,
  h5 {
  font-weight: 700; }

  .btn {
    font-weight: 700; }

  .brand_slogan {
    font-weight: 600; }

  .phone-btn {
    font-weight: 700; }

  /* --- PC 3カラム：ボタン位置を揃える --- */
  /* 3カラム（center列があるrow）だけをflex行にする */
  .row.row__off:has(> .col-sm-4.center) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch; }

  /* その3カラム列だけ float を殺して、縦レイアウト（ボタンを下へ） */
  .row.row__off:has(> .col-sm-4.center)>.col-sm-4.center {
    float: none !important;
    display: flex !important;
    flex-direction: column !important; }

  /* 本文を伸ばして差分吸収 */
  .row.row__off:has(> .col-sm-4.center)>.col-sm-4.center>p {
    flex: 1 1 auto !important; }

  /* ボタンを最下部へ */
  .row.row__off:has(> .col-sm-4.center)>.col-sm-4.center>.btn {
    margin-top: auto !important; }

  /* --- PCだけに限定（SP崩れ防止）：コピー行間／本文とボタンの間 --- */
  /* コピーのスペース調整（PCのみ） */
  .gradient h2 {
    line-height: 1.35; }

  /* 本文とボタンの間の余白（PCのみ） */
  .col-sm-4 p {
    margin-bottom: 24px; }}

/* well-2 を削除した分：p直後の parallax セクションの「外側の間」を復元 */
p+section.parallax.well-1.well-bottom {
  margin-top: 75px; }

/* 14 Plus帯域だけ：header上の空白を潰す（PCには影響させない） */
@media (min-width: 420px) and (max-width: 489px) {
  header.parallax.well {
    padding-top: 0; }}

/* お問い合わせフォーム直下：対応エリアとの間に余白を作る */
section.parallax.well-1.well-bottom+.service-area {
  margin-top: 28px; }