@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{
-webkit-text-size-adjust: 100%;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
transition: width 1s ease-in-out 0.01s;
}
.l-container a:hover{
opacity: 0.7;
}
p.note, ul.note > li{
text-align: left;
text-indent: -0.6em;
padding-left: 0.6em;
}
.link_area{
color: #ffffff;
border-bottom: solid 1px #ffffff;
}
.link_area:hover{
color: #fcd46a;
border-bottom: solid 1px #fcd46a;
}
.word_break{
word-break: break-all;
}

/*====================
コンテンツ
====================*/
.isPC{
display: none;
}
#content_wrap{
background: #dfc174;
position: relative;
overflow: hidden;
font-feature-settings: "palt";
letter-spacing: .24em;
color: #ffffff;
}
#content_wrap > section{
text-align: center;
}

/* ▽ SP ▽================================================================================================================================== */
/*====================
base
====================*/
#content_wrap p,
#content_wrap a,
#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-weight: 500;
}
.inner{
padding: 0 5vw;
}
.information,
.information p{
font-size: 2.6vw;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
.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;
}
.bg_green{
background: #82952c;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #dfc174;
}
#loading img{
width: 24vw;
position: absolute;
top: calc(50% - 20vw);
left: calc(50% - 12vw);
-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;}
}

/*====================
ページ内ナビ
====================*/
.gnav{
width: 100%;
background: #610065;
border-bottom: 1.4vw solid #a06a49;
padding-top: 4.2vw;
text-align: center;
position: relative;
z-index: 100;
}
.gnav .inner{
padding: 0;
}
.gnav h1 img{
height: 22.687vw;
}
.nav_menu{
display: flex;
justify-content: space-around;
padding: 0 1.9vw 0 1vw;
}
.nav_menu li{
width: calc(100% / 3);
text-align: center;
}
.nav_menu li h3{
line-height: 1;
padding: 4.3vw 2vw 5.1vw;
}
.nav_menu li h3 img{
height: 11.7344vw;
}

/*====================
黒糖
====================*/
#kokutou{
position: relative;
padding: 37.5vw 0 32.9vw;
}
#kokutou .catchcopy{
width: 31.683vw;
position: absolute;
top: 8.6vw;
right: 9.7vw;
}
.kokutou01{
width: 107.5vw;
position: absolute;
top: 112.3vw;
left: 25.6vw;
transform: rotate(-11.2deg);
}
.kokutou02{
width: 29.597vw;
position: absolute;
top: 99.7vw;
left: 63.8vw;
}
.kokutou_choco{
width: 85.66vw;
position: absolute;
top: -26.4vw;
left: -52.8vw;
transform: rotate(29.8deg);
filter: drop-shadow(5px 4px 10px #af8b36);
}
.pkg_kokutou_bar{
width: 84.746vw;
margin: 0 auto 4.1vw;
}
.txt_kokutou_bar{
width: 80.835vw;
height: 16.69vw;
background-image: url(/products/brand/koichoco/images/txt_kokutou_bar_sp.png);
margin: 0 auto;
}

/*====================
抹茶
====================*/
#matcha{
position: relative;
padding-top: 21.2%;
background-image: url("/products/brand/koichoco/images/deco_matcha_sp.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
background-color: transparent !important;
}
#matcha_wrap{
width: 100%;
background: #82952c;
position: relative;
padding: 38.7vw 0 26.3vw;
}
#matcha_wrap .catchcopy{
width: 31.683vw;
position: absolute;
top: 11.6vw;
left: 58.7vw;
}
.matcha_sand_choco{
width: 66.715vw;
position: absolute;
top: -25.3vw;
left: -33.9vw;
}
.matcha_sand_cut{
width: 33.8vw;
position: absolute;
top: -8vw;
left: 15.9vw;
}
.matcha_sand_side{
width: 29vw;
position: absolute;
top: 15.3vw;
left: 10.8vw;
}
.matcha_sand{
width: 33.21vw;
position: absolute;
top: 19.4vw;
left: -11.2vw;
}
.matcha{
width: 178.88vw;
position: absolute;
top: 161.8vw;
left: -11.3vw;
}
.matcha_choco{
width: 89.44vw;
position: absolute;
top: 213.8vw;
left: 43.3vw;
}
.matcha_leaf{
width: 32.074vw;
position: absolute;
top: 225.4vw;
left: 28.6vw;
}
.pkg_matcha_sand{
width: 90.222vw;
margin: 0 auto 1.7vw;
}
.txt_matcha_sand{
width: 80.835vw;
height: 30.9vw;
background-image: url(/products/brand/koichoco/images/txt_matcha_sand_sp.png);
margin: 0 auto;
}
.pkg_matcha_bar{
width: 84.746vw;
margin: 7vw auto 4.1vw;
}
.txt_matcha_bar{
width: 80.835vw;
height: 16.82vw;
background-image: url(/products/brand/koichoco/images/txt_matcha_bar_sp.png);
margin: 0 auto;
}

