/* ============================================================
   SP (Mobile First) STYLES
   ============================================================ */

/*------------------------------------------------------------
BODY BASIC
------------------------------------------------------------*/
:root {
--color-primary: #1a3a5c;       /* 濃紺 */
--color-primary-dark: #0f2540;  /* より濃い紺 */
--color-accent: #c8a96a;        /* ゴールド */
--color-accent-hover: #b8904a;
--color-text: #333;
--color-text-light: #666;
--color-bg: #fff;
--color-bg-sub: #f5f4f0;        /* 生成り */
--color-border: #ddd;
--color-border-light: #eee;
}

body {
font-size: 3.7vw;
line-height: 1.8;
color: var(--color-text);
background-color: var(--color-bg);
}

/*------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------*/
.pconly { display: none; }
.sponly { display: block; }


/*------------------------------------------------------------
HEADER
------------------------------------------------------------*/
#siteHeader {
background-color: var(--color-primary);
padding: 3.2vw 4.0vw;
position: sticky;
top: 0;
z-index: 1000;
}

.headerInner {
display: flex;
align-items: center;
justify-content: space-between;
}

.headerLogo a {
text-decoration: none;
display: flex;
flex-direction: column;
}

.logoMain {
display: block;
color: var(--color-accent);
font-size: 4.8vw;
font-weight: 700;
font-family: 'Noto Serif JP', serif;
line-height: 1.2;
}

.logoSub {
display: block;
color: rgba(255,255,255,0.75);
font-size: 2.7vw;
line-height: 1.4;
margin-top: 0.5vw;
}


/*------------------------------------------------------------
DRAWER MENU
------------------------------------------------------------*/
#menuBtn {
position: fixed;
right: 4.0vw;
top: 4.8vw;
width: 8.0vw;
height: 6.4vw;
cursor: pointer;
z-index: 9999;
}
#menuBtn span {
display: block;
position: absolute;
height: 0.5vw;
width: 100%;
background: #fff;
left: 0;
transition: all 0.3s ease-in-out;
}
#menuBtn span:nth-child(1) { top: 0; }
#menuBtn span:nth-child(2) { top: 2.9vw; }
#menuBtn span:nth-child(3) { top: 5.9vw; }

.active#menuBtn span:nth-child(1) {
top: 2.9vw;
transform: rotate(45deg);
}
.active#menuBtn span:nth-child(2) {
width: 0;
left: 50%;
}
.active#menuBtn span:nth-child(3) {
top: 2.9vw;
transform: rotate(-45deg);
}

#menuBox {
display: none;
width: 100%;
background: var(--color-primary-dark);
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
overflow-y: auto;
}
#menuBox.active { display: block; }

.menuInner {
padding: 18.7vw 5.3vw 10.7vw;
}

.menuLogoArea {
margin-bottom: 8.0vw;
padding-bottom: 5.3vw;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.menuLogo a { text-decoration: none; }
.menuLogoMain {
display: block;
color: var(--color-accent);
font-size: 5.9vw;
font-weight: 700;
font-family: 'Noto Serif JP', serif;
}
.menuLogoSub {
display: block;
color: rgba(255,255,255,0.7);
font-size: 2.9vw;
margin-top: 1.1vw;
}

.spMenu {
padding: 0;
}
.spMenu li {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.spMenu li a {
display: block;
padding: 3.7vw 2.7vw;
color: rgba(255,255,255,0.9);
text-decoration: none;
font-size: 3.7vw;
}
.spMenu li a:hover {
color: var(--color-accent);
background: rgba(255,255,255,0.05);
}


/*------------------------------------------------------------
TOPPAGE - MAIN VISUAL (SLIDER)
------------------------------------------------------------*/
#mv {
position: relative;
overflow: hidden;
}

/* スライダーコンテナに16:9アスペクト比を設定 */
.top-slide {
position: relative;
padding-top: 75%;
height: 0;
}

/* slick内部要素をコンテナいっぱいに展開 */
#mv .slick-list {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden !important;
}

