/*----------
01.繝医ャ繝�
02.繝ｩ繧､繝ｳ繝翫ャ繝�
03.莨夂､ｾ讎りｦ�
04.縺雁撫縺�粋繧上○
05.蛟倶ｺｺ諠��ｱ菫晁ｭｷ譁ｹ驥�
----------*/

@media only screen and (max-width:1024px){

/*----------
01.繝医ャ繝�
----------*/

#top #lineup_area .cnt_box{
padding: 52px 20px 40px 20px;
}

#top #lineup_area .cnt_img img.product{
bottom: -30px;
width: 60%;
}


#top #lineup_area .cnt_box .box_in{
padding: 0;
}

#top #lineup_area .cnt_box:nth-child(odd){
margin: -27% 0 0;
}


#top #lineup_area .cnt_box:nth-child(1){
margin: 0;
}

#top #lineup_area .cnt_box02{
margin: 27% 0 0;
}

#top #lineup_area .cnt_box05 p br.pc{
display: none;
}

#top #lineup_area .cnt_box07 p br.pc{
display: none;
}




/*----------
02.繝ｩ繧､繝ｳ繝翫ャ繝�
----------*/

#lineup.coconuts #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.coconuts #mainimg_area{
background-size: auto 100%;
}

#lineup.hot_chocolate #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.hot_chocolate #mainimg_area{
background-size: auto 100%;
}

#lineup.matcha_latte #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.matcha_latte #mainimg_area{
background-size: auto 100%;
}

#lineup.lemonade #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.lemonade #mainimg_area{
background-size: auto 100%;
}

#lineup.lassie #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.lassie #mainimg_area{
background-size: auto 100%;
}

#lineup.fruit_punch #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.fruit_punch #mainimg_area{
background-size: auto 100%;
}

#lineup.cider #mainimg_area .main_img{
padding: 90px 0 60px;
background-size: auto 100%;
}

#lineup.cider #mainimg_area{
background-size: auto 100%;
}

#lineup .color_nav li .title_jp{
font-size: 10px;
}

#lineup .color_nav li img{
top: 0;
margin: -54% auto 0;
}

#lineup #product_area .cnt_right{
margin: 0 0 0 8%;
width: 59%;
}

#lineup #product_area .cnt_left{
width: 33%;
}

/*----------
04.縺雁撫縺�粋繧上○
----------*/

#contact #about_area .cnt_box input[type="radio"] + label{
display: block;
margin: 0 0 10px;
}

#contact #about_area .cnt_box table tr:nth-child(1) td br{
display: none;
}


}

@media only screen and (max-width:800px){
#lineup #mainimg_area h2{
font-size: 46px;
}

#lineup #mainimg_area p{
font-size: 16px;
max-width: 350px;
}

#lineup.matcha_latte #mainimg_area p br.pc{
display: none;
}



}


@media only screen and (max-width:750px){
/*----------
01.繝医ャ繝�
----------*/

/* #top header{
height: auto;
} */

#top header{
padding: 0;
position: absolute;
background: none;
transition: all 0s;
}

#top header.active_fast{
top: 0 !important;
}

#top header.sticky{
position: fixed;
top: 0 !important;
z-index: 20;
}

#top header.active nav{
padding: 0 10px 0;
top: -20px;
}

#top header .nav_btn{
background: #e84b61;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
}

#top header .nav_line{
border-top: 2px solid #000;
height: 2px;
}

#top header .nav_line01{
top: 9px;
}

#top header .nav_line02{
top: 17px;
}

#top header .nav_line03{
top: 25px;
}

#top .up_cnt{
margin: -1px 0 0;
}

#top .main_contents{
padding: 0 0 50px;
}

#top #concept_area{
background: #0a1a21;
padding: 0 0 36px;
margin: 0 0 36px;
}

#top #concept_area::before{
display: none;
}

#top #concept_area .cnt_g{
background: none;
padding: 40px 0 0;
}

#top #concept_area h2{
font-size: 24px;
line-height: 28px;
padding: 0 0 30px;
}

#top #concept_area .cnt_img{
float: none;
width: 98.64%;
max-width: none;
margin: 0 auto;
}

