@charset "utf-8";

div:after, dl:after, ul:after {
content: "";
}

body {
line-break: strict;
}
/*=================================

ローディング

=================================*/
#loading {
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #004b3d;
}
#loading::after {
/*
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 47px;
background: url(/sweets/chocolate/chocokoka/images/logo_chocokoka.png) center / 100% no-repeat;
z-index: 1;
visibility: visible;
opacity: 0.5;
*/
}
#loading .logo {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 47px;
background: url(/sweets/chocolate/chocokoka/images/logo_chocokoka.png) center / 100% no-repeat;
z-index: 1;
visibility: visible;
opacity: 0;
}

/*=================================

SP

=================================*/
/*------header IN------*/
.contents_wrap header {
background: #005a4a;
}
.contents_wrap .h1_logo {
position: absolute;
left: 8px;
top: 7px;
width: 168px;
}
.isPC {
display: none;
}

@media screen and (max-width:640px) {
/*------overrider IN------*/
body {
-webkit-text-size-adjust: 100%;
}
.contents_wrap header {
background: #005a4a;
position: fixed;
height: 36px;
width: 100%;
top: 0;
z-index: 50;
}
/*------nav_global IN------*/
.nav_global,  .nav_global .nav_global_menu > dd {
background-color: #f6f4ec;
}
.nav_global {
position: relative;
text-align: left;
z-index: 99;
}
.nav_global .nav_global_menu > dt.nav_global_button {
position: relative;
padding: 10px 45px 10px 15px;
font-size: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon,  .nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon:before,  .nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon:after {
position: absolute;
width: 20px;
height: 1px;
background-color: #4a2615;
transition: all 0.3s ease;
}
.nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon {
top: 50%;
right: 15px;
}
.nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon:before,  .nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon:after {
content: "";
right: 0;
}
.nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon:before {
top: -7px;
}
.nav_global .nav_global_menu > dt.nav_global_button .nav_global_icon:after {
bottom: -7px;
}
.nav_global .nav_global_menu > dt {
font-size: 0;
}
.nav_global .nav_global_menu > dt img {
width: auto !important;
max-height: 19px;
}
.nav_global .nav_global_menu > dd {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transition: all 0.3s ease;
}
.nav_global .nav_global_menu > dd > ul > li {
border-top: 1px solid #ffffff;
font-size: 0.875em;
}
.nav_global .nav_global_menu > dd > ul > li > a {
position: relative;
display: block;
padding: 10px 50px 10px 30px;
color: #176354;
}
.nav_global .nav_global_menu > dd > ul > li > a:before {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 8px;
border-top: 1px solid #085a4a;
border-right: 1px solid #085a4a;
transform: translateY(-50%) rotate(45deg);
}
.nav_global .nav_global_menu > dd > ul > li > a:hover {
opacity: 1;
}
.nav_global .nav_global_menu > dd > ul > li.current > a {
color: #adc3b8;
}
.nav_global.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav_global .nav_global_menu.opened > dt.nav_global_button .nav_global_icon {
background-color: transparent;
}
.nav_global .nav_global_menu.opened > dt.nav_global_button .nav_global_icon:before,  .nav_global .nav_global_menu.opened > dt.nav_global_button .nav_global_icon:after {
top: 0;
}
.nav_global .nav_global_menu.opened > dt.nav_global_button .nav_global_icon:before {
transform: rotate(-45deg);
}
.nav_global .nav_global_menu.opened > dt.nav_global_button .nav_global_icon:after {
transform: rotate(-135deg);
}
/*------nav_global OUT------*/

/*------nav_local IN------*/
.nav_local {
background-color: #f6f4ec;
padding: 10px 15px;
text-align: left;
}
.nav_local .nav_local_link {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.nav_local .nav_local_link > li {
position: relative;
width: calc((100% - 15px) / 2);
margin: 5px 15px 0 0;
padding: 0 0 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 0.625em;
}
.nav_local .nav_local_link > li:nth-child(-n+2) {
margin-top: 0;
}
.nav_local .nav_local_link > li:nth-child(2n) {
margin-right: 0;
}
.nav_local .nav_local_link > li:before {
content: "";
position: absolute;
top: 0.4em;
left: -2px;
width: 4px;
height: 4px;
border-top: 1px solid #085a4a;
border-right: 1px solid #085a4a;
transform: rotate(45deg);
}
.nav_local .nav_local_link > li > a {
color: #4a2615;
}
.nav_local .nav_local_link > li.current > a {
color: #c2b6ab;
}
/*------nav_local OUT------*/

/*------btn_pagetop IN------*/
.btn_pagetop {
display: none;
}
.to-top {
margin: 0 5px 25px 0;
}
.to-top a {
display: block;
float: right;
box-sizing: border-box;
width: 120px;
height: 32px;
border: 1px solid #c6c9cc;
-webkit-border-radius: 6px;
border-radius: 6px;
background: #f1f1f1; /* Old browsers */
background: -moz-linear-gradient(top, #f1f1f1 0%, #dadada 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #dadada)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f1f1f1 0%, #dadada 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f1f1f1 0%, #dadada 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #f1f1f1 0%, #dadada 100%); /* W3C */
}
.to-top img {
width: 100%;
}
.to-top:before,  .to-top:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.to-top:after {
clear: both;
}
/*------btn_pagetop OUT------*/
}


/*=================================

PC

=================================*/

/*幅641px以上に適用*/
@media screen and (min-width:641px) {
/*200814変更*/
body {
min-width: 1140px;
}
.isSP {
display: none;
}
.isPC {
display: block;
}

/*------header IN------*/
.contents_wrap header {
height: 78px;
}
.contents_wrap h1 {
width: 950px;
margin: 0 auto;
text-align: center;
background: #F4D0D1;
}
.contents_wrap .h1_logo {
width: auto;
height: auto;
left: 50%;
top: 10px;
margin-left: -204px;
}
/*------header OUT------*/


/*------nav_global IN------*/
.nav_global {
background-color: #f6f4ec;
text-align: left;
}
/*200814変更*/
.nav_global .nav_global_inner {
width: 1030px;
margin: 0 auto;
}
.nav_global .nav_global_menu {
display: table;
height: 60px;
margin: 0 auto;
}

.nav_global .nav_global_menu > * {
display: table-cell !important;
vertical-align: middle;
}
/*200814変更
.nav_global .nav_global_menu > dt {
width: 150px;
padding: 0 0 0 15px;
font-size: 0;
}
.nav_global .nav_global_menu > dt img {
width: auto !important;
}
*/
/* 210705 ロゴ削除 */
.nav_global .nav_global_menu > dt {
display: none !important;
}
.nav_global .nav_global_menu > dd {
padding: 10px 0;
}
.nav_global .nav_global_menu > dd > ul {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
}
.nav_global .nav_global_menu > dd > ul > li {
position: relative;
margin: 0 10px 0 0; /*ナビメニュー追加・削除時はmargin-rihgtの数値を調整する事*/
padding: 0 10px 0 0; /*ナビメニュー追加・削除時はpadding-rihgtの数値を調整する事*/
font-size: 0.875em;
text-align: center;
}
.nav_global .nav_global_menu > dd > ul > li:before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 15px;
margin-top: -8px;
background-color: #ece8d5;
}
.nav_global .nav_global_menu > dd > ul > li:last-child {
margin-right: 0;
padding-right: 0;
}
.nav_global .nav_global_menu > dd > ul > li:last-child:before {
display: none;
}
.nav_global .nav_global_menu > dd > ul > li > a {
color: #4a2615;
transition: all 0.3s ease;
position: relative;
}
.nav_global .nav_global_menu > dd > ul > li > a:hover,  .nav_global .nav_global_menu > dd > ul > li.current > a {
color: #c2b6ab;
}
.nav_global.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 40;
}
/*------nav_global OUT------*/

/*------nav_local IN------*/
.nav_local {
display: none;
}
/*------nav_local OUT------*/

/*------btn_pagetop IN------*/
.btn_pagetop {
position: fixed;
right: 50px;
bottom: 50px;
z-index: 50;
transition: all 0.3s ease;
}
.btn_pagetop:hover {
opacity: 0.7;
}
.btn_pagetop > a {
overflow: hidden;
display: block;
width: 40px;
height: 40px;
background-image: url(/sweets/chocolate/chocokoka/images/renew_com_bt01_pc.png);
background-repeat: no-repeat;
background-position: 0 0;
text-align: left;
text-indent: -9999em;
outline: none;
}
/*------btn_pagetop OUT------*/
}

/*====================
G navi NEWマーク
====================*/
.nav_global .nav_global_menu > dd > ul > li.new a:after,
.nav_local_link li.new a:after{
content: "NEW";
background: #ff0000;
color: #fff;
font-size: 8px;
padding: 1px 5px;
margin-left: 5px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
@media screen and (min-width:641px) {
.nav_global .nav_global_menu > dd > ul > li.new a:after{
position: absolute;
top: -1.2rem;
left: 0;
font-size: 9px;
padding: 3px 0.5em;
margin-left: 0;
line-height: 1;
}	
}

/*=================================

タブレット

=================================*/
/*幅641px～768pxに適用*/
@media screen and (min-width:641px) and (max-width:768px) {
body {
min-width: 1024px;
}
.nav_global .nav_global_inner {
width: 1024px;
}
.nav_global .nav_global_menu > dd > ul {
justify-content: space-around;
}
.nav_global .nav_global_menu > dt {
width: 200px;
padding: 0 0 0 110px;
}
.nav_global .nav_global_menu > dd > ul > li {
margin: 0;
padding: 15px 60px;
}
.nav_global .nav_global_menu > dd > ul > li:nth-child(4):before {
display: none;
}
.nav_global .nav_global_menu > dd > ul > li:last-child {
padding-right: 60px;
}
}