@charset "UTF-8";
/* CSS Document */

/*-------------------------- PC、SP共通--------------------------*/
:root {
      --bg: #f7f9fc;
      --surface: #ffffff;
      --text: #333b45;
      --muted: #506a8b;
      --line: #dbe3ed;
      --blue-50: #eef5fb;
      --blue-100: #e2eef9;
      --blue-200: #d3e5f7;
      --blue-500: #2d84df;
      --blue-600: #1f73cb;
      --shadow: 0 10px 30px rgba(36, 60, 90, 0.08);
      --radius: 14px;
      --radius-sm: 10px;
      --max: 1080px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body section.hero,
    body main#mirrorless-beginner-contents {
      /*margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);*/
      line-height: 1.75;
    }

    body section.hero img,
    body main#mirrorless-beginner-contents img {
      max-width: 100%;
		height: auto;
      display: block;
	  margin-inline: auto;
    }

    body main#mirrorless-beginner-contents a {
      color: var(--blue-600);
      text-decoration: none;
    }

    body main#mirrorless-beginner-contents a:hover {
      text-decoration: underline;
    }
.top-menu li {
	line-height: 1;
}
#page-top {
	line-height: 1;
}
small {font-size: 13px;text-align: right;display: block;line-height: 2;}
    .mb-container {
      width: min(calc(100% - 32px), var(--max));
      margin: 0 auto;
    }

    .hero {
      padding: 0 0 44px;
      text-align: center;
    }

    .hero h1 {
      margin: 0 0 14px;
      font-size: clamp(1.9rem, 4vw, 3rem);
      line-height: 1.3;
      letter-spacing: 0.02em;
		font-weight: bold;
    }

    .hero p {
      margin: 0 auto;
      max-width: 760px;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .quick-links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 26px;
    }
	
    .quick-links {
	    display: flex;
		flex-direction: row;
		justify-content: center;
	}
	@media (max-width: 639px) {
    .quick-links {
	    display: flex;
		flex-direction: column;
	}
	}
	
	
    .quick-links a {
      background: var(--blue-100);
      border: 1px solid var(--blue-200);
      border-radius: 999px;
      color: #34516f;
      padding: 12px 16px;
      font-size: 0.95rem;
      font-weight: 700;
      text-align: center;
      transition: 0.2s ease;
    }

    .quick-links a:hover {
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    #mirrorless-beginner-contents section {
      padding: 0 0 28px;
    }

    #mirrorless-beginner-contents section[id] {
      padding: 56px 0;
    }

    .section-title {
      margin: 0 0 18px;
      text-align: center;
      font-size: clamp(1.4rem, 2.4vw, 2rem);
      line-height: 1.45;
		font-weight: bold;
    }

    .section-lead {
      max-width: 820px;
      margin: 0 auto 22px;
      color: var(--muted);
      text-align: left;
      font-size: 0.96rem;
    }

    .toc {
      padding: 40px 150px 40px 40px;
      margin-top: 20px;
	  width: fit-content;
	  margin-inline: auto;
    }