#top #concept_area .cnt_text{
max-width: none;
width: auto;
margin: 0 auto;
float: none;
padding: 20px 0 0;
}

#top #concept_area .cnt_text h3{
padding: 0 0 15px;
}

#top #lineup_area{
padding: 0 0 39px;
}

#top #lineup_area h2{
text-align: center;
font-size: 24px;
line-height: 28px;
padding: 20px 0 16px;
}

#top #lineup_area h2::before{
margin: 0 auto;
left: 0;
right: 0;
}

#top #lineup_area .h2_g .first_text{
font-size: 12px;
line-height: 20px;
padding: 0 0 14px;
}

#top #lineup_area .cnt_g{
padding: 0 0 20px;
width: 100%;
}

#top #lineup_area .cnt_box{
float: none;
width: auto;
margin: 0 auto;
padding: 0;
}


#top #lineup_area .cnt_box .box_in{
padding: 20px 36px 15px 34px;
width: auto;
}

#top #lineup_area .cnt_box:nth-child(odd){
margin: 0 auto;
}

#top #lineup_area .cnt_box:nth-child(1){
margin: 0 auto;
}


#top #lineup_area .cnt_img{
margin: 0 0 25px;
}

#top #lineup_area .cnt_img img.package{
width: 59%;
}

#top #lineup_area .cnt_img img.product{
bottom: -17px;
width: 72%;
}

#top #lineup_area .cnt_text{
margin: 0 0 25px -8.16%;
position: relative;
}

#top #lineup_area .cnt_text h3{
font-size: 20px;
padding: 19px 0 0;
}

#top #lineup_area .cnt_text .h3_jp{
font-size: 12px;
padding: 0 0 6px;
margin: -5px 0 0;
}

#top #lineup_area .cnt_text p{
padding: 0 0 25px;
}

#top #lineup_area .cnt_text img.mounting_img{
margin: 0 0 0 auto;
width: 70%;
position:absolute;
bottom: -70px;
right: 17px;
}

#top #lineup_area .cnt_box .next_btn{
position: static;
margin: 0 auto;
}

#top #lineup_area .cnt_g02 table{
max-width: none;
width: 100%;
border-bottom: none;
}

#top #lineup_area .cnt_g02 th{
width: 128px;
}

#top #lineup_area .cnt_g02 tr:nth-child(1) th{
padding: 18px 0 15px 23px;
}

#top #lineup_area .cnt_g02 tr:nth-child(3) th{
padding: 15px 0 15px 23px;
}

#top #lineup_area .cnt_g02 table.table02{
border-bottom: 1px solid #000;
border-top: none;
}

#top #lineup_area .cnt_g02 table.table02 th{
padding: 15px 0 15px 23px;
}

#top #lineup_area .cnt_g02 table.table02 tr:nth-child(1) th{
padding: 15px 0 15px 23px;
}

#top #lineup_area .cnt_g02 table.table02 tr:nth-child(3) th{
padding: 15px 0 18px 23px;
}

#top #attention_area h3{
padding: 22px 0 20px;
text-align: center;
font-size: 15px;
}

#top #attention_area h3::before{
left: 0;
right: 0;
margin: 0 auto;
}

#top #attention_area p{
margin: 0 auto;
font-size: 12px;
line-height: 25px;
}

/*----------
02.繝ｩ繧､繝ｳ繝翫ャ繝�
----------*/

#lineup #content{
padding: 76px 0 0;
}

#lineup .main_contents{
padding: 0 0 48px;
}

#lineup .logo{
width: 72%;
margin: 0 auto;
padding: 12px 0 0;
left: 0;
right: 0;
position: absolute;
top: 0;
transition: all .4s;
}

#lineup header.active_fast .logo{
width: 66%;
z-index: 11;
padding: 14px 0 0;
}

#lineup .color_nav{
display: none;
}

#lineup.hot_chocolate #mainimg_area{
background: #eee1d3;
}

#lineup.hot_chocolate #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup #mainimg_area h2{
padding: 0 0 7px;
text-align: center;
font-size: 36px;
line-height: 43px;
}

#lineup #mainimg_area .h2_jp{
padding: 0 0 19px;
text-align: center;
font-size: 12px;
}

