@charset "UTF-8";
/* CSS Document */

body {margin:0;padding:0;font-family:"メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;font-size: 62.5%;line-height:200%;color:#666;background:#fff;overflow-x: hidden;-webkit-text-size-adjust: 100%;word-break: break-all;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0 0 1em;padding:0;}
a , a img { overflow: hidden; color:#666;text-decoration: none;border:none;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
a:hover,a:active { color: #e50012;border:none;outline:none;}
a:hover img , a:active img {opacity:.7;border:none;outline:none;}

body,html{}
h1 {font-weight:normal;}
h2, {font-weight:normal;}
h3, h4 {font-weight:bold;}
img {max-width: 100%;width:auto;height: auto;display:block;}

main:after,
article:after,
section:after,
div:after,
ul:after,
li:after,
dl:after {
  content: "";
  display: block;
  clear: both;
}

.pc {display:none;}


#wrap { overflow:hidden;}
#header {background-color:#000;background-size:cover;width: 100%;height:80px;position:relative}
#header .logo {width:70%;height:auto;position:absolute;top:15px;left:0;}
#header .login {width:100px;height:auto;}
.head_in {width:95%;margin:0 auto;position:relative}


/* ドロワーナビ */
.drawer-hamburger {z-index:14;top: 1%;background:#e50012;}
.drawer-nav {z-index:12;}
.drawer-open #contents , .drawer-open #sp_head .head_logo_sp.block {opacity:.5;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {background:#fff;height: 3px;}
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {background:#b4b4b5;}
.drawer-hamburger:hover {background:#e50012; border-radius:50%;}
.drawer--right.drawer-open .drawer-hamburger {right:0;}
.drawer-nav {color: #333;background-color:rgba(255,255,255,.95);padding-top: 60px;}
.drawer-menu li {border-bottom: 1px solid #eee;font-family: 'Stoke', sans-serif;font-size:1.3em;}
.drawer-menu li:first-child {border-top: 1px solid #eee;}
.drawer-menu li a {color:#333;display: block;padding: 1em;position:relative;}
.drawer-menu li a:before {content:"\f125";font-family:ionicons;font-size:12px;position:absolute;top:38%;right:1.5em;color:#ccc;}
.drawer-overlay {background:rgba(238,238,238,.7);}

#main_wrap { padding:0 2% !important;margin:auto;}

#main {padding:1% 0 2%; width:100%;max-width:1024px;margin:0 auto;}
#main p {font-size:1.5em;line-height:1.8;}
#main .caption {font-size:1.3em;display:block;line-height:1.8;margin-top:.5em;}
.page #main h2 {line-height:1.3em;width:100%;padding:2em 0 1.5em;margin:0 auto; font-size:23px; text-align:center;}
.page #main h2 span{ font-size:15px;line-height:1.3em;}
.mainfoot {margin:60px 0 0;}
.mainfoot h3 {font-size:2em;text-align:center;padding-bottom:1em;}
.mainfoot .member_link li a {font-size:1.6em;color:#fff;max-width:270px;width:55%;text-align:center;padding:.8em 0;display:block;margin:1em auto;}
.mainfoot .member_link li:first-child a {background:#026636;}
.mainfoot .member_link li:last-child a {background:#9aca57;}

.about .sub {margin:40px 0;}
.about .sub p {padding-top:5em;}
.about .image {margin:0;max-width:420px;}
.about .image.right {float:right;margin-left:2em;}
.about .image.left {float:left;margin-right:2em;}

.system .area {margin-bottom:4.5%; width:100%;}
.system .area h3 {font-size:2em;line-height:2;padding:0 3% 1%;}
.system .area h3:before {content:"";background:url(../images/icon01.png) no-repeat left center;background-size:cover;width:25px;height:25px;display: inline-block; vertical-align:middle;margin-top:-4px;margin-right:10px;}
.system .area .box_left {padding:0 3%;margin:1% auto; width:96%;}
.system .area .box_right { width:65%; padding-left:2%;margin:2% auto 3%;}
.system .area .box_right img { width:100%; margin:auto;vertical-align:middle !important;}
.system_ttl {font-size:22px !important; font-weight:bold; color:#ff8900; line-height:1.4em !important;}
.system .area .box {padding:0 3%;}
.system .area .box:nth-child(n+3) {margin-top:4em;}
.system .area li {font-size:1.5em;margin:.5em 0;}
.system .area ul li {list-style:disc;margin-left:20px;}
.system .area ol {counter-reset: number 0;}
.system .area ol li {position:relative;padding-left:30px;margin:1em 0; line-height:1.6em !important;}
.system .area ol li:before {counter-increment: number 1;content: counter(number) ;display:block;float:left;width:20px;height:20px;line-height:22px;font-size:12px;background:#f0861b;border-radius:50%;color:#fff;text-align:center;position: absolute;top: 0;left: 0;}
.system .area ol li span {background:#e50012;color:#fff;padding:.1em .3em 0;display:inline-block;}
.system .area h4 {font-size:2em;line-height:2;padding:0 3% 1%;}
.system .area h4:before {content:"";background:url(../images/icon02.png) no-repeat left center;background-size:cover;width:25px;height:25px;display: inline-block; vertical-align:middle;margin-top:-4px;margin-right:10px;}
.system .area dl {margin-top:1em;}
.system .area dt {border:2px dotted #b5b4b5;width:30%;padding:.4em 0 ;text-align:center;font-size:1.5em;display: inline-block;vertical-align: top;margin-top: .2em;}
.system .area dd {display: inline-block;vertical-align: top;width: 60%;margin-left: 2%;padding:.4em 0 ;}


.mame { width:100%; }
.mame li {vertical-align:top !important; width:47%; display:inline-block; padding:1% 0;margin:0 1% !important;}
.mame li img { width:90%; margin:3% auto 1%;}

.box30 {
    margin: 5px auto;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
	text-align:center !important;
	width:100%;
}
.box30 .box-title {
    font-size: 1.2em;
    background: #fff000;
    padding: 10px 4px;
    text-align: center;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.05em;
	vertical-align:middle;
}
.box30 p {
    padding: 3% 0 15px; margin:auto;
	text-align:left;
	font-size:12px !important; width:90%; line-height:1.4em;
	min-height:110px;
}



.boder {height:12px; margin:5% 3%; background:url(../images/boder_line.png) ; background-repeat:repeat;}

.company dl:first-child {border-top:1px dotted #b5b4b5;}
.company dl { width:100%;border-bottom:1px dotted #b5b4b5;padding:1em 0;font-size: 1.5em;line-height: 1.6;}
.company dt {float:left;width:20%;padding:.5em;}
.company dd {border-left:1px solid #b5b4b5;margin-left:9em;padding:.5em 0 .5em 1.5em;position:relative;}

.division_list {width:100%; text-align:center; margin:auto;}
.division {width:100%; text-align:left; margin-bottom:1%;}
.division li { width:48.5%; display:inline-block; font-size:1.5em;line-height: 1; text-align:left; margin-right:.5%; margin-bottom:3%;}

.division li a:hover img{  border-radius:50%;}


.inquiry dl {border:1px solid #9f9e9f;margin-top:-1px;display: table;}
.inquiry dt {background:#eee;}
.inquiry dt , .inquiry dd {padding:1.5em 1em;font-size:15px;display:table-cell; vertical-align:middle;} 
.inquiry dt span {color:#e94921;}
.inquiry dd span {margin-right:1em;display:inline-block; vertical-align:middle;}

.inquiry dt {width:200px;border-right:1px solid #9f9e9f;}
.inquiry dd {width:750px;}

input , textarea {width:94%;padding:1em;font-size:1em;color:#666;border:solid 1px #ccc;background:#fff;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow:none;border-radius:0;-webkit-border-radius:0;-moz-border-radius: 0;}
textarea {height:10em;}
input[type="radio"] {width:auto;}

.submit {margin-top:3em;}
.submit button {background:#026636;color:#fff;border:none;margin:0 auto;display: block;padding:.6em 0;width:15em;text-align:center;font-size:1.1em; cursor: pointer;text-decoration:none;}
.submit button:hover {opacity: .7;}

input:focus , textarea:focus , select:focus{outline: none;background:#fff;}
input[type="button"] , button[type="button"] {background:none;border:none;-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);}


#footer {width:100%;text-align:center;padding:0%;margin-top:7em; }
#footer .copy { padding:1% 0;font-size:1.2em;}


#googlemap {
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
border-top:4px solid #000;
border-bottom:4px solid #000;
margin-bottom:2%;
}
#googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;

}

.footer_map {width:100%; margin:5% 0 8%;}

.manual {width:95%;}

/* 自販機ページ */

.swiper-slide { cursor: pointer; }
.baner_nav { padding:5px 2%; margin-top:1%;}
.swiper-wrapper .swiper-slide img { padding: 0;text-align:center; margin:10px auto;}

.zihanki { width:100%; text-align:center !important;margin:auto !important;}
.zihanki li {list-style-type:none !important;}
.zihanki .left { width:93%;vertical-align:top !important; margin:auto !important; text-align:left; }
.zihanki .right { width:85%; text-align:center !important;}
.left .zihanki_ttl {font-size:20px !important; font-weight:bold; margin-top:3%; line-height:1.2em !important;}
.left p {font-size:14px !important; line-height:1.5em; margin-top:-4%; padding:10px;margin-right:2%;}
.zihanki .left .omakase {width:100%; margin: 2% auto 5%;}

.otoiawase { background-size:cover; margin:2% 0; background-color:#9ed2e8;}
.otoiawase02 {padding:3%;margin:auto; text-align:center;}
.otoiawase_list { background:url(../images/otoiawase_bg.jpg) no-repeat; background-size:cover; 
width:95%;padding:2%; margin:auto; text-align:center;}
.otoiawase_list li h5 { display: inline-block;background-color:rgba(255,255,255,.8);padding:1% 3em;font-size:16px; text-align:center; margin:auto; font-weight:bold;}
.otoiawase_list li img {width:90%; padding:1%; margin:auto;}
.otoiawase_list li {list-style-type:none !important;}


/* 駄菓子ページ */
.area {width:95%; margin:auto;}
.system .area h6 {font-size:2em;line-height:2;padding:0 3% 1%; font-weight:bold;}
.system .area h6:before {content:"";background:url(../images/icon03.png) no-repeat left center;background-size:cover;width:25px;height:25px;display: inline-block; vertical-align:middle;margin-top:-4px;margin-right:10px;}

.dagashi_list {width:100%;}
.dagashi_list li { list-style:none;vertical-align:top !important; width:47%; display:inline-block; padding:1% 0;margin:0 1% !important;}
.dagashi_list li img { width:90%; margin:3% auto 1%;}

.box50 {
    margin: 5px auto; padding-top:2%;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
	text-align:center !important;
	width:100%;
	min-height:240px !important;
}
.box50 .box-title {
    font-size: 15px;
    padding: 10px 3%;
    text-align: left;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.05em;
	vertical-align:middle;
}
.box50 p {
    padding: 3% 0; margin:auto;
	text-align:left;
	font-size:14px !important; width:90%;
}
.box50 p span { font-size:16px; font-weight:bold; color:#F00;}


.otoiawase_da { background-size:cover; margin:2% 0; background-color:#fc7960;}
.otoiawase02_da {padding:3%;margin:auto; text-align:center;}
.otoiawase_list_da { background:url(../images/otoiawase_bg02.jpg) no-repeat; background-size:cover; 
width:95%;padding:2%; margin:auto; text-align:center;}
.otoiawase_list_da li h5 { display: inline-block;background-color:rgba(255,255,255,.8);padding:1% 3em;font-size:16px; text-align:center; margin:auto; font-weight:bold;}
.otoiawase_list_da li img {width:90%; padding:1%; margin:auto;}
.otoiawase_list_da li {list-style-type:none !important;}

.dagashi { width:100%; margin:auto !important;}
.dagashi li {list-style-type:none !important;}
.dagashi .left { width:100%;vertical-align:top !important; margin:auto !important; text-align:left; }
.area .dagashi.sp li img { width:93%;margin:auto;padding-right:3% !important; }

.annai {width:100%; margin:-1% auto 8%;}
.annai p {margin:.5em auto 0; text-indent:.5em;text-align:left;font-size:16px !important; line-height:1.5em; font-weight:bold;}
.annai li {width: 100%;list-style-type: none !important; font-size:14px; line-height:2em; text-align:center !important; margin:auto;}
.annai li img {width:90%;margin:auto;padding-right:20% !important; }

#dagashimap {width:95%;position: relative;padding-bottom: 36%;height: 0;overflow: hidden;margin:0 auto 2%;
}
#dagashimap iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;
margin:auto;
}

.swiper-container { width:95%;}

/* レシピページ */
.page .recipe h2 {line-height:1.3em;width:100%;padding:2em 0 1.5em;margin:0 auto !important; font-size:23px; text-align:center;}
.page .recipe h2 span{ font-size:15px;line-height:1.3em;}
.page .recipe h2:before {content:"";background:url(../images/icon01.png) no-repeat left center;background-size:cover;width:25px;height:25px;display: inline-block; vertical-align:middle;margin-top:-4px;margin-right:10px;}

.movie {font-size:20px !important; color:#FF8900; font-weight:bold; margin-bottom:1%;}
.movie span {font-size:16px;}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
     height: 50%;
}


/* お問い合せページ */
.contact {width:100%; margin:2% auto;}
.contact ul { width:90%;border-top: double 4px #333 ;border-bottom: double 4px #333 ;padding:2% 0; margin:auto;}
.contact .left {width:90%; margin:1% auto;}
.contact .right {width:90%; margin:1% auto;margin-top:5%;}
.contact  h4 {font-size:1.8em;line-height:2;padding:0 3% 1%;}
.contact  .mail { width:100%;margin:0% 2% 2%; text-align:left;}
.contact .tel { width:100%;margin:2.5% 2% 2%; text-align:left;}


@media screen and (min-width:380px) {
.division li { width:49%; display:inline-block; font-size:1.5em;line-height: 1; text-align:left; margin-right:.5%; margin-bottom:3%;}

}

@media screen and (min-width:480px) {
#header {height:90px;}
.box30 p {min-height:85px;}

.otoiawase_list li h5 {padding:1%;font-size:18px;}
.otoiawase_list li img {width:75%; padding:1%; margin:auto;}
.dagashi_list li { width:47.5%;}
.box50 { min-height:300px !important;}
.otoiawase_list_da li h5 {padding:1%;font-size:18px;}
.otoiawase_list_da li img {width:75%; padding:1%; margin:auto;}
.dagashi_list_da li { width:47.5%;}
}

@media screen and (min-width:568px) {
#googlemap {padding-bottom: 50%;margin-bottom:1%;}


#header .logo {width:50%;}

.page #main h2 { font-size:27px; }
.page #main h2 span{ font-size:18px; }

.page #main h7 { font-size:27px; }
.page #main h7 span{ font-size:18px; }

.zihanki .left img { width:50%;}
.zihanki .left .zihanki_ttl {font-size:24px;}
.zihanki .left .omakase {width:90%;}

}

@media screen and (min-width:768px) {
#header {height:90px;}
#header .logo {width:36%;}

.pc {display:block;}
.sp {display:none;}

.navi {position:absolute;right:0;top:35px;}
.navi li {display:inline-block; vertical-align:middle;font-size:1.25em;line-height:1;position:relative;}
.navi li a {display: block;color:#fff;font-size:1.25em;padding:.2em 1em;border-left:1px solid #fff;}
.navi li a:hover {color:#e50012;}
.navi li:last-child a {padding-right:0;}
.navi li:first-child a {border:none;}

/* Submenu */

ul li .sub_navi{position: absolute;top: 20px;left: 0;}
ul li .sub_navi li{display: block;width:170px;	}
ul li .sub_navi li a{background-color: #e50012;color: #fff;font-size:16px;line-height:1.7em;}
ul li .sub_navi li a:hover{background-color: #ddd;}
.navi ul li .sub_navi{display: none;}
.navi ul li:hover .sub_navi{display: block;}

.division li { width:32%; display:inline-block; font-size:1.5em;line-height: 1; text-align:left;margin-bottom:0;}

.system .area .box_left {padding:0 3%;margin-top:2%; width:57%; display:inline-block; vertical-align:top;}
.system .area .box_right { width:33%; padding-left:2%;margin-top:2%; display:inline-block;}

.mame li { width:23%; display:inline-block; padding:1% 0;margin:0 5px !important;}
.box30 p { min-height:110px;}

.page #main h2 { font-size:28px; }
.page #main h2 span{ font-size:20px;}

.page #main h7 { font-size:28px; }
.page #main h7 span{ font-size:20px;}

.zihanki { width:100%; }
.zihanki .left { width:62%; display:inline-block;vertical-align:top !important;}
.zihanki .left img { width:50%; text-align:left;}
.zihanki .right { width:30%; display:inline-block;}
.zihanki .right img { width:96%; text-align:left;}
.zihanki .left .zihanki_ttl {font-size:24px !important; font-weight:bold; margin-top:3%;}
.zihanki .left p {font-size:14px !important; line-height:1.5em; margin-top:-2%; padding-right:10px;}
.zihanki .left .omakase {width:95%; margin-top:2%; text-align:left;}
.otoiawase_list li h5 {font-size:22px;}

.dagashi_list li {width:22.5%;}
.box50 {min-height:280px !important;}
.otoiawase_list_da li h5 {font-size:22px;}

.manual {width:70%;}
.annai {width:100%; margin:-3% auto 6%;}
.annai p { text-indent:0em;text-align:left;margin-left:1em; margin-bottom:.5em;font-size:16px !important; line-height:1.5em; font-weight:bold;}
.annai li { width: 30%;float: left;list-style-type: none !important; font-size:14px; line-height:2em;}
.annai li img {width:100%;}
.contact .left {width:46%; float:left;margin-right:4%;}
.contact .right {width:46%; float:left;margin-left:2%;margin-top:1%;}
.contact ul { width:100%;}
.contact .tel {margin:2.3% 2% 2%;}

.swiper-container { width:98%; margin:auto;}
}


	
@media screen and (min-width:900px) {
#header .logo {width:30%;}


#googlemap {padding-bottom: 40%;}

}


@media screen and (min-width:1024px) {
#header .logo {width:25%;}

#main_wrap { padding:0 ;} 

.box30 p { min-height: auto;}
.otoiawase02 { max-width:1024px;}
.otoiawase_list  {width:90%;}

.otoiawase02_da { max-width:1024px;}
.otoiawase_list_da  {width:95%;}

.manual {width:50%;}
.annai li {width: 31.2%;float: left;list-style-type: none !important; font-size:14px; line-height:2em; margin-right:2px;}
}

@media screen and (min-width:1400px) {
#header .logo {width:15%;}
#googlemap {padding-bottom: 30%;}
}

#wrap {overflow-x:hidden !important;}