/* ==========================================================================
   共通
========================================================================== */


main
{
    padding-bottom: 100px;
}

section
{
    margin-top: 50px;
}

section h2
{
    position: relative;
    margin: 0 auto 50px;
    color: #49B100;
    text-align: center;
}

section h2 .dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

section h2 .dots span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3f8cff, #70c254);
    position: relative;
}

section h2 .dots span::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #f6f7e8;
    border-radius: 50%;
}

.risk-section h2 {
    text-align: center;
    color: #45b000;
    font-size: 28px;
    letter-spacing: 0.15em;
    margin-bottom: 50px;
}

.risk-list {
    margin: 0 auto;
}

.risk-item {
    margin-bottom: 14px;
    background: #ffff99;
}

.risk-item summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 55px 0 68px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}

.risk-item summary::-webkit-details-marker {
    display: none;
}

.risk-item summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    background: #ffc400;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-image: url(../images/new-common/note_icon.png);
    background-position: center;
    background-size: 70% 70%;
    background-repeat: no-repeat;
}

.risk-item summary::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 12px;
    height: 12px;

    border-right: 3px solid #5cc5aa;
    border-bottom: 3px solid #5cc5aa;
    border-image: linear-gradient(135deg, #4d93ff, #59c26a) 1;

    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}

.risk-item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.risk-item p {
    margin: 0;
    padding: 16px 24px 20px 68px;
    background: #ffffbf;
    line-height: 1.8;
}

.problem
{
    display: flex;
    gap:25px;
}

.problem>div
{
    width:50%;    
}
.problem>div img
{
    width:100%;    
}

.know-problem-text h3
{
    position: relative;
    margin-top: 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.know-problem-text h3 span
{
    display: flex;
    width:5px;
    height: 1.5em;
    border-radius: 3px;
    background-color:#C5E58A; 
}

/*メリット*/
.merit-section {
    padding: 80px 20px;
    background: #f8f8f8;
}

.merit-section h2 {
    text-align: center;
    color: #58b300;
    margin-bottom: 80px;
}

.merit-list {
    width:80%;
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.merit-item {
    text-align: center;
}

.merit-item img,
.sale-method-item img
{
    width:80%;
    aspect-ratio: 1/1;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
}

.merit-item p {
    font-size: 22px;
    margin: 0;
    text-align: left;
    display: flex;
}
.merit-item p:before
{
    content:"✓";
    display: block;
    
}

.index-content-area
{
    width:80%;
    margin: 0 auto;
}

/*メリット・デメリット*/
.comparison {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 15px 0 20px;
}

.comparison::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 100%;
    border-right: 2px dashed #434B3B;
    transform: translateX(-50%);
}

.comparison > div {
    width: 42%;
    box-sizing: border-box;
}

.comparison > div h3 {
    color: #49B100;
    text-align: center;
    margin: 0 0 25px;
    font-size: 18px;
}

.sale-method-section {
    padding: 70px 20px;
    background: linear-gradient(120deg, #fffdf1 0%, #eefbea 100%);
}

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

.comparison li {
    margin-bottom: 10px;
    line-height: 1.8;
    font-weight: bold;
}

.comparison li::before {
    content: "✓ ";
}

.sale-method-section h2 {
    text-align: center;
    color: #3aad00;
    font-size: 30px;
    letter-spacing: 0.08em;
    margin-bottom: 65px;
}

.sale-method-list {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    align-items: end;
}

.sale-method-item {
    text-align: center;
}
.sale-method-item.use_item
{
    text-align: left;
}
.sale-method-item p {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.sale-flow-section {
    padding: 70px 20px;
    background: linear-gradient(120deg, #fffdf1 0%, #eefbea 100%);
}

.sale-flow-section h2 {
    text-align: center;
    color: #3aad00;
    font-size: 30px;
    letter-spacing: 0.08em;
    margin-bottom: 60px;
}

.sale-flow-list {
    max-width: 900px;
    margin: 0 auto;
}

.comparison-card {
    max-width: 900px;
    margin: 0 auto 50px;
}

/* 汎用タイトル */
.comparison-card {
    margin-bottom: 50px;
}

.comparison-title {
    background: #ffc400;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 6px 20px;
    border-radius: 999px;
    margin: 0 auto 30px;
    font-size: calc(20 * var(--font-scale));
}

/*フロー*/

.flow-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 120px;
    padding: 20px 30px;
    background: #fff;
    border-radius: 25px;
    margin-bottom: 45px;
}
.flow-il
    {
        position: absolute;
        width:30%;
        max-width:100px;
        max-height: 100px;
        right:5%;
        bottom: 5%;
        object-fit: contain;
    }
.flow-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 22px solid #72c846;
}

.flow-step {
    width: 95px;
    min-width: 95px;
    text-align: center;
    color: #f2bf22;
    border-right: 2px solid #aaa;
    margin-right: 28px;
    padding-right: 28px;
}

.flow-step span {
    display: block;
    font-size: 16px;
    font-weight: bold;
}

.flow-step strong {
    display: block;
    font-size: 32px;
    line-height: 1;
}

.flow-text h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #333;
}

.flow-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    font-weight: bold;
}
.demo-flow .flow-text
{
    max-width: 450px;
}
.flow-text .note {
    font-size: 13px;
    color: #555;
}

