@charset "UTF-8";

html,body{
    display:block;
    height:100%;
}

html{font-size:100%;}

body{
    margin:0;
    padding:0;
    background-color:hsl(0,0%,100%);
    color:hsl(0,0%,0%);
    font:1em/1.5 'Noto Sans CJK JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

main a{
    color:hsl(344,79%,55%);
    text-decoration:none;
}

main a:hover{
    text-decoration:underline;
    transition:.5s;
}

*:focus{outline:none;}

figure{
    margin:0;
    padding:0;
}

img{
    display:block;
    width:100%;
    height:auto;
    margin:auto;
    border:0;
    line-height:0;
}

p{
    font-size:.9em;
    line-height:1.5;
}

/*
footer{
    padding:1em;
    text-align:center;
}
*/

#okame,
.sp{display:none;}

#printemps,
#lete,
#automne,
#lhivier,
#yammy{opacity:0;}

/* Header */

#dhead{
    display:block;
    position:relative;
    background-color:hsl(344,79%,55%);
}

/* Navigation */

#lnav {
    z-index:
    display:block;
    position:relative;
    background-color:hsl(344,79%,55%);
    color:hsl(0,0%,100%);
    text-align:center;
}

#lnav > h5{
    font-size:1.3em;
    margin:0;
    padding:.5%;
}

#lnav > h5 > a{color:hsl(0,0%,100%);}

.is-fixed{
    display:block;
    position:fixed;
    width:100%;
}

#bouton{
    max-width:32px;
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    right:5vw;
    cursor:pointer;
}

#menu{
    display:none;
    width:96vw;
    padding:2vh 2vw;
    position:absolute;
    background-color:hsl(43,51%,88%);
    color:hsl(0,0%,0%);
    border-radius:0 0 .5em .5em;
    z-index:5;
}

#menu h4{
    display:block;
    width:25%;
    margin:0 auto;
    padding:0;
    border-bottom:2px solid hsl(0,0%,0%);
}

#menu h4 > a{
    display:block;
    color:hsl(0,0%,0%);
}

#menulogo{
    display:block;
    width:20%;
    height:auto;
    margin:1em auto;
}

#menu a{
    display:block;
    margin:1em 0;
}

#menu a:before{
    content:url('../img/menu_link.png');
    width:24px;
    height:24px;
    vertical-align:top;
}

.noref{
    color:hsl(0,0%,50%);
    cursor:default;
    font-size:.9em;
}

.noref:hover{text-decoration:none;}

.noref:before,
#menu h4 > a:before,
.tpg:before{content:none !important;}

/* Hero */

#hero{
    display:block;
    position:fixed;
    width:90%;
    margin:20px 2% 0 2%;
    padding:0 3%;
    min-height:544px;
    z-index:0;
}

#logo{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

.index{max-width:634px;}

.printemps{max-width:548px;}

/* Main */

main{
    width:96%;
    padding:0 2% 2vh 2%;
    display:block;
    position:relative;
    background-color:hsl(0,0%,100%);
}

/* Column A */

#columnA,
#three{margin-top:584px;}

#columnA{
    display:block;
    position:relative;
    background-repeat:repeat-x;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    padding:4% 2%;
}

.claidx{background-image:url('../img/columnA_bg.jpg');}

.claprt{background-image:url('../img/printemps/columnA_bg.jpg');}
.claprt-summer{background-image:url('../img/printemps/columnA_bg_summer.jpg');}
.claprt-autumn{background-image:url('../img/printemps/columnA_bg_autumn.jpg');}
.claprt-winter{background-image:url('../img/printemps/columnA_bg_winter.jpg');}

#tof{
    display:block;
    position:absolute;
    top:0%;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    z-index:1;
    max-width:1620px;
    opacity:0;
}

@media screen and (min-width:1280px){
    #tof{
        top:0;
        bottom:10%;
    }
}

.catch{
    display:block;
    position:relative;
    z-index:2;
    max-width:515px;
}

.steps{max-width:973px;}

#boxA{
    display:block;
    position:relative;
    width:50%;
    margin:.5em auto 0 auto;
    z-index:2;
}

#boxA img{max-width:669px;}

.rtk{
    margin:.5em 0 0 0;
    color:#361c00;
    text-align:center;
    font-weight:bold;
}

