@charset "UTF-8";

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
    display: flex;
    height: 20px;
    width: 60px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;/* 重なり順を一番上に */
    cursor: pointer;
    margin-left: -10px;
    margin-top: 18px;
    margin-bottom: -6px;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
    content: '';
    display: block;
    height: 2.5px;
    width: 29px;
    border-radius: 4px;
    background-color: #6C6767;
    transition: 0.7px;
    position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 10px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 10px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.drawer-content {
    width: 15%;
    height: 27%;
    position: fixed;
    top: 38px;
    left: 137%;/* メニューを画面の外に飛ばす */
    z-index: 50;
    transition: .9s;
    background-color: #DEEFF5;
    padding-top: 23px;
    padding-left: 0px;
    padding-right: 0px;
    -webkit-box-shadow: -2px 0px 5px 0px #000000;
    box-shadow: -2px 0px 5px 0px #000000;
    font-family: Hiragino Kaku Gothic ProN;
    text-indent: 5px;
    text-align: left;
    text-shadow: 0px 0px 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 29px;
    border-top-right-radius: 28px;
    background-position: 11% 20%;
    padding-bottom: 0px;
    min-height: 56px;
    max-width: 176px;
    max-height: 148px;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    margin-top: 2px;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;
}



img.rogo {
    top: 12px;
    left: 123px;
    width: 90px;
    height: 40px;
    background: transparent url('img/AQF logo3.png') 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-bottom: 1px;
    margin-left: 131px;
    margin-top: -244px;
}
img.kart {
    top: 0px;
    left: 290px;
    width: 45px;
    height: 45px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-left: 100px;
    margin-top: -54px;
    margin-right: 10px;
    margin-bottom: -5px;
}
div.aaa h1 {
    top: 365px;
    left: 19px;
    width: 177px;
    height: 0px;
    text-align: left;
    font: normal normal normal 10px/17px Hiragino Kaku Gothic ProN;
    letter-spacing: -0.2px;
    color: #4E4949;
    opacity: 1;
    margin-left: 13px;
    margin-top: 36px;
    margin-bottom: 4px;
    padding-top: 0px;
    padding-bottom: 13px;
    -webkit-box-shadow: inset 0px 0px;
    box-shadow: inset 0px 0px;
}
h2 {
    top: 375;
    left: 25px;
    width: 171px;
    height: 33px;
    text-align: left;
    font: normal normal normal 33px/57px Hiragino Kaku Gothic ProN;
    letter-spacing: 0px;
    color: #393535;
    opacity: 1;
    margin-top: -16px;
    margin-bottom: -32px;
    margin-left: 12px;
    padding-bottom: 17px;
    padding-top: 9px;
}
p {
    top: 453px;
    left: 44px;
    width: 310px;
    height: 133px;
    text-align: right;
    line-height: 33px;
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
    font-size: 13px;
    font-family: Hiragino Kaku Gothic ProN;
    letter-spacing: 0.8px;
    color: #707070;
    opacity: 1;
    margin-top: 21px;
    margin-left: 27px;
}
img.gakiko {
    max-width: 100%;
    top: 593;
    left: -60px;
    width: 271px;
    height: 350px;
    background: transparent url('img/歯磨き粉.png') 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-left: -49px;
    margin-bottom: -37px;
    margin-top: 14px;
   
}