#mv .slick-track,
#mv .slick-slide,
#mv .slick-slide > div {
height: 100%;
}

.top-slide .mv01,
.top-slide .mv02,
.top-slide .mv03 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100%;
}

.top-slide .mv01 { background-image: url('img/law-mirai01-sp.jpg'); }
.top-slide .mv02 { background-image: url('img/law-mirai02-sp.jpg'); }
.top-slide .mv03 { background-image: url('img/law-mirai03-sp.jpg'); }

/* オーバーレイ */
.ol {
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

/* テキストエリア：MV全体にflexで中央揃え */
.mv-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3vw;
}

.mv-copy {
text-align: center;
color: #fff;
font-family: 'Noto Serif JP', serif;
font-size: 4.8vw;
line-height: 1.5;
padding: 0 5vw;
}

.mv-copy span {
display: inline-block;
opacity: 0;
}

.mv-copy span.is-animated {
animation: mvCharSlideIn 0.5s ease forwards;
}

.mv-org {
text-align: center;
color: var(--color-accent);
/*color:#ddc89e; */
font-size: 5.25vw;
font-weight: 700;
letter-spacing: 0.1em;
opacity: 0;
text-shadow:0 0 3vw rgba(0,0,0,.5);
}
.mv-org span{
display:block;
font-size:3.5vw;
}


.mv-org.is-animated {
animation: mvFadeInUp 0.8s ease forwards;
}

/* slick dots（MV内部に収める） */
#mv .slick-dots {
position: absolute;
bottom: 2vw;
z-index: 20;
}

#mv .slick-dots li button::before {
color: #fff;
opacity: 0.6;
font-size: 8px;
}

#mv .slick-dots li.slick-active button::before {
opacity: 1;
color: #fff;
}

@keyframes mvCharSlideIn {
from {
opacity: 0;
transform: translateY(-12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes mvFadeInUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}



/*------------------------------------------------------------
TOPPAGE - INTRO
------------------------------------------------------------*/
#topIntro {
background-color: var(--color-bg-sub);
padding: 10.7vw 5.3vw;
}

.topIntroInner {
max-width: 900px;
margin: 0 auto;
}
.topIntroInner p {
margin-bottom: 3.2vw;
font-size: 3.7vw;
line-height: 1.9;
}
.topIntroInner p:last-child {
margin-bottom: 0;
}


/*------------------------------------------------------------
TOPPAGE - NEWS
------------------------------------------------------------*/
#topNews {
padding: 10.7vw 5.3vw;
}

.topNewsInner {
max-width: 900px;
margin: 0 auto;
}

.topSectionTitle {
font-size: 5.3vw;
font-family: 'Noto Serif JP', serif;
color: var(--color-primary);
border-left: 4px solid var(--color-accent);
padding-left: 3.7vw;
margin-bottom: 6.4vw;
line-height: 1.3;
}

.topNewsList {
border-top: 1px solid var(--color-border);
}

.newsItem {
display: flex;
flex-wrap: wrap;
gap: 1.6vw 2.7vw;
padding: 3.7vw 0;
border-bottom: 1px solid var(--color-border-light);
align-items: flex-start;
}

.newsDate {
color: var(--color-text-light);
font-size: 3.2vw;
min-width: 21.3vw;
flex-shrink: 0;
padding-top: 0.5vw;
}

