@charset "UTF-8";
* { margin: 0; padding: 0; }
/* body */
body { margin: 0; padding: 0; background-color: #fff; text-align: center; color: #444; font-size: 13px; font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; overflow-x: hidden; }
img { margin: 0; padding: 0; border: 0; }

/* common */
.box-left { float: left; }
.box-right { float: right; }
.box-inline { display: inline-block; }
.bg-gray { background: #f4f4f4; }
.bg-gray:after { content: ""; display: block; clear: both; }
.bg-yellow { background: #faf5be; }
.bg-yellow:after { content: ""; display: block; clear: both; }
.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-center img+img{margin-left:5px;}
.txt-right { text-align: right; }
.fnt-sans-serif { font-family: "Helvetica Neue" , Helvetica; } /*ゴシック*/
.fnt-serif { font-family: Georgia, Times, Century, Garamond, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } /*明朝*/
.fnt-serif-num { font-family: Times New Roman, Times, Century, Garamond, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 108%; } /*明朝・数字*/
.bg-underline-gray { background: url(../images/common/bg_underline_gray.png) left bottom no-repeat; }
.txt-orange { color: #ff7f00; }
.width-full { white-space: nowrap; }
.ar{text-align:right;}
.al{text-align:left;}
.ac{text-align:center;}



/* header
======================================================= */
#header-wrap { margin: 0 auto; padding: 0; width: 100%; height: 95px; text-align: center; background: #fff; background-size: auto 100%; }
#header-main { margin: 0 auto; width: 1000px; min-width: 1000px; }
#header-main .logo-sato { margin: 15px 240px 0 0; width: 220px; display: inline-block; }
#header-main .logo-sato:hover { filter:alpha(opacity=70); /* IE 6,7*/ -ms-filter: "alpha(opacity=70)"; /* IE 8,9 */ -moz-opacity:0.7; /* FF , Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ opacity:0.7; zoom:1; /*IE*/ }

.menu-container { margin: 65px 0 0; display: inline-block; vertical-align: top; }
.menu-container .menu { margin: 0; padding: 0; list-style: none; }
.menu-container .menu .menu-item { display: inline-block; font-size: 116%; font-family: 'Helvetica neue', Helvetica, 'Arial'; font-weight: bold; }
.menu-container .menu .menu-item a { padding: 0 15px; color: #0046a5; text-align: center; text-decoration: none; }
.menu-container .menu .menu-item a:hover { color: #e67a22; text-decoration: none; }
.menu-container .menu .menu-item:last-child a {  }

.icon-hamburger { display: none; }

/* Contents
======================================================= */
#contents { width: 100%; background: #fff; }

/* Title
======================================================= */
#subtitle-wrap { margin: 0 auto; padding: 0; width: 100%; height: 300px; text-align: center; background: url(../images/common/bg_subtitle.jpg) center top no-repeat; background-size: auto 100%; }
#subtitle-main { margin: 0 auto; width: 1000px; min-width: 1000px; }
#subtitle-main h1 { margin: 0; padding: 0; }
#subtitle-main .h1-proudcts-txt { display: inline-block; width: 440px; vertical-align: top; margin: 60px 0 0; }
#subtitle-main .h1-proudcts-img { display: inline-block; width: 560px; vertical-align: top; margin: 15px 0 0; }
#subtitle-main .h1-satochan-txt { display: inline-block; width: 460px; vertical-align: top; margin: 60px 0 0; }
#subtitle-main .h1-satochan-img { display: inline-block; width: 420px; vertical-align: top; margin: 15px 0 0 100px; }
#satohap-wrap { margin: 0 auto 40px; padding: 0; width: 100%; height: 280px; text-align: center; background: url(../images/satohap/bg_h1_satohap.jpg) center top no-repeat; background-size: auto 100%; }
#subtitle-main .h1-satohap-txt { display: inline-block; width: 600px; vertical-align: top; margin: 55px 0 0; }
#subtitle-main .h1-satohap-img { display: inline-block; width: 400px; vertical-align: top; margin: 40px 0 0; }
#yunker-wrap {
  margin: 0 auto; 
  padding: 0;
  width: 100%;
/*  height: 280px; */
}
#yunker-wrap img{
  width: 100%;
}

#subtitle-main .h1-yunker-txt { display: inline-block; width: 830px; vertical-align: top; margin: 50px 0 0; }
#subtitle-main .h1-yunker-img { display: inline-block; width: 170px; vertical-align: top; margin: 25px 0 0; }
/*#maintitle-wrap { margin: 0 auto; padding: 0; width: 100%; height: 450px; text-align: center; background: url(../images/top/bg_maintitle.jpg) center top no-repeat; background-size: auto 100%; }*/
#maintitle-wrap img{
  width: 100%;
}
#maintitle-wrap .h1-top-txt { display: inline-block; width: 300px; vertical-align: top; margin: 120px 0 0 60px; }
#maintitle-wrap .h1-top-img { display: inline-block; width: 500px; vertical-align: top; margin: 65px 0 0 10px; }
#maintitle-wrap .h1-top-sp { display: none; }
#subtitle-main .h1-topics-txt { display: inline-block; width: 320px; margin: 60px 670px 0 0; }

/* Pankuzu
======================================================= */
#pankuzu { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: left; font-size: 108%; list-style: none; }
#pankuzu li { margin: 0 0 0 15px; padding: 0; display: inline-block; }
#pankuzu a { color: #0046a5; text-decoration: none; }
#pankuzu a:hover { color: #e67a22; text-decoration: none; }

/* Products Lineup
======================================================= */
#products-lineup { margin: 40px auto 0; width: 1000px; min-width: 1000px; text-align: left; }

/*Category Menu*/
#menu { margin: 25px 0 0; width: 240px; }
#menu .btn-toggle { width: 240px; }
#menu .h-category { padding-left: 5px; font-size: 153.9%; border-bottom: 5px solid #2950a3; display: block; width: 240px; cursor: default; }
#menu .btn-toggle a { color: #444; font-weight: bold; text-decoration: none; }
#menu ul { list-style-type: none; margin-left: 5px; background: #fff; }
#menu ul li { margin: 4px 0 0; border: 1px solid #dddddd; vertical-align: middle; transition: 1s; -webkit-transition: 1s; }
#menu ul a:link, #menu ul a:visited {
  /* display: block; */
  display: flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
  color: #777;
}
#menu ul a:hover, #menu ul a:active { color: #0046a5; background: #eee; }
#products-lineup .open { }
#products-lineup .close { }
#products-lineup .active { }
#menu .ic-category {
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  object-fit: contain;
}
#menu strong { display: inline-block; width: 180px; font-size: 108%; vertical-align: middle; color: #777; }
#menu small { display: inline-block; width: 180px; font-size: 93%; font-weight: bold; vertical-align: middle; }
#menu .close { display: none; }
.is-fixed { position: fixed; top: 0; width: 240px; }
.is-hide { transform: translateY(-100%); }

/* Products-Catalog */
#products-catalog { position: static; margin: 0 0 0 260px; width: 740px; text-align: left; }
#products-catalog .txt-category { margin: 0 0 15px; padding: 15px; width: 710px; color: #fff; font-size: 153.9%; font-weight: bold; background: #2a50a3; }
.products-catalog-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#products-catalog dl {
  /* display: inline-block; */
  display: block;
  margin: 0 0 20px;
  width: 170px;
  /* vertical-align: top; */
}
/* #products-catalog .dl-left { margin: 0 0 20px; } */
#products-catalog dt { font-size: 131%; font-weight: bold; text-align: center; border: 1px solid #ddd;position: relative; }
.product-line .new:before,
#products-catalog .new:before {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 35px solid #f00;
  border-right: 35px solid transparent;
}
.product-line .new:before,
.product-line .new:after{
  top:0px !important;
}

