/* ==================================================
   File: main.css
   Purpose: 特定の箇所のみ適用するスタイル
================================================== */

/* ===== TOPページ ====== */
.slick-slider-conteiner {
    max-width: 1770px;
    width: 100%;
    margin: auto auto 5.3125rem auto;
    padding: 0 16px;
}
.slick-track {
    display: flex !important;
    gap: 0.625rem;
}
.slick-item a {
    display: inline-block;
    width: 100%;
}
.slick-item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*-- タブ --*/
.tabs-conteiner {
   display: flex;
   justify-content: space-between;
   width: 100%;
   border-bottom: 1px solid #959595;
   overflow-x: scroll;
   -ms-overflow-style: none;
   scrollbar-width: none;
}
.tabs-conteiner::-webkit-scrollbar{
   display:none;
}
.tab-label{
   position: relative;
   display: flex;
   align-items: center;
   width: auto;
   height: 50px;
   padding: 0.5rem;
   color: #959595;
   font-size: 1.3125rem;
   font-weight: 400;
   text-align: center;
   cursor: pointer;
   float: left;
   transition: all 0.2s ease;
   white-space: nowrap;
}
.tab-item:checked + label{
   color: #FFFFFF;
   background-color: #ec635e;
}
input[name="tab-item"]{
    display: none;
}
.tab{
    display: none;
    padding: 2.5rem 0.3125rem;
    clear: both;
    overflow: hidden;
}
#all-tab {
  display: block;
}
@media (max-width: 959px) {
   .tab-label{
      height: 40px;
      padding: 0.5rem;
      font-size: 1.0625rem;
   }
}
@media (max-width: 600px) {
   .tab{
      padding: 2rem 0.3125rem;
   }
}

/* ===== カエレバ・ヨメレバ （レスポンシブver.2.4）====== */
.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a {
   transition: all ease-in-out .3s;
   display: block;
   text-decoration: none;
   text-align: center;
   padding: 13px;
}
.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover{
   box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
   -moz-transform: translateY(-2px);
   -webkit-transform: translateY(-2px);
   transform: translateY(-2px);
}
.shoplinkamazon a {
   background: #f79256;
   border-radius: 7px;
   color: #fff;
}
.shoplinkkindle a {
   background: #007dcd;
   border-radius: 7px;
   color: #fff;
}
.shoplinkrakuten a {
   background: #f76956;
   border-radius: 7px;
   color: #fff;
}
.shoplinkyahoo a {
   background: #66a7ff;
   border-radius: 7px;
   color: #fff;
}
.booklink-image{
   zoom: 1.2;
}
.kaerebalink-box, .booklink-box{
   border: 1px #9C9996 solid;
   box-shadow: 2px 2px 4px gray;
   margin: 20px 0;
   display: flex;
   align-items: center;
   padding: 20px;
   box-sizing: border-box;
   justify-content: space-around;
}
.booklink-footer {
   display: none;
}
.kaerebalink-info, .booklink-info {
   width: 43%;
   font-size: 16px;
}
@media screen and (max-width: 640px) {
   .kaerebalink-box, .booklink-box {
      display: block;
   }
   .kaerebalink-info, .booklink-info {
      width: 100%;
   }
   .kaerebalink-image, .booklink-image {
      margin: 0 0 20px 0!important;
      text-align: center;
      float: none!important;
   }
   .kaerebalink-name, .booklink-name{
      text-align: center;
   }
}

/* 当サイトについてページ専用 */
:root{
    --brand:#ff5757;         /* KOIMANAキーカラー */
    --ink:#2a2a2a;
    --sub:#6b7280;
    --line:#e5e7eb;
    --paper:#ffffff;
    --paper-alt:#fafafa;
    --radius:16px;
    --shadow:0 6px 24px rgba(0,0,0,.06);
    --maxw:980px;
}

