/*==================================================
header 表示・非表示
==================================================*/
.box01 {
  content-visibility: hidden;
}
@media screen and (min-width:700px) {
  .box01 {
    content-visibility: visible;
  }
}

/*==================================================
header 共通
==================================================*/
@media screen and (min-width:700px) {
  .TopFlexBox {
    width: 100%;
    display: flex;
  }
  .box01 {
    height: 100svh;
    background-color: #000000;
    position: relative;/* 要素の位置を相対位置に設定 */
    background-image: url("../img/header/headerStar.png");/* 背景画像を設定 */
    background-size: cover;/* 背景画像を要素全体にフィットさせる */
    background-position: bottom;/* 背景画像の位置を中央に設定 */
    object-fit: cover;/* 画像を要素全体にフィットさせる */
  }
  .header {
    height: 85svh;
    margin: auto;
  }
  .headerTopImg {
    padding-top: 5svh;
  }
  .header li {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  .header li a {
    color: #FFF4D6;
  }
  .header li a:hover {
    color: #ffffff;
  }
  .dairyButton {
    width: 70%;
    height: 15svh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .InnerFlexBox {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }

  /*========== 左画面スライドショー ==========*/
  #sideImg {
    width: 100%;
    height: 100svh;
    background-color: antiquewhite;
    position: sticky;
    top: 0;
    background-size: cover;
    background-position: bottom;
    object-fit: cover;
  }
}


/*==================================================
タブレット画面
==================================================*/
@media screen and (min-width:700px)and (max-width:1079px) {
  .box01 {
    width: 30%;
  }
  .box02 {
    width: 70%;
  }

  .header {
    width: 40%;
  }
  .headerTopImg {
    padding-bottom: 15px;
  }
  .headerUnderImg {
    padding-top: 15px;
  }
  .header li {
    font-size: 2vw;
    padding: 15px 0;
  }

  /*========== 左画面スライドショー ==========*/
  #sideImg {
    width: 30%;
  }

  /*========== 右メイン画面 ==========*/
  .InnerItem {
    width: 70%;
  }
}


/*==================================================
パソコン画面
==================================================*/
@media screen and (min-width:1080px)and (max-width:1499px) {
  .box01 {
    width: 35%;
  }
  .box02 {
    width: 65%;
  }

  .header {
    width: 20%;
  }
  .headerTopImg {
    padding-bottom: 10px;
  }
  .headerUnderImg {
    padding-top: 10px;
  }
  .header li {
    font-size: 1.3vw;
    padding: 20px 0;
  }
  .dairyButton {
    width: 50%;
    height: 15svh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*========== 左画面スライドショー ==========*/
  #sideImg {
    width: 35%;
  }

  /*========== 右メイン画面 ==========*/
  .InnerItem {
    width: 65%;
  }
}

/*==================================================
パソコン大画面
==================================================*/
@media screen and (min-width:1500px) {
  .box01 {
    width: 35%;
  }
  .box02 {
    width: 65%;
  }

  .header {
    width: 20%;
  }
  .headerTopImg {
    padding-bottom: 15px;
  }
  .headerUnderImg {
    padding-top: 15px;
  }
  .header li {
    font-size: 1.2vw;
    padding: 20px 0;
  }
  .dairyButton {
    width: 50%;
    height: 15svh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /*========== 左画面スライドショー ==========*/
  #sideImg {
    width: 35%;
  }

  /*========== 右メイン画面 ==========*/
  .InnerItem {
    width: 65%;
  }
}