.newsLabel {
font-size: 2.9vw;
font-weight: 700;
padding: 0.5vw 2.1vw;
border-radius: 3px;
flex-shrink: 0;
color: #fff;
}
.labelHoukoku { background-color: #1a5c3a; }
.labelYotei   { background-color: #1a3a7c; }
.labelSeimei  { background-color: #7c1a1a; }
.labelNews    { background-color: #1a4a7c; }
.labelColumn  { background-color: #5c4a1a; }
.labelPdf     { background-color: #c0392b; }

.newsTitle {
color: var(--color-text);
text-decoration: none;
font-size: 3.7vw;
line-height: 1.6;
flex-basis: 100%;
}
.newsTitle:hover {
color: var(--color-primary);
text-decoration: underline;
}


/*------------------------------------------------------------
TOPPAGE - ACTIVITIES
------------------------------------------------------------*/
#topActivities {
background-color: var(--color-bg-sub);
padding: 10.7vw 5.3vw;
}

.topActivitiesInner {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10.7vw;
}

.topActivityBox {}

.topActivityList {
border-top: 1px solid var(--color-border);
margin-bottom: 5.3vw;
}
.topActivityList li {
padding: 3.2vw 0;
border-bottom: 1px solid var(--color-border-light);
display: flex;
flex-wrap: wrap;
gap: 1.6vw;
}

.activityDate {
color: var(--color-text-light);
font-size: 3.2vw;
min-width: 21.3vw;
flex-shrink: 0;
}
.topActivityList li a {
color: var(--color-text);
text-decoration: none;
font-size: 3.7vw;
flex: 1;
}
.topActivityList li a:hover {
color: var(--color-primary);
text-decoration: underline;
}

.topMoreBtn {
display: inline-block;
background-color: var(--color-primary);
color: #fff;
padding: 2.7vw 6.4vw;
font-size: 3.5vw;
text-decoration: none;
border-radius: 2px;
transition: background-color 0.2s;
}
.topMoreBtn:hover {
background-color: var(--color-primary-dark);
}


/*------------------------------------------------------------
PAGE CONTENT (固定ページ・アーカイブ共通)
------------------------------------------------------------*/
#pageContent {
padding: 8.0vw 5.3vw 16.0vw;
}

.pageContentInner {
max-width: 900px;
margin: 0 auto;
}

.pageHeader {
margin-bottom: 8.0vw;
padding-bottom: 5.3vw;
border-bottom: 2px solid var(--color-primary);
}

.pageTitle {
font-size: 5.9vw;
font-family: 'Noto Serif JP', serif;
color: var(--color-primary);
line-height: 1.4;
}

.pageSubTitle {
font-size: 3.5vw;
color: var(--color-text-light);
line-height: 1.8;
}

.pageBody {
font-size: 3.7vw;
line-height: 2;
}
.pageBody p {
margin-bottom: 1.2em;
margin-left:1em;
}
.pageBody h2 {
font-size: 4.8vw;
color: var(--color-primary);
margin:0 0 4vw;
padding-bottom: 1.6vw;
border-bottom: 1px solid var(--color-border);
}
.pageBody h3 {
font-size: 4.3vw;
color: var(--color-primary);
margin:0 0 2.5vw;
}
.pageBody h4 {
font-size: 4vw;
color: var(--color-primary);
margin:0 0 2.5vw;
}
.pageBody a {
color: var(--color-primary);
text-decoration: underline;
}
.pageBody a:hover {
color: var(--color-accent-hover);
}




/*------------------------------------------------------------
ARCHIVE LIST
------------------------------------------------------------*/
.archiveList {
}

.archiveItem {
padding: 5.3vw 0;
border-bottom: 1px solid var(--color-border-light);
display:flex;
flex-direction:column;
gap:2vw 0;
}

.archiveDate {
display: block;
font-size: 3.2vw;
color: var(--color-text-light);
}

.archiveTitle {
font-size: 5.0vw;
font-weight: 700;
line-height: 1.5;
}
.archiveTitle a {
color: var(--color-text);
text-decoration: none;
}
.archiveTitle a:hover {
color: var(--color-primary);
text-decoration: underline;
}

.archiveExcerpt {
font-size: 3.5vw;
color: var(--color-text-light);
line-height: 1.7;
}

.noPost {
padding: 8.0vw 0;
color: var(--color-text-light);
}


/*------------------------------------------------------------
SINGLE POST
------------------------------------------------------------*/
.singleDate {
display: block;
font-size: 3.2vw;
color: var(--color-text-light);
margin-bottom: 2.1vw;
}

.singleBody {
padding-top: 2.7vw;
}

.singleBackLink {
margin-top: 10.7vw;
padding-top: 5.3vw;
border-top: 1px solid var(--color-border);
}

.backBtn {
display: inline-block;
background-color: var(--color-bg-sub);
color: var(--color-text);
padding: 2.7vw 5.3vw;
font-size: 3.5vw;
text-decoration: none;
border: 1px solid var(--color-border);
border-radius: 2px;
transition: all 0.2s;
}
.backBtn:hover {
background-color: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}


/*------------------------------------------------------------
PANKUZU
------------------------------------------------------------*/
#pankuzu {
font-size: 2.9vw;
line-height: 1.6;
padding: 2.7vw 0 5.3vw;
color: var(--color-text-light);
}
#pankuzu a {
color: var(--color-text-light);
text-decoration: none;
}
#pankuzu a:hover {
text-decoration: underline;
}


/*------------------------------------------------------------
FOOTER
------------------------------------------------------------*/
#siteFooter {
background-color: var(--color-primary-dark);
color: rgba(255,255,255,0.8);
padding: 10.7vw 5.3vw 8.0vw;
}