h3 {
    top: 697px;
    left: 221;
    width: 94px;
    height: 153;
    text-align: right;
    line-height: 53px;
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
    font-size: 40px;
    font-family: Hiragino Kaku Gothic ProN;
    letter-spacing: 0px;
    color: #463E3E;
    opacity: 1;
    margin-top: -112px;
    margin-left: 176px;
    margin-bottom: -149px;
    margin-right: -22px;
    padding-top: 0px;
    padding-bottom: 152px;
    bottom: 0px;
    clear: both;
    padding-left: 38px;
    padding-right: 64px;
    -webkit-box-shadow: 0px 0px #0C5B82;
    box-shadow: 0px 0px #0C5B82;
    text-shadow: 0px 0px 2px #1F92E0;
    text-decoration: underline;
}
div.circle{
    width: 100px;
    height: 100px;
    background-color: #FA9585;
    margin-left: 212px;
    margin-top: -88px;
    margin-bottom: 6px;
    padding-top: 5px;
    padding-bottom: 0px;
}
p2 {
    top: 869px;
    left: 157px;
    width: 190px;
    height: 63px;
    text-align: center;
    line-height: 30px;
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
    font-size: 9px;
    font-family: Hiragino Kaku Gothic ProN;
    letter-spacing: 0.09px;
    color: #463E3E;
    opacity: 0.67;
    padding-left: 4px;
}
div.bbb {
    top: 1016px;
    left: 0px;
    width: 380px;
    height: 550px;
    background-color: #c0E3F5;
    margin-bottom: 34px;
    margin-top: 16px;
}
img.burashi {
  top: 1059px;
  left: 43px;
  width: 290;
  height: 207px;
  transform: matrix(1, 0, 0, 1, 0, 0, );
  background: transparent url('img/IMG_7750-3.png') 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 6px #00000029;
  opacity: 1;
  margin-left: 31px;
  margin-top: 41px;
}
img.monyu {
  margin-left: 60px;
  margin-top: -194px;
  left: 0px;
  opacity: 0.5;
  border-radius: 5px;
  padding-top: 180px;
  margin-bottom: -429px;
  padding-bottom: 180px;
}
h1 {
    top: 4px;
    left: 80px;
    width: 212px;
    height: 50px;
    line-height: 46px;
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
    font-size: 36px;
    font-family: Hiragino Kaku Gothic ProN;
    letter-spacing: 13px;
    color: #463E3E;
    opacity: 1;
    margin-left: 97px;
    margin-bottom: 39px;
    margin-top: 34px;
    border-spacing: 30px 0px;
    clear: both;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: left;
    text-shadow: 0px 0px 29px #1E1D1D;
}
div.bbbb {
  background: #FA9585;
  top: 1400px;
  left: -33px;
  width: 380px;
  height: 519px;
  margin-top: -19px;
}
h {
    text-align: right;
    font: normal normal normal 35px/70px Hiragino Kaku Gothic ProN;
    letter-spacing: 0.35px;
    color: #463E3E;
    opacity: 1;
    margin-left: 10px;
    text-shadow: 0px 0px #000000;
}
h6 {
  font: normal normal normal 27px/54px Hiragino Kaku Gothic ProN;
  line-height: 30px;
  font-weight: normal;
  font-variant: normal;
  font-style: normal;
  font-size: 28px;
  color: #463E3E;
  text-align: left;
  margin-top: -12px;
  margin-bottom: 11px;
  margin-right: 7px;
  padding-left: 5px;
  padding-top: 5px;
}
h4 {
  top: 1625px;
  left: 55px;
  width: 270px;
  height: 89px;
  margin-left: 29px;
  text-align: center;
  line-height: 48px;
  font-weight: normal;
  font-variant: normal;
  font-style: normal;
  font-size: 21px;
  font-family: Hiragino Kaku Gothic ProN;
  letter-spacing: 0.21px;
  color: #605F5F;
  opacity: 1;
  margin-top: 13px;
  text-decoration: underline;
}
img.ha {
  top: 1600px;
  left: -60px;
  width: 380px;
}
p4 {
  margin-top: 786px;
  margin-left: 259px;
  margin-bottom: -35px;
  margin-right: 9px;
  font-size: 17px;
  font-family: Hiragino Kaku Gothic ProN;
  letter-spacing: 0.21px;
  color: #605F5F;
  text-indent: -8px;
}
img.yazi{
    top: 1594px;
    left: 122px;
    width: 130px;
    height: 70px;
    margin-left: 100px;
    margin-bottom: -42px;
    margin-top: 7px;
}
h5 {
    top: 2348px;
    left: 131px;
    width: 274px;
    height: 45px;
    font-size: 43px;
    line-height: 0px;
    margin-left: 57px;
    min-height: 38px;
    min-width: 0px;
    z-index: 12;
    opacity: 0.96;
    text-decoration: none;
    text-align: left;
    text-indent: 12px;
    max-width: 229px;
    max-height: 0px;
    margin-top: -295px;
    padding-top: 260px;
    font: normal normal normal 45px/77px Hiragino Kaku Gothic ProN;
    letter-spacing: -3.55px;
    color: #707070;
    margin-bottom: 13px;
    text-shadow: 0px 0px 24px #E13333;
    padding-bottom: 0px;
    padding-left: 0px;
}
img.monyo {
    width: 66px;
    height: 66px;
    background: transparent url('img/無題43_20201021194950.png') 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-left: 108px;
    margin-right: -97px;
    text-indent: 56px;
    padding-left: 187px;
    margin-top: -130px;
    margin-bottom: -35px;
    padding-top: 178px;
    padding-right: 15px;
    padding-bottom: 0px;
}
div.ccc {
    width: 380px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: 0% 0% no-repeat padding-box;
    background-color: #E5E7E7;
    opacity: 1;
    margin-left: 6px;
    margin-top: 378px;
    -webkit-box-shadow: 0px 0px #1F0303;
    box-shadow: 0px 0px #1F0303;
}
img.rinku {
    width: 312px;
    height: 254px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    opacity: 0.64;
    margin-top: 379px;
    margin-left: 35px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-indent: 19px;
    margin-bottom: 48px;
}

img.kousiki
{
    text-align: center;
    font: normal normal normal 18px/45px Hiragino Kaku Gothic ProN;
    letter-spacing: 0.18px;
    color: #463E3E;
    opacity: 1;
    margin-left: 28px;
    margin-right: -86px;
    margin-top: -1px;
    padding-top: 27px;
    padding-bottom: 62px;
    text-shadow: 0px 0px 88px #000000;
    text-transform: none;
    box-shadow: 0px 0px #150909;
}
p6{
    padding-left: 142px;
    padding-bottom: 24px;
}