@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
color: #642023;
-webkit-text-size-adjust: 100%;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.l-container a:hover{
opacity: 0.7;
}
p.note, ul.note ,li.note{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.moveit{
visibility: hidden;
}

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
background: #f4e9db;
}
#content_wrap p,
#content_wrap figcaption{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size: 3.2vw;
font-weight: 500;
line-height: 1.6;
letter-spacing: .04em;
}
#content_wrap > section{
text-align: center;
}
.img_txt{
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
font-size: 0 !important;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: opacity,transform;
transition-duration: .48s;
transition-timing-function: ease-out;
transition-delay: .7s;
}

/* ▽ SP ▽================================================================================================================================= */
/*====================
base
====================*/
.txt_small{
font-size: 2.2vw !important;
}
.txt_medium{
font-size: 2.8vw !important;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
#asto h3,
#products h3,
#shopping h3{
width: calc(100%*727/767);
margin: 0 auto 8.5vw;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #f4e9db;
}
#loading img{
width: 60vw;
position: absolute;
top: calc(50% - 20vw);
left: calc(50% - 30vw);
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: #f4e9db;
padding: 8.8vw 0 11.9vw;
position: relative;
}
#mainvisual:before{
content: "";
display: block;
width: 100%;
height: 2.088vw;
background: url(/products/brand/simplepackage/images/deco_b.png) repeat-x center -0.4vw/auto 100%;
position: absolute;
top: 0;
left: 0;
}
#mainvisual:after{
content: "";
display: block;
width: 100%;
height: 2.088vw;
background: url(/products/brand/simplepackage/images/deco_t.png) repeat-x center bottom -0.4vw/auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
h1{
margin: 0 17vw 36.6vw;
}
#mainvisual h2{
margin: 0 13.89vw 32.5vw 13.752vw;
}
.catch01{
width: 39.7vw;
position: absolute;
left: 6.4vw;
top: 27.9vw;
}
.catch02{
width: 45vw;
position: absolute;
right: 6.4vw;
top: 27.9vw;
}
.catch03{
width: 40.1vw;
position: absolute;
right: 13.1vw;
top: 43.9vw;
}
.catch04{
width: 49.3vw;
position: absolute;
left: 4.3vw;
top: 89.2vw;
}
.catch05{
width: 40.3vw;
position: absolute;
left: 6.8vw;
top: 104.3vw;
}
.catch06{
width: 42.2vw;
position: absolute;
right: 4.3vw;
top: 90.4vw;
}
#mainvisual .txt_small{
text-align: right;
padding-right: 5.4vw;
}

/*========================
ページ内ナビ
========================*/
.gnav{
width: 100%;
background: #7b292d;
}
.nav_menu{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav_menu li{
width: calc(100% / 2);
text-align: center;
}
.nav_menu li h3{
position: relative;
padding: 2vw 0;
height: 6.7vw;
}
.nav_menu li h3 img{
height: 100%;
vertical-align: top;
}
.nav_menu li:first-child h3:after{
display: block;
content: "";
width: 1px;
height: 2.6vw;
background: #c8a5a7;
position: absolute;
right: 0;
top: calc(50% - 1.3vw);
}

/*====================
「シンプル包装」とは
====================*/
#asto{
background: url("/products/brand/simplepackage/images/base.png"), #fff8ed;
background-position: center top, center center;
background-repeat: repeat, repeat;
background-size: 122vw, 100%;
padding: 11.8vw 0 8.8vw;
position: relative;
}
#asto:before{
content: "";
display: block;
width: 100%;
height: 2.088vw;
background: url(/products/brand/simplepackage/images/deco_b.png) repeat-x center -0.4vw/auto 100%;
position: absolute;
top: 0;
left: 0;
}
#asto p{
line-height: 2;
margin: -2.1vw 6vw 4.5vw;
}
#asto h2{
width: calc(100%*353/767);
margin: 0 auto;
}

/*====================
商品ラインナップ
====================*/
#products{
background: url("/products/brand/simplepackage/images/base.png"), #ffffff;
background-position: center top, center center;
background-repeat: repeat, repeat;
background-size: 122vw, 100%;
padding: 10vw 0 16vw;
position: relative;
}
#products:after{
content: "";
display: block;
width: 100%;
height: 2.088vw;
background: url(/products/brand/simplepackage/images/deco_t.png) repeat-x center bottom -0.4vw/auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
#products .inner{
padding: 0 6vw;
}
.products_list h2 img{
width: 39.7vw;
margin-bottom: 3.1vw;
}
.products_list li:nth-child(n+2){
margin-top: 11vw;
}
.shopping_list{
padding: 5vw 18vw 0;
}
.shopping_list a{
background: #ffffff;
padding: 1vw 5vw 2.4vw;
border-radius: 1.6vw;
box-shadow: 0 1vw 0 #d3bbb5;
display: inline-block;
}
.shopping_list li:nth-child(n+2){
margin-top: 6.5vw;
}

/*========================
チョコレートサイト回遊バナー
========================*/
#brand_footer{
background: #7b292d;
position: relative;
padding: 8.6vw 0 10.3vw;
}
#brand_footer .inner{
padding: 0 10.6vw;
}
.bnr_list li:not(:first-child){
margin-top: 7.6vw;
}

