@charset "utf-8";



body{
margin: 0;
padding: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
}


img{
vertical-align:bottom;
}



header{
background-color: #DAC556;
    position: sticky;
margin-bottom: 0;
top: 0px;
z-index: 10;
opacity: 0;
animation-name: fadein-bottom;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

@keyframes fadein-bottom {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.header_menu{
       position: sticky;
display: flex;
align-items: center;
width: 1100px;
margin: 0 auto;
height: 70px;
padding: 0  100px;
background-color: #DAC556;
}


.header_menu a:hover{
text-decoration:underline;
}


.header_menu img{
height: 40px;
}


.header_menu_1{
display: flex;
justify-content:space-between;
width: 700px;
margin: 0 auto;
font-family: "Noto Sans JP", sans-serif;
}

.header_menu_1 a{
position: relative;
font-size: 13px;
text-decoration: none;
color: #3E3A39;
font-weight: 800;
height: 30px;
text-align: center; 
letter-spacing: 0.2px;
}


.header_menu_1 a:after{
position: absolute;
left: 50%; 
transform: translateX(-50%);
bottom: 0;
font-weight: 400;
font-size: 9px;
}


.header_menu_1 a:first-of-type:after{
content: "TwoDucksについて";
width: 100%;
}


.header_menu_1 a:nth-child(2):after{
content: "ニュース";
width: 100px;
}

.header_menu_1 a:nth-child(3):after{
content: "商品";
}

.header_menu_1 a:nth-child(4):after{
content: "キャラクター";
width: 100px;
}


.header_menu_1 a:nth-child(5):after{
content: "ストーリー";
width: 100px;
}

.header_menu_1 a:nth-child(6):after{
content: "お問い合わせ";
width: 100px;
}



.header_menu_2 {
display: flex;
}

.header_menu_2 a{
position: relative;
font-size: 13px;
text-decoration: none;
color: #3E3A39;
font-weight: 800;
text-align: center; 
letter-spacing: 0.2px;
font-family: 'Outfit';
height: 30px;
}

.header_menu_2 a:before{
position: absolute;
left: -25px;
background-image: url("../../img/toppage_img/p_icon_0001.png");
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
}


.header_menu_2 a:after{
position: absolute;
left: 50%; 
transform: translateX(-50%);
bottom: 0;
font-weight: 300;
font-size: 9px;
content: "インスタグラム";
width: 100px;
}



main{
display: block;
width: 1150px;
margin: 0  auto;
}


.footer_content{
    padding-top: 200px;
    text-align: left!important;

}



footer{
     background-color: #DAC556; 
    
}



footer div{
    position: relative;
      display: flex;               /* Flexコンテナにする */
  flex-direction: column;      /*縦に並べる場合（デフォルトはrow）*/
  justify-content: center;     /*上下の中央揃え*/
    margin: 0 auto;
      height: 100px;
    padding: 0  100px;
    width: 1100px;
     background-color: #DAC556; 

}



footer img{

position: absolute;
    right: 100px;
    width: 150px;
    padding: 0;
  
    

    
}