.rtk > em{
    display:block;
    width:50%;
    margin:.5em auto;
    font-style:normal;
    font-weight:normal;
    background-color:#361c00;
    color:hsl(0,0%,100%);
    padding:.2em;
    border-radius:1em;
}

.rtk > span{
    display:inline-block;
    margin:.5em 3em;
}

.rtk a{text-decoration:underline;}
.rtk a:hover{text-decoration:none;}

@media screen and (min-width:1620px){
    #columnA{background-size:contain;}
}

#boxPrt{
    display:block;
    background-color:hsl(0,0%,100%);
    color:#361c00;
    margin:1em auto;
    padding:1em;
    border:2px solid #361c00;
    max-width:900px;
    border-radius:.3em;
}

#boxPrt > h1{
    font-size:1.1em;
    margin:0;
    padding:0;
}

#boxPrt > p{
    margin:.5em 0 0 0;
    padding:0;
}

/* Fullcourse */

#FullCourse,
#columnB{
    display:block;
    position:relative;
    margin:1.5vh 0;
    overflow:hidden;
    background-image:url('../img/fc_bg.jpg');
    background-repeat:repeat-x;
    background-size:contain;
    z-index:0;
}

#columnB {
    display:block;
    position:relative;
    margin:1.5vh 0;
    overflow:hidden;
    background-image:url('../img/printemps/recipe_bg.jpg');
    background-repeat:repeat-x;
    background-size:contain;
    z-index:0;
}

#columnB > img{
    max-width:1520px;
    display:block;
    margin:auto;
}

.shizzle,
.texteA,
.texteB,
.texteC,
.label{
    display:block;
    position:absolute;
    top:0;
    left:0;
}

.shizzle{z-index:1;}

.texteA{
    z-index:1;
    opacity:0;
}

.texteB{
    z-index:1;
    animation:zzomm infinite 3s;
}

.texteC{
    z-index:1;
    animation:swing infinite 3s;
}

.label{
    display:block;
    position:relative;
    z-index:1;
}

@keyframes swing{
    0%{transform:scale(1.02);}
    50%{transform:scale(1);}
    100%{transform:scale(1.02);}
}

@keyframes zzomm{
    0%{transform:scale(1);}
    50%{transform:scale(1.01);}
    100%{transform:scale(1);}
}

/* Printemps */

.tablet{display:none;}

#three{
    display:block;
    position:relative;
    background-repeat:repeat-x;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    padding:2vh 2%;
}

.texteR{
    max-width:1520px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
    z-index:1;
}

#recipesZ{
    max-width:1520px;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    position:relative;
    z-index:2;
    width:78%;
    margin:12% 11%;
    text-align:center;
}

#recipesZ > div{
    max-width:310px;
    display:inline-block;
    position:relative;
    vertical-align:top;
    flex:1 25%;
    max-width:25%;
    margin:1% .5%;
    padding:5% 1.5% 1% 1.5%;
    background-repeat:no-repeat;
    background-image:url('../img/printemps/recipe.png');
    background-size:cover;
    background-position:top;
}

#recipesZ h2{
    display:block;
    margin:0;
    padding:0 0 2% 0;
    font-size:.9em;
    line-height:2.4;
    width:100%;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.double{line-height:1.2 !important;}

#recipesZ p{
    margin:0;
    padding:2% 0;
    text-align:left;
}

#recipesZ em{
    color:hsl(340,65%,52%);
    font-style:normal;
}

#recipesZ a:hover{opacity:.8;}

/* Yammy */

.columnC{
    display:block;
    position:relative;
    background-image:url('../img/columnC_bg.jpg');
    padding:0 0 8% 0;
}

.columnC .pc img {
    max-height: 639px;
}

.yammy{
    max-width:1016px;
    width:80vw;
    opacity:0;
    display:block;
    position:absolute;
    top:26%;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

.yammy img:hover,
.printemps img:hover{transform:rotateZ(-1deg);}

#boutons{
    display:block;
    z-index:0;
    position:absolute;
    bottom:13%;
}

.is-fixed{
    position:fixed;
    top:0;
    left:0;
    z-index:3;
}

#columnD{
    display:block;
    margin-top:2vh;
    background-color:#fbf9f4;
}

/* Toggles */

#smenu{
    display:block;
    margin:auto;
    padding:2em 20vw;
    max-width:980px;
}

