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

/* 検索画面 ヒーローイメージ */

/*------------------------------*/
:root{
	--header-height: 84px;
	--header-height-is-change: 60px;

	@media(max-width:768px){
		--header-height: 60px;
	}
}

/* ヒーローイメージ */
.hero-img__wrapper {
    /* margin-top: calc(var(--header-height) + 20px); */
    margin-top: var(--header-height);

    padding: 0 15vw;
	width: 100%;
	min-height: calc(240rem/16);
	max-height: calc(300rem/16);
	background-repeat: no-repeat;
	background-size: cover;

	display: flex;
	align-items: center;
	justify-content: center;

    position: relative;
}
.hero-img__wrapper::before{
    content: "";
    background-image: url(../../images/main/bg_h1_31888906_m.jpg);
    background-size: cover;
    background-position: center;

    position: absolute;
    height: 100%;
    width: calc(484rem/16);

    opacity: 0.85;
    z-index: 1;
}
#header.hero-img__wrapper{
    background-image: url(../../../shared/images/main/hero-image__rice.jpg);
    background-position: center;
}
/* H1 */
.h1__txt-wrapper{
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}
.h1__txt-wrapper h1.page-name{
    color: var(--color-bk-strong);
    font-size: var(--txt-xl);
    font-family: "Noto Serif JP", serif;
    font-weight: 300;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    z-index: 1;

    position: relative;
}
/* 線 */
.headline-border{
	content: "";
	display: block;
    margin: 0 auto;
	width: calc(100rem/16);
	height: 1px;
	background-color: var(--color-main);

    z-index: 1;
}
/* キャッチコピー */
.h1__txt-wrapper .catch{
    font-size: var(--txt-reg);
    color: var(--color-bk-strong);
    font-family: "Noto Serif JP", serif;
    font-weight: 300;

    z-index: 1;
}



/*-------------------------------*/

/* 検索画面 検索ボックス */

