.blk{background:#000; color:#fff;}
.gry{background:#666; color:#fff;}
.blu{background:#000066; color:#fff;}
.lgry{background:#f0f0f0; color:#666;}
.cont gry{background:#f1f1f1; color:#454545;}
.cont wht{background:#fff; color:#454545;}
.cont blu{background:#010066; color:#fff;}

.cont p{font-size:1.4rem; line-height:1.7; letter-spacing:0.1rem; padding:1rem 4rem; text-align:justify;}


/* footer追加 */
.foot-cn{
	display: flex;
	flex-wrap:wrap;
	max-width: 70%;
}
.foot-cn li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.foot-cn li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

/* footer grid */
.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  gap: 1rem;              /* 隙間 */
  width: 100%;
  max-width: 2400px;       /* 必要に応じて設定 */
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.foot-grid li img {
border:0.05rem solid #454545;
transition: opacity 0.3s;
}

.foot-grid li a:hover img {opacity: 0.5;}

/* SP */
.sp{width:100%; height:auto; margin:0; padding:0; font-family:sans-serif; font-size:16px; font-weight:100; line-height:1.5; font-feature-settings:"palt" 1; text-justify:inter-ideograph;}
.sp h1, .sp h2, .sp h3, .sp h4{font-weight:100; line-height:1.8; text-align:center;}
.sp h1{font-size:1.8rem;}
.sp h2, .sp h3, .sp h4{font-size:1.9rem;}
}

/* PC */
.pc{width:100%; height:auto; margin:0; padding:0; font-family:sans-serif; font-size:16px; font-weight:100; line-height:1.5; font-feature-settings:"palt" 1; text-justify:inter-ideograph; margin: 0rem auto;}
.pc p{font-size:3.5rem; letter-spacing:0.1rem; padding:1rem 6rem; text-align:justify; margin: 0rem auto;}
.pc h1, .pc h2, .pc h3, .pc h4{font-weight:bold; line-height:1.8; text-align:center; font-size:4.2rem; margin: 0rem auto;}


/* Column */

.column h2 {
  padding: 1rem 2rem;
  background: #696969;
  color: #FFFFFF;
}
.column h3{
    padding: 0.8rem 0;
    margin-bottom: 0.2rem;
    border-top: 2px solid #353535;
    border-bottom: 2px solid #353535;
    color: #353535;
    font-weight: bold;
    font-size: 2rem;
}

.column ul li{
    font-size: 1.4rem;
}


/* top-pickup */

.pickup-list {
   list-style: none;      /* デフォルトの点を消す */
   margin: 0;
   padding: 0;
   display: flex;         /* 横並び */
   justify-content: center;
   gap: 1rem;             /* バナー間の余白 */
   flex-wrap: nowrap;     /* 折り返し不可 */
   overflow-x: auto;      /* はみ出した場合は横スクロール */
}

.pickup-list li {width: 170px;}
.pickup-list li a img {transition: opacity 0.3s;}
.pickup-list li a:hover img {opacity: 0.5;}

/* Category */

.cn-colum h1 {font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
	font-size: 20px;
	text-align: center;
line-height: 2;
}

.cn-colum p {
  width: 100%;
  max-width: 720px;
  margin: auto;
  padding: 0 10px;
line-height: 2.2;
}

.cn-footer{
	display: flex;
	flex-wrap:wrap;
}
.cn-footer li {
	width: calc(100%/3);/*←画像を横に3つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.cn-footer li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}