/*
* Contact
*/
/* -------------------------
common
------------------------- */
:root {
    --primary-white: #FFFFFF;
    --primary-black: #1C1C1C;
    --primary-gray900: #212121;
    --primary-gray800: #424242;
    --primary-gray700: #616161;
    --primary-gray600: #757575;
    --primary-gray500: #9E9E9E;
    --primary-gray400: #BDBDBD;
    --primary-gray300: #E0E0E0;
    --primary-gray200: #EEEEEE;
    --primary-gray100: #F5F5F5;
    --primary-gray050: #FAFAFA;

    --primary-green900: #39922c;
    --primary-green800: #44af35;
    --primary-green700: #61bb55;
    --primary-green600: #7fc874;
    --primary-green500: #9cd493;
    --primary-green400: #b8e0b2;
    --primary-green300: #b9e1b3;
    --primary-green200: #d0ebcd;
    --primary-green100: #e8f5e6;
    --primary-green050: #f3faf3;

    --primary-txtlink: #00A867;
    --primary-txtlinkhover: #23B553;

    --primary-yellow: #F5AA00;
    --primary-orange: #E57D1B;

    --contentWidth: 91.4%;
    --contentPadding: 3.2%;
    --contentPaddingPC: 5.6%;
}
/* -------------------------
inner
------------------------- */

/* SP */
.inner.contents {
    padding: 0 12.5px;
}
/* PC・Tablet */
@media (min-width: 768px) {
    .inner.contents {
        max-width: 1200px !important;
        padding: 0 40px !important;
        margin: 0 auto;
    }
}

/* ---------------------
共通　h2タイトル 
----------------------*/

h1 {
    font-size: 24px;
    text-align: center;
    line-height: 1.4em;
    margin: 48px auto 40px !important;
    padding-bottom: 16px;
    position: relative;
}
h1::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  background: var(--primary-green800);
  width: 100px;
  height: 4px;
  border-radius: 2px;
}



@media screen and (min-width: 768px) {
    h1 {
    font-size: 32px;
}
h1::after {
  width: 150px;
  bottom: 0;
}
}



/* ---------------------
3カラム
--------------------- */
.content {
    padding-top: 24px !important;
    padding-bottom:0 !important;
}
.three_column__contents {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.three_column__contents div {
    margin-top: 20px;
}
.three_column__contents h3 {
    font-size: 20px;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.three_column__contents p {
    font-size: 14px;
    line-height: 1.7em;
    margin-top: 10px;
    text-align: justify;
}
.yakushoku {
  line-height: 1.4em !important;
}


@media (min-width: 768px) {
    /* #three_column {
    padding: 100px 0;
} */
 .content {
    padding-bottom:80px !important;
}
.three_column__contents {
    flex-direction: row;
     flex-wrap: wrap;          /* ← これを追加（折り返す） */
    gap: 64px 40px;
}
.three_column__contents p {
    font-size: 16px;
}
/* 3列にする：gap分を引いて 1/3 */
  .three_column__contents > li {
    flex: 0 1 calc((100% - 40px * 2) / 3); /* ← 3つ並ぶ */
    min-width: 0;
  }

  .three_column__contents p {
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  
}