#lineup #mainimg_area p{
padding:0;
box-sizing: border-box;
font-size: 12px;
line-height: 20px;
}

#lineup.hot_chocolate #product_area{
padding: 0 0 5px;
}

#lineup #product_area .cnt_box{
padding: 0 0 30px;
}

#lineup #product_area .cnt_left{
float: none;
max-width: none;
width: auto;
padding: 0;
}

#lineup #product_area .package_sp{
margin: 0 auto 45px;
}

#lineup #product_area .package_sp .mainimg{
padding: 21px 0 17px;
}

#lineup.hot_chocolate #product_area .package_sp{
background:url(../images/lineup/hot_chocolate/mainimg_bg.png) repeat-x left top;
background-size: auto 100%;
}

#lineup.hot_chocolate #product_area .package_sp .mainimg{
background:url(../images/lineup/hot_chocolate/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}

#lineup #product_area .pic_package{
/* max-width: none;
width: 98%; */
width: 31.3%;
}

#lineup #product_area .cnt_right{
width: auto;
max-width: none;
margin: 0;
float: none;
}

#lineup #product_area .pic_lens{
max-width: 279px;
margin: 0 auto;
padding: 0 10px 10px;
}

#lineup #product_area .cnt_box .pic_title{
font-size: 12px;
}

#lineup #product_area .pic_mounting{
width: 92%;
margin: 0 auto;
}

#lineup #product_area .cnt_box p{
font-size: 10px;
padding: 22px 0 0;
}

#lineup #feature_area{
padding: 50px 0 20px;
}

#lineup #feature_area h3{
text-align: center;
padding: 27px 0 31px;
font-size: 24px;
}

#lineup #feature_area h3::before{
left: 0;
right: 0;
margin: 0 auto;
}

#lineup #feature_area .cnt_img{
width: 100%;
}

#lineup #feature_area .cnt_box .cnt_text{
width: 70.42%;
padding: 1px 0 0;
}

#lineup #feature_area .cnt_box{
margin: 0 auto 30px;
}

#lineup.matcha_latte #mainimg_area{
background: #e3f2ef;
}

#lineup.matcha_latte #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup.matcha_latte #product_area{
padding: 0 0 5px;
}

#lineup.matcha_latte #product_area .package_sp{
background:url(../images/lineup/matcha_latte/mainimg_bg.jpg) repeat-x left top;
background-size: auto 100%;
}

#lineup.matcha_latte #product_area .package_sp .mainimg{
background:url(../images/lineup/matcha_latte/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}

#lineup.coconuts #mainimg_area{
background: #f8e5e0;
}

#lineup.coconuts #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup.coconuts #product_area{
padding: 0 0 5px;
}

#lineup.coconuts #product_area .package_sp{
background:url(../images/lineup/coconuts/mainimg_bg.jpg) repeat-x left top;
background-size: auto 100%;
}

#lineup.coconuts #product_area .package_sp .mainimg{
background:url(../images/lineup/coconuts/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}

#lineup.lemonade #mainimg_area{
background: #fef9e5;
}

#lineup.lemonade #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup.lemonade #product_area{
padding: 0 0 5px;
}

#lineup.lemonade #product_area .package_sp{
background:url(../images/lineup/lemonade/mainimg_bg.jpg) repeat-x left top;
background-size: auto 100%;
}

#lineup.lemonade #product_area .package_sp .mainimg{
background:url(../images/lineup/lemonade/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}

#lineup.cider #mainimg_area{
background: #e6f0f5;
}

#lineup.cider #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup.cider #product_area{
padding: 0 0 5px;
}

#lineup.cider #product_area .package_sp{
background:url(../images/lineup/cider/mainimg_bg.jpg) repeat-x left top;
background-size: auto 100%;
}

#lineup.cider #product_area .package_sp .mainimg{
background:url(../images/lineup/cider/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}

#lineup.fruit_punch #mainimg_area{
background: #efebf4;
}

#lineup.fruit_punch #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup.fruit_punch #product_area{
padding: 0 0 5px;
}