.product-line .new:before{
  border-top: 50px solid #f00;
  border-right: 50px solid transparent;
}
.product-line .new:after{
  content: "PICKUP" !important;
  left: 0 !important;
  top: 5px !important;
}

.product-line .new:after,
#products-catalog .new:after {
  content: "NEW!!";
  position: absolute;
  top: 70px;
  left: 0;
  font-size: xx-small;
  color: #FFF;
  /*background-color: #000;*/
  transform: rotate(-45deg) translate(-5px, 5px);
}

#products-catalog dt strong { display: table-cell; width: 170px; padding: 0 5px; height: 70px; background: #eee; vertical-align: middle; }
/* #products-catalog dt .img-thumbnail {
  width: 100%;
  height: auto;
} */
#products-catalog dt small { font-weight: normal; }
#products-catalog dd { padding: 10px 0; color: #e87a06; }
#products-catalog a {
  display: block;
  width: 100%;
  height: 100%;
  color: #0046a5;
  text-decoration: none;
}
#products-catalog a:hover { color: #e87a06; text-decoration: none; opacity: 0.7; }
#products-catalog .txt-lidocaine { font-size: 85%; line-height: 116%; }
#products-catalog .img-space { display: block; height: 30px; }

/* Products Detail
======================================================= */
#products-detail { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: left; }
#products-detail .cate-label {
  margin: 35px 0 30px 15px;
  font-size: 123.1%;
  color: #004aa5;
  font-weight: bold;
}
/* 黄文字 #products-detail h2 { padding: ; font-size: 167%; color: #e87a06; } */
#products-detail h1 { margin: 0 0 45px 0; font-size: 277%; color: #004aa5; }
#products-detail .products-left { display: inline-block; width: 500px; text-align: center;position: relative; }
#products-detail .img-products-detail { width: 500px; }

#products-detail .new:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 80px solid #f00;
  border-right: 80px solid transparent;
}
#products-detail .new:after {
  content: "NEW!!";
  position: absolute;
  top: 0px;
  left: 0;
  font-size: x-large;
  color: #FFF;
  /*background-color: #000;*/
  transform: rotate(-45deg) translate(-12px, 5px);
}



#products-detail .products-left small { color: #434343; font-size: 138.5%; font-weight: bold; }
#products-detail .products-right { display: inline-block; width: 500px; vertical-align: top; }
#products-detail h4 { padding: 10px 15px; font-size: 153.9%; color: #fff; background: #2950a3; } /*PRODUCT OVERVIEW*/
#products-detail dl { margin: 0 0 40px 15px; }
#products-detail dl dt { margin: 20px 0 15px; font-size: 138.5%; font-weight: bold; color: #264da5; }
#products-detail dl dd { margin: 0 10px 15px 20px; font-size: 116%; font-weight: bold; display: list-item; list-style: none outside url(../images/common/ic_double_arrow.png); }