/*------------------------------*/ 
/***** 背景 *****/
#country_check_search.content__flexible-wrapper{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(40rem/16);
    padding-bottom: var(--space-tb-2xl);
	width: 100%;

    min-height: calc(var(--height-100vh) - calc(240rem/16) - var(--header-height)); /* 最低でも画面の高さ */
    background-image: url(../../images/main/bg_h1_31888906_m.jpg);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: calc(484rem/16) auto;

    z-index: 0;
}
/***** 検索条件入力欄 *****/
/* コンテナ */
.search-box{
    width: calc(960rem/16);
    margin-left: auto;
    margin-right: auto;
    padding: 3em;
    background-color: var(--color-white);
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1;
}
.search__form{
    width: 100%;
}
.search-fields{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    gap: 2.5em;
}
.search-fields__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}
/* 入力欄間の線 */
/* #ex_container.search-fields__inner{
    position: relative;
} */
/* #ex_container.search-fields__inner::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-gray-pale);

    position: absolute;
    top: -2em;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
} */
.search-fields__input-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}
/***** グリッド *****/
#jan_container.search-fields__inner{
    display: grid;
    grid-template-columns: 1fr; /* JANと商品名で1列 */
    grid-template-rows: auto auto; /* 上段・下段 */
    gap: 0.5em 0;

    justify-content: center; /* グリッド全体を中央に */
    align-items: center;/* 上寄せで整える（必要なら center に） */
}
/* 各要素の配置指定 */
.jan-code {
    grid-column: 1; /* 左列 */
    grid-row: 1;

    position: relative;
}
.product-name {
    grid-column: 2; /* 右列 */
    grid-row: 1;
}
#tel_container.search-tel__inner {
    grid-column: 1 / span 2;/* 下段で2列分 */
    grid-row: 2;
}
/***** ▲▲グリッド▲▲ *****/
.search-fields__box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}
/* 入力欄表示テキスト */
.search-fields label{
    display: flex;
    align-items: center;
    gap: 0.5em;

    color: var(--color-bk-strong);
}
.search-fields label span{
    font-size: var(--txt-sm);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-main);
    color: var(--color-white);

    display: flex;
    justify-content: center;
    align-items: center;
}
.pdt-name{
    padding: 0.5em 0.6em;
    height: 2.8em;
    font-weight:600;
    font-family: "Noto Serif JP", serif;
    color: var(--color-bk-strong);
}
/* 共通入力欄input */
.search-fields .input-txt{
    padding: 0.5em 0.6em;
    height: 2.8em; /* 明示的に高さを指定 */
    background-color: var(--color-gray-paler);
    color: var(--color-bk-strong);
    max-width: 100%;
}
/* JANコード入力 */
.search-fields #jan_code_input.input-txt{
    text-align: center;
}
/* 賞味期限セレクト */
.search-fields #best_before_select.input-txt{
    text-align: left;
}
/* 賞味期限日で検索 */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none; /* iOS対策 */

    height: 2.8em; /* 明示的に高さを指定 */
    padding: 0.5em 0.6em;
    width: 140px;
    max-width: 140px;
    font-size: var(--txt-reg);

    box-sizing: border-box;
}
#pdt_name_display {
    resize: none;            
    color: var(--color-bk-strong) !important;
    -webkit-text-fill-color: var(--color-bk-strong) !important;
    word-break: normal;           /* 単語途中では改行しない */
    overflow: hidden;             /* スクロールバー非表示 */
    overflow-wrap: break-word;    /* 単語途中でも改行 */
    white-space: pre-wrap;        /* 改行・空白そのまま表示 */
    width: 25em;
    max-width: 100%;
    min-height: 2.8em;
    line-height: 1.2;

    background-color: transparent;
    border-bottom: solid 1px var(--color-gray);
    box-sizing: border-box;
}
#pdt_name_display::placeholder {
    text-align: center;
    font-family: var(--baseFonts);
    font-weight: 400;
    font-size: var(--txt-sm);
    line-height: 2.2;
    color: var(--color-gray-strong);
}
/* Safari 対応（必要に応じて） */
#pdt_name_display::-webkit-input-placeholder {
    text-align: center;
    font-family: var(--baseFonts);
    font-weight: 400;
    font-size: var(--txt-sm);
    color: var(--color-gray-strong);
}
#pdt_name_display::-moz-placeholder {
    text-align: center;
    font-family: var(--baseFonts);
    font-weight: 400;
    font-size: var(--txt-sm);
    color: var(--color-gray-strong);
}
#pdt_name_display:-ms-input-placeholder {
    text-align: center;
    font-family: var(--baseFonts);
    font-weight: 400;
    font-size: var(--txt-sm);
    color: var(--color-gray-strong);
}
#pdt_name_display:-moz-placeholder {
    text-align: center;
    font-family: var(--baseFonts);
    font-weight: 400;
    font-size: var(--txt-sm);
    color: var(--color-gray-strong);
}
/***** ※注意書き文 *****/
/* コンテナ */
#tel_container.search-tel__inner{
    width: 100%;
    text-align: center;
}
.attention__box{
    padding: 0.8em;
    border: solid 1px var(--color-gray-pale);
    width: calc(484rem/16);
    margin: 0 auto;
    margin-top: 0.3em;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* リード */
.attention__box > p{
    font-size: var(--txt-sm);
    color: var(--color-bk-strong);
    line-height: 1.3;
    color: var(--color-gray-strong);
    font-feature-settings: "palt";
}
/* 電話番号コンテナ */
.jan-tel__wrapper{
    margin-top: 0.2em;
    width: 100%;
    line-height: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
/* 電話番号 */
.jan-tel__wrapper a{
    color: var(--color-gray-strong);
    font-size: var(--txt-reg);
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.05em;
}
.jan-tel__wrapper a span{
    font-size: var(--txt-xs);
    padding-right: 0.3em;
}
/* 社名 */
.jan-tel__wrapper p{
    color: var(--color-gray-strong);
    font-weight:700;
    font-family: "Noto Serif JP", serif;
    font-style: normal;
    font-size: var(--txt-reg);

    position: relative;
}
.jan-tel__wrapper p::before{
    content: "";

    position: absolute;
    top: 50%;
    left: -0.5em;
    transform: translateY(-50%);

    width: 1px;
    height: 100%;
    background-color: var(--color-gray-pale);
}
/***** 検索結果一覧タイトル *****/
.result-title{
    font-size: var(--txt-lg);
    font-weight:700;
    font-family: "Noto Serif JP", serif;
    color: var(--color-bk-strong);
    text-align:center;

    margin-bottom: 0.5em;
}
/***** 結果テーブル *****/
/* カバー */
#nav__cover{
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	min-height: var(--height-100vh);
	background-color: rgba(25, 25, 25, .5);

	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
    visibility:hidden;
	cursor: pointer;
	display: none;
}
.search__result-box.show,
#nav__cover.show{
    display:block;
    visibility:visible;
    opacity:1;
}
/* クリック可能な黒半透明オーバーレイを「あとから」見せるためのクラス */
/* #nav__cover.is-visible{
    display:block;
    opacity:1;
    transition:opacity .2s var(--easeInOutSine);
} */
/* 検索結果ボックスも同じ書き方で ON/OFF したい場合は */
/* .search__result-box.is-visible{
    display:block;
    animation:fadeIn .2s var(--easeInOutSine);
} */
/* フェードイン */
/* @keyframes fadeIn{
  from{opacity:0; transform:translate(-50%,-40%)}
  to  {opacity:1; transform:translate(-50%,-50%)}
} */
/* コンテナ */
.search__result-box{
    width: calc(1000rem/16);
    padding: 5em 3em;
    background-color: var(--color-white);
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);

    z-index: 1000;
}
.result-table{
    margin-top: var(--space-tb-reg);
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
/* thead */
.result-table thead {
    display: table-header-group;
    width: 100%;
    border-bottom: solid 1px var(--color-gray);
}
/* tr */
.result-table tr.heading__t-row{
    display: table-row;
    text-align: center;
    width: 100%;
}
.result-table tr{
  width: 100%;
  box-sizing: border-box;

  position: relative;/* 線の軸 */
}
/* tbody */
.result-table tbody{
    width: 100%;
}
/* th共通 */
.result-table th{
    display: table-cell;     /* 元のテーブル動作に戻す */
    vertical-align: bottom;
    text-align: center;
    font-weight: 700;
    font-size: var(--txt-md);
    color: var(--color-bk-strong);
    padding: 0.6em;

    width: calc(100%/3);
}
/* 原産地注意書き */
.result-table th span{
    display: block;
    margin-bottom: 0.5em;

    font-size: var(--txt-xs);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.2;
    text-align: center;
    font-feature-settings: "palt";
}
/* td共通 */
.result-table tr td{
    padding: 0.6em;
    width: auto;

    font-size: var(--txt-md);
    color: var(--color-bk-strong);
    box-sizing: border-box;
    text-align: left;
    overflow-wrap: break-word; /* 長い単語の折り返し */
}
/* 各行の下に仕切り線 */
.result-table tr:not(:last-of-type) {
    border-bottom: 1px solid var(--color-gray-pale);
}
/* --- 項目名ヘッドth --- */
.result-table thead{
    width: 100%;
    border-bottom: solid 1px var(--color-gray);
}
/* 商品名 */
.result-table thead tr th:first-of-type{
    width: 30%;
}
/* JANコード */
.result-table thead tr th:nth-of-type(2){
    width: 20%;
}
/* 賞味期限日 */
.result-table thead tr th:nth-of-type(3){
    width: 15%;
}
/* 原産地 */
.result-table thead tr th:last-of-type{
    width: 35%;
}
/* --- 項目td --- */
/* 商品名 */
.result-table tr td:first-of-type{
    width: 30%;
    text-align: left;
    padding-left: 2em;
}
/* JANコード */
.result-table tr td:nth-of-type(2){
    width: 20%;
    text-align: center;
}
/* 賞味期限日 */
.result-table tr td:nth-of-type(3){
    width: 15%;
    text-align: center;
}
/* 原産地 */
.result-table tr td:last-of-type{
    width: 35%;

    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    text-align: center;
}
/* フォーカスアニメーション */
@keyframes blink-border {
  0%, 100% { box-shadow: 0 0 0px transparent; }
  50% { box-shadow: 0 0 8px 2px var(--color-main); }
}
.blink-highlight {
  animation: blink-border 4s ease-in-out infinite;
}



/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media (max-width: 959px) {
    /* ヒーローイメージ */
    .hero-img__wrapper {
        min-height: calc(280rem/16);
    }
    .hero-img__wrapper::before{
        width: calc(360rem/16);
    }
    /* ヘディング */
    .h1__txt-wrapper .catch{
        line-height: 1.2;
        text-align: center;
    }
    .h1__txt-wrapper .catch .catch-comma{
        display: none;
    }
    /***** 背景 *****/
    /* 延し帯 */
    #country_check_search.content__flexible-wrapper{
        min-height: calc(var(--height-100vh) - calc(280rem/16) - var(--header-height));
        background-size: calc(360rem/16) auto;
    }
    /***** 検索条件入力欄 *****/
    .search-box{
        width: calc(700rem/16);
        max-width: 100%;
    }
    /***** グリッド *****/
    #jan_container.search-fields__inner{
        grid-template-columns: 1fr; /* JANと商品名で1列 */
        gap: 0.5em 0;
    }
    #pdt_name_display {
        color: var(--color-bk-strong) !important;
        -webkit-text-fill-color: var(--color-bk-strong) !important;
        opacity: 1 !important;/* safari対策 */
    }
    /* 原産地注意書き */
    .ctry-attention{
        margin-top: 2em;
        text-align: center;
        font-size: var(--txt-xs);
    }
    /***** 結果テーブル *****/
    .search__result-box{
        width: var(--flexible-width);
        padding: 3em 2em;
    }
    .result-table{
        width: 100%;
    }
    /* --- 項目名ヘッドth --- */
    /* 商品名 */
    .result-table thead tr th:first-of-type{
        width: 28%;
    }
    /* JANコード */
    .result-table thead tr th:nth-of-type(2){
        width: 22%;
    }
    /* 賞味期限日 */
    .result-table thead tr th:nth-of-type(3){
        width: 22%;
        padding-right: 0;
    }
    /* 原産地 */
    .result-table thead tr th:last-of-type{
        width: 28%;
    }
    .result-table th span{
        text-align: justify;
        font-feature-settings: "palt";
        letter-spacing: -0.05em;
    }
    /* --- 項目td --- */
    /* 商品名 */
    .result-table tr td:first-of-type{
        width: 28%;
        padding-left: 1em;
        font-size: var(--txt-sm);
    }
    /* JANコード */
    .result-table tr td:nth-of-type(2){
        width: 22%;
        text-align: center;
        font-size: var(--txt-sm);
    }
    /* 賞味期限日 */
    .result-table tr td:nth-of-type(3){
        width: 22%;
        text-align: center;
        font-size: var(--txt-sm);
        padding-right: 0;
    }
    /* 原産地 */
    .result-table tr td:last-of-type{
        width: 38%;

        font-size: var(--txt-sm);
        text-align: center;
    }

	/* ページネーション少し小さめに */
	.pagination a,
	.pagination span { 
        width: 32px; height: 32px; 
    }

} /*Tablet END*/



