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

/* ページでCSSを分ける */
/* LPの場合はセクションで分ける */
/* ページ名 */

/*------------------------------*/
#mainImg{
    /* height: calc(var(--vh, 1vh) * 100); */

    /* height: calc(100vh - var(--header-height));
    height: calc(var(--height-100vh) - var(--header-height));
    margin-top: var(--header-height); */
    height: 100vh;
    height: var(--height-100vh);
    /* height: calc(680px + var(--header-height)); */
    min-height: 640px;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
#mainImg picture{
    width: 100%;
    height: 100%;
}
#mainImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
/*------------------------------*/
/*スクロールダウン全体の場所*/
/*------------------------------*/
.scrolldown1{
	position:absolute;
	left:50%;
	bottom:40px;

	height:50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
	position: absolute;
	left: 50%;
	top: -30px;
    transform: rotate(-6deg) translateX(-50%);

    /*テキストの形状*/
    font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--c-main);
	font-size: var(--txt-md);
	letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 30px;
	background: var(--c-main);
	animation: pathmove 1.4s var(--easeInOutSine) infinite;
	opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
    /* #mainImg は高さ固定しない */
    /* #mainImg{
        height: auto;
        min-height: 0;
    } */
    /* #mainImg picture{
        width: 100%;
        height: auto;
    }
    #mainImg img{
        width: 100%;
        height: auto;
        object-fit: cover;
    } */
}
/*-------------------------------*/

/* キャッチコピー */

/*------------------------------*/
h1.main-catch{
    text-align: center;
    font-size: var(--txt-2xl);
    line-height: var(--lh-lg);
    color: var(--c-main);
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);

    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
h2.sub-catch{
    text-align: center;
    font-size: var(--txt-reg);
    line-height: var(--lh-lg);
    color: var(--c-bk);
    letter-spacing: 0.1em;
}
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
    h1.main-catch{
        text-align: center;
        font-size: var(--txt-xl);
    }
    h2.sub-catch{
        width: var(--fx-width);
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
        font-size: var(--txt-reg);
    }
}




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

/* 私たちのお米が選ばれる理由 */

/*------------------------------*/
/* コンテナ */
#reason.content__wrapper{
    margin-top: 0;
}
.home-list__wrapper{
    margin: 0 auto;
    margin-top: var(--mp-tb-reg);
    width: 100%;
    max-width: var(--fx-width);
}
/* リスト */
.home-list__wrapper ul{
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-tb-reg) var(--mp-lr-reg);
}
.home-list__wrapper ul::before{
    content: "";
    width: calc(calc(100% - calc(var(--mp-lr-reg)*2))/3);
    min-width: calc(280rem/16);
    max-width: 100%;
    height: 0;

    box-sizing: border-box;
    flex-grow: 1;
    order: 4;
}
/* .home-list__wrapper ul::after{
    content: "";
    width: calc(calc(100% - calc(var(--mp-lr-reg)*2))/3);
    min-width: calc(280rem/16);
    max-width: 100%;
    height: 0;

    box-sizing: border-box;
    flex-grow: 1;
    order: 5;
} */
/* アイテム */
.home-list__wrapper ul li{
    background-color: var(--c-white);
    width: calc(calc(100% - calc(var(--mp-lr-reg)*2))/3);
    min-width: calc(280rem/16);

    padding-top: 0;

    box-sizing: border-box;
    flex-grow: 1;

    position: relative;
}
.home-list__wrapper ul li a.reason-card{
    display: block;
    width: 100%;
    height: 100%;
    padding: 2em;
    border: solid 1px var(--c-gray);
    border-radius: 8px;

    transition: background-color .3s var(--easeInOutSine),
    border .3s var(--easeInOutSine),
    box-shadow .3s var(--easeInOutSine)
    ;
}
/* ヘディング */
.home-list__wrapper ul li .home-list__item-heading h3{
    padding-bottom: 1.5em;
    font-size: var(--txt-reg);
    text-align: center;
    color: var(--c-main);
    line-height: 1;

	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);
}
/* テキスト */
.home-list__wrapper ul li .home-list__item-txt.txt{
    margin-top: 1.5em;
    text-align: justify;
    color: var(--c-bk);
}
/* ボタン */
.home-list__wrapper ul li .reason-card__btn{
    color: var(--c-bk);
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2em;
    line-height: 1;

    transition: color .3s var(--easeInOutSine);
}
.home-list__wrapper ul li .reason-card__btn > svg{
    width: 16px;
    fill: var(--c-bk);
    transition: fill .3s var(--easeInOutSine);
}
.home-list__wrapper ul li .reason-card__btn > svg.ex-link{
    margin-right: 0.3em;
}
/* hover */
@media(any-hover:hover){
    .home-list__wrapper ul li a.reason-card:hover{
        background-color: var(--c-sub-pale);
        border: 1px solid var(--c-main);
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
    }
    .home-list__wrapper ul li a.reason-card:hover .reason-card__btn{
        color: var(--c-main);
    }
    .home-list__wrapper ul li a.reason-card:hover .reason-card__btn > svg{
        fill: var(--c-main);
    }
}
/*------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
    /* リスト */
    .home-list__wrapper ul{
        justify-content: center;
    }
    /*-------------------------------*/
    /* アイテム */
    /*------------------------------*/
    .home-list__wrapper ul li{
        width: calc(calc(100% - var(--mp-lr-reg))/2);
        flex-grow: 0;
    }
}
/*------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
    /*-------------------------------*/
    /* アイテム */
    /*------------------------------*/
    .home-list__wrapper ul li a.reason-card{
        padding: 1.5em;
    }
    /* ヘディング */
    .home-list__wrapper ul li .home-list__item-heading h3{
        padding: 0;
        padding-bottom: 1.5em;
        width: 100%;
    }
    /* テキスト */
    .home-list__wrapper ul li .home-list__item-txt{
        margin-top: 1.5em;
    }
}




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

