@charset "utf-8";
/*TOPページCSS*/
#stage1 h1 {
padding-top: 25px;
text-align: center;
}
/*#stage1 .stageBase p {
padding-top: 55px;
text-align: center;
}*/
/*=====TOPアニメーションの処理=====*/
/*
アニメーションする前は隠せるようにします。
hiddenクラスはJS側でaddClassしたりremoveClasssしたりします
*/
/*#anima01.hidden,
#anima02.hidden{
opacity: 0;
}
.
*/
/*====================*/
.hidden {
opacity: 0;
}
.b_logo{
position: absolute;
top: 0;
left: calc(50% - 35vw);
display: block;
z-index: 999;
}

/* ロゴ～アーモンドチョコのこだわり */
#stage1 .stageBase{
min-height: 520px;
}
/*
#stage1 .logo_60th {
position: absolute;
top: 38px;
left: calc(50% - 117px);
}
*/
#stage1 .copy_text {
position: absolute;
top: 138px;
left: calc(50% - 384.5px);
}
#stage1 .pkg_almond {
position: absolute;
top: 293px;
left: calc(50% - 386px);
}
#stage1 .read_kodawari {
position: absolute;
top: 314px;
left: calc(50% - 7px);
}
#stage1 .link_kodawari_index{
position: absolute;
top: 378px;
left: 49.7%;
}
#stage1 a.link_kodawari_index:hover img{
opacity: 0.5;
}

/* マカダミアチョコ・ピスタチオチョコのこだわり */
.top_kodawari{
width: 100%;
background: url(/sweets/chocolate/almond/images/top/kodawari_bg.png);
}
.top_kodawari .kodawari_wrap{
width: 1020px;
margin: 0 auto;
padding: 3.2% 0 3%;
display: flex;
justify-content: space-between;
align-items: end;
}
.top_kodawari .pkg img{
width: 340px;
}
.top_kodawari .kodawari_macadamia a,
.top_kodawari .kodawari_pistachio a,
.top_kodawari .kodawari_hazel a{
display: block;
text-align: center;
}
.top_kodawari .kodawari_macadamia a img,
.top_kodawari .kodawari_pistachio a img,
.top_kodawari .kodawari_hazel a img{
width: 308px;
}

/* キャンペーン */
.campaign{
width: 1020px;
margin: 0 auto 30px;
}
.campaign img{
width: 100%;
}

/* ナビ */
.nav{
width: 924px;
margin: 0 auto;
}
.nav ul {
display: flex;
/* justify-content: space-between; 3つ並びの時 */
justify-content: space-around;
margin: 45px 0;
}
.nav ul li {
width: 280px;
display: inline-block;
}
.nav ul li img {
width: 100%;
}
.nav ul:after{
content: none;
}

/* オンラインストア */
.onlineStore{
background: #7b0d10;
padding: 46px 0 48px 0;
}
.onlineStore p{
text-align:center;
color: #fff;
font-size: 14px;
}
.onlineStore ul{
text-align: center;
margin: 35px 0 0 0;
}
.onlineStore ul li{
display: inline-block;
margin: 0 0 0 30px;
}
.onlineStore ul li:first-child{
margin: 0;
}

.campaign a:hover,
.nav a:hover,
.onlineStore a:hover{
opacity: 0.5;
}

@media screen and (max-width: 1024px) {
.b_logo{
left: 50px;
}
.campaign{
margin: 0 5% 30px;
width: auto;
}
.campaign a img{
width: 100%;
}
/*.nav{
margin: 0 auto;
width: 770px;
}*/
}