@media (max-width: 639px) {
    .toc {
      padding: 24px;
	  }
}
    .toc h2 {
      margin: 0 0 16px;
      font-size: 1.1rem;
		font-weight: bold;
    }

    .toc ol {
      margin: 0;
      padding-left: 1.2rem;
    }

    .toc li + li {
      margin-top: 10px;
    }

    .recommend-table,
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
@media (max-width: 768px) {
    .recommend-table {
	
      border: none;
      box-shadow: none;
	}
}
    .recommend-table th,
    .recommend-table td,
    .compare-table th,
    .compare-table td {
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      padding: 16px;
      vertical-align: top;
      font-size: 0.95rem;
    }

    .recommend-table th:last-child,
    .recommend-table td:last-child,
    .compare-table th:last-child,
    .compare-table td:last-child {
      border-right: none;
    }

    .recommend-table tr:last-child td,
    .compare-table tr:last-child td {
     /* border-bottom: none;*/
    }

    .recommend-table thead th,
    .compare-table thead th {
      background: var(--blue-50);
      text-align: center;
      font-weight: 700;
    }

    .product-name {
      font-weight: 700;
      margin-bottom: 8px;
    }

    .product-meta {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .product-thumb {
      width: 200px;
      aspect-ratio: 4 / 3;
/*      border-radius: 8px;
      border: 1px solid var(--line);*/
      display: grid;
      place-items: center;
      color: #7d8fa3;
      font-size: 0.85rem;
      /*margin-top: 10px;*/
		padding: 5px;
		margin-inline: auto;
    }
	.product-summary {
      font-weight: 700;
	}
@media (max-width: 639px) {

    .product-thumb {
      width: 272px;
	}
}
    body main#mirrorless-beginner-contents a.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 8px 16px;
      background: var(--blue-500);
      color: #fff;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.92rem;
      text-decoration: none;
      white-space: normal;
	  line-height: 1.6;
    }

    body main#mirrorless-beginner-contents a.btn:hover {
      background: var(--blue-600);
      text-decoration: none;
    }

    .feature-grid,
    .reason-grid,
    .category-grid {
      display: grid;
      gap: 16px;
    }

    .feature-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .reason-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .feature-box,
    .reason-box {
      background: var(--blue-50);
      border: 1px solid var(--blue-200);
      border-radius: var(--radius-sm);
      padding: 24px;
    }

    .feature-box h3,
    .reason-box h3 {
      margin: 0 0 8px;
      font-size: 1rem;
		font-weight: bold;
		text-align: center;
    }

    .feature-box p,
    .reason-box p,
    .text-box p,
    .category-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.93rem;
    }
    .category-card p:first-of-type {
	  margin-bottom: 20px;
	}

    .text-box {
      padding: 24px;
    }