/*====================
いちご
====================*/
#strawberry{
position: relative;
padding-top: 22.7%;
background-image: url("/products/brand/koichoco/images/deco_strawberry_sp.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
background-color: transparent !important;
}
#strawberry_wrap{
width: 100%;
background: #dfc174;
position: relative;
padding: 43.1vw 0 33.2vw;
}
#strawberry_wrap .catchcopy{
width: 31.683vw;
position: absolute;
top: 10.7vw;
right: 9.7vw;
}
.pkg_strawberry_sand{
width: 91.266vw;
margin: 0 auto 1.1vw;
}
.txt_strawberry_sand{
width: 80.835vw;
height: 30.9vw;
background-image: url(/products/brand/koichoco/images/txt_strawberry_sand_sp.png);
margin: 0 auto;
}
.strawberry_sand_choco{
width: 54.5vw;
position: absolute;
top: -31.2vw;
left: -27.8vw;
transform: rotate(37.6deg);
}
.strawberry_sand_cut{
width: 32.595vw;
position: absolute;
top: -8.9vw;
left: 16.5vw;
transform: rotate(2.4deg);
}
.strawberry_sand_side{
width: 27.902vw;
position: absolute;
top: 15.1vw;
left: 11.5vw;
}
.strawberry_sand{
width: 33.117vw;
position: absolute;
top: 18.8vw;
left: -11.9vw;
}
.strawberry{
width: 93.612vw;
position: absolute;
top: 141.7vw;
left: 11.1vw;
}

/*====================
フッター
====================*/
#brand_footer{
position: relative;
padding-top: 14.47%;
background-image: url("/products/brand/koichoco/images/base_strawberry_sp.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
background-color: transparent !important;
}
#footer_wrap{
width: 100%;
background: #900000;
position: relative;
padding: 9.5vw 0 11.8vw;
}
#footer_wrap .inner{
padding: 0 14.2vw;
}
.bnr_list{
padding-top: 9vw;
}
.bnr_list li:not(:first-child){
margin-top: 7.2vw;
}
.sns{
display: flex;
justify-content: center;
}
.sns li{
width: 7.9vw;
}
.sns li:not(:first-child){
margin-left: 4.4vw;
}

/* ～767px For SP
====================================================*/
@media screen and (max-width: 767px){
.isPC{
display: none;
}
}

/* ▽ PC ▽================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*====================
base
====================*/
.isSP{
display: none;
}
.isPC{
display: block;
}
body{
width: 100%;
}
.inner{
max-width: 950px;
width: 100%;
margin: 0 auto;
padding: 0 !important;
position: relative;
}
.information,
.information p{
font-size: 14px !important;		
}

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

/*====================
ページ内ナビ
====================*/
.gnav{
position: relative;
width: 100%;
padding: 0 0 7.16%;
background-image: url("/products/brand/koichoco/images/base_kokutou_pc.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100% auto;
border: none;
background-color: transparent !important;
}
.gnav_wrap{
width: 100%;
background: #610065;
padding: 24px 0 0;
}
.gnav .inner{
max-width: 950px;
display: flex;
justify-content: space-between;
position: relative;
}
.gnav h1{
position: absolute;
top: calc(50% - 50px);
left: 13px;
max-width: 185px;
width: 20%;
}
.gnav h1 img{
height: auto;
}
.nav_menu{
justify-content: space-between;
padding: 19px 10px 0 0;
width: 76%;
}
.nav_menu li h3{
padding: 0;
}
.nav_menu li h3 img{
height: 73px;
}

/*====================
黒糖
====================*/
#kokutou{
padding: 22px 0 149px;
}
#kokutou .catchcopy{
max-width: 187px;
width: 20%;
top: 20px;
right: 79px;
}
.kokutou01{
max-width: 884px;
top: 428px;
left: 474px;
transform: none;
}
.kokutou02{
max-width: 245px;
top: 182px;
left: 753px;
}
.kokutou_choco{
max-width: 657px;
top: 421px;
left: 175px;
transform: none;
filter: drop-shadow(-5px -4px 10px #af8b36);
}
.pkg_kokutou_bar{
max-width: 650px;
width: 69%;
margin: 0 0 26px -8px;
}
.txt_kokutou_bar{
max-width: 672px;
width: 71%;
height: 53px;
background-image: url(/products/brand/koichoco/images/txt_kokutou_bar_pc.png);
margin: 0 0 0 48px;
}

/*====================
抹茶
====================*/
#matcha{
padding-top: 12.7%;
background-image: url("/products/brand/koichoco/images/deco_matcha_pc.png");
}
#matcha_wrap{
padding: 36px 0 0;
}
#matcha_wrap .catchcopy{
max-width: 187px;
width: 20%;
top: 242px;
left: 75px;
}
.matcha_sand_choco{
max-width: 506px;
top: -255px;
left: -391px;
}
.matcha_sand_cut{
max-width: 259px;
top: -142px;
left: 26px;
}
.matcha_sand_side{
max-width: 219px;
top: 37px;
left: -11px;
}
.matcha_sand{
max-width: 257px;
top: 68px;
left: -183px;
}
.matcha{
max-width: 1371px;
top: 381px;
left: 304px;
}
.matcha_choco{
max-width: 686px;
top: 723px;
left: 759px
}
.matcha_leaf{
max-width: 246px;
top: 815px;
left: 634px;
}
.pkg_matcha_sand{
max-width: 692px;
width: 73%;
margin: 0 0 0 302px;
}
.txt_matcha_sand{
max-width: 524px;
width: 56%;
height: 125px;
background-image: url(/products/brand/koichoco/images/txt_matcha_sand_pc.png);
margin: -120px 0 0 49px;
}
.pkg_matcha_bar{
max-width: 650px;
width: 69%;
margin: 48px 0 26px -8px;
}
.txt_matcha_bar{
max-width: 418px;
width: 44%;
height: 88px;
background-image: url(/products/brand/koichoco/images/txt_matcha_bar_pc.png);
margin: 0 0 0 48px;
}