/*-------------------------------*/

/* Tablet iPad Pro */

/*------------------------------*/
@media (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait),
       (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
    /* ヒーローイメージ */
    .hero-img__wrapper {
        min-height: calc(320rem/16);
    }
    /* フォーム内の幅や配置をタブレット向けに補正 */
    .search-box {
        width: calc(960rem/16);
        max-width: 100%;
    }
    #jan_container.search-fields__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 1em; */
    }
    /* 入力欄input */
    .search-fields .input-txt{
        width: calc(200rem/16);
        padding: 0.5em 0.6em;
        height: 2.8em;
        background-color: var(--color-gray-paler);
        color: var(--color-bk-strong);
        max-width: 100%;
        box-sizing: border-box;
    }
    #pdt_name_display {
        color: var(--color-bk-strong) !important;
        -webkit-text-fill-color: var(--color-bk-strong) !important;
        opacity: 1 !important;/* safari対策 */
    }
    .search-fields__box {
        gap: 1em;
    }
}


/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media (max-width: 559px) {
    /* ヒーローイメージ */
    .hero-img__wrapper {
        min-height: calc(200rem/16);
    }
    .hero-img__wrapper::before{
        width: calc(200rem/16);
    }
    /* ヘディング */
    .h1__txt-wrapper h1.page-name{
        font-size: calc(22rem/16);
        letter-spacing: 0.05em;
        line-height: 1.2;
        text-align: center;
    }
    .h1__txt-wrapper .catch{
        font-size: var(--txt-sm);
    }
    /***** コンテンツ背景 *****/
    /* 延し帯 */
    #country_check_search.content__flexible-wrapper{
        background-size: calc(200rem/16) auto;
        min-height: calc(var(--height-100vh) - calc(240rem/16) - var(--header-height));
        padding-bottom: calc(120rem/16);
    }
    /***** 検索条件入力欄 *****/
    .search-box{
        padding: 2em;
        width: var(--flexible-width);
    }
    .search-fields .input-txt{
        width: 100%;
    }
    .search-fields .input-txt.pdt-name{
        width: 100%;
        text-align: justify;
    }
    /***** ※注意書き文 *****/
    /* コンテナ */
    .attention__box{
        width: 100%;
        text-align: justify;
        /* text-indent: -0.5em;
        padding-left: 0.5em; */
        font-feature-settings: "palt";
    }
    /***** グリッド *****/
    #jan_container.search-fields__inner {
        display: grid;
        grid-template-areas:
            "jan"
            "tel"
            "product";
        grid-template-columns: 1fr;
        /* gap: 1em 0; */
    }
    .jan-code {
        grid-area: jan;
    }
    .product-name {
        grid-area: product;
    }
    .search-fields__tel {
        grid-area: tel;
        text-align: center;
    }
    .jan-code,
    .product-name,
    .search-fields__tel {
        width: 100%;
        max-width: 100%;
    }
    .search-fields__tel p {
        text-align: center;
    }
    #tel_container.search-tel__inner > p {
        line-height: 1.3;
    }
    /***** ▲▲グリッド▲▲ *****/
    #pdt_name_display {
        width: 100%;
        color: var(--color-bk-strong) !important;
        -webkit-text-fill-color: var(--color-bk-strong) !important;
    }
    .search-fields__box{
        flex-direction: column;
        gap: 1.5em 0;
    }
    /***** 結果テーブル *****/
    .search__result-box{
        width: var(--flexible-width);
    }
    .result-table{
        margin: 0;
    }
    .result-title{
        margin-bottom: 0.5em;
    }
    .result-table thead {
        display: none; /* ヘッダー非表示 */
    }
	/* 疑似ラベル（thead を隠した代替） */
    .result-table tr td:first-of-type::before {
		content: "商品名";
		display: block;
		font-size: var(--txt-reg);
        font-family: var(--baseFonts);
        font-weight: 700;
		color: var(--color-bk-strong);
        width: 100%;
        text-align: left;
	}
    .result-table tr td:nth-of-type(2)::before {
		content: "JANコード";
		display: block;
		font-size: var(--txt-reg);
        font-family: var(--baseFonts);
        font-weight: 700;
		color: var(--color-bk-strong);
        width: 100%;
        text-align: left;
	}
	.result-table tr td:nth-of-type(3)::before {
		content: "賞味期限日";
		display: block;
		font-size: var(--txt-reg);
        font-family: var(--baseFonts);
        font-weight: 700;
		color: var(--color-bk-strong);
        width: 100%;
        text-align: left;
	}
	.result-table tr td:last-of-type::before {
		content: "原産地";
		display: block;
		font-size: var(--txt-reg);
        font-family: var(--baseFonts);
        font-weight: 700;
		color: var(--color-bk-strong);
        width: 100%;
        text-align: left;
	}
    /* ▲ 疑似ラベル（thead を隠した代替）▲ */
    .result-table tr {
        display: block;
        margin-top: 1em;
        margin-bottom: 0;
        padding: 1em;
        background-color: #fff;
        border: 1px solid var(--color-gray-pale); /* 全体囲む線 */
    }
    .result-table tr td {
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 0.75em 0;
        border-bottom: 1px solid var(--color-gray-pale);
        position: relative;
    }

    /* 最後のtdだけは線を消す */
    .result-table tr td:last-of-type {
        border-bottom: none;
    }
    /* --- 項目td --- */
    /* 項目名 */
    .result-table tr td::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: var(--txt-reg);
        font-family: var(--baseFonts);
        color: var(--color-bk-strong);
        margin-bottom: 0.25em;
        display: block;
    }
    /* 商品名表示欄の微調整解除 */
    .result-table tr td:first-of-type{
        padding-left: 0;
    }
    /* td共通 */
    .result-table tr td:first-of-type,
    .result-table tr td:nth-of-type(2),
    .result-table tr td:nth-of-type(3),
    .result-table tr td:last-of-type {
        width: 100%;
        padding-left: 0.5em;
        padding-right: 0.5em;
        font-size: var(--txt-reg);
    }
} /*Smartphone END*/



/* iPhone SE 以下 */
@media (max-width: 375px) {
    /* 電話番号 */
    .jan-tel__wrapper a{
        font-size: var(--txt-reg);
    }
    /* 社名 */
    .jan-tel__wrapper p{
        font-size: var(--txt-sm);
    }
}