#products-detail h5 { margin: 0 0 20px; padding: 10px 15px; font-size: 153.9%; color: #fff; background: #2950a3; } /*ACTIVE INGREDIENTS*/
#products-detail .toggle-item { display: inline-block; width: 440px; }
#products-detail input[type="button"] { background-color: #2950a3; border-style: none; color: #fff; font-size: 116%; font-weight: bold; cursor: pointer; text-align: right; }
#products-detail .products-right p { margin: 20px 0 20px 15px; font-size: 123.1%; line-height: 167%; }

#products-detail table { margin: 0 auto 40px; padding: 0; width: 470px; font-size: 108%; line-height: 138.5%; border-collapse: collapse; }
#products-detail table tr { }
#products-detail table th { padding: 0.5em; font-weight: bold; background: #ddd; border: 1px #ddd solid; }
#products-detail table td { padding: 0.5em; background: #fff; border: 1px #ddd solid; }

#products-detail .arrow-down { position: relative; display: inline-block; padding-left: 20px; margin-left: 20px; } /* ▼アイコン */
#products-detail .arrow-down::before { content: ''; width: 6px; height: 6px; border: 0; border-top: solid 1px #004aa5; border-right: solid 1px #004aa5; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 50%; left: 0; margin-top: -4px; }

#ETC hr { margin: 10px 0; border: none; border-top: 1px #eaeaea solid; height: 1px; }

#products-detail .sumtable{border:1px solid #000;margin-top:20px;}
#products-detail .sumtable tr{border-bottom:1px solid #333;margin-top:20px;}
#products-detail .sumtable td,
#products-detail .sumtable th{border:none;}
/* footer
======================================================= */
#footer-wrap { clear: both; margin: 0 auto; padding-bottom: 60px; width: 100%; text-align: center; background: url(../images/common/bg_footer.jpg) center top no-repeat; background-size: ; }
#footer-main { margin: 0 auto; padding: 0; width: 1000px; min-width: 1000px; text-align: left; }
#footer-main ul { display: inline-block; margin: 170px 0 0 100px; list-style-type: none; font-size: 116%; font-weight: bold; }
#footer-main ul li { margin: 20px 0 0; }
#footer-main a { color: #fff; text-decoration: none; }
#footer-main a:hover { color: #e67a22; text-decoration: none; }
#footer-main .logo-chpa { display: inline-block; margin: 0 0 0 290px; width: 110px; vertical-align: bottom; }
#footer-main .copyright { margin: 120px auto 0; text-align: center; color: #fff; font-size: 100%; font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif; }


/* 背景斜め
======================================================= */
#slanting-wrap { clear: both; position: relative; overflow: hidden; margin: 10% 0; padding: 80px 0; }
#slanting-wrap:before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 80%; margin: 3% -10% 0; background: #2950a3; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); z-index: -1; }

/* Satochan Detail
======================================================= */
#satochan-detail { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: left; }
#satochan-detail h2 { margin: 40px 0 30px; padding: 0 0 15px; font-size: 334%; color: #004aa5; background: url(../images/satochan/bg_underline_gray.png) left bottom no-repeat; }
#satochan-detail h3, h4, h5, h6 { margin: 90px 0 30px; padding: 0 0 15px; font-size: 334%; color: #004aa5; background: url(../images/satochan/bg_underline_gray.png) left bottom no-repeat; }
#satochan-detail .img-satochan { display: inline-block; width: 450px; margin: 0 0 0 20px; border: 1px solid #ffe6a3; }
#satochan-detail .img-satokochan { display: inline-block; width: 450px; margin: 0 0 0 50px; border: 1px solid #ffe6a3; }
#satochan-detail .p-shoulder { margin: 0 auto 10px; width: 940px; font-size: 216%; color: #e57906; font-weight: bold; }
#satochan-detail .p-history { clear: both; margin: 40px auto 0; padding: 30px; width: 910px; background: #fef8e8; -webkit-box-shadow: 2px 2px 4px gray; -moz-box-shadow: 2px 2px 4px gray; box-shadow: 2px 2px 4px gray; }
#satochan-detail .p-history p { display: inline-block; width: 230px; font-size: 138.5%; color: #333; }
#satochan-detail .p-history strong { display: inline-block; width: 230px; margin: 0 0 20px; padding: 0 0 10px 15px; font-size: 200%; color: #892b45; background: url(../images/satochan/bg_underline_red.png) left bottom no-repeat; }
#satochan-detail .img-history { float: right; width: 355px; margin: 0 60px 0 0; }
#satochan-detail .p-activity { margin: 40px auto 0; padding: 30px; width: 950px; background: url(../images/satochan/bg_activity.jpg) center top no-repeat; }
#satochan-detail .p-activity p { display: inline-block; margin: 40px 0 0 100px; width: 320px; font-size: 138.5%; color: #333; font-weight: bold; vertical-align: top; }
#satochan-detail .img-activity { display: block; width: 305px; }
#satochan-detail .txt-attention { display: inline-block; margin: 0 0 0 30px; font-size: 138.5%; color: #004aa5; }
#satochan-detail .p-symbol { margin: 0 0 20px 30px; width: 490px; font-size: 138.5%; line-height: 167%; color: #333; font-weight: bold; }
#satochan-detail .p-symbol strong { color: #e57906; font-size: 189%; }
#satochan-detail .img-symbol-right { float: right; width: 310px; margin: 90px 80px 40px 0; }
#satochan-detail .symbol-bottom { clear: both; margin: 0 auto; padding: 40px 0; width: 950px; text-align: center; background: url(../images/satochan/bg_symbol_bottom.jpg) center top repeat-x; }
#satochan-detail .img-symbol-bottom { display: inline-block; width: 120px; margin: 0 30px; }
#satochan-detail .img-kiddie-ride { float: right; width: 410px; margin: 0 80px 0 0; }
#satochan-detail .img-goods { display: inline-block; width: 158px; margin: 0; }
#satochan-detail .p-kiddie-ride { margin: 0 0 20px 30px; width: 450px; font-size: 138.5%; line-height: 167%; color: #333; font-weight: bold; }
#satochan-detail .p-history:after { content: ""; display: block; clear: both; }
#satochan-detail .p-kiddie-ride:after { content: ""; display: block; clear: both; }
#satochan-detail .goods-bottom { clear: both; margin: 0 auto 40px; padding: 0; width: 950px; text-align: center; }