.footerInner {
max-width: 900px;
margin: 0 auto;
}

.footerLogo {
margin-bottom: 6.4vw;
padding-bottom: 5.3vw;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footerLogo a { text-decoration: none; }
.footerLogoMain {
display: block;
color: var(--color-accent);
font-size: 4.8vw;
font-weight: 700;
font-family: 'Noto Serif JP', serif;
margin-bottom: 1.1vw;
}
.footerLogoSub {
display: block;
color: rgba(255,255,255,0.6);
font-size: 2.9vw;
}

.footerNavList {
display: flex;
flex-wrap: wrap;
gap: 1.1vw 0;
margin-bottom: 6.4vw;
}
.footerNavList li {
width: 50%;
}
.footerNavList li a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 3.2vw;
padding: 1.3vw 0;
display: block;
}
.footerNavList li a:hover {
color: var(--color-accent);
}

.footerContact {
margin-bottom: 5.3vw;
padding: 3.7vw;
background-color: rgba(255,255,255,0.05);
border-radius: 4px;
font-size: 3.2vw;
}
.footerContact p {
margin: 0 0 1.1vw;
line-height: 1.6;
}

.footerCopy {
font-size: 2.9vw;
color: rgba(255,255,255,0.5);
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 4.3vw;
}
.footerCopy p { margin-bottom: 1.1vw; }
.footerNote { font-size: 2.7vw; }


/*------------------------------------------------------------
GOTOTOP
------------------------------------------------------------*/
.gototop a {
position: fixed;
bottom: 5.3vw;
right: 2.7vw;
cursor: pointer;
z-index: 999;
display: block;
color: #666;
padding-top: 5.3vw;
width: 10.4vw;
font-size: 2.7vw;
line-height: 1.2;
text-align: center;
}
.gototop a::before {
content: '';
width: 6.9vw;
height: 6.9vw;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
transform: rotate(-135deg);
position: absolute;
top: 0;
left: 1.6vw;
}


/*------------------------------------------------------------
PAGE NAVI
------------------------------------------------------------*/
.wp-pagenavi {
clear: both;
text-align: center;
margin: 8.0vw 0;
display: flex;
justify-content: center;
gap: 1.1vw;
}
.wp-pagenavi a,
.wp-pagenavi span {
text-decoration: none;
width: 9.6vw;
height: 9.6vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5vw;
font-weight:bold;
color: var(--color-text);
transition: all 0.2s;
border-radius:50%;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
background-color: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
border-radius:50%;
}