/* 守りたい里山がここにあります */

/*-------------------------------*/
#protection .protection__wrapper{
    width: 100%;
    max-width: var(--fx-width);
    margin: 0 auto;
    margin-top: var(--mp-tb-reg);
}
#protection .protection__inner{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--mp-tb-reg) var(--mp-lr-md);
}
/* 画像 */
#protection .protection__inner .protection-image{
    width: calc(60% - var(--mp-lr-md));
    height: auto;
}
#protection .protection__inner .protection-image img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* 地図 */
#protection .protection__inner .protection-map{
    width: 40%;
    height: auto;
}
#protection .protection__inner .protection-map img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* テキスト */
#protection .protection-text .txt{
    margin-top: 1em;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    color: var(--c-bk);
    text-align: justify;
}
/* you tube */
#protection .protection-video{
    margin-top: var(--mp-tb-lg);
    height: calc(585rem/16);
}
#protection .protection-video .video-placeholder{
    width: 100%;
    height: 100%;
}
#protection .protection-video .video-placeholder iframe{
    width: 100%;
    height: 100%;
    border: 0;
}
/* サムネ */
#protection .protection-thumbs{
    margin-top: 1em;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1em;
}
#protection .protection-thumbs img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
/*------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
    #protection .protection__inner{
        flex-direction: column;
    }
    #protection .protection__inner .protection-image{
        width: 100%;
    }
    #protection .protection__inner .protection-map{
        width: 50%;
    }
    /* you tube */
    #protection .protection-video{
        height: calc(400rem/16);
    }
}
/*------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
    /* 画像 */
    #protection .protection-thumbs{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
    }
    /* 地図 */
    #protection .protection__inner .protection-map{
        width: 75%;
        min-width: calc(240rem/16);
        max-width: 100%;
        height: auto;
    }
    /* you tube */
    #protection .protection-video{
        height: calc(200rem/16);
    }
}



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

/* 環境負荷の低減につながる取り組み */

/*-------------------------------*/
/* リスト */
#approach ul.approach-list{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mp-tb-lg);
    margin-top: var(--mp-tb-reg);

    max-width: var(--fx-width);
    margin-left: auto;
    margin-right: auto;
}
/* アイテム */
li.approach-item{
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: var(--mp-tb-reg) var(--mp-lr-reg);
    align-items: center;
}
.approach-item .approach-content h3{
    margin: 0 0 0.6em;
	font-size: var(--txt-md);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);
}
.approach-item .approach-content h3 span{
    display: block;
	font-size: var(--txt-lg);
	line-height: var(--lh-sm);
	color: var(--c-sub);

	font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

    transform: rotate(-6deg) translateY(-100%);
}
.approach-item .approach-content p{
    margin-top: 1em;
    padding-top: 1em;
    /* border-top: solid 1px var(--c-main); */
    color: var(--c-bk);

    position: relative;
}
.approach-item .approach-content p::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--c-main);
}
/*------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
    .approach-item{
        display: flex !important;
        flex-direction: column;
        gap: 2em !important;
    }
    .approach-item .approach-content h3 span{
        transform: rotate(-6deg) translateY(-120%);
    }
    .approach-item .approach-content p::before{
        width: 72px;
    }
}
/*------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width: 559px){
        .approach-item .approach-content h3 span{
        transform: rotate(-6deg) translateY(-75%);
    }
}



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

/* 自然の循環を促すエコアクション */