.double-flow-head .comparison-title {
    max-width: none;
    margin: 0;
}

.double-flow-head
{
    display: flex;
    gap:20px;
}

.comparison-title
{
    width:100%;
    box-sizing: border-box;
}

.double-flow {
    max-width: 1100px;
    margin: 0 auto;
}

.flow-item-wide{
    max-width:none;
}

/* 2列 */
.double-flow-body{
    position: relative;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.double-flow-body::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-top:22px solid #72c846;
    z-index: 2;
}

.flow-column{
    flex:1;
    min-width: 0;
}

.double-flow .flow-item-wide,
.flow-common-after .flow-item {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 左右のタイトル */
.double-flow .comparison-title{
    max-width:none;
    margin-bottom:40px;
}

/* 既存フロー利用 */
.flow-column .flow-item{
    margin-bottom:50px;
}

/* 既存矢印位置調整 */
.flow-column .flow-item:not(:last-child)::after{
    bottom:-34px;
}

/* 右側の点々 */
.flow-dummy{
    position:relative;
    height:165px;
    margin-bottom:50px;
}

.flow-dummy::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:8px;
    height:8px;
    border-radius:50%;
    background:#72c846;

    box-shadow:
        0 -15px 0 #72c846,
        0 15px 0 #72c846;
}

.flow-common-after .flow-item {
    margin-bottom: 50px;
}

/* 下向き矢印 */

.flow-column-none .flow-dummy:not(:last-child)::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-34px;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-top:22px solid #72c846;
}

/*補助金*/
.subsidy-section {
    padding: 70px 20px;
    background: linear-gradient(120deg, #fffdf1 0%, #eefbea 100%);
}

.subsidy-section h2 {
    text-align: center;
    color: #3aad00;
    font-size: 30px;
    margin-bottom: 55px;
}

.subsidy-list {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.subsidy-card {
    background: #fff;
    border-radius: 22px;
}

.subsidy-card h3 {
    text-align: center;
    font-size: 18px;
    margin: 0 0 10px;
}

.subsidy-line {
    height: 7px;
    background: #ffff7d;
    border-radius: 999px;
    margin-bottom: 10px;
}

.subsidy-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.subsidy-tags span {
    background: #ffc400;
    color: #fff;
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: bold;
}

.subsidy-info {
    margin-bottom: 35px;
}

.subsidy-info p {
    margin: 0 0 16px;
    font-weight: bold;
}

.subsidy-info strong {
    color: #45bd00;
    font-size: 28px;
}

.subsidy-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width:100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 25px;
    box-sizing: border-box;
}
.next-page-btn
{
    position:absolute;
    width:calc(100% - 50px);
    display: inline-flex;
    bottom: 15px;
    justify-content: space-between;
}
.next-page-btn>span
{
    width: 85%;
    position: relative;
    display: block;
}
.next-page-btn > span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px; /* 線の太さ */
    background: currentColor; /* 文字色と同じ色 */
    transform: translateY(-50%);
}

.next-page-btn > span::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