/* SATOHAP
======================================================= */
#landing-detail { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: left; }
#landing-detail h2, h3, h4, h5, h6 { margin: 40px 0; padding: 0 0 15px; font-size: 334%; color: #004aa5; }
#landing-detail .txt-relieve-pain { margin: 100px 0 40px; font-size: 293%; }
#landing-detail p { margin: 0 auto; padding: 0; width: 940px; font-size: 138.5%; line-height: 36px; color: #333; }
#landing-detail p strong { font-size: 146.5%; }
#landing-detail .graph-satohap-lidocaine { display: inline-block; margin: 80px 0 60px 120px; width: 340px; }
#landing-detail .graph-satohap { display: inline-block; margin: 80px 0 60px 60px; width: 340px; }
#landing-detail .illust-satohap { float: right; width: 430px; margin: 0 30px 0 0; }
#landing-detail .illust-satohap:after { content: ""; display: block; clear: both; }
#landing-detail .product-line {
 list-style-type: none; 
 margin: 0 auto; 
 padding: 0; 
 width: 950px;
}
#landing-detail .product-line li {
 clear: both; margin: 0 0 40px; padding: 0; height: 245px; background: url(../images/common/bg_product_line_gray.png) right bottom no-repeat; border: 1px solid #aaa; 
 position: relative; 
}
#landing-detail .product-line li:hover { text-decoration: none; background: url(../images/common/bg_product_line_hover.png) right bottom no-repeat; border: 1px solid #e57906; }
#landing-detail .product-line strong { display: inline-block; font-size: 232%; margin: 25px 0 0 25px; }
#landing-detail .product-line em { display: inline-block; font-size: 138.5%; font-style: normal; color: #333; margin: 5px 0 0 25px; }
#landing-detail .product-line .img-product-line-satohap {
  float: right;
  width: auto;
  height: 100%;
  padding: 0 85px 0 0;
}
#landing-detail .product-line .btn-see-detail {
  display: block;
  width: 123px;
  margin: 35px 0 0 25px;
  background-color: #197cd1;
  border-radius: 5px;
  font-size: 100%;
  line-height: 1;
}

#landing-detail .product-line li:hover .btn-see-detail {
  background-color: #e57906;
}
#landing-detail .product-line li a { display: block; height: 100%; text-decoration: none; }
#landing-detail .product-line .herb-line-ttl {
    bottom: 120px;
    font-size: 130%;
    font-family: Georgia, Times, Century, Garamond, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#landing-detail .product-line .herb-line{
    bottom: 20px;
}
#landing-detail .product-line .herb-line-ttl,
#landing-detail .product-line .herb-line{
    position: absolute;
    left: calc(50% - 150px);
}
#landing-detail .product-line .herb-line li{
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 100px;
    vertical-align: top;
    border:0;
}
#landing-detail .product-line .img-herb {
    width: 100px;
}
#landing-detail .txt-movie { text-indent: 30px;}
#landing-detail .img-movie { margin: 0 0 0 30px; }
#landing-detail .img-movie:hover { opacity: 0.7; }
#landing-detail .img-satohap-space { display: block; height: 60px; }
#landing-detail .img-satohap-space2 { display: block; height: 10px; }

