/* © 岡田商店 binramune
   https://www.dagashiyasan.co.jp/column/assets/css/column.css
*/

/* =========================
   COLUMN LAYOUT
========================= */
.column-layout{
  display:flex;
  gap:30px;
  align-items:flex-start;
  width:100%;
  margin-top:20px;
}

.column-side{
  order:1;
  flex:0 0 280px;
}

.column-main{
  order:2;
  flex:1 1 auto;
  min-width:0;
  padding:1.6em 1em 2em;
  border:1px #F8E857 solid;
  border-radius:12px;
  background-image:url(../img/cal-wall1.png);
}

/* =========================
   PAGE TITLE
========================= */
.column-page-title{
  margin:0 0 20px;
  font-size:1.5em;
  font-weight:bold;
}

/* =========================
   PROFILE
========================= */
.column-profile{
  margin-bottom:25px;
  line-height:1.8;
}

.column-profile-title{
  font-weight:bold;
  margin-bottom:10px;
}

/* =========================
   INDEX
========================= */
.column-index{
  width:100%;
  margin-bottom:60px !important;
}

.column-index-head{
  display:block;
  margin-bottom:10px;
}

.column-index-title{
  display:block;
  width:100%;
  margin:30px 0 5px;
  padding:4px 10px;
  background:#68472f;
  border:1px solid #AD9D59;
  color:#fff;
  box-sizing:border-box;
  font-size:15px;
}

.column-index-count{
  margin:0;
  font-size:0.85em;
  font-weight:bold;
  white-space:nowrap;
}

.column-index-page{
  font-weight:bold;
  min-width:72px;
  text-align:center;
}

.column-index-nav{
  appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  color:#b18d2f;
  font-size:1.25em;
  line-height:1;
  cursor:pointer;
  transition:0.2s ease;
}

.column-index-nav:hover{
  transform:scale(1.08);
  opacity:0.85;
}

.column-index-nav:active{
  transform:scale(0.96);
}

.column-index-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.column-index-item{
  display:flex;
  gap:12px;
  padding:10px;
  border:1px solid #ead7a3;
  border-radius:10px;
  background:rgba(255,255,255,0.55);
  text-decoration:none;
  transition:0.2s;
}

.column-index-item:hover{
  background:rgba(255,255,255,0.88);
}

.column-index-item.is-current{
  border:2px solid #C19A4D;
  background:rgba(255,248,220,0.9);
}

.column-index-thumb{
  flex:0 0 62px;
}

.column-index-thumb img{
  display:block;
  width:62px;
  height:62px;
  object-fit:cover;
}

.column-index-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.column-index-date{
  font-size:0.82em;
  color:#7b5c46;
}

.column-index-name{
  font-weight:bold;
  line-height:1.5;
}

/* =========================
   ARTICLE
========================= */
.column-article{
  width:100%;
}

.column-article-title{
  margin:0 0 20px;
  font-size:1.2em;
  line-height:1.5;
}

.column-visual{
  margin-bottom:25px;
  text-align:center;
}

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

.column-body{
  line-height:1.6;
}

.column-body p{
  margin:0 0 1.5em;
}

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

/* =========================
   PHOTO GRID
========================= */
.column-photo-section{
  margin-top:25px;
}

.column-photo-title{
  margin:0 0 18px;
  font-size:1em;
}

.column-photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 16px;
}

.column-photo-item{
  margin:0;
}

.column-photo-item img{
  display:block;
  width:100%;
  max-width:310px;
  height:auto;
  margin:0 auto;
  border:1px solid #666;
}

.column-photo-item figcaption{
  margin-top:8px;
  font-size:90%;
  line-height:1.6;
}

.column-photo-wide{
  grid-column:1 / 2;
}

/* =========================
   SP INDEX JUMP
========================= */
.column-index-jump{
  margin:8px 0 18px;
  text-align:right;
  font-size:0.9em;
}

.column-index-jump a{
  display:inline-flex;
  align-items:center;
  gap:0.35em;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(173,157,89,0.55);
  color:#68472F;
  font-weight:bold;
  text-decoration:none;
}

.column-index-jump a::before{
  content:"▼";
  font-size:0.75em;
}

/* =========================
   SHARE
========================= */
.column-share{
  margin-top:40px;
  padding-top:20px;
  border-top:1px dashed #c7b96a;
}

.column-share-title{
  margin-bottom:12px;
  font-weight:bold;
  text-align: center;
}

.column-share-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content: center;
  align-items: stretch;
}

.share-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff !important;
  font-size:0.95em;
  font-weight:bold;
  text-decoration:none;
  transition:0.2s ease;
}

.share-btn i{
  font-size:1.1em;
}

.share-btn:hover{
  transform:translateY(-2px);
  opacity:0.9;
}

.share-x{
  background:#111;
}

.share-fb{
  background:#1877f2;
}

/* =========================
   RESPONSIVE
========================= */
@media screen and (max-width:688px){

  .column-layout{
    flex-direction:column;
    gap:30px;
  }

  .column-main{
    order:1;
    width:100%;
  }

  .column-side{
    order:2;
    width:100%;
  }

  .column-page-title{
    margin:0 0 20px;
    padding-left:0;
    font-size:1.25em;
    text-align:center;
  }

  .column-article-title{
    font-size:1.14em;
  }

  .column-index-title{
    margin: 40px 0 0;
  }

  .column-index-count{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    margin:14px 0 12px;
    text-align:center;
    font-size:0.85em;
    line-height:1.2;
  }

  .column-index-list{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:100%;
    grid-template-rows:repeat(3, auto);
    gap:10px 0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    max-height:none;
    padding:0;
  }

  .column-index-item{
    scroll-snap-align:start;
  }

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

  .column-photo-wide{
    grid-column:auto;
  }

  .column-share-links{
    justify-content:center;
  }
}