.recommendation-list li {
	font-size: 17px;
	font-weight: bold;
}
    .tips {
      max-width: 820px;
      margin: 0 auto;
    }

    .tip-item + .tip-item {
      margin-top: 20px;
    }

    .tip-item h3 {
      margin: 0 0 8px;
      font-size: 1.06rem;
      color: #20354d;
		font-size: 18px;
		font-weight: bold;
    }

    .tip-item p {
      margin: 0;
      color: var(--muted);
    }

    .cta-box {
      text-align: center;
      padding: 30px 24px;
    }

    .cta-box p {
      margin: 0 auto 18px;
      max-width: 720px;
      color: var(--muted);
    }

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

    .category-card {
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .category-card h3 {
      margin: 10px 0 ;
      font-size: 1.12rem;
		font-weight: bold;
    }

    .category-card ul {
      margin: 10px 0 18px;
      /*padding-left: 1.1rem;*/
      color: var(--text);
      font-size: 0.94rem;
    }
    .category-card ul li {
	font-size: 0.9rem;
    line-height: 1;
    display: inline-block;
    border: solid 1px #999;
    margin-right: 6px;
    margin-bottom: 6px;
    padding: 5px;
    height: fit-content;
	}
/*    .category-card li + li {
      margin-top: 6px;
    }*/

    .reason-box {
      text-align: center;
    }

    .tags {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 16px;
    }

    .tag {
      display: block;
      text-align: center;
      padding: 12px 14px;
      border-radius: 999px;
      background: var(--blue-100);
      border: 1px solid var(--blue-200);
      color: #34516f;
      font-weight: 700;
      font-size: 0.92rem;
    }

    .faq {
      max-width: 860px;
      margin: 0 auto;
    }

    .faq details {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px 18px;
      box-shadow: var(--shadow);
    }

    .faq details + details {
      margin-top: 12px;
    }

    .faq summary {
      cursor: pointer;
      font-weight: 700;
      list-style: none;
    }

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

    .faq p {
      margin: 12px 0 0;
      color: var(--muted);
    }

   /* footer {
      padding: 48px 0 70px;
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
    }*/
.popular-links {
  padding: 64px 0;
  background: #fff;
}

.popular-links .section-title {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.4;
  color: #222 !important;
}

.popular-lead {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.9;
  color: #555;
}

.popular-group + .popular-group {
  margin-top: 20px;
}

.popular-heading {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.5;
  color: #222;
  padding-left: 12px;
  border-left: 4px solid #222;
}

.popular-note {
  margin: -4px 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

.popular-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.popular-card {
  display: block;
  padding: 20px 18px;
/*  background: #fafafa;
  border: 1px solid #e7e7e7;*/
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.popular-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #ccc;
}

.popular-card-title {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
  color: #222;
}

.popular-card-text {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}
.popular-card span.brand {
    font-weight: 700;
    padding: 3px 6px;
    /*border: solid 1px #999;*/
}
.brand.canon {
background: #c90b11;
	color: #FFF;
}
.brand.nikon {
background: #fee23c;
}
.brand.sony {
background: #000000;
	color: #FFF;
}
.brand.fujifilm {
background: #16994b;
	color: #FFF;
}
body main#mirrorless-beginner-contents #popular a:hover {
text-decoration: none;
}

@media (max-width: 768px) {
  .popular-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .popular-links {
    padding: 48px 0;
  }

  .popular-links .section-title {
    font-size: 26px;
  }

  .popular-heading {
    font-size: 20px;
  }

  .popular-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .popular-card {
    padding: 16px 20px;
  }

  .popular-card-title {
    font-size: 15px;
	text-align: center;
  }

  .popular-card-text {
    font-size: 13px;
  }
}

    @media (max-width: 768px) {
      .feature-grid,
      .reason-grid,
      .tags {
        grid-template-columns: repeat(2, 1fr);
      }

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

    @media (max-width: 768px) {
      .hero {
        padding-top: 32px;
      }

      .quick-links,
      .feature-grid,
      .reason-grid,
      .tags {
        grid-template-columns: 1fr;
      }
	
      .recommend-table,
      .compare-table,
      .recommend-table thead,
      .compare-table thead,
      .recommend-table tbody,
      .compare-table tbody,
      .recommend-table tr,
      .compare-table tr,
      .recommend-table th,
      .compare-table th,
      .recommend-table td,
      .compare-table td {
        display: block;
        width: 100%;
      }

      .recommend-table thead,
      .compare-table thead {
        display: none;
      }

      .recommend-table tr,
      .compare-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        background: var(--surface);
      }
@media (max-width: 768px) {
    .recommend-table tr {
      box-shadow: none;
	}
}
      .recommend-table td,
      .compare-table td {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 14px 16px;
      }

      .recommend-table td:last-child,
      .compare-table td:last-child {
        border-bottom: none;
		/*text-align: center;*/
      }

      .recommend-table td::before,
      .compare-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--muted);
        margin-bottom: 6px;
        letter-spacing: 0.02em;
      }
		.product-thumb {
			/*margin: 10px auto 0;*/
		}
		/*.category-card {
		    width: min(calc(100% - 64px), var(--max));
			}*/
    }





#fullsize {
background: var(--blue-50);
}
#fullsize .cta-box {
border: none;
box-shadow: none;
width: 80%;
margin-inline: auto;
background: none;
text-align: left;
padding: 30px 24px;
}
#fullsize h2 {
/*text-align: left;*/
margin-bottom: 20px;
}
.cta-box p {
margin: 15px 10px 15px 0;
}
#fullsize div div div {
display: flex;
flex-direction: row;
justify-content: center;
}
#fullsize div div div p span {
font-weight: bold;
font-size: 20px;
}
#fullsize div div div img {
max-width: 240px;

width: 240px;
height: auto;

display: block;
}

@media (max-width: 679px) {
#fullsize div div div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#fullsize div div div img {
max-width: 320px;
width: 320px;
}
}
@media (max-width: 849px) {
#fullsize .cta-box {
width: 100%;
padding: 10px 24px;
}

}






.recommendation-list {
padding: 20px 15px;
line-height: 1.85;
}

strong.em {
background: linear-gradient(transparent 60%, #a9eaf2 60%);
font-weight: 700;
color: #393939;
}
/*--------------------------SP用スタイル--------------------------*/
@media only screen and (max-width:1023px){
	
	
}













/*--------------------------PC用スタイル--------------------------*/
@media print, screen and (min-width:1024px) {
	
}