#landing-detail .txt-history-yunker { display: block; margin: 90px 0 30px; font-size: 232%; color: #e77906; }
#landing-detail .img-yunker-kotei { float: right; width: 130px; margin: -60px 100px 0; }
#landing-detail .herb-line { list-style-type: none; margin: 40px 0 0 10px; padding: 0; }
#landing-detail .herb-line li { display: inline-block; margin: 0 20px; padding: 0; height: 300px; vertical-align: top; }
#landing-detail .img-herb { width: 200px; }
#landing-detail .img-herb:hover { cursor: default; }
.my-balloon { width: 220px; padding: 30px; font-size: 123.1%; color: #212121; text-align: left; background: #eee; opacity: 1; z-index: 999; border: 1px solid rgba(212, 212, 212, .4); webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); }

/* Topics Detail
======================================================= */
/* BackNumber */
#backnumber { position: relative; margin: 0 0 40px 580px; width: 400px; z-index: 1; font-size: 116%; }
#backnumber #h-backnumber { display: block; text-align: center; color: #fff; cursor: pointer; border-bottom: 1px solid #6287b3; }
#backnumber .btn-dropdown { display: block; cursor: pointer; }
#backnumber .btn-dropdown a { padding: 5px 10px; color: #444; font-weight: bold; text-decoration: none; }
#backnumber ul { position: absolute; list-style-type: none; top: 30px; padding: 0; width: 400px; background: #ddd; }
#backnumber ul li:first-child { border-top: solid 1px #fff; }
#backnumber ul li { border-bottom: 1px solid #fff; }
#backnumber ul a:link, #menu ul a:visited { display: block; width: 380px; text-decoration: none; color: #444; font-weight: normal; }
#backnumber ul a:hover, #menu ul a:active { color: #fff; text-decoration: none; background: #6287b3; }
#topics-detail .open { background: #6287b3 url(../images/products/ic_arrow_up.svg) no-repeat right center; background-size: auto 50%; }
#topics-detail .close { background: #6287b3 url(../images/products/ic_arrow_down.svg) no-repeat right center; background-size: auto 50%; }
#topics-detail .active { background: #6287b3 url(../images/products/ic_arrow_up.svg) no-repeat right center; background-size: auto 50%; }
#backnumber #closeup { display: block; text-align: center; border: none; }

#topics-detail { margin: 0 auto 40px; width: 1000px; min-width: 1000px; text-align: left; }
#topics-detail h1 { margin: 0 0 50px; font-size: 307.8%; color: #004aa5; }
#topics-detail h1 sup { font-size: 58%; }
#topics-detail h2 {
  margin: 0;
  padding: 0 0 15px;
  font-size: 216%;
}
#topics-detail h2.orange {
  color: #e57906;
}
#topics-detail .h2-bottom { margin-bottom: 40px; }
#topics-detail .h2-top { margin-top: 60px; }
#topics-detail p { margin: 0 0 25px; font-size: 138.5%; line-height: 36px; color: #333; }
#topics-detail dl { margin: 100px auto 0; width: ; text-align: center; }
#topics-detail h2.band,
#topics-detail dl dt { display: block; margin: 0 0 15px; padding: 15px; color: #fff; font-size: 153.9%; font-weight: bold; background: #2a50a3; }
#topics-detail dl dd { display: inline-block; margin: 0 10px; width: 220px; vertical-align: top; }
#topics-detail .img-topics-products { display: block; width: 220px; margin: 10px 0; border: 1px solid #ddd; }
#topics-detail dl a { font-size: 116%; color: #0046a5; text-decoration: none; }
#topics-detail dl a:hover { color: #e87a06; text-decoration: none; opacity: 0.7; }

#topics-detail .img-191208-0 { margin: 0 0 10px 0; width: 280px; }
#topics-detail .wid-191208-pc { margin: 10px 20px 40px 0; width: 280px; line-height: 138.5%; }
#topics-detail .wid-191208-sp { display: none; }
#topics-detail .img-191208 { display: inline-block; margin: -5px 10px 10px; width: 300px; }
#topics-detail .img-190626-1 { display: inline-block; width: 340px; margin: 0 40px 0 160px; text-align: center; font-size: 138.5%; }
#topics-detail .img-190626-2 { display: inline-block; width: 340px; margin: 0; text-align: center; font-size: 138.5%; }
#topics-detail .img-190626 { display: block; width: 340px; }
#topics-detail .img-180105 { float: right; width: 320px; margin: 0 30px 600px 100px; }
#topics-detail .img-170526-1 { display: inline-block; width: 450px; margin: 0 0 0 150px; }
#topics-detail .img-170526-2 { display: inline-block; width: 240px; margin: 0 0 0 10px; vertical-align: top; }
#topics-detail .img-1028 { float: right; width: 250px; margin: 0 30px 0 50px; }
#topics-detail .img-1119 { float: right; width: 205px; margin: 0 60px 100px 20px; }
#topics-detail .img-061130-1 { display: block; width: 705px; margin: 0 auto 60px; }
#topics-detail .img-061130-2 { float: right; width: 410px; margin: 0 0 0 0; }
#topics-detail .img-061130-3 { float: right; width: 150px; margin: 30px 120px 0; }
#topics-detail .img-061130-4 { float: right; width: 150px; margin: -20px 120px 0; }
#topics-detail .img-061130-5 { clear: both; display: block; width: 685px; margin: 20px auto 20px; }
#topics-detail .img-061130-6 { float: right; width: 150px; margin: 10px 120px 0; }
#topics-detail .img-061130-7 { display: inline-block; width: 344px; margin: 0 0 60px 220px; }
#topics-detail .img-061130-8 { display: inline-block; width: 290px; margin: 0 0 60px; }
#topics-detail .img-061130-8:hover { opacity: 0.7; }
#topics-detail .txt-annotation { display: block; font-size: 85%; color: #000; margin: 100px 0 10px 220px; }
#topics-detail .txt-distributed { display: block; width: 580px; font-size: 85%; margin: 0 auto; }
#topics-detail .logo-distributed { float: left; width: 134px; margin: 0 10px 0 0; }
#topics-detail .border {
  border: solid 1px #efefef;
}