/* Hero */
.aboutus .hero{
	background:linear-gradient(180deg,#fff, #fff 60%, #f8fafc);
	border:1px solid var(--line); border-radius:var(--radius);
	box-shadow:var(--shadow); padding:28px; position:relative; overflow:hidden;
}
.aboutus  .hero-badge{
	display:inline-flex;
	gap:8px; 
	align-items:center;
	font-size:12px;
	color:#fff;
	background:var(--brand); padding:6px 10px;
	border-radius:999px; letter-spacing:.03em
}
.aboutus .hero h1{
	margin:.6em 0 .3em;
	font-size:clamp(22px,4.2vw,34px);
	line-height:1.25
}
.aboutus .hero p{
	color:var(--sub);
	margin:0
}
.aboutus .hero-meta{
	display:flex;
	gap:14px;
	margin-top:14px;
	color:var(--sub);
	font-size:13px;
	flex-wrap:wrap;
}
.aboutus .toc{
	margin-top:18px;
	display:flex;
	gap:10px;
	flex-wrap:wrap
}
.aboutus .toc a{
	text-decoration:none; color:var(--ink); background:var(--paper);
	border:1px solid var(--line); padding:8px 12px; border-radius:10px; font-size:14px;
}

/* Sections */
.aboutus section{
	margin-top:24px; background:var(--paper); border:1px solid var(--line);
	border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}
.aboutus section header h2{
	font-size:clamp(18px,3.6vw,22px); margin:.2em 0 .6em; line-height:1.3;
}
.aboutus .lead{color:var(--sub); margin-top:-6px}

/* Cards */
.aboutus .cards{
	display:grid;
	gap:14px;
	grid-template-columns:1fr;
}
@media (min-width:680px){
	.aboutus .cards.cols-2{
		grid-template-columns:repeat(2,1fr);
	}
	.aboutus .cards.cols-3{
		grid-template-columns:repeat(3,1fr);
	}
}
.aboutus .card{
	border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--paper-alt);
}
.aboutus .media{
	display:flex;
	gap:14px; align-items:flex-start;
}
.aboutus .avatar{
	width:64px;
	height:64px;
	border-radius:50%;
	background:#eee; flex:0 0 auto;
	display:grid;
	place-items:center;
	color:#999;
	font-size:12px;
	border:1px solid var(--line);
}
.aboutus .name{
	font-weight:700;
}
.aboutus .role{
	color:var(--sub);
	font-size:13px;
}

/* Process / timeline */
.aboutus .process{
	display:grid; gap:12px;
}
.aboutus .step{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:12px;
	align-items:start;
	padding:12px;
	background:#fff;
	border:1px dashed var(--line);
	border-radius:12px;
}
.aboutus .step-num{
	width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
	display:grid; place-items:center; font-weight:700;
}
.aboutus .kv{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.aboutus .kv .tag{
	font-size:12px; padding:4px 8px; background:#fff; border:1px solid var(--line);
	border-radius:999px; color:var(--sub)
}

/* Definition list */
.aboutus dl{display:grid; grid-template-columns:1fr; gap:10px; margin:0}
.aboutus dt{font-weight:700}
.aboutus dd{margin:0; color:var(--sub)}
@media (min-width:720px){
	.aboutus dl{grid-template-columns:220px 1fr}
	.aboutus dt{color:#111}
}

/* CTA */
.aboutus .cta{
	display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-start;
	background:#fff1f1; border:1px solid #ffd5d5; padding:16px; border-radius:12px;
}
.aboutus .btn{
	display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
	padding:10px 14px; border-radius:10px; font-weight:700;
}
.aboutus .muted{color:var(--sub); font-size:14px}

/* Small helpers */
.aboutus .sep{height:1px; background:var(--line); margin:14px 0}
.aboutus .small{font-size:13px; color:var(--sub)}
.aboutus .h3{font-weight:700; margin:10px 0 6px; font-size:16px}
.aboutus ol.padded li{margin:.2em 0}