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



/* -----------------------------------------------------------
reset.css
------------------------------------------------------------*/
body,
#contents,
#foot-low,
.footsenn,
#foot-low ul,
table {
  width:100%;
  max-width:100%;
}
#contents,
#menu {
  float: none;
}


/* -----------------------------------------------------------
aqb05.css
------------------------------------------------------------*/
/* header */

#global-menu00 {
  width:100%;
}
#advlogo1 {
  margin-bottom:0;
}
p.bg-products,
.pankuzu {
  width:100%;
  margin:0;
}
.pankuzu {
  display: none;
}
.menu-area-ttl p {
  width:65px;
}
/* -----------------------------------------------------------
aqb02.css
------------------------------------------------------------*/
p.bg-products {
  background: url(/products/images/bg-products-sp.jpg)no-repeat;
  background-size: 100%;
  font-size: 4vw;
  width: 100%;
  height: calc(160/580*100vw);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 2;
  align-content: center;
  padding: 0 0 0 35vw;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
p.mv-ttl span.en {
    font-size: 1.4rem;
    color: #fff;
    display: block;
    font-weight: normal;
    font-family: serif;
    width: 100%;
    line-height: 1;
    text-align: left;
}
.flexbox {
  flex-wrap:wrap;
}
.flexbox-inner.img,
.flexbox-inner.txt,
.tool .flexbox-inner.img,
.tool .flexbox-inner.txt {
  width:100%;
  max-width:100%;
}
ul.list li {
    font-size: 1.4rem;
}
p.txt-s {
  font-size: 1.3rem;
}
.ttl-h4-mark {
font-size:1.6rem;
margin:2rem 0 1rem;
}
.ttl-h4-mark:before {
top:5px;
}
.tool .flexbox-inner.img {
  justify-content: center;
  margin-bottom:3rem;
}
.ttl-h4 {
font-size: 1.6rem;
}
h1.ttl-orange, .ttl-orange {
  width:100%;
}

/* end ------------------------------------------------------*/




@media screen and (max-width:767px) {
  html {
  font-size: 62.5%;
  }
  body { font-size: 1.4rem; }
  p,div,span,li,i,td,th,em,dt,dd {
    font-size:1.4rem;
  }
}

/* -----------------------------------------------------------
	common
------------------------------------------------------------*/
html,body {
height:100%;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-weight: 400;
line-height:1.8;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}

/* ゴシック系 */
body, table, th, td, p, li, div, span,dt,dd,
h1,h2,h3,h4,h5,h1 span,h2 span {
font-family:'Noto Sans Japanese', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/* 明朝系 */
.min {
font-family: 'Noto Serif CJK JP', "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.en {
  font-family: 'Roboto', sans-serif;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p,li,dt,dd,th,td,div,span,em {
color: #49423f;
line-height: 1.6;
word-wrap: break-word;
}
p {
  margin-top:0;
}

li {
line-height: 1.4;
list-style: none;
}

ul,ol,figure {
padding-left:0;
margin:0;
}
table {
width: 100%;
border-collapse: collapse;
}
a {
  word-break: break-word;
  text-decoration: none;
}
header a,
footer a {
  text-decoration: none;
}
main a {
  color:#49423f;
}
img {
line-height: 0;
max-width: 100%;
vertical-align: bottom;
}


article:after,main:after,
clearfix:after {
content: "";
display: block;
clear: both;
}

@media screen and ( min-width: 751px ){
  a {
  -webkit-transition: background  0.3s ease, color 0.3s ease;
  -moz-transition: background  0.3s ease, color 0.3s ease;
  -o-transition: background  0.3s ease, color 0.3s ease;
  transition: background  0.3s ease, color 0.3s ease;
}
	a:hover {
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	opacity: 0.7;
	cursor:pointer;
  transition:opacity 0.3s;
  text-decoration: none;
	}

	a:hover img {
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	}

}



/* ★★ここから★★ */
/* -----------------------------------------------------------
PCとSP分岐（一旦両方に記載）
------------------------------------------------------------*/
@media screen and (min-width:768px) {
  .sp {
    display: none;
  }
}
@media screen and (max-width:767px) {
  .pc {
    display: none;
  }

}

/* -----------------------------------------------------------
aqb-sp.css
------------------------------------------------------------*/
img {
height: auto;
object-fit: contain;
}
/* header */
#header1 {
  display: none;
}
/* 左メニュー */
#menu {
  display: none;
}
#main {
  width:90%;
  float:none;
  padding:0;
  margin:0 auto 0;
}

/* aqbpro */
p.bg-ttl, h1.bg-ttl {
  font-size: 22px;
  margin: 2rem 0;
}
.pmargin {
margin:0;
padding:0;
line-height: 0;
}

