/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

a.white:link {
color : #ffffff; 
}
a.white:visited {
color : #ffffff; 
}
a.white:active {
text-decoration : underline; 
color : #ffffff; 
}
a.white:hover {
text-decoration : underline; 
color : #ffffff; 
}

.main {
    width: 100svw;
    margin-inline: calc(50% - 50svw);
    padding-inline: 0;
}
/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* --- Base Styles --- */
:root {
    --primary-color: #7d6b5e;
	--dark-color: #e5d9d7;
    --bg-light: #ebe2e0;
	--bg-light2: #FFF;
    --text-dark: #443728;
    --border-color: #E5E0DF;
    --background-color: #FFFCFA;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
    background-color: var(--background-color);
}

.fade-in {
	opacity: 0; /* 初期状態で透明 */
    transform: translateY(20px); /* 初期位置を少し下に移動 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* アニメーション設定 */
}
/* 表示された状態 */
.show {
    opacity: 1; /* 不透明にして表示 */
    transform: translateY(0); /* 元の位置へ */
}

.container2 {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

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

/* --- Components --- */
.date {
	display: inline-block;
  position: relative;
  padding: 0.25em 0 0;
	font-size: 1.2em;
}
.date:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}
.main h2{
	font-size: 2em;
	font-weight: 600;
    color: var(--text-dark);
	border-bottom: none;
}
.main h3{
	font-size: 20px;
	font-weight: 600;
    color: var(--text-dark);
	border: none;
	background: none;
	margin: 0 0 10px;
	padding: 0;
}



.badge {
    display: inline-block;
    border: none;
    padding: 5px 10px;
    border-radius: 0.35em;
    font-size: 12px;
    font-weight: bold;
	margin-right: 5px;
	margin-bottom: 5px;
}

.badge {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.badge2 {
    background-color:#daecf8;
    color: var(--text-dark);
}

.badge3 {
    background-color: #e4eed5;
    color: var(--text-dark);
}
.badge4 {
    background-color: #fffbc6;
    color: var(--text-dark);
}
.badge5{
	background-color: var(--text-dark);
    color: #FFF;
}
.coad {
	margin-right: 10px;
}
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid var(--primary-color);
    transition: 0.3s;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
}

/* --- Hero --- */
.hero {
    background-color: var(--bg-light);
    padding: 0;
}

.hero-content h1 {
    font-size: 28px;
    margin: 10px 0;
}

.hero-btns {
    margin: 20px auto;
    display: flex;
    gap: 10px;
}
.hero-image {
  width: 100%; /* 必要に応じて適切な幅を設定 */
  height: 200px; /* 必要な高さに応じて調整 */
  position: relative;
  overflow: hidden; /* 画像のトリミングを可能にする */
	margin: 0px auto;
	border-radius: 5px;
}

.hero-image img {
  width: 100%; /* 横幅いっぱいに広げる */
  height: 100%; /* 親要素の高さに合わせる */
  object-fit: cover; /* 画像を要素内でトリミングし、バランスを保つ */
  object-position: center; /* 必要に応じて画像の中心を調整 */
}

/* --- Grid System (Mobile First) --- */
.grid-4, .grid-3, .grid-2 {
    display: grid;
    grid-template-columns: 1fr; /* 全て1列 */
    gap: 20px;
    margin-top: 30px;
}

.card, .product-card, .comp-box {
	position: relative;
    background: var(--bg-light2);
	border:3px solid var(--border-color);
    padding: 20px;
    border-radius: 5px;
}

.comp-box {
    display: flex;  /* Flexboxを使用 */
    flex-direction: column-reverse; /* モバイルでは縦配置（文字が上、画像が下） */
    margin: 20px;
}

/* 画像のスタイル: モバイルの基本レイアウト */
.comp-image {
    width: 100%; /* モバイルでは全幅 */
    height: auto; /* 画像の縦横比を保持 */
    margin-bottom: 20px; /* 画像とテキスト間に余白を追加 */
    border-radius: 8px;
}

/* テキスト部分のスタイル */
.comp-text {
    width: 100%; /* モバイルではテキストも全幅 */
}

.card img{
	border-radius: 5px;
	max-width: 180px;
}


.item-image {
    position: relative; /* 子要素のabsolute基準点 */
    overflow: hidden; /* 画像がはみ出さないように */
	width: 100%;
	padding-bottom: 100%; 
	height: 0;
}

.item-image img {
    position: absolute; /* 親要素内で位置指定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の表示方法 */
    transition: opacity 0.3s ease-in-out; /* 透明度変化のアニメーション */
}

/* 通常表示の画像 */
.item-image .main-image {
    opacity: 1; /* 通常は見える */
}

/* ホバー時に表示する画像 */
.item-image .hover-image {
    opacity: 0; /* 通常は隠れている */
}

/* .item-image にホバーした時 */
.item-image:hover .main-image {
    opacity: 0; /* メイン画像を隠す */
}

.item-image:hover .hover-image {
    opacity: 1; /* ホバー画像を出現させる */
}