/*関連記事*/
.article-section {
    padding: 70px 20px;
    background: linear-gradient(120deg, #fffdf1 0%, #eefbea 100%);
}

.article-section h2 {
    text-align: center;
    color: #43b000;
    margin-bottom: 50px;
}

.article-list {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.article-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.article-thumb {
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 15px;
}

.article-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;

    transition: transform .3s;
}

.article-card:hover .article-thumb img {
    transform: scale(1.05);
}

.article-card h3 {
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.article-tags {
    display: flex;
    gap: 10px;
}

.article-tags span {
    color: #555;
}

.contact-guide-section h2 {
    text-align: center;
    color: #257E95;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #257E95;
}

.contact-guide-content {
    text-align: center;
}

.contact-guide-content p {
    margin: 0 auto 15px;
    color: #257E95;
    text-align: left;
    width:50%;
    max-width: 500px;
    min-width: 350px;
}

.contact-guide-content p>a {
    color:#257E95;
}

.contact-guide-btn {
    margin-top: 50px;
}

/* 活用事例 */
.case-section {
    padding: 70px 0;
}

.case-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    margin: 0 auto;
}

.case-card a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 45px;
    aspect-ratio: 1 / 1;
    color: #fff;
    text-decoration: none;
}

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

/* 暗いフィルター */
.case-card a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

/* 縦書きテキスト */
.case-text {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    text-orientation: mixed;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    gap:10px;
}

.case-num {
    font-size: 32px;
    font-weight: bold;
    writing-mode: horizontal-tb;
    margin: 0;
}

.case-area {
    font-size: 12px;
    padding-bottom: 8px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: fit-content;
    margin: 0;
    
}

.case-text h3 {
    font-size: 17px;
    margin: 0;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/*相続*/
.inheritance-text
{
    width: fit-content;
    margin: 0 auto;
}

/*記事一覧*/
.article-list-section {
    margin-top: 60px;
}

.article-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 35px;
}

.article-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.article-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 12px;
}

.article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.article-card a:hover .article-thumb img {
    transform: scale(1.05);
}

.article-card h2 {
    margin: 0 0 5px;
    color: #434B3B;
    font-size: calc(20px* var(--font-scale));;
    line-height: 1.5;
    text-align: left;
}

.article-tags span {
    color: #434B3B;
    font-size: 16px;
    font-weight: bold;
}

.tel-icon
{
    content: "";
    display: inline-flex;
    width:1em;
    aspect-ratio: 1/1;
    background-image: url("../images/new-common/tel-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom:-8px;
}

.tel-banner{
    display: inline-block;
    text-decoration: underline;
    color: #257E95;
    font-size: calc(3em * var(--font-scale));
}

.group-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
        margin-top: 50px;
}

.expert-card{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
}
.expert-slider-wrap
{
    width:100%;
    padding-top: 0;
}
.expert-card.use_card{
    max-width:400px;
}
.expert-card>.photo
{
    width: 30%;
    aspect-ratio: 220/145;
    height: auto;
}
.expert-card>.text
{
    width:70%;
}
.expert-card-bottom
{
    padding: 0 28px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}

/*事例*/
.caseCard {
  width: min(500px, 60vw);
  aspect-ratio: 1 / 1.05;
  margin-right: 40px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 黒30%フィルター */
.caseCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  z-index: 1;
  pointer-events: none;
}

/* リンク全体クリック */
.caseCard a {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}

/* テキスト全体は通常の縦並び */
.caseText {
    width:fit-content;
    padding:20px;
    height:100%;
    box-sizing:border-box;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  gap:10px;
  text-shadow:
    0 3px 6px rgba(0,0,0,.16);
      position: absolute;
      top:0;
      left:0;
}

/* 数字 */
.caseNo {
  font-size: calc(2em * var(--font-scale));
  font-weight: 700;
  line-height: 1;
}

/* 市町村 */
.caseArea {
  font-size: calc(1.4em * var(--font-scale));
  border-top: 1px solid rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.8);
  padding: 4px 0;
}

/* タイトルだけ縦書き */
.caseText p {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: calc(1.4em * var(--font-scale));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .08em;
  
}

.caseBtn {
  margin: 0 auto;
}

.caseBtn span {
  margin-left: 15px;
}

.original-contents > .article_wrap {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 30px;
    padding-top: 50px;
    text-align: left;
}
.caseCard
{
    width:100%;
    aspect-ratio: 1 / 1.2;
    margin-right: 0;
}
.article_wrap .caseCard:nth-child(3n + 2) {
    margin-top: 55px;
}
.article_wrap .caseCard:nth-child(3n) {
    margin-top: 110px;
}
.original-contents
{
    width:100%;
}
.caseNo
{
    font-size: calc(1.25em * var(--font-scale));
}
.caseArea
{
    font-size: calc(1em * var(--font-scale));
}
.caseText p
{
    font-size: calc(1em * var(--font-scale));
}

/* PCではクリック無効 */
@media (min-width: 768px){
    .tel-banner{
        pointer-events: none;
        cursor: default;
    }
}