#lineup.fruit_punch #product_area .package_sp{
background:url(../images/lineup/fruit_punch/mainimg_bg.jpg) repeat-x left top;
background-size: auto 100%;
}

#lineup.fruit_punch #product_area .package_sp .mainimg{
background:url(../images/lineup/fruit_punch/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}

#lineup.lassie #mainimg_area{
background: #f6f7f4;
}

#lineup.lassie #mainimg_area .main_img{
background: none;
padding: 30px 0 33px;
}

#lineup.lassie #product_area{
padding: 0 0 5px;
}

#lineup.lassie #product_area .package_sp{
background:url(../images/lineup/lassie/mainimg_bg.jpg) repeat-x left top;
background-size: auto 100%;
}

#lineup.lassie #product_area .package_sp .mainimg{
background:url(../images/lineup/lassie/mainimg01.jpg) no-repeat right top;
background-size: auto 100%;
}



/*----------
03.莨夂､ｾ讎りｦ�
----------*/

#company .main_contents{
padding: 0 0 48px;
}

#company .logo{
width: 72%;
margin: 0 auto;
padding: 12px 0 0;
left: 0;
right: 0;
position: absolute;
top: 0;
transition: all .4s;
}

#company header.active_fast .logo{
width: 66%;
z-index: 11;
padding: 14px 0 0;
}

#company #about_area{
padding: 0 0 49px;
}

#company #about_area h2{
font-size: 24px;
line-height: 28px;
text-align: center;
padding: 20px 0 0;
}

#company #about_area h2::before{
left: 0;
right: 0;
margin: 0 auto;
}

#company #about_area .cnt_box{
background: none;
padding: 0;
margin: 36px auto 0;
}

#company #about_area .cnt_box table th{
width: 44%;
padding: 14px 0 14px 7px;
font-size: 12px;
line-height: 20px;
}

#company #about_area .cnt_box table td{
font-size: 12px;
line-height: 20px;
padding: 14px 0 14px 10px;
}

#company #about_area .cnt_box table tr:nth-child(1) th{
padding: 24px 0 14px 7px;
}

#company #about_area .cnt_box table tr:nth-child(1) th::before{
border-color: #000;
width: 86%;
}

#company #about_area .cnt_box table tr:nth-child(1) td:before{
border-color: #000;
width: 100%;
}

#company #about_area .cnt_box table tr:nth-child(7) th{
padding: 14px 0 32px 7px;
}

#company #about_area .cnt_box table tr:nth-child(7) th:before{
border-color: #000;
width: 86%;
}

#company #about_area .cnt_box table tr:nth-child(7) td:before{
border-color: #000;
width: 100%;
}


/*----------
04.縺雁撫縺�粋繧上○
----------*/

#contact .main_contents{
padding: 0 0 48px;
}

#contact .logo{
width: 72%;
margin: 0 auto;
padding: 12px 0 0;
left: 0;
right: 0;
position: absolute;
top: 0;
transition: all .4s;
}

#contact header.active_fast .logo{
width: 66%;
z-index: 11;
padding: 14px 0 0;
}


#contact #about_area{
padding: 0 0 49px;
}

#contact #about_area h2{
font-size: 24px;
line-height: 28px;
text-align: center;
padding: 20px 0 0;
}

#contact #about_area h2::before{
left: 0;
right: 0;
margin: 0 auto;
}

#contact #about_area .cnt_box{
background: none;
padding: 0;
margin: 20px auto 0;
}

#contact #about_area .cnt_box .first_text{
font-size: 12px;
line-height: 25px;
padding: 0 0 17px;
}

#contact #about_area .cnt_box .first_text span{
max-width: 30px;
font-size: 11px;
line-height: 12px;
padding: 2px 0;
}

#contact #about_area .cnt_box table{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

#contact #about_area .cnt_box table th{
width: 100%;
padding: 20px 0 0 4px;
font-size: 12px;
line-height: 20px;
display: block;
text-align: left;
}

#contact #about_area .cnt_box table th span{
max-width: 30px;
font-size: 11px;
line-height: 12px;
padding: 2px 0;
margin: 0 0 0 7px;
}

#contact #about_area .cnt_box table td{
font-size: 12px;
line-height: 20px;
padding: 7px 0 0;
display: block;
}