.on-img{
	position: absolute;
	top:20px;
	left:20px;
}
/* リストのスタイル */
.main ul {
            margin-left: 20px;
            padding-left: 0; /* 内側パディング解除 */
            list-style-position: inside; /* リストマーク（・）をテキストの中に配置 */
        }
/* リストアイテム */
.main ul li {
		list-style: disc;
        padding-left: 1em; /* リストマークをh3やpのテキスト開始位置に揃える */
        text-indent: -1em; /* マーク部分を出す */
        }


/* タイトルとイントロ */
.nipper-guide-main-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.nipper-guide-container {
    display: block; /* モバイルでは縦並び */
    margin: 20px auto;
}

.nipper-guide-image {
    display: none; /* モバイルでは画像を非表示 */
}

.nipper-guide-description {
    width: 100%; /* テキストを幅いっぱいに表示 */
    padding: 10px;
}



/* ボックスグループ（背景色がついた外枠） */
.nipper-guide-box-group {
	max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 横並び */
    background-color: #FDFCFA;
    border-radius: 8px;
    overflow: hidden;
}

/* 左右のボックスの間に境界線 */
    .nipper-guide-box:first-child {
        border-right: 1px solid #ccc;
    }

/* 各ボックスの内側 */
.nipper-guide-box {
    padding: 20px 15px;
}

.nipper-guide-box-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* リスト・詳細文 */
.nipper-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nipper-guide-list li {
    font-size: 14px;
    margin-bottom: 6px;
}

.nipper-guide-detail {
    font-size: 14px;
    color: #444;
}

/* 区切り線 */
.nipper-guide-hr {
    height: 1px;
    background-color: #999;
    margin: 40px 0;
}

/* フッターバッジ */
.nipper-guide-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.nipper-guide-badge {
    background-color: #001f3f;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: normal;
}



/* 偶数ボックスの背景色 */
.comparison:nth-child(even) {
  background-color: #f4ede4; /* ベージュ系の色 */
}

/* 奇数ボックスの背景色 */
.comparison:nth-child(odd) {
  background-color: #e5d9d7;
}

/* 偶数ボックスの背景色 */
.brand-section:nth-child(even) {
  background-color: #f4ede4; /* ベージュ系の色 */
}

/* 奇数ボックスの背景色 */
.brand-section:nth-child(odd) {
  background-color: #e5d9d7;
}

.fap-coment{
	margin: 20px auto;
	padding: 20px 15px;
	border-radius: 5px;
	border: 3px solid var(--border-color);
  background-color: var(--dark-color);
}

.coad{
	display: inline-block;
	margin-right: 10px;
}

/* --- Media Queries --- */

/* Tablet: 820px or more */
@media (min-width: 820px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    
    .hero .container2 {
        display: flex;
        align-items: center;
        gap: 40px;
    }
    .hero-content { flex: 1; }
    .hero-image { flex: 1; }

	
.hero-image {
  	height: 400px; /* 必要な高さに応じて調整 */
	margin: -40px auto;
	border-radius: 0px;
}
	
	.nipper-guide-main-title {
        font-size: 34px;
    }

    .nipper-guide-box-group {
        grid-template-columns: 1fr 1fr; /* 横並び */
    }

    /* 左右のボックスの間に境界線 */
    .nipper-guide-box:first-child {
        border-right: 1px solid #ccc;
    }

    .nipper-guide-hr {
        display: block;
    }

    .nipper-guide-intro, 
    .nipper-guide-list li, 
    .nipper-guide-detail {
        font-size: 15px;
    }

.nipper-guide-container {
        display: flex; /* PCでは横並び */
        align-items: center;
        margin: 20px auto;
        max-width: 1200px;
    }

    .nipper-guide-image {
        display: block; /* PCでは画像を表示 */
        width: 50%; /* 画像を横幅の50%に設定 */
        max-width: 300px;
    }

    .nipper-guide-description {
        flex: 1; /* テキストが残りのスペースを占める */
		margin-bottom: 30px;
		margin-right: 20px;
		padding: 0;
    }

    .nipper-guide-intro {
        width: 100%; /* テキストを横幅いっぱいに */
        padding: 10px;
    }
	
.comp-box {
        flex-direction: row; /* PC向け横並びレイアウト */
        text-align: left; /* 左揃え */
    }

    .comp-image {
        width: 40%; /* PCでは画像を40%の幅に */
        margin: 0; /* 余白リセット */
        margin-right: 20px; /* 画像とテキスト間に余白を追加 */
    }

    .comp-text {
        width: 60%; /* PCではテキストを60%の幅に */
    }
	
}

/* Desktop: 1140px or more */
@media (min-width: 1140px) {
    .container2 { padding: 40px 20px; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    
    .hero-content h1 { font-size: 42px; }
}
.hero-content p{
	font-size: 16px;
}
/* FAQ Styles */
.faq-list {
    margin-top: 30px;
}
.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
}
.faq-item h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
}