/* スマホではクリック可能 */
@media (max-width: 767px){
    .tel-banner{
        pointer-events: auto;
    }
}

.contact-banner
{
    width:100%;
}

.contact-banner h2
{
    margin: 0 auto;
    font-size: calc(2em * var(--font-scale));
}

.muryou
{
    background-color: #F58E8B;
    color: #fff;
    width: fit-content;
    padding: 5px 50px;
    border-radius: 50px;
    margin: 0 auto;
}

.contact-banner .upper
{
    width:100%;
    background-color: #FFFFD3;
    border-radius: 5vw 5vw 0 0;
    padding: 50px 0 170px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    justify-content: center;
    text-align: center;
}

.door
{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.contact-banner .lower
{
    width:100%;
    background-color: #C5E58A;
    border-radius: 0 0 5vw 5vw;
    padding: 63px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.light
{
    display: inline-flex;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.lower .btn
{
    z-index: 1;
    
}

.contact-text
{
    text-align: left;
}

.contact-sub-title
{
    color: #49B100;
}

.legal-consult-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 25px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .75);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.legal-consult-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    color: #333;
    font-size: calc(0.95rem * var(--font-scale));
}

.legal-consult-table caption {
    caption-side: top;
    padding: 18px 20px;
    background: linear-gradient(90deg, #3187bd 0%, #77bc50 100%);
    color: #fff;
    font-size: calc(1.2rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 18px 18px 0 0;
}

.legal-consult-table caption span {
    display: inline-block;
    margin: 0 4px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #F58E8B;
    color: #fff;
    font-size: calc(0.85rem * var(--font-scale));
}

.legal-consult-table th,
.legal-consult-table td {
    padding: 16px 18px;
    border-right: 1px solid #dfe8d5;
    border-bottom: 1px solid #dfe8d5;
    vertical-align: middle;
    line-height: 1.8;
}

.legal-consult-table th {
    background: #f1f9e9;
    color: #49B100;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.legal-consult-table td {
    background: rgba(255, 255, 255, .95);
}

.legal-consult-table tbody tr:nth-child(even) td {
    background: #fbfef7;
}

.legal-consult-table th:last-child,
.legal-consult-table td:last-child {
    border-right: none;
}

.legal-consult-table tbody tr:last-child td {
    border-bottom: none;
}

.legal-consult-table small {
    color: #666;
    font-size: calc(0.85em * var(--font-scale));
}

.reserve-contact {
    text-align: center;
    font-weight: 700;
    background: #f7fbff !important;
}

.reserve-contact a {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid #257E95;
    color: #257E95;
    text-decoration: none;
    white-space: nowrap;
}

.reserve-contact a:visited,
.reserve-contact a:hover,
.reserve-contact a:active {
    color: #257E95;
    text-decoration: none;
}


/*専門家グループ詳細*/
.group
{
    display: flex;
    gap: 15px;
}

.group-name
{
    position: relative;
    margin: 0;
    color: currentColor;
    text-align: left;
    width:85%;
    display: flex;
    align-items: center;
}
.group-tag
{
    width:15%;
    display: flex;
    gap: 10px;
}
.group-tag>div
{
    width:100%;
}
.group-tag img
{
    width: 100%;
}
.expert-section-title {
    margin: 36px 0 16px;
    padding: 8px 16px;
    background: #70b84f;
    color: #fff;
    font-weight: 700;
    border-radius:50px;
}
.specialty
{
    display: flex;
    border-bottom: 1px dotted #49B100;
    
}
.specialty-list .specialty:first-child {
    border-top: 1px dotted #49B100;
}
.specialty-name
{
    width: 20%;
    text-align: center;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.specialty-name:after
{
    content: "";
    display: inline-flex;
    width:100%;
    height: 50%;
    border-right:1px dotted #49B100;
    position: absolute;
}
.specialty-text
{
    width:80%;
    padding: 15px;
}

/*ページネーション*/
.pagination-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination .page-item {
    list-style: none;
    color: #70b84f;
}

.pagination .page-item a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #70b84f;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.pagination .page-item.active a {
    background: #70b84f;
    color: #fff;
}

.pagination .page-item.disabled a {
    opacity: 0.4;
    pointer-events: none;
}

.pagination .page-item.prev a,
.pagination .page-item.next a {
    width: auto;
    min-width: 70px;
    padding: 0 16px;
    border-radius: 999px;
}




@media screen and (min-width: 768px) {
    .pagination .page-item:not(.active):not(.disabled) a:hover {
        opacity: 0.8;
        transform: translateY(-2px);
    }

    .pagination .page-item a {
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    }
}

/* ==========================================================================
   1200px以下（中間幅の補助指定）
========================================================================== */
@media screen and (max-width:1260px) {
    .flow-item
    {
        padding-bottom: 110px;
    }
}

@media screen and (max-width:1200px) {
    
    .legal-consult-table-wrap
    {
        border-radius: 24px 0 0 24px;
        
    }
    .legal-consult-table caption
    {
        text-align: left;
    }
    .index-content-area
    {
        width:100%;
    }
    
    .expert-card{
        flex-direction: column;
    }
    .expert-card>.photo
    {
        width: 100%;
    }
    .expert-card>.text
    {
        width:100%;
    }
    .expert-card-bottom
    {
        padding: 0 28px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
    }
}
@media all and (max-width:1200px)
{
    .sp-cta
    {
        display: block;
    }
    .pc-cta
    {
        display: none;
    }
    .cta
    {
        padding: 0;
        width:95%;
    }
    .cta:after
    {
        content:none;
        
    }
    
    .sp-cta div
    {
        padding: 15px;
        box-sizing: border-box;
    }
    .cta h2
    {
        margin: 0 auto;
        font-size: calc(1.35em * var(--font-scale));
        padding-top: 15px;
    }
    .cta-h2-before
    {
        font-size: calc(0.65em * var(--font-scale));
    }
    .cta-btn:after
    {
        content:none;
        
    }
    .sp-cta img
    {
        width:100%;
        max-width: 100%;
        
    }
    .expert-card.use_card{
        max-width:350px;
    }
    
}

/* ==========================================================================
   1024px以下
========================================================================== */


@media screen and (max-width:1024px){
    .sp-menu-panel
    {
        display: block;
    }
     .sp-menu-panel-inner {
        padding: 50px 5% 100px;
        box-sizing: border-box;
        height: 100%;
        overflow-y: auto;
    }
    
    .expert-card
    {
        
    }
}


/* ==========================================================================
   768px以下 / 767px以下
========================================================================== */


@media screen and (max-width: 768px) {
    .risk-section h2 {
        font-size: 22px;
    }

    .risk-item summary {
        padding-right: 45px;
        font-size: 14px;
    }
    
}

@media screen and (max-width:767px) {

    .lower-page-inner h1 
    {
        margin-bottom: 50px;
    }
    section h2 .dots
    {
        gap: 5px;
        margin-top: 5px;
    }
    section h2 .dots span
    {
        width:15px;
        height:15px;
    }
    section h2,
    .risk-section h2
    {
        margin: 0 auto 25px;
    }
    .risk-item summary::after
    {
        right: 10px;
        width: 10px;
        height: 10px;
    }
    
    .merit-list {
        width:100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .merit-item img,
    .sale-method-item img
    {
        width: 100%;
        margin-bottom: 15px;
    }

    .merit-item p {
        font-size: calc(1em * var(--font-scale)) ;
        text-align: left;
    }
    
    .sale-method-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .sale-method-section h2 {
        font-size: 24px;
        margin-bottom: 45px;
    }


    .sale-method-item p {
        font-size: 16px;
    }
    
    .flow-item {
        padding: 15px 15px 120px 15px ;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
    }
    .flow-step
    {
        width:100%;
        display: flex;
        gap: 10px;
        align-items: flex-end;
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 1px solid #C7C7C7;
        padding-bottom: 10px;
    }
    .flow-text
    {
        margin-top: 10px;
    }
    .subsidy-list {
        grid-template-columns: 1fr;
    }

    .subsidy-card {
        padding: 24px 20px;
    }
    .article-list {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .article-thumb img {
        height: 200px;
    }
    .case-list {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .case-card a {
        border-radius: 30px;
    }
    .article-list {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .article-card h2 {
        font-size: 18px;
    }
    
    
    .problem
    {
        flex-direction: column;
        gap: 20px;
    }
    .problem>div
    {
        width:100%;
    }
    
    .group-list
    {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .comparison
    {
        flex-direction: column;
    }
    .comparison > div
    {
        width:80%;
        margin: 0 auto;
    }
    .comparison::after
    {
        content:none;
    }
    .comparison > div:first-of-type
    {
        border-bottom: 2px dashed #434B3B;
        margin-bottom: 10px;
    }
    
    .contact-banner .upper,
.contact-banner .lower {
    overflow: hidden;
}

.door {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.light {
    width: 100%;
    max-width: 360px;
    height: auto;
}
.comparison-title
{
    font-size: calc(1.2em * var(--font-scale));
}
}
.double-flow-sp {
    display: none;
}

@media screen and (max-width: 767px) {
    
    .light {
/*        width: 100%;*/
        max-width: 360px;
        height:100%;
    }
    .contact-banner .lower
    {
            padding: 19px 0 19px;
    }
    .double-flow-pc {
        display: none;
    }

    .double-flow-sp {
        display: block;
    }

    .flow-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 55px;
    }

    .flow-tab {
        border: none;
        border-radius: 999px;
        padding: 5px 10px;
        background: #cfcfcf;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
    }

    .flow-tab.is-active {
        background: #ffc400;
    }

    .flow-sp-content {
        display: none;
    }

    .flow-sp-content.is-active {
        display: block;
    }

}
@media screen and (max-width: 767px) {
    .lower-carousel {
        position: relative;
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .lower-carousel .slick-list {
        overflow: hidden;
    }

    .lower-carousel .slick-track {
        display: flex;
        align-items: stretch;
    }

    .lower-carousel .slick-slide {
        height: auto;
    }

    .lower-carousel-arrow {
        position: absolute;
        top: 50%;
        z-index: 5;
        width: 34px;
        height: 34px;
        border: 2px solid #72c846;
        border-radius: 50%;
        background: #fff;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .lower-carousel-prev {
        left: -12px;
    }

    .lower-carousel-next {
        right: -12px;
    }

    .lower-carousel-arrow::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 9px;
        height: 9px;
        border-top: 2px solid #72c846;
        border-right: 2px solid #72c846;
    }

    .lower-carousel-prev::before {
        transform: translate(-35%, -50%) rotate(-135deg);
    }

    .lower-carousel-next::before {
        transform: translate(-65%, -50%) rotate(45deg);
    }

    .lower-carousel .subsidy-card,
    .lower-carousel .case-card,
    .lower-carousel .article-card {
        margin: 0 8px;
    }
}
@media screen and (max-width: 767px) {
    .pagination {
        gap: 6px;
    }

    .pagination .page-item a {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .pagination .page-item.prev a,
    .pagination .page-item.next a {
        min-width: 56px;
        padding: 0 10px;
        font-size: 13px;
    }
    
    .group
    {
        flex-direction: column-reverse;
        margin-top: 10px;
        gap: 5px;
    }

    .group-name
    {
        width:100%;
    }
    .group-tag
    {
        width:30%;
        max-width: 100px;
        display: flex;
        gap: 10px;
    }
    
}

/* =========================================================
   相続登記フロー
   既存のフローCSSを利用し、分岐部分のみ追加
========================================================= */



/* 既存のdouble-flowをフロー側に使用 */
.inheritance-double-flow {
    width: 100%;
    min-width: 0;
}

/* 共通ステップ間の余白 */
.inheritance-double-flow > .flow-item-wide {
    margin-bottom: 50px;
}

/*
 * STEP2から分岐タイトルへ向かうため、
 * STEP2の既存矢印はそのまま使用
 */
.inheritance-will-check {
    margin-bottom: 45px;
}

/* 「遺言書がない／ある」のタイトル */
.inheritance-branch-head {
    gap: 40px;
    margin-bottom: 40px;
}

.inheritance-branch-title {
    margin-bottom: 0 !important;
}

/*
 * 既存のdouble-flow-bodyを使用
 * 既存CSSの中央合流矢印だけ、このフローでは不要
 */
.inheritance-branch-body {
    margin-bottom: 0;
}

.inheritance-branch-body::after {
    display: none;
}

/* 左右の列 */
.inheritance-flow-column {
    min-width: 0;
}

/* 既存CSSでは各flow-item間に下向き矢印が付く */
.inheritance-flow-column > .flow-item {
    margin-bottom: 50px;
}

/*
 * 選択肢2つを横並び
 */
.inheritance-choice-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 50px;

    position: relative;
}

.inheritance-choice-item {
    display: flex;
    justify-content: center;

    min-height: 135px;
    margin-bottom: 0 !important;
    padding: 20px;
}

/* 選択肢カードにはSTEP欄がないため中央揃え */
.inheritance-choice-item .flow-text {
    width: 100%;
    text-align: center;
}
.flow-item.none:after
{
    display: none;
}