#contact #about_area .cnt_box table tr:nth-child(1) th{
padding: 14px 0 0 4px;
}

#contact #about_area .cnt_box table tr:nth-child(3) th{
padding: 20px 0 0 4px;
}

#contact #about_area .cnt_box table tr:nth-child(4) th{
padding: 20px 0 0 4px;
}

#contact #about_area .cnt_box table tr:nth-child(6) td{
padding: 7px 0 22px;
}

#contact #about_area .cnt_box table tr:nth-child(1) th::before{
display: none;
}

#contact #about_area .cnt_box table tr:nth-child(1) td:before{
display: none;
}

#contact #about_area .cnt_box table tr:nth-child(7) th:before{
display: none;
}

#contact #about_area .cnt_box table tr:nth-child(7) td:before{
display: none;
}

#contact #about_area .cnt_box input[type="radio"] + label{
display: inline-block;
padding: 0 0 0 19px;
margin: 0 6px 0 0 ;
}

#contact #about_area .cnt_box input[type="radio"] + label::before{
border:1px solid #ccc;
width: 12px;
height: 12px;
top: 3px;
}

#contact #about_area .cnt_box input[type="radio"]:checked + label::after{
top: 5px;
left: 2px;
}

#contact #about_area .cnt_box input[type="text"]{
border: 1px solid #ddd;
}

#contact #about_area .cnt_box input[type="email"]{
border: 1px solid #ddd;
}

#contact #about_area .cnt_box textarea{
border: 1px solid #ddd;
}

#contact #about_area .cnt_box .attention_text{
font-size: 12px;
line-height: 20px;
text-align: left;
/*font-family: "UD譁ｰ繧ｴ R";*/
font-family:Helvetica,Arial,Meiryo,'繝｡繧､繝ｪ繧ｪ','繝偵Λ繧ｮ繝手ｧ偵ざ Pro w3','Hiragino Kaku Gothic Pro,osaka','�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け',sans-serif;
padding: 15px 0 16px;
}

#contact #about_area .cnt_box .contents_in{
width: auto;
}

#contact #about_area .cnt_box .privacy_check{
font-size: 12px;
padding: 0 0 20px;
}

#contact #about_area .cnt_box input[type="checkbox"] + label::before{
width: 12px;
height: 12px;
}

#contact #about_area .submit{
padding: 19px 0;
}

#contact .error{
font-size: 14px;
line-height: 18px;
padding: 7px 0 0;
}

#contact .error_box{
padding: 10px 0;
}

#contact .contact_confirm#about_area h2 span{
font-size: 16px;
}

#contact .contact_confirm#about_area td span{
padding: 0 0 0px 4px;
}

#contact .contact_confirm#about_area table tr:nth-child(1) td span{
padding: 0 0 0px 4px;
}

#contact .contact_confirm#about_area .cnt_box table tr:nth-child(3) th{
padding: 20px 0 0 4px
}

#contact .contact_confirm#about_area .cnt_box table tr:nth-child(4) th{
padding: 20px 0 0 4px
}

#contact .contact_confirm#about_area td span.text_box{
height: auto;
}


#contact .contact_thanks#about_area h2 span{
font-size: 16px;
}

#contact .contact_thanks#about_area .cnt_box .first_text{
padding: 0 0 20px;
}


/*----------
04.縺雁撫縺�粋繧上○
----------*/

#privacy .main_contents{
padding: 0 0 48px;
}

#privacy .logo{
width: 72%;
margin: 0 auto;
padding: 12px 0 0;
left: 0;
right: 0;
position: absolute;
top: 0;
transition: all .4s;
}

#privacy header.active_fast .logo{
width: 66%;
z-index: 11;
padding: 14px 0 0;
}


#privacy #about_area{
padding: 0 0 49px;
}

#privacy #about_area h2{
font-size: 24px;
line-height: 28px;
text-align: center;
padding: 20px 0 0;
}

#privacy #about_area h2::before{
left: 0;
right: 0;
margin: 0 auto;
}

#privacy #about_area dl{
margin: 20px auto 0;
padding: 40px 20px 20px;
}


}