@charset "utf-8";

.site-body {
  margin-top: 120px;
}

.page-title {
  text-align: center;
  margin: 60px 0;
  width: 90%;
  margin: 0 auto;
  margin-top: 50px;
}

.page-title h1 {
  border: none;
  color:#ff3f00;
font-size:35px;
font-weight: bold;
}

.column-nav{
  width: 90%;
display:flex;
justify-content: center;
flex-wrap:wrap;
gap:10px;
margin:30px auto;
}

.column-nav a{
  width: 150px;
display:inline-block;
padding:10px 16px;
background:#333;
color:#fff;
text-decoration:none;
border-radius:4px;
font-size:16px;
font-weight:600;
transition:0.2s;
text-align: center;
}

.column-nav a:hover{
opacity: 0.75;
}

h2[id]{
scroll-margin-top:180px;
}

.column-list{
max-width:1100px;
margin:60px auto;
padding:0 20px;
}

.column-title{
text-align:center;
font-size:28px;
margin-bottom:40px;
color:#FFA31C;
}

.column-category{
  width: 90%;
  max-width: 1100px;
font-size:26px;
font-weight:700;
background: #808080;
color:#fff;
margin:0 auto;
padding-left:14px;
text-align: center;
padding: 10px 0;
}

.column-grid{
  width: 90%;
  max-width: 1024px;
  margin: 0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top: 40px;
padding-bottom: 60px;
}

.column-card{
display:block;
text-decoration:none;
color:#333;
border-radius:8px;
overflow:hidden;
background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:0.3s;
}

.column-card:hover{
transform:translateY(-5px);
box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

.column-card img{
width:100%;
height:180px;
object-fit:cover;
}

.column-text{
padding:18px;
}

.column-text h3{
font-size:16px;
margin-bottom:8px;
}

.column-text p{
font-size:14px;
color:#666;
line-height:1.6;
margin-bottom: 0;
}

@media (max-width:900px){

.column-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:600px){

.column-grid{
grid-template-columns:1fr;
}

}

.column {
max-width:800px;
margin:auto;
background:#fff;
padding:20px;
box-shadow:0 0 10px rgba(0,0,0,0.08);
margin-bottom: 50px;
}


@media (max-width:540px) {

}



/* タイトル */

.column h1{
color:#ff3f00;
font-size:28px;
margin-bottom:20px;
border-left:6px solid #ff3f00;
padding-left:15px;
font-weight: bold;
}

/* 見出し */

.column h2{
font-size:24px;
margin-top:50px;
color:#333;
border-bottom:3px solid #FFA31C;
padding-bottom:8px;
font-weight: 700;
    position: relative;
        padding: .3em 0 .2em 1em;
}


.column h2::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #FFA31C;
    content: '';
}

.column h2::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #FFA31C;
    content: '';
}

.column h3{
font-size:18px;
margin-top:25px;
color:#444;
}

/* テキスト */

.column p{
margin:15px 0;
padding-right: 0.5em;
padding-left: 1.5em;
font-size: 16px;
}

/* テーブル */

table{
width:100%;
border-collapse:collapse;
margin:20px 0;
}

th{
background:#ff3f00;
color:#fff;
padding:10px;
font-weight: 600;
}

td{
border:1px solid #ddd;
padding:10px;
text-align:center;
font-weight: 600;
}

/* ポイントBOX */

.point-box{
background:#fff7e8;
border-left:5px solid #ff3f00;
padding:15px 20px;
margin:25px 0;
}

/* リンク */

.link-box{
background:#f4f4f4;
padding:20px;
margin-top:40px;
border-radius:6px;
}

.link-box a{
color:#ff3f00;
font-weight:bold;
text-decoration:none;
}

.link-box a:hover{
text-decoration:underline;
}

.flow-title{
font-weight:700;
font-size:18px;
margin-top:25px;
margin-bottom:5px;
display:flex;
align-items:center;
}

.flow-number{
background:#ff3f00;
color:#fff;
width:26px;
height:26px;
display:inline-flex;
align-items:center;
justify-content:center;
margin-right:10px;
font-size:14px;
font-weight:bold;
}

.caution-list{
list-style:none;
padding-left:0;
margin:20px 0;
}

.caution-list li{
position:relative;
padding:10px 15px 10px 40px;
margin-bottom:10px;
background:#e61919;
color:#ffff00;
font-weight:600;
border-radius:4px;
display: inline-block;
width: 220px;
}

.caution-list li::before{
content:"⚠";
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
font-size:18px;
color:#ffff00;
}