/* US-Top
======================================================= */
#us-contents { width: 100%; background: #fff; }
#us-contents .btn-find-out-more { width: 117px; margin: 10px 0 0; }
#us-contents .btn-read-more { width: 102px; margin: 10px 0 0; }
#us-contents a { text-decoration: none; }
#us-contents a:hover { opacity: 0.7; }

#top-message {
  width: 100%;
  margin: 0 0 50px;
}
#top-message h2 {
  display: block;
  margin: 0 0 30px;
  font-size: 182%;
  font-weight: normal;
  text-align: left;
}
#top-message span {
  display: block;
  font-size: 138.5%;
  line-height: 30px;
  color: #333;
}

#top-message img{
  max-width:400px;
  right:0;
}

.top-block {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}

.instagram {
  width: 35%;
  padding: 0 2.5% 2.5%;
  background-color: #E6EDF6;
  box-sizing: border-box;
}

#top-yunker-series { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: center; }
#top-yunker-series h2 { display: block; margin: 0 auto; font-size: 378%; font-weight: normal; color: #004aa5; }
#top-yunker-series .img-yunker-series { display: block; width: 660px; margin: 50px auto 40px; }
#top-yunker-series .top-yunker {
 display: inline-block; 
    padding: 20px;
    width: calc(50% - 20px);
    max-width: 440px;
    vertical-align: top;
    box-sizing: border-box;
}
#top-yunker-series .top-yunker strong { display: block; margin: 0 auto; font-size: 182%; color: #004aa5; }
#top-yunker-series .top-yunker span { display: block; font-size: 138.5%; line-height: 30px; color: #333; }
#top-yunker-series .img-what-is-yunker { display: block; width: 320px; margin: 30px auto 0; }
#top-yunker-series .img-what-can-yunker { display: block; width: 320px; margin: 30px auto 0; }

#top-yunker-series .top-yunker-cont{
    margin: 40px 20px;
}

#top-yunker-series .cont::before{
  content:"YUNKER – The #1 Mini \A Drink Brand in Japan.";
  white-space: pre;
  font-size:240%;
  color:#000;

    -webkit-transform: skew(-5deg, -6deg);
    position: absolute;
    right: 20px;
    top: -100px;
    filter: drop-shadow(3px 5px 5px rgba(0,0,0,0.6));
}

#top-yunker-series h4{
  background:none;
  color: red;
  margin: 0;
  font-size: 250%;
}
#top-yunker-series p{
  text-align:left;
  font-size:150%;
  max-width:1000px;
  margin: 50px auto;
}
.tv-commercial { margin: 80px auto 120px; }
.tv-commercial .txt-category { margin: 20px auto; padding: 15px; width: 1100px; color: #fff; font-size: 153.9%; font-weight: bold; background: #2a50a3; }
.tv-commercial strong { display: block; margin: 30px 0; font-size: 153.9%; color: #004aa5; }
.tv-commercial iframe,
.tv-commercial video { display: inline-block; margin: 0 10px; width:calc(50% - 30px); height:auto;aspect-ratio: 16 / 9; }

#top-newitem { 
  margin: 130px auto 0px; 
  padding: 100px 0; 
  width: 100%; text-align: center;position: relative;
  -webkit-transform: skew(0deg, -5deg);
  background: url(../images/top/bg_banner.png) center top;
  background: rgb(7,57,173);
  background: linear-gradient(-45deg, rgba(7,57,173,1) 00%, rgba(68,110,207,1) 50%, rgba(7,57,173,1) 100%);
}
#top-newitem .cont{
  -webkit-transform: skew(0deg, 5deg);
}

#top-newitem h3 {
 display: block; margin: 0 auto 30px; font-size: 378%; font-weight: normal; 
 color: #FFF; 
}
#top-newitem ul.newitem-lineup{
  padding:20px;
  color: #fff;
}
#top-newitem ul.newitem-lineup li{display: inline-block; width: 25%; list-style-type: none; padding:10px; box-sizing: border-box; vertical-align: middle;}
#top-newitem ul.newitem-lineup li img{width:100%;height:auto; transition:1s all; z-index: 100}
#top-newitem ul.newitem-lineup li img:hover{
  z-index: 10000;
  transform:scale(1.2,1.2);
  transition:1s all;
}
#top-newitem ul.newitem-lineup li span{ font-size: 138.5%;}

/*spitem*/
#top-spitem,
#top-yunker-series { 
  margin: 0px auto; 
  padding: 100px 0; 
  width: 100%; text-align: center;position: relative;
  -webkit-transform: skew(0deg, -5deg);
  background: rgb(156,125,23);
  background: linear-gradient(90deg, rgba(219,193,125,1) 00%, rgba(225,200,135,1) 50%, rgba(219,193,125,1) 100%);
}
#top-spitem .cont,
#top-yunker-series .cont{
  -webkit-transform: skew(0deg, 5deg);
}

