@charset "utf-8";
/* =======================================

	IndexElements

======================================= */
.cont_header.visual {
	height: 290px;
}

@media only screen and (max-width: 768px) {
	.cont_header.visual h1 {
		font-size: 4rem;
	}
}

/* ------------------------------------
	cont_index
------------------------------------ */
.index .cont_index {
    display:grid;
    gap:20px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* ★ここを変更 */
    overflow: hidden;
}
.index .cont_index li {
    position: relative;
    text-align: center;
    font-weight: bold;
    padding-top: 100%;
    overflow: hidden;
}
.index .cont_index li a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content:end;
    color: #fff;
    line-height: 1.2;
    text-align: left;
}
.index .cont_index li img{
    height:100%;
}

.index .cont_index li p{
    align-items:flex-end;
    color: #000;
    display: flex;
    justify-content:space-between;
    margin:0;
    font-size: 2rem;
    padding:15px 20px;
    position: absolute;
    width: 100%;
}
 
.index .cont_index li a:hover p::after{
    right:10px;
}

.index .cont_index li .img_block{
    margin-top: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
}

.index .img_block picture img{
    width: 100%;
    height: auto;
    border-radius:17px;
}

.index .cont_index li .txt_block {
    background-color: #EAEAEA;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 0 0.5rem;
    box-sizing: border-box;
    position: absolute;
    bottom: 0; 
    left: 0;
    text-align: center; 
    border-radius: 0 0 16px 16px;
    transition: background-color .25s ease;
} 


/* 追加：ホバー/フォーカス時に色変更 */
.index .cont_index li a:hover .txt_block,
.index .cont_index li a:focus-visible .txt_block {
  background-color:#D5F3D9; 
}


/* 文字は全カードでセンター寄せ */
.index .cont_index li .txt_block p{
  justify-content: center;   /* テキストを中央に */
  
}

/* pに付いている矢印は無効化（全カード） */
.index .cont_index li .txt_block p::after{
  content: none;
}

/* 矢印は txt_block 側で右端固定（全カード） */
.index .cont_index li .txt_block::after{
  content:"";
  position:absolute;
  right:20px;
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #009944; /* 矢印色 */
  transition:.5s;
}


/* 768px */
@media only screen and (max-width: 768px) {
    .cont_index li:first-child {
        background: transparent url(../img/top_sp_header.png) center center / cover no-repeat;
		border-radius: 17px;
    }
    .cont_index li:nth-child(2) {
        background: transparent url(../img/top_sp_2header.png) center center / cover no-repeat;
        background-size: 115% auto; 
		border-radius: 17px;
    }
    .cont_index li:nth-child(3) {
        background: transparent url(../img/top_sp_3header.png) center center / cover no-repeat;
        /* background-size: 103% auto;  */
		border-radius: 17px;
        background-position: center px; 
        background-position: right 5px;
    }
    .cont_index li:nth-child(4) {
        background: transparent url(../img/top_sp_4header.png) center center / cover no-repeat;
		border-radius: 17px;
    }
}

/* btn_area */
.btn_area a {
	border-width: 1px;
	width: 500px;
	max-width: 48%;
	margin: 10px 1%;
	white-space: nowrap;
}

.index .cont_index br.br-middle{
	display:none;
}

@media (max-width: 1081px){
    .index .cont_index br.br-middle{
        display:inline;
    }
}

@media only screen and (max-width: 768px) {
	.btn_area a {
		width: 100%;
		max-width: 100%;
		margin: 5px 0;
	}

	.index .cont_index{
        display: block;
    }

    .index .cont_index li{
        width: 100%;
        margin: 0 0 10px;
        padding-top:50%;
    }

    .index .cont_index li img{
        display: none;
    }

    .index .cont_index li::before{
        padding-top: 45%;
    }

    .index .cont_index li p{
        position: relative;
        font-size: 2rem;
    }

	.index .cont_index br.br-middle{
		display:none;
    }

    #cont_menu .issue {
        padding-left: 10px;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 600px){
	.index .cont_index li .txt_block {
		height: 48px;
	}
}

#global_header .sub_menu > ul li .shop {

    padding: 10px 22px 10px 62px;

}







/* 768px以下：画像の下にコードを落とす */
@media (max-width: 768px) {
  .wrap .info {
    /* 横並びのための float などがあれば解除 */
    float: none;
    text-align: left;  /* お好みで center でもOK */
  }

  .wrap .info .name {
    display: block;       /* ロゴを1行占有 */
    margin-bottom: 4px;   /* 画像とコードの間に少し余白 */
  }

  .wrap .info .code {
    display: block;       /* ★これで必ず下に落ちる */
  }
}