.toggleA,
.toggleB,
.toggleC,
.toggleD{
    display:block;
    position:relative;
    color:hsl(0,0%,100%);
    width:100%;
    font-size:1.5em;
    font-weight:bold;
    text-align:center;
    background-repeat:repeat-x;
    background-position:center;
    background-size:cover;
    line-height:2;
    margin:0 0 1em 0;
    cursor:pointer;
}

.toggleA{background-image:url('../img/ga1.jpg');}
.toggleB{background-image:url('../img/ga2.jpg');}
.toggleC{background-image:url('../img/ga3.jpg');}
.toggleD{background-image:url('../img/ga4.jpg');}

.toggleA img:nth-of-type(1),
.toggleB img:nth-of-type(1),
.toggleC img:nth-of-type(1),
.toggleD img:nth-of-type(1){
    max-width:30px;
    display:block;
    position:absolute;
    right:2%;
    bottom:18%;
}

.toggleA img:nth-of-type(2),
.toggleB img:nth-of-type(2),
.toggleC img:nth-of-type(2),
.toggleD img:nth-of-type(2),
.rotateA img:nth-of-type(1),
.rotateB img:nth-of-type(1),
.rotateC img:nth-of-type(1),
.rotateD img:nth-of-type(1){display:none;}

.rotateA img:nth-of-type(2),
.rotateB img:nth-of-type(2),
.rotateC img:nth-of-type(2),
.rotateD img:nth-of-type(2){
    max-width:30px;
    display:block;
    position:absolute;
    right:2%;
    bottom:14%;
}

.rcp{
    display:inline-block;
    text-align:center;
    width:22.5%;
    vertical-align:top;
    margin:.5em 1%;
    font-size:.8em;
}

.rcp img{
    display:block;
    margin-bottom:.5em;
}

@keyframes scope{
    0%{
        transform:scale(1.5);
        opacity:0;
   }
    5%{opacity:1;}
    100%{transform:scale(.8);}
}

@keyframes fade{
    from{transform:translateY(20vh);}
    to{opacity:1;}
}

@keyframes gauche{
    from{transform:translateX(50vh);}
    to{opacity:1;}
}

@keyframes droite{
    from{transform:translateX(-50vh);}
    to{opacity:1;}
}

/* Recipes */

#recipes{
    display:none;
    position:relative;
    z-index:1;
    color:hsl(31,100%,11%);
}

.ReCiPe{padding:1vh 4vw;}

.ReCiPe > figure,
.ReCiPe > div{
    display:inline-block;
    width:48%;
    margin:0 1% 1em 1%;
    vertical-align:top;
}

.ReCiPe img{
    display:block;
    margin:auto;
    max-width:480px;
}

.rcph3{
    text-align:center;
    margin:1em 0;
}

.ReCiPe h4{
    border-left:.5em solid hsl(0,0%,0%);
    padding-left:.5em;
}

.ReCiPe table{
    width:100%;
    border-collapse:collapse;
}

.subtitle{
    display:block;
    margin:.5em 0;
    padding:0 1em 0 0;
}

.material td{
    padding:0 .5em;
    line-height:2;
}

.material tr:nth-of-type(odd){background-color:hsl(39,86%,92%);}

.material td:nth-of-type(even){
    width:40%;
    border-left:1px solid hsl(0,0%,100%);
}

.howto td{
    padding:.3em;
    line-height:1.5;
}

.howto td:nth-of-type(odd){
    width:5%;
    font-size:1.5em;
}

.howto td.rMRKa{
    font-weight:normal;
    font-size:.9em;
}

/* Submenu */

#submenu{
    display:block;
    position:relative;
}

#suboutons{
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:30%;
    width:30%;
    max-width:454px;
    display:block;
    margin:auto;
}

#suboutons img{
    display:blcok;
    margin:1% 0;
}

/* Footer */

/*
footer{
    display:block;
    position:relative;
    background-color:hsl(0,0%,100%);
    border-top:3px solid hsl(11,95%,41%);
    font-size:.8em;
    z-index:1;
}
*/

/* Scrolling */

.scrollup{
    z-index:5;
    display:none;
    position:fixed;
    width:56px;
    height:56px;
    right:3vw;
    bottom:2vh;
    background-image:url(../img/scrollup.png);
    background-repeat:none;
    background-size:contain;
}

.scrollup:hover{transform:scale(1.1);}

@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, .selector{
        #hero img{
            transform: rotate(0.0001deg);
            outline: 1px solid transparent;
        }
    }
}

/* 追加 */
.mb30 {margin-bottom: 20px;}