#top-spitem h3 {
 display: block; margin: 0 auto 30px; font-size: 378%; font-weight: normal; 
 color: #FFF; 
}
#top-spitem ul.spitem-lineup{
  padding:20px;
  color: #fff;
}
#top-spitem .column{
  display:flex;
  max-width: 1100px;
  margin: 0 auto;
}
#top-spitem .column .banner{
  width:30%;
}
#top-spitem .column .banner img{
    display: block;
    margin: 0 auto 50px;
    width: 100%;
}
#top-yunker-series .bnr,
#top-spitem .column .banner a{
    background: rgb(68, 110, 207);
    padding: 10px 20px;
    border-radius: 20px;
    color: #fff;
    font-size:150%;
}
#top-spitem .column .text{
  width:70%;
}
#top-spitem .column .text h4{
  background:none;
  color: red;
  margin: 0;
  font-size: 250%;
}
#top-spitem .column .text p{
  font-size:150%;
  text-align:left;
}

#top-spitem .column .text a{
    background: red;
    padding: 10px 20px;
    border-radius: 20px;
    color: #fff;
    font-size:150%;
    margin-right:20px;
}
#top-spitem ul.spitem-lineup li img{width:100%;height:auto; transition:1s all; z-index: 100}
#top-spitem ul.spitem-lineup li img:hover{
  z-index: 10000;
  transform:scale(1.2,1.2);
  transition:1s all;
}
#top-spitem ul.spitem-lineup li span{ font-size: 138.5%;}

#top-spitem .cm{
  margin:15px 0 30px;
}
/*/SPitem*/

/*recommenditem*/
#top-recommenditem { 
  margin: 0px auto; 
  padding: 100px 0; 
  width: 100%; text-align: center;position: relative;
  -webkit-transform: skew(0deg, -5deg);
  background: rgb(156,125,23);
  background: linear-gradient(90deg, rgba(38,136,212,1) 00%, rgba(192,218,240,1) 50%, rgba(38,136,212,1) 100%);
}
#top-recommenditem .cont{
  -webkit-transform: skew(0deg, 5deg);
}

#top-recommenditem p{
  font-size:150%;
}
#top-recommenditem .recommenditem-block{
  background:#fff;
  border-radius:50px;
  margin:50px auto;
  padding:20px 50px;
  max-width: 1100px;
}
#top-recommenditem h3 {
 direcommendlay: block; margin: 0 auto 30px; font-size: 378%; font-weight: normal; 
 color: #FFF; 
}
#top-recommenditem ul.recommenditem-lineup{

  padding:20px;
  color: #fff;
}
#top-recommenditem ul.recommenditem-lineup li{direcommendlay: inline-block; width: 25%; list-style-type: none; padding:10px; box-sizing: border-box; vertical-align: middle;}
#top-recommenditem ul.recommenditem-lineup li img{width:100%;height:auto; transition:1s all; z-index: 100}
#top-recommenditem ul.recommenditem-lineup li img:hover{
  z-index: 10000;
  transform:scale(1.2,1.2);
  transition:1s all;
}
#top-recommenditem ul.recommenditem-lineup li span{ font-size: 138.5%;color:#333;}
/*/recommenditem*/

#top-satohap-series { 
  margin: -130px auto 60px; 
  padding: 200px 0 0; 
  width: 100%; height: 780px; text-align: center; background: url(../images/top/bg_satohap_series.jpg) center top no-repeat; background-size: auto 100%; 
}
#top-satohap-series h3 { display: block; margin: 0 auto; font-size: 378%; font-weight: normal; color: #fff; }
#top-satohap-series .img-satohap-series { display: block; max-width: 700px; margin: 10px auto 50px; }
#top-satohap-series .top-satohap { display: inline-block; vertical-align: top; }
#top-satohap-series .top-satohap strong { display: block; margin: 0 auto 15px; font-size: 182%; color: #fff; }
#top-satohap-series .top-satohap span { display: block; font-size: 138.5%; line-height: 30px; color: #fff; }
#top-satohap-series .img-satohap-lamp { margin: 30px 0 0; width: 450px; }
#top-satohap-series .contents-left { margin: 0; width: 440px; }
#top-satohap-series .contents-right { margin: 0 0 0 40px; width: 490px; }

#top-products-lineup { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: center; }
#top-products-lineup h4 { display: block; margin: 0 auto 20px; font-size: 378%; font-weight: normal; color: #004aa5; background: #fff; }
#top-products-lineup .main-products {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}
#top-products-lineup .main-products li {
  margin: 0;
  padding: 0;
  width: 166px;
  vertical-align: top;
}
#top-products-lineup .main-products .img-products-lineup { display: block; width: 166px; }
#top-products-lineup .main-products strong { display: block; margin: 15px 5px 5px; font-size: 116%; color: #004aa5; }
#top-products-lineup .main-products span { display: block; font-size: 123.1%; color: #333; margin: 0 5px; }

#top-banner { 
  margin: 110px auto;
  padding: 0; 
  width: 100%; height: 200px; 
  text-align: center; 
  background: url(../images/top/bg_banner.png) center top;
  position: relative;
 }