/* products */
.box_solid_or {
  margin: 0 0 2rem;
}
.app-mailmaga5 img {
  vertical-align: middle;
}
.local-menu ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap:wrap;
  margin:2rem -1% 3rem;
}
.local-menu li {
  width:31.333%;
  margin:0 1% 2%;
}
.local-menu li a {
  width:100%;
  /* border:1px solid #ddd; */
  background: #ecf1f9;
  /* background: #f9f7ec; */
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding:0 5px;
  height:36px;
  line-height: 1.2;
  font-size: 1.3rem;
  color:#003399;
}
.local-menu li.active a {
  background: #fff;
  border: 1px solid #c7d2e3;
}

.products-img {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap:wrap;
}
.products-img li {
  width:33.333%;
}
.ttl01 {
margin:0 0 1rem;
font-size: 1.8rem;
font-weight: bold;
color: #003399;
text-align: left;
vertical-align: middle;
padding: 5px 0;
border: 2px solid #003399;
border-right: 0;
border-left: 0;
}
.tool10px {
  font-size: 12px;
  line-height: 1.4;
}
.underline_dot_or {
  margin-top:4rem;
}
.products-main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.products-main li {
  width:50%;
}
.scroll-wrap {
  overflow-x: hidden;
  max-width:100%;
}
.scroll-list {
  margin: 0 0 3rem;
  padding: 0;
  max-width: 100vw;
  overflow-x:scroll;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  padding:0 0 1rem;
}
.scroll-list .scroll-box {
  width:480px;
  white-space: nowrap;
}
.scroll-list .scroll-box img {
  width:530px;
  white-space: nowrap;
}
.scroll-list .scroll-box.w580,
.scroll-list .scroll-box.w580 img {
  width:580px;
}
.scroll-list::-webkit-scrollbar {
  height: 10px;
}
.scroll-list::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 7px;
}
.scroll-list::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 7px;
}
.scroll-txt {
  color:#f77311;
  margin:2rem 0 1rem;
}
h1.ttl-orange, .ttl-orange {
  width:100%;
  margin:0 0 1rem 0;
}
.right img,
img {
  vertical-align: middle;
}


/* -----------------------------------------------------------
spメニュー
------------------------------------------------------------*/
#top-logo img {
  height: 38px;
}
.sp-table {
  margin-top:50px;
}


/* -----------------------------------------------------------
	index-header
------------------------------------------------------------*/


/* -----------------------------------------------------------
	index
------------------------------------------------------------*/

/* -----------------------------------------------------------
	products
------------------------------------------------------------*/


/* -----------------------------------------------------------
	footer
------------------------------------------------------------*/

/* -----------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/

/* -----------------------------------------------------------
SP-MENU スマホ版メニュー
------------------------------------------------------------*/
body.open {
}
#top-logo {
  position: fixed;
  top:5px;
  left:5px;
}

ul#gnav li {
margin:0;
}
#header {
  width:100%;
  position: fixed;
  top:0;
  left:0;
  background: #fff;
  z-index: 1;
}
#header,
.header-top {
  height:50px;
}
.header-top {
  width:100%;
}
#gnav {
  background: none;
  height: inherit;
}
#gnav li a {
}
.open #toggle {
  background: transparent;
}
.open .sp-top-nav {
  z-index: 1001;
  visibility: visible;
}
#header nav {
  top:0;
  width:100%;
  height: 100%;
}
.sp-top-nav {
  visibility: hidden;
  position: fixed;
}
#toggle {
  display: block;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 24px;
  height: 30px;
  cursor: pointer;
  padding: 0px;
  z-index: 1002;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#toggle div {
  position: relative;
}
#toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #355AA8;
  left: 0;
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#toggle span:nth-child(1) {
  top: 0;
}
#toggle span:nth-child(2) {
  top: 8px;
}
#toggle span:nth-child(3) {
  top: 16px;
}
.open #toggle span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  zoom: 1;
}
.open #toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #toggle span:nth-child(3) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  zoom: 1;
}
ul#gnav {
  top: 50px;
  position:absolute;
  padding: 0;
  width: 100%;
  margin: 0;
  z-index:101;
  overflow:hidden;
  height:auto;
}
#gnav {
  width:100%;
}
#gnav li a {
width:100%;
background: #3057A7;
color:#fff;
padding:0 10px 0 1.5em;
height: 47px;
display: flex;
align-items: center;
border-bottom:1px solid #4C77BB;
font-weight: normal;
}
#gnav li a {
  position: relative;
}




@media screen and (min-width: 641px) {

}


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

}

@media screen and (min-width: 575px) {

}
/* sm サイズ*/
@media screen and (max-width: 574px) {

}

@media screen and (min-width: 481px) {

}

/* products1カラム480以下 */
@media screen and (max-width: 480px) {
.products.menu-area li {
  width:100%;
}
.products-menu-img img {
    width: 100%;
}
.menu-area.products h3 {
  font-size: 1.6rem;
}
.menu-area.products dt {
  font-size: 1.5rem;
}
.menu-area.products dd {
    font-size: 1.3rem;
}
.products-img {
  text-align: center;
}
.products-img li,
.products-main li {
  width:100%;
  margin-bottom:2rem;
}

}

@media screen and (max-width: 400px) {
}

}
@media screen and (max-width: 374px) {

}

@media screen and (max-width: 320px) {
}