<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&family=Otomanopee+One&family=Reggae+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">

@charset "UTF-8";

@font-face {
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

body {
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
color: #000;
background-color: #FFFEF1;
font-size: 15px;
    line-height: 180%;
}
@media screen and (max-width:1024px) {
body {
font-size: 13px;
line-height: 200%;
}
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.left a,
.left2 a,
.left3 a {
color: #fff;
text-decoration:none;
padding: 1em 1.5em;
}
.left a:hover,
.left2 a:hover,
.left3 a:hover  {
font-weight: bold;
}
.left2 a:hover {
color: red;
}
.left3 a:hover {
color: #fff;
}





/* 下部テキスト　題名　戻るボタン  */
.sita {
display: flex;
    justify-content: center;
    margin: 2em;
}
.left, .left2 {
display: inline-block;
margin: 0 3em;
padding: 0.5em;
    border-radius: 25px;
    width: auto;
    text-align: center;
font-family: 'Kiwi Maru', serif;
}
.left3 {
display: inline-block;
    margin: 0 1em 1em 1em;
    padding: 0.3em;
    border-radius: 10px;
    width: auto;
    text-align: center;
}
.left, .left3 {
background-image: linear-gradient(to top, #37b1ff 0%, #72ddff  100%);
border: solid 2px #8ec9eb;
}
.left2 {
background-image: linear-gradient(to top, #f765b7 0%, #fe99d1 100%);
border: solid 2px #df8fd5;
}
@media screen and (max-width:1024px) {
.sita {
justify-content: space-evenly;
}
.left, .left2 {
margin: 0 0em;
}
}





/* メインページボックス */
.box2 a {
text-decoration: none;
color: #fff;
}


@media screen and (min-width:1024px) {
.box2 a {
    padding: 2em 0px;
font-size: 17px;
line-height: 180%;
}
}


@media screen and (max-width:1024px) {
.box2 a {
    padding: 2em 0px;
font-size: 10px;
}
}

.box2 a:hover {
font-weight: bold;
color: red;
}

.box2{
text-align:left;
max-width: 100%;
}
.box2{
    margin: 1em auto 1em;
    display: block;
width: 100%;
}


/*
@media screen and (min-width:1024px) {
.box2 {
    margin: 0 auto 1em auto;
    width: 40%;
    padding: 3em;
    line-height: 230%;
  }
}
@media screen and (max-width:1024px) {
.box2 {
    margin: 0 auto 1em auto;
    width: 90%;
    padding: 2em 3em 3em 3em;
    line-height: 250%;
}
}
*/



/* 画像 */
/* 背景パソ */

@media screen and (min-width:1024px) {
*/
f2  {
position: relative;
font-weight: normal;
}
*/
f3, #bgtop2 {
display: none;
}
/*
#bgtop1 {
position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 89%;
    z-index: -100;
    background: url(tophaikei.jpg) 100%/cover;
}
*/
}

/* 背景スマホ */
f2, #bgtop1 {
display: none;
}
f3 {
}
#bgtop2 {
position: sticky;
    top: 0;
    left: 0;
    /* width: 103%; */
    height: 50%;
    z-index: -100;
    background: url(tophaikei.jpg) 32%/cover;
}



/* 題名 */

/*
@media screen and (min-width:1024px) {
daimei {
margin: 0 0 0 3em;
border-bottom: solid 5px #e67785;
  border-image: linear-gradient(to left, #e67785 0%, #b4dcec 100%);
  border-image-slice: 1;
border-top-left-radius: 15px;
}
daimei1, daimei2 {
    font-size: 36px;
    font-weight: bold;
    display: inline-block;
    color: #fff;
    -webkit-text-stroke: 1px #888;
    text-stroke: 1px #888;
font-family: 'Dancing Script', cursive;
}
daimei1 {
margin: 1em 0.4em 1em 0em;
    text-shadow: 3px 3px 0 #b4dcec;
}
daimei2 {
margin: 1em 0;
    text-shadow: 3px 3px 0 #fe99d1;
}
sub {
display: block;
font-size: 11px;
color: #fff;
}
}
*/


fi {
position: fixed;
z-index: 100;
width: 100%;
top: 2px;
}
daimei {
border: double 6px #cca842;
    border-radius: 30px;
    background-color: rgb(255 254 241 / 90%);
    font-size: 20px;
    font-weight: bold;
    display: block;
    width: 98%;
    color: #fff;
    text-align: center;
    font-family: 'Dancing Script', cursive;
    margin: 0em auto;
    padding: 0.3em 0;
    -webkit-text-stroke: 1px #888;
    text-stroke: 1px #888;
top: 1em;
    left: 1%;
    right: 1%;
}
daimei1 {
    text-shadow: 3px 3px 0 #b4dcec;
    font-family: 'Dancing Script', cursive;
}
meirio {
    font-family: 'メイリオ', 'Meiryo', sans-serif;
}
daimei2 {
    text-shadow: 3px 3px 0 #fe99d1;
    font-family: 'Dancing Script', cursive;
}
daimeihr {
    margin: 1em 0.5em;
    border-bottom: solid 15px #e67785;
    border-image: linear-gradient(to left, #e67785 0%, #b4dcec 100%);
    border-image-slice: 1;
    border-top-left-radius: 15px;
    display: block;
}
sub {
display: block;
font-size: 11px;
color: #fff;
}




/*
@media screen and (max-width:1024px) {
daimei {
border-bottom: solid 5px #e67785;
    border-image: linear-gradient(to left, #e67785 0%, #b4dcec 100%);
    border-image-slice: 1;
    border-top-left-radius: 15px;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    color: #fff;
    text-align: center;
    font-family: 'Dancing Script', cursive;
margin: 3em auto;
}
daimei1 {
    text-shadow: 3px 3px 0 #b4dcec;
}
daimei2 {
    text-shadow: 3px 3px 0 #fe99d1;
}
}
*/




/* 上背景色 */
@media screen and (min-width:1024px) {
mainmizuiro {
display: block;
background-color: rgb(255 255 255 / 12%);
margin: 0 auto;
}
}

mainmizuiro {
position: relative;
}

mainmizuiro {
width: 100%;
}

/* メニュー */
.box3 {
display: block;
margin: 0 auto;
width: 82%;
    font-family: 'Otomanopee One', 'Reggae One', cursive, sans-serif;
}
.menu {
display: flex;
    justify-content: center;
    margin: 0;
}

sikaku1, botan {
width: 30%;
    border-radius: 10px;
    display: block;
    text-align: center;
    font-family: 'Otomanopee One', 'Reggae One', cursive, sans-serif;
}
sikaku1 {
    background-color: rgb(0 0 0 / 0%);
    padding: 2em 0em;
    border: solid 2px #c7a85e;
    margin: 1em 1.5em 0.5em 1.5em;
}
sikaku1 a {
    font-family: 'Otomanopee One', 'Reggae One', cursive, sans-serif;
}
botan {
margin: 0 2em 1em;
height: auto;
background-color: rgb(199 168 94 / 70%);
border-top: solid 1px #a29672;
border-left: solid 1px #a29672;
border-bottom: solid 1px #fff;
border-right: solid 1px #fff;
color: #fff;
font-size: 12px;
}


@media screen and (max-width:1024px) {
.box3 {
    width: 97%;
z-index: 0;
}
sikaku1, sikaku2, sikaku3, sikaku4, sikaku5 {
    padding: 1em 0em;
    margin: 1em 0.1em 0.5em 0.1em;
}
sikaku1, sikaku2, sikaku3, sikaku4, sikaku5, botan {
width: 6em;
    height: 6em;
}
botan {
width: 30%;
margin: 0 0.1em 1em 0.1em;
height: auto;
font-size: 9px;
}
}


sikaku1 {
    background: rgb(129 109 178 / 82%);
}
botan{
    background: #ab4646de;
}

/* 子ページ */
bo {
background-color: #fdfdfd;
display: block;
width: 100%;
}
/* 上下線 */
hr1 {
margin: 1em 0 2em 0;
    border-bottom: solid 2px #e7d5a6;
    display: block;
}
hr2 {
margin: 1em 0;
    border-bottom: solid 2px #e7d5a6;
    display: block;
}


/* リボン */
.mizu {
display: flex;
    justify-content: center;
    margin: 0 8em;
}
mizu1, mizu2 {
background-color: #eef4f3;
    display: inline-block;
    padding: 1.3em;
    width: 10%;
    border: solid 4px #cca842;
    z-index: 90;
    margin: 0 10em -2.5em;
}
mizu1 {
    left: -37px;
    top: -16px;
    border-right: solid 10px #cca842;
    border-bottom-left-radius: 100px;
}
mizu2 {
    left: 310px;
    top: 35px;
    border-left: solid 10px #cca842;
    border-bottom-right-radius: 100px;
}


mizu11, mizu22 {
background-color: #eef4f3;
    display: inline-block;
    padding: 0;
    width: 11%;
    z-index: 90;
    margin: 0 10em -2.5em;
}
mizu11 {
    left: -37px;
    top: -16px;
    border-right: solid 10px #cca842;
border-bottom: solid 4px #cca842;
    border-left: solid 4px #cca842;
    border-top-left-radius: 100px;
}
mizu22 {
    left: 310px;
    top: 35px;
    border-left: solid 10px #cca842;
border-bottom: solid 4px #cca842;
    border-right: solid 4px #cca842;
    border-top-right-radius: 100px;
}

mizuiro0 {
    background-color: #eef4f3;
    display: block;
    margin: 0 auto -3em auto;
    padding: 0;
    width: 30%;
    text-align: center;
    border: solid 4px #cca842;
    border-radius: 7px;
z-index: 100;
position: relative;
}
mizuiro {
    background-color: #eef4f3;
    display: block;
    margin: 0.3em auto;
    padding: 0;
    text-align: center;
    color: #000;
    border-top: solid 2px #bae6e7;
    border-bottom: solid 2px #bae6e7;
z-index: 100;
position: relative;
font-family: 'Otomanopee One', 'Reggae One', cursive, sans-serif;
}

@media screen and (max-width:1024px) {
mizuiro0 {
    width: 80%;
}
mizu1, mizu2 {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
border-radius: 7px;
}
mizu11, mizu22 {
display: none;
}
}


/* 橙色背景 */
bo2 {
background-color: #faefba;
display: block;
width: 97%;
margin: 0 auto;
padding: 1em;
border-radius: 10px;
z-index: 10;
}

/* 星 */
hoshi {
    background-color: #fcf9ea;
    display: block;
margin: 3em auto 0 auto;
    padding: 0;
    width: 10%;
    text-align: center;
    font-size: 20px;
    border: solid 3px #e7c88a;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    z-index: 100;
position: relative;
}
good {
color: #fbcd1d;
}
bad {
color: #9da1a3;
}
@media screen and (max-width:1024px) {
hoshi {
width: 30%;
}
}

/* テキスト */
h1 {
background-color: #fcf9ea;
    font-weight: normal;
color: #000;
    border: solid 2px #e7c88a;
    border-radius: 10px;
    margin: 3em auto 1em auto;
z-index: 10;
}

@media screen and (min-width:1024px) {
h1 {
    font-size: 16px;
    padding: 1em 2em;
    line-height: 180%;
    width: 72%;
    margin: -1em auto 1em auto;
}
}
@media screen and (max-width:1024px) {
h1 {
    font-size: 13px;
    line-height: 200%;
    margin: -1em auto 1em auto;
    width: 100%;
    padding: 1.5em 1em;
}
}



/* ハート */
.flex {
    width: 70%;
    margin: 1em auto 0 auto;
    right: 0;
    left: 5%;
}
hato {
    color: #000;
    background-color: #fff;
    display: inline-block;
    padding: 0.5em 0.5em 0.5em 2.5em;
    width: 90%;
    margin: 0 auto;
    text-align: left;
    border: solid 3px #e75f8b;
    border-radius: 10px;
    font-family: 'Kiwi Maru', serif;
    right: 0;
    left: 0;
    position: relative;
}
hato0 {
    left: 4%;
    position: absolute;
}
hato0 {
    color: #e75f8b;
    display: inline-block;
    top: 8px;
    font-size: 40px;
    z-index: 100;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
}
@media screen and (min-width: 1024px){
    .flex{
    width: 90%;
    left: -1%;
    position: relative;
    }
    hato0{
        position: relative;
    }
    fi{
    top: 2px;
    display: block;
    margin: 0 auto;
    left: 0;
    right: 0;
width: 67%;
    }
    .box3{
        width:100%;
    }
    body#ind{
        width:65%;
        margin:0 auto;
    }
#bgtop2{
height: 65%;
}
bo2{
width: 75%;
}
h1{
width: 90%;
}
}
@media screen and (max-width: 1024px){
hato0 {
    left: -5%;
    top: 25%;
}
.flex {
    width: 100%;
    position: relative;
}
}



</style>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

$(function() {
var _window = $(window),
    _header = $('.st'),
    heroBottom;
_window.on('scroll',function(){     
    heroBottom = $('.back').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('fixed');   
    }
    else{
        _header.removeClass('fixed');   
    }
});
_window.trigger('scroll');

   $('a[href^=#]').click(function() {
      var speed = 600;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });

});
</script>




/* 料理完成
mizuiro {
background-color: #eef4f3;
    display: block;
    margin: 0.5em auto;
    padding: 0;
    width: 70%;
    text-align: center;
    color: #000;
    font-weight: bold;
}
*/