.jpn-yunker{
  position: relative;
}
.jpn-yunker .yunker-popup,
#top-banner .yunker-popup{ 
  background: #a82025;
  background: linear-gradient(324deg,rgba(168, 32, 37, 1) 0%, rgba(217, 9, 9, 1) 0%, rgba(128, 13, 34, 1) 100%);
  color:#fff;
  padding:20px 30px;
  position: absolute;
} 
.jpn-yunker .yunker-popup{
  right: 0;
}
#top-banner .yunker-popup{ 
  border-radius: 50%;
  transform: translateX(-135%) rotate(-20deg) ;
  left: 50%;
  bottom: 0px;
} 
.jpn-yunker .yunker-popup a:before,
#top-banner .yunker-popup a:before{
  content: "";
  position: absolute;
  left: 10px;
  width: 120px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  background-image: url(../images/common/yunker_kotei_bottle_sub.png);
}
.jpn-yunker .yunker-popup a:before{
  bottom:10px;
}
#top-banner .yunker-popup a:before{
  top:10px;
}

.jpn-yunker .yunker-popup a,
#top-banner .yunker-popup a{
  display:block ;
  text-decoration: none;
  color:#fff;
  margin-left:30px;
  text-align: center;
  font-size:30px;
  font-style: italic;
} 
#top-banner .img-banner { display: inline-block; margin: 35px 25px 0; width: 300px; }

#top-bottom { padding: 35px; background: #edecfa; vertical-align: top; }
#top-bottom strong { display: block; margin: 0 auto 15px; font-size: 182%; color: #004aa5; }
#top-bottom .img-bottom { display: block; margin: 0 auto 20px; width: 352px; }
#top-bottom span { display: inline-block; width: 420px; font-size: 123.1%; line-height: 26px; color: #333; }
.top-satochan { display: inline-block; margin: 0 0 20px; width: 420px; height: 370px; }
.top-topics { display: inline-block; margin: 0 0 20px 20px; width: 420px; height: 370px; }
.top-topics ul { margin: 0; text-align: left; font-size: 100%; list-style: none; }
.top-topics ul li { margin: 0; border-bottom: 1px solid #91c6fe; background: url(../images/top/ic_topics.png) left center no-repeat; }
.top-topics ul li:first-child { border-top: 1px solid #91c6fe;  }
.top-topics ul li a { display: block; padding: 20px 0 20px 25px; color: #333; }

.top-company { display: block; margin: 0 auto; width: 930px; }
.top-company .img-company { width: 352px; margin: 15px 0 0; }
.top-company .txt-company { margin: 0 0 0 90px; text-align: left; width: ; }

/* PageTop
======================================================= */
#pageTop { position: fixed; bottom: 60px; right: 60px; }
#pageTop em { display: none; }
#pageTop a { 
  display: block; 
  z-index: 999; 
  width: 150px; 
  height: 191px; 
  background: url(../images/common/gotop.png) center center no-repeat; 
  background-size: 100% auto; 
  text-decoration: none; t
  ext-align: center; 
}
#pageTop a:hover { text-decoration: none; opacity: 0.7; }

/* NSF Detail
======================================================= */
#nsf-detail { margin: 0 auto; width: 1000px; min-width: 1000px; text-align: left; }
#nsf-detail h4 { margin: 35px 0 0px 0px; font-size: 200%; color: #004aa5;background:none; }
#nsf-detail .nsf-cert{border:solid 3px #004aa5;display: flex;padding:10px;}
#nsf-detail .nsf-cert img{width:200px;}
#nsf-detail .nsf-cert,
#nsf-detail .nsf2 p{padding-left:20px;font-size:125%;}
#nsf-detail .nsf2{display: flex;padding:10px;}
#nsf-detail .nsf2 img{width:400px;}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../images/colorbox/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../images/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../images/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../images/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/colorbox/ontrols.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

@media (max-width: 1330px) {
  body{
    min-width: 880px;
  }
  #maintitle-wrap .h1-top-txt {
      width: 300px;
      vertical-align: top;
      margin: 120px 0 0 40px;
  }
  #maintitle-wrap .h1-top-img {
    width: 500px;
    margin: 65px 0 0 10px;
}
}


/*slick*/
.slide-arrow {
  display: block;
  width: 50px;
  height: 50px;
  background: coral;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
  position: absolute;
  top:calc(50% - 25px);
}

.next-arrow {
  right:-30px;
}
.prev-arrow {
  left:-30px;
  transform: rotate(180deg);
  margin-right: 20px;
}

.slide-arrow::before{
  position:absolute;
  content: "";
  width:10px;
  height:10px;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  top:0;
  bottom:0;
  left:-5px;
  right:0;
  margin:auto;
  transform:rotate(45deg);
}
#top-recommenditem ul.recommenditem-lineup .square.dots-wrap {
    display: flex;
    justify-content: center;
}
#top-recommenditem ul.recommenditem-lineup .square.dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #aaa;
    cursor: pointer;
    flex-shrink: 0;
}

#top-recommenditem ul.recommenditem-lineup .square.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

#top-recommenditem ul.recommenditem-lineup .square.dots-wrap li:hover,
#top-recommenditem ul.recommenditem-lineup .square.dots-wrap li.slick-active {
    background: coral;
}

._center {
  justify-content: center;
}