/* ▽ PC ▽================================================================================================================================= */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}

/*====================
コンテンツ
====================*/
#content_wrap,
#content_wrap p,
#content_wrap figcaption{
font-size: 16px;
}

/*====================
base
====================*/
.txt_small{
font-size: 15px !important;
}
.txt_medium{
font-size: 15px !important;
}
.txt_large{
font-size: 20px !important;
}
#asto h3,
#products h3,
#shopping h3{
width: 625px;
margin: 0 auto 10px;
}

/*====================
ローディング画面
====================*/
#loading img{
width: 420px;
top: calc(50% - 100px);
left: calc(50% - 210px);
}

/*====================
メインビジュアル
====================*/
#mainvisual{
padding: 54px 0 102px;
}
#mainvisual:before{
height: 12px;
background: url(/products/brand/simplepackage/images/deco_b.png) repeat-x center -2px/auto 100%;
}
#mainvisual:after{
height: 12px;
background: url(/products/brand/simplepackage/images/deco_t.png) repeat-x center bottom -2px/auto 100%;
}
h1{
margin: 0 auto 225px;
width: 540px;
}
#mainvisual h2{
margin: 0 auto 170px;
}
.catch01{
width: 275px;
left: calc(50% - 463px);
top: 196px;
}
.catch02{
width: 312px;
right: calc(50% - 156px);
top: 190px;
}
.catch03{
width: 278px;
right: calc(50% - 462px);
top: 239px;
}
.catch04{
width: 341px;
left: calc(50% - 491px);
top: 649px;
}
.catch05{
width: 278px;
left: calc(50% - 133px);
top: 665px;
}
.catch06{
width: 292px;
right: calc(50% - 487px);
top: 610px;
}
#mainvisual .txt_small{
padding-right: 0;
position: absolute;
left: calc(50% - 460px)
}

/*====================
ページ内ナビ
====================*/
.gnav .inner{
width: 944px;
margin: 0 auto;
}
.nav_menu{
flex-wrap: nowrap;
}
.nav_menu li{
width: calc(100% / 2);
}
.nav_menu li h3{
padding: 18px 0 19px;
height: 44px;
}
.nav_menu li:first-child h3:after,
.nav_menu li h3:after{
display: block;
content: "";
width: 1px;
height: 18px;
background: #eaaa9e;
position: absolute;
right: 0;
top: calc(50% - 9px);
}
.nav_menu li:first-child h3:before{
display: block;
content: "";
width: 1px;
height: 18px;
background: #eaaa9e;
position: absolute;
left: 0;
top: calc(50% - 9px);
}
.nav_menu li:not(:first-child) h3:before{
content: none;
}

/*====================
「シンプル包装」とは
====================*/
#asto{
background-size: 943px, 100%;
padding: 78px 0 58px;
}
#asto:before{
height: 12px;
background: url(/products/brand/simplepackage/images/deco_b.png) repeat-x center -2px/auto 100%;
}
#asto p{
line-height: 2;
margin: 35px 0 36px;
font-size: 20px;
}
#asto h2{
width: 353px;
}

/*====================
商品ラインナップ
====================*/
#products{
background-size: 943px, 100%;
padding: 70px 0 80px;
}
#products:after{
height: 12px;
background: url(/products/brand/simplepackage/images/deco_t.png) repeat-x center bottom -2px/auto 100%;
}
#products .inner{
width: 944px;
margin: 0 auto;
padding: 0;
}
.products_list{
display: flex;
flex-wrap: wrap;
align-items: end;
}
.products_list li{
width: calc(100% / 2);
}
.products_list h2 img{
width: 206px;
margin-bottom: 8px;
}
.products_list li,
.products_list li:nth-child(n+2){
margin-top: 46px;
}
.products_list li:nth-child(n+3){
margin-top: 66px;
}
.shopping_list{
padding: 0 28px;
display: flex;
justify-content: space-around;
}
.shopping_list li{
width: 184px;
}
.shopping_list a{
padding: 6px 12px 10px 16px;
border-radius: 12px;
box-shadow: 0 6px 0 #d3bbb5;
}
.shopping_list a:hover{
box-shadow: 0 0 0 #d3bbb5;
transform: translate3d(0, 6px, 0); /* 影が減った分、ボタンを下へ移動させる */
transition: 0.1s;
}
.shopping_list li,
.shopping_list li:nth-child(n+2){
margin-top: 14px;
}

/*========================
チョコレートサイト回遊バナー
========================*/
#brand_footer{
padding: 61px 0 70px;
}
#brand_footer .inner{
width:  840px;
margin: 0 auto;
padding: 0;
}
.bnr_list{
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}
.bnr_list li{
width: 400px;
}
.bnr_list li:not(:first-child){
margin-top: 0;
}
.bnr_list li:nth-child(n+3){
margin-top: 40px;
}
.bnr_list li img{
width: 400px;
}
}

/* ▽ 幅の狭い端末 ▽================================================================================================================================== */
/* 410px以下 For 表示調整
====================================================*/
@media screen and (max-width: 375px){
#mainvisual .txt_small {
text-align: center;
padding: 5.4vw 4vw 0;
}
}