@charset "UTF-8";



/* ==================================
基本の設定
================================== */
body {
    background-image: url(../images/FondPageWeb.jpg);
    font-family: sans-serif;
    color: #666;
    line-height: 1.8;
}

/* ==================================
各ボックスの設定
================================== */
/* 大枠 */

.wrapper {
    width: 960px;
    margin: 1rem auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0 10px #ddd;
        /* ==================================
pour qu'il y ai un bord blanc
================================== */
}

/* ヘッダーエリア */

.header {
    margin-bottom: 3rem;
    text-align: center;
}

.header h1 {
    padding: 1rem;
    /*border-top: double 4px #348e3b;
    border-bottom: double 4px #348e3b;*/

    border-top:outset 6px #aff;
    border-bottom: outset 6px #aff;

     /*border: 10px solid rgb(144, 201, 255); 
     padding: 0.3rem 8.1rem;            
     display: inline-block;  
     box-sizing: border-box; 
     text-align: center;*/
    font-size: 4rem;
    font-family: "Hachi Maru Pop", cursive;
    font-weight: 400;
    font-style: normal;
}
/* コンテンツエリア */

.gnav {
    background: linear-gradient(to right, black 33.33%, rgb(218, 201, 43) 33.33% 66.66%, rgb(109, 0, 0) 66.66%);
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 1rem 0;
    list-style: none;

}
/*
.gnav-item {
    background-color: #aaf;
}

.gnav-item a {
    display: block;
    width: 10rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: #5e3842;
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
    transition: 0.3s ease-out; 
}
.gnav-item a:hover {
    background-color: #e6ba5b;
    color: #555;
}
*/
.btn-frite-Asagohan {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url("../images/fritesQuiFermentAsagohan.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px; 
    transition: background-image 0.3s ease;
}


.btn-frite-Asagohan:hover {
    background-image: url("../images/fritesQuiOuvreAsagohan.png");
}



.btn-frite-Hirugohan {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url("../images/fritesQuiFermentHirugohan.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px; 
    transition: background-image 0.3s ease;
}


.btn-frite-Hirugohan:hover {
    background-image: url("../images/fritesQuiOuvreHirugohan.png");
}

.btn-frite-Ayatsu {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url("../images/fritesQuiFermentAyatsugohan.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px; 
    transition: background-image 0.3s ease;
}


.btn-frite-Ayatsu:hover {
    background-image: url("../images/fritesQuiOuvreAyatsugohan.png");
}

.btn-frite-Bangohan {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url("../images/fritesQuiFermentBangohan.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px; 
    transition: background-image 0.3s ease;
}


.btn-frite-Bangohan:hover {
    background-image: url("../images/fritesQuiOuvreBangohan.png");
}

/*
.btn-asagohan {
    background-color: red;
    color: black;
    border: 2px solid yellow;
    transition: 0.3s ease-out;
    padding: 0.5rem;
    border-radius: 1rem;
    display: block;
    width: 10rem;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.btn-asagohan:hover {
    background-color: yellow;
    color: black;
}
*/

.contents-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}
 

/* メインエリア */
.main-contents {
    width: 600px;
}

.content {
    margin-bottom: 4rem;
}

.content h2 {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-bottom: inset 4px #ffee00;
    border-left: double 4px #fbff00;
    font-size: 1.5rem;
    line-height: 1;
    
}
.content h3 {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-bottom: dashed 0.6px rgb(199, 2, 2);
    color: #ff73ab;
    color:rgb(199, 2, 2);
    font-size: 1.25rem;
}

.content h4 {
  margin-bottom: 20px; /* espace sous le titre */
  color:rgb(204, 193, 43);
}

.content img {
    margin-bottom: 1rem;
}

.content p {
    margin-bottom: 2rem;
    font-size: 1rem;
}
.content ul {
    margin-bottom: 2rem;
}
.content ul li a {
    color: #000000;
}

.content ul li a:hover {
    color: #e6d925;
}
/* サイドエリア */


.return-button {
    color: #680404;
}

.return-button:hover {
    color: #ffee00;
}

.aside-contents {
    border-bottom: solid 1px #7c5b13;
    color: rgb(119, 72, 10);
    font-size: 1rem;
    line-height: 2.5;
    
    background-image:   linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
                        url("../images/menuSurLeCote.jpg");
    
    
    background-repeat: no-repeat;
    
}

.aside-contents h2 {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 2;
    width: 280px;
    background-color: rgb(119, 72, 10);
}

.aside-contents ol,
.aside-contents ul {
    margin-bottom: 4rem;
}




/* フッターエリア */
.footer {
    padding: 1rem;
    background-image: url(../images/Couli.jpg);
    color: #000000;
    text-align: center;
}