.back-column{
text-align:center;
margin:50px 0 20px 0;
}

.back-column a{
display:inline-block;
background:#000;
color:#fff;
padding:12px 25px;
text-decoration:none;
font-weight:bold;
border-radius:5px;
transition:0.3s;
}

.back-column a:hover{
opacity: .7;
}

.related-article{
margin:40px 0;
padding:25px;
background:#fff7e8;
border-left:6px solid #FFA31C;
border-radius:6px;
}

.related-title{
font-weight:bold;
margin-bottom:10px;
font-size:18px;
color:#FFA31C;
}

.related-text{
margin-bottom:15px;
line-height:1.8;
}

.related-link{
display:inline-block;
padding:10px 18px;
background:#FFA31C;
color:#fff;
font-weight: bold;
text-decoration:none;
border-radius:4px;
font-size:14px;
}

.related-link:hover{
opacity:0.9;
}

.warning-list{
list-style:none;
padding:0;
margin:20px 0;
}

.warning-list li{
background:#f8f8f8;
border-left:6px solid #FFA31C;
padding:14px 18px;
margin-bottom:10px;
font-weight:600;
font-size:16px;
border-radius:4px;
box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.price-box{
background:#f7f7f7;
padding:25px;
margin:30px 0;
border-left:5px solid #FFA31C;
}

.price-box h3{
font-size:20px;
margin-bottom:15px;
color:#FFA31C;
}

.price-box ul{
list-style:none;
padding:0;
}

.price-box li{
padding:8px 0;
border-bottom:1px solid #ddd;
font-weight:500;
}


.column-main {
  width: 100%;
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 40px;
}

.column-main-01 {
  background-image: url(../column/img/column-01.png);
}


.column-main-02 {
  background-image: url(../column/img/column-02.png);
}

.column-main-03 {
  background-image: url(../column/img/column-03.png);
}

.column-main-04 {
  background-image: url(../column/img/column-04.png);
}

.column-main-05 {
  background-image: url(../column/img/kaitai05.png);
}

.column-main-06 {
  background-image: url(../column/img/column-05.png);
}

.column-main-07 {
  background-image: url(../column/img/column-06.png);
}

.column-main-08 {
  background-image: url(../column/img/reform03.png);
}

.column-main-09 {
  background-image: url(../column/img/shinchiku01.png);
}

.column-main-10 {
  background-image: url(../column/img/shinchiku02.png);
}

.column-main-11 {
  background-image: url(../column/img/shinchiku03.png);
}

.column-main-12 {
  background-image: url(../column/img/shinchiku04.png);
}

.column-main-13 {
  background-image: url(../column/img/jiban01.png);
}

.column-main-14 {
  background-image: url(../column/img/jiban02.png);
}

.column-main-15 {
  background-image: url(../column/img/solar01.png);
}

.column-main-16 {
  background-image: url(../column/img/solar02.png);
}

.column-main-17 {
  background-image: url(../column/img/solar03.png);
}


.column-wrap{
display:flex;
gap:30px;
max-width:1200px;
margin:auto;
padding:40px 20px;
align-items:flex-start;
margin-top: 170px;
}

.column-main{
flex:3;
}

.column-sidebar{
flex:1;
min-width:300px;
}

.sidebar-box{
background:#f7f7f7;
padding:20px;
margin-bottom:30px;
border-top:4px solid #FFA31C;
}

.sidebar-box h3{
font-size:18px;
margin-bottom:15px;
font-weight: 600;
}

.sidebar-box a {
  color: #333;
}

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

.sidebar-box li{
  display: flex;
border-bottom:1px solid #ddd;
justify-content: space-between;
align-items: center;
}

.sidebar-box li a{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
text-decoration:none;
color:#333;
font-size:15px;
}

.sidebar-box li a:hover{
color:#FFA31C;
}

.sidebar-post{
display:flex;
flex-direction:column;
gap:15px;
}

.side-post{
display:flex;
gap:12px;
text-decoration:none;
color:#333;
align-items:center;
}

.side-post img{
width:70px;
height:70px;
object-fit:cover;
border-radius:4px;
}

.side-post span{
font-size:15px;
line-height:1.4;
}

.side-post:hover{
opacity:0.7;
}



@media (max-width:768px) {
.column-wrap{
margin-top: 150px;
flex-direction:column;
align-items: center;
}
.column-main {
  margin-bottom: 10px;
}
.column-sidebar {
  width: 100%;
  max-width: 768px;
}

  }

  .column-main{
flex:3;
min-width:0;
}