/*-------------------------------*/
/* コンテナ */
#eco-action .content__inner{
    width: var(--fx-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* リード */
#eco-action .eco-action-text.txt{
    margin-top: var(--mp-tb-xs);

    font-size: var(--txt-reg);
    color: var(--c-bk);
    width: calc(800rem/16);
    max-width: 100%;
}
/* アイコンイメージ */
#eco-action .eco-action-image-wrapper{
    margin-top: var(--mp-tb-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    
    /* max-width: var(--fx-width);
    margin-left: auto;
    margin-right: auto; */
}
#eco-action .eco-action-image-wrapper img{
    display: block;
    height: auto;
    width: calc(1040rem/16);
    min-width: calc(1040rem/16);
    max-width: none;
}
/*------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
    #eco-action .eco-action-image-wrapper img{
        height: auto;
        width: calc(1040rem/16);
        min-width: calc(1040rem/16);
    }
}
/*------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width: 559px){
    /* #eco-action .eco-action-image-wrapper{
        overflow-x: auto;
    } */
    #eco-action .eco-action-image-wrapper img{
        height: auto;
        width: calc(560rem/16);
        min-width: calc(400rem/16);
    }
    /* リード */
    #eco-action .eco-action-text.txt{
        text-align: justify;
    }
}



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

/* 会社概要 */

/*-------------------------------*/
#company .company-overview__inner {
    display: block;
    width: 100%;
    max-width: var(--fx-width);
    margin: var(--mp-tb-reg) auto 0;
}
/* 会社概要の表 */
#company .company-overview__info {
    width: 100%;
    margin-bottom: var(--mp-tb-lg);
    background: #fff;

    border-radius: 10px;
}
#company .company-overview__info dl {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
#company .company-overview__info dl > div {
    display: table-row;
}
#company .company-overview__info dt,
#company .company-overview__info dd {
    display: table-cell;
    padding: 1em 1em;
    vertical-align: top;
}
#company .company-overview__info dt {
    font-weight: 700;
    color: var(--c-main);
    width: 140px;
    padding-right: 1em;
    white-space: nowrap;
}
#company .company-overview__info dd {
    margin: 0;
    color: var(--c-bk);
    line-height: var(--lh-md);
    border-left: solid 1px var(--c-main);
}
#company .company-overview__info dd {
    margin: 0;
    line-height: var(--lh-md);
    color: var(--c-bk);
}
/* google map */
#company .company-overview__map-inner iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}
/* ボタン */
.company-overview__map-btn{
    margin-top: var(--mp-tb-reg);
    display: flex;
    justify-content: center;
}
/*------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
    #company .company-overview__inner {
        flex-direction: column;
    }
    #company .company-overview__map {
        min-height: 260px;
    }
}
/*------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
    #company .company-overview__info dt {
        display: block;
        border-left: solid 1px var(--c-main);
        padding-bottom: 0;
    }
    #company .company-overview__info dd {
        display: block;
        padding-top: 0;
        padding-right: 0;
    }
    #company .company-overview__map-inner iframe{
        height: 200px;
    }
}



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

/* オンラインショップのリード */

/*-------------------------------*/
#lead-online.content__wrapper {
    position: relative;
    width: 100%;
    min-height: calc(560rem/16);
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));

    background-image: url(../../images/lead-online/bg-ricefield.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    padding-top: var(--mp-tb-2xl);
    padding-bottom: var(--mp-tb-2xl);
}
.lead-online__inner {
    width: 100%;
    max-width: var(--fx-width);
    margin: 0 auto;

    text-align: center;
    color: #ffffff;
}
/* メインテキスト */
.lead-online__main-text {
    font-size:var(--txt-xl);
    letter-spacing: 0.1em;
    line-height: var(--lh-md);

    font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
/* サブテキスト */
.lead-online__sub-text {
    margin-top: var(--mp-tb-md);
    font-size: var(--txt-reg);
    line-height: var(--lh-lg);
}
/* ボタン */
.lead-online__btn {
    margin-top: var(--mp-tb-lg);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    background-color: rgba(255, 255, 255, 0.9);
    color: var(--c-bk) !important;
    padding: 1em 1.5em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--txt-md);
    transition: all .3s ease-in-out;
    cursor: pointer;
    transform: translateY(-2px) translateX(-2px);
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.3);
}
svg.lead-online__arrow {
    fill: var(--c-bk);
    width: 20px;
    height: auto;

    transition: transform .3s ease-in-out,
    fill .3s ease-in-out;
}
svg.lead-online__icon {
    fill: var(--c-bk);
    width: 48px;
    height: auto;

    transition: fill .3s ease-in-out;
}
/* hover設定 */
@media(any-hover:hover){
    .lead-online__btn:hover,
    .lead-online__btn:focus {
        background-color: var(--c-sub);
        color: var(--c-white) !important;
        transform: translateY(0) translateX(0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    /* 矢印 */
    .lead-online__btn:hover svg.lead-online__arrow,
    .lead-online__btn:focus svg.lead-online__arrow {
        transform: translateX(4px);
        fill: var(--c-white);
    }
    /* カートアイコン */
    .lead-online__btn:hover svg.lead-online__icon,
    .lead-online__btn:focus svg.lead-online__icon{
        fill: var(--c-white);
    }
}
/*------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
    svg.lead-online__icon {
        width: 40px;
    }
}
/*------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width: 559px){
    .lead-online__btn{
        padding: 1em;
        font-size: var(--txt-reg);
    }
    /* サブテキスト */
    .lead-online__sub-text {
        text-align: justify;
    }
}