<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/css2?family=M+PLUS+1p&display=swap');
body {
font-family: 'M PLUS 1p', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
color: #000;
background-color: #fff;
}
@media screen and (min-width:1024px) {
body {
font-size: 15px;
    line-height: 180%;
}
}
@media screen and (max-width:1024px) {
body {
font-size: 13px;
line-height: 200%;
}
}


* {
font-family: 'M PLUS 1p', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.box a{
text-decoration: none;
text-align: center;
}
.box a:hover{
color: #365439;
}



footer a, center a {
    color: goldenrod;
    font-weight: bold;
}
@media screen and (max-width:1024px) {
footer a{
padding: 0 1em 0 0;
}
}
foot{
    margin: 0 auto;
    display:block;
    border-bottom: solid 2px #b6292d;
}
footer{
    display:block;
    text-align:right;
color: #6e5454;
}
center{
    display:block;
    text-align:center;
}


daimei {
font-family: 'Niconne', cursive;
font-size: 40px;
display: block;
margin: 0 auto;
color: #fff;
padding: 1.5em 1em;
z-index: 100;
position: relative;
border-bottom: double 2px gold;
}
footer daimei{
border-bottom:none;
border-top: double 2px gold;
}
@media screen and (max-width:1024px) {
daimei {
    font-size: 35px;
    text-align: center;
padding: 1.5em 0;
}
}


/* メインページボックス */
.box{
    display:block;
 text-align:left;
width: 100%;
margin: 0 auto;
background-color: #fff;
position: absolute;
left: 0;
right: 0;
}
.box2{
    position: relative;
background-color:#365439;
border: double 5px gold;
}
.box3{
    display:block;
    width:95%;
    margin:0 auto;
    background-color: #b6292d;
}
@media screen and (min-width:1024px) {
.box {
    background-color: #fff;
margin: 0 auto;
width: 78%;
padding: 3em;
  }
}


.flex{
justify-content: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
margin: 5px;
padding: 4px;
}
sec{
    margin: 5px auto;
    width: 125px;
    height: 125px;
    position: relative;
    text-align: center;
    background-color: #fffef9;
    color: #365439;
    padding: 15px 0;
    z-index: 1;
    font-family: 'Hachi Maru Pop', cursive;
    font-family: 'Bonbon', cursive;
}
@media screen and (max-width:1024px) {
.flex{
margin:0;
padding:0;
}
sec{
    width: 117px;
    height: 107px;
}
.box3{
    width:100%;
}
maru{
    height: 16px;
    width: 16px;
    top: -10px;
}
center{
    margin: 1em;
}
foot{
    border-bottom:none;
}
}

st{
    display:block;
    margin:0.5em 0 0 0;
color:#6e5454;
    z-index: 10;
    position: relative;
font-weight: bold;
}
sec a{
    color: goldenrod;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    font-size: 31px;
    font-family: 'Bonbon', cursive;
}
maru{
    margin: 0 auto;
    position: absolute;
    text-align: center;
    height: 20px;
    width: 20px;
    right: 0;
    left: 0;
    top: -8px;
    border-radius: 100%;
    background: linear-gradient(180deg, #b6292d 0%, #b6292d 50%, #365439 50%, #365439 100%);}
}



/* 子ページ */
.boxh{
position:relative;
background-color: #fff;
border: double 5px #365439;
}
.boxh daimei{
    height: 150px;
    line-height: 75px;
    font-size: 25px;
color: #365439;
text-align:center;
border-bottom: double 2px #b6292d;
font-family: 'Hachi Maru Pop', cursive;    
}
m1 {
background-color: pink;
    display: block;
    padding: 2em 0;
}
h1 {
background-color: #fff;
font-weight: normal;
color: #000;
font-size: 16px;
padding: 3em;
line-height: 180%;
width: 100%;
}
@media screen and (max-width:1024px) {
h1 {
    font-size: 13px;
    padding: 2em 1.5em;
    line-height: 200%;
    margin: 0 0 2em 0;
}
}




/* top haikei */
img {
    overflow-clip-margin: content-box;
    overflow: clip;
    width: 100%;
    height:100%;
    position: absolute;
    margin: 0 auto;
    display:flex;
    z-index:1;
}


/* section pictures */
sec img{
    position: absolute;
z-index: 0;
}
sec img.choco {
    text-align: center;
    margin: 0 auto;
    width: 41%;
    height: auto;
    bottom: 37px;
    left: 0;
    right: 0;
}
@media screen and (max-width: 1024px){
sec img.choco{
    bottom: 31px;
}
}

/* Templated by Shicknecks for cocobiyo in Christmas in 2022. Forbidden to used by other anyone. */
</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>