/*------------------------------------------------------------
PREVNEXT
------------------------------------------------------------*/
.prevnext {
display: flex;
justify-content: space-between;
gap: 2.7vw;
margin: 8.0vw 0;
padding: 5.3vw 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.prevnext a {
color: var(--color-primary);
text-decoration: none;
font-size: 3.5vw;
}
.prevnext a:hover {
text-decoration: underline;
}


/*------------------------------------------------------------
NYUUKAI PAGE
------------------------------------------------------------*/
.nyuukaiBox {
background-color: var(--color-bg-sub);
border: 1px solid var(--color-border);
border-radius: 4px;
padding: 3.5vw;
margin: 6.4vw 0;
}
.nyuukaiBox h2 {
font-size: 4.3vw;
color: var(--color-primary);
margin-bottom: 3.7vw;
border-bottom: 1px solid var(--color-border);
padding-bottom: 2.1vw;
}
.nyuukaiTable {
width: 100%;
font-size: 3vw;
line-height:1.35;
}
.nyuukaiTable th {
background-color: var(--color-primary);
color: #fff;
padding: 2.1vw 2.7vw;
width: 32.0vw;
vertical-align: top;
font-weight: normal;
border-bottom:1px solid var(--color-border-light);
}
.nyuukaiTable td {
padding: 2.1vw 2.7vw;
border-bottom: 1px solid var(--color-border-light);
}
.nyuukaiKana {
font-size: 2.9vw;
color: var(--color-text-light);
}

.nyuukaiLinks {
margin: 5.3vw 0;
}
.nyuukaiLinks ul {
list-style: none;
padding: 0;
}
.nyuukaiLinks ul li {
padding: 1.6vw 0;
border-bottom: 1px dotted var(--color-border);
}
.nyuukaiLinks ul li a {
color: var(--color-primary);
text-decoration: none;
font-size: 3.7vw;
}
.nyuukaiLinks ul li a:hover {
text-decoration: underline;
}

.nyuukaiForm {
margin-top: 8.0vw;
padding-top: 5.3vw;
border-top: 2px solid var(--color-primary);
}
.nyuukaiForm h2 {
font-size: 4.8vw;
color: var(--color-primary);
margin-bottom: 5.3vw;
font-family: 'Noto Serif JP', serif;
}

.formPlaceholder {
background-color: #fff3cd;
border: 1px solid #ffc107;
border-radius: 4px;
padding: 4.3vw;
font-size: 3.5vw;
color: #856404;
line-height: 1.8;
}


/*------------------------------------------------------------
CONTACT FORM
------------------------------------------------------------*/
.form {
display: grid;
grid-template-columns: 1fr;
margin: 0;
}
.form dt {
padding: 4.8vw 3.2vw 1.6vw 0;
font-weight: bold;
display: flex;
align-items: center;
gap: 2.4vw;
}
.form dd {
padding: 0 0 4.8vw 0;
margin: 0;
border-bottom: 1px solid var(--color-border-light);
}
.form dt span.req {
background-color: #DC2626;
color: #fff;
font-size: 3vw;
font-weight: bold;
padding: .8vw 1.6vw;
border-radius: .8vw;
line-height: 1;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 2.4vw 3.2vw;
border: 1px solid var(--color-border-light);
border-radius: 1.6vw;
background-color: #F9FAFB;
font-size: 3.5vw;
}
textarea {
width: 100%;
padding: 2.4vw 3.2vw;
border: 1px solid var(--color-border-light);
border-radius: 1.6vw;
background-color: #F9FAFB;
font-size: 3.5vw;
}
.form-submit {
display: flex;
flex-direction: column;
gap: 3.2vw;
align-items: center;
}
.form-submit input[type="submit"],
.form-submit button {
width: 100%;
max-width: 300px;
padding: 3.2vw;
font-size: 4vw;
-webkit-appearance: button;
border: none;
cursor: pointer;
background-color: var(--color-primary);
color: #fff;
}

.mwform-tel-field input[type="text"],
.mwform-zip-field input[type="text"] {
display: inline-block;
width: 25% !important;
}