/*====================
いちご
====================*/
#strawberry{
position: relative;
padding-top: 13.2%;
background-image: url("/products/brand/koichoco/images/deco_strawberry_pc.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
background-color: transparent !important;
}
#strawberry_wrap{
width: 100%;
background: #dfc174;
position: relative;
padding: 41px 0 38px;
}
#strawberry_wrap .catchcopy{
max-width: 187px;
width: 20%;
top: 60px;
right: 79px;
}
.pkg_strawberry_sand{
max-width: 700px;
width: 74%;
margin: 0 0 4px -20px;
}
.txt_strawberry_sand{
max-width: 458px;
width: 49%;
height: 122px;
background-image: url(/products/brand/koichoco/images/txt_strawberry_sand_pc.png);
margin: 0 0 0 50px;
}
.strawberry_sand_choco{
max-width: 418px;
top: 363px;
left: 674px;
transform: none;
z-index: 10;
}
.strawberry_sand_cut{
max-width: 250px;
top: 247px;
left: 574px;
transform: none;
}
.strawberry_sand_side{
max-width: 214px;
top: -121px;
left: 724px;
}
.strawberry_sand{
max-width: 254px;
top: 378px;
left: 500px;
}
.strawberry{
max-width: 715px;
top: 323px;
left: -725px;
}

/*====================
フッター
====================*/
#brand_footer{
padding-top: 8.2%;
background-image: url("/products/brand/koichoco/images/base_strawberry_pc.png");
}
#footer_wrap{
padding: 0 0 56px;
}
#footer_wrap .inner{
max-width: 850px;
width: 100%;
}
.bnr_list{
display: flex;
justify-content: space-between;
padding-top: 50px;
}
.bnr_list li{
width: 50%;
}
.bnr_list li:not(:first-child){
margin-top: 0;	
margin-left: 50px;
}
.sns{
display: flex;
justify-content: center;
}
.sns li{
width: 60px;
}
.sns li:not(:first-child){
margin-left: 34px;
}
}
@media screen and (min-width:768px) and (max-width:912px){
h1 img{
width: 62%;
}
figure img{
width: 84%;
}
.kokutou01{
top: 384px;
left: calc(50% - 177px);
transform: rotate(-11.2deg);
}
.kokutou02{
left: calc(50% + 226px);
}
.kokutou_choco{
top: 404px;
left: calc(50% - 346px);
}
.matcha_sand_choco{
left: -331px;
}
.matcha_sand_side{
top: -3px;
left: 9px;
}
.matcha_sand{
left: -113px;
}
.matcha_choco{
top: 742px;
left: calc(50% + 36px);
}
.matcha{
top: 367px;
left: calc(50% - 244px);
}
.matcha_leaf{
top: 806px;
left: calc(50% - 6px);
}
.strawberry_sand_choco{
top: 320px;
left: calc(50% + 170px);
}
.strawberry_sand_cut{
top: 200px;
left: calc(50% + 105px);
}
.strawberry_sand{
top: 310px;
left: calc(50% + 16px);
}
.strawberry_sand_side{
left: calc(50% + 253px);
}
.bnr_list li:not(:first-child){
margin-left: 40px;
}
#footer_wrap .inner{
width: 95%;
}
}
@media screen and (min-width:913px) and (max-width:1180px){
h1 img{
width: 70%;
}
figure img{
width: 90%;
}
.matcha_choco{
top: 807px;
left: calc(50% + 86px);
}
.matcha{
top: 380px;
left: calc(50% - 195px);
}
.matcha_leaf{
top: 850px;
left: calc(50% + 18px);
}
.strawberry{
left: -616px;
}
}
@media screen and (min-width:1181px) and (max-width:1500px){
h1 img{
width: 82%;
}
}
@media screen and (min-width:1501px) and (max-width:1700px){
h1 img{
width: 88%;
}
}