/*maruya-SYNCER00337*/
@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
	
    color: #212121;
	background-color:#F4F5F7;

}
a {
	text-decoration: none;
}
img {
    max-width: 100%;
	height: auto;
}
/* 画面領域　横幅*/
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}
ul,li{
  list-style: none;
}

/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/* 見出し */
.page-title {
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: normal;
	padding-left:24%
}
.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px #3ec1d3 solid;
    font-weight: normal;
}
/* ボタン 買い物カゴ*/
.button {
    font-size: 1rem;
    background: #3ec1d3;
    color: #fff;
    border-radius: 5px;
	border: 1px solid;
    padding: 2px 4px;
	margin-top: 5px;
	text-align:right;
	display: block;
	margin: 0 0 0 auto;
}
.button:hover {
    background: #fff;
	color: #3ec1d3;
}
/* ボタン 詳細を見る*/
.button2 {
    font-size: 1rem;
    background: #ff9a00;
    color: #fff;
    border-radius: 5px;
	border: 1px solid;
    padding: 2px 4px;
	display: inline-block;
	margin: 5px 0 0 auto;
}
.button2:hover {
    background: #fff;
	color: #ff9a00;
}
/* ボタン モデル*/
.button3 {
    font-size: 1rem;
    background: #4e9525;
    color: #fff;
    border-radius: 5px;
	border: 1px solid;
    padding: 2px 4px;
	display: inline-block;
	margin: 5px 0 0 auto;
}
.button3:hover {
    background: #fff;
	color: #4e9525;
}

.btn-sticky:hover {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}
.btn-sticky {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #fcfefe;
  border-left: solid 6px #3ec1d3;/*左線*/
  color: #3ec1d3;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  margin: 5px 5px 0 0; 
}
.btn-sticky2 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #fcfefe;
  border-left: solid 6px #ff9a00;/*左線*/
  color: #ff9a00;/*文字色*/
  font-weight: bold;
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  margin: 5px 5px 0 0; 
}
/* iframe */
iframe {
    width: 100%;
}

/* HEADER
------------------------------- */
.page-header {
	display: flex;
	justify-content: space-between;
	padding-top:10px;
}
.page-header img{
	width: 100%;
}
#header-fixed
{
	background:white;
}

/*  MAIN-NAV
------------------------------- */
#main-nav {
	border: solid #cccccc;
	border-width: 2px 0;
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
}
#main-nav li {
	border-left: solid 1px #cccccc;
	padding: 0 10px;
	text-align: center;
	width: 137.5px;
	white-space: nowrap;
}
#main-nav li:first-child{
	border-left: none;
}
#main-nav a {
	display: block;
	padding: 2px 0;
	color: #000000;
	height: 44px;
	line-height: 44px;
	border-radius: 5px;
}
#main-nav li a:hover {
	background-color: #ffb677;
}

#sub-nav li, #sub-side li{
	border-bottom: 2px #3ec1d3 solid;
	padding: 2px 0 2px 10px;;
}
	
#sub-nav a, #sub-side a {
	height: 22px;
	line-height: 17px;
	width: 95%;
	margin: 2px;
	color: #000;
	display: block;

}
#sub-nav li:hover, #sub-side li:hover{
	border-radius: 5px;
	padding-left: 3px;
	background-color: #ffb677;
}

/* ========== contents ==========*/
.contents {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.contents-2 {
    display: flex;
	justify-content: space-between;
	flex-direction: column;
    margin-bottom: 10px;
}

.notice ul ,.notice ol{
	  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}
.notice li{
  line-height: 1.5;
  padding: 0.5em 0;
}

/* 記事部分 */
article {
	width: 76%;
/*	background-color: #efe;
*/	order: 2;
	margin-top: 10px;
}
.post-info {
    padding-top: 4px;
    margin-bottom: 10px;
}
.post-title {
    font-size: 2rem;
    border-bottom: 2px #3ec1d3 solid;
    font-weight: normal;
}
#home p{
	margin: -8px 0 10px 0;
}
#main_tokutei table{
	border-spacing: 10px;
}

#main_tokutei th{
	text-align: right;
	vertical-align: top;
	border-right: 2px #00A7DF solid;
	border-bottom: 1px #00A7DF solid;
	font-size: 13px;
	width: 25%;
}

#main_tokutei td{
	text-align: left;
	vertical-align: top;
	border-right: 2px #00A7DF solid;
	border-bottom: 1px #00A7DF solid;
	font-size: 13px;
	width: 75%;
}

/* ========== aside サイドバー ==========*/
aside {
	width: 22%;
	background-color: #BDBDBD;
	order: 1;
	padding-top: 10px;
	margin-top: 10px;
}
aside img{
	width: 170px;
}
aside .item img{
	height: 41px;
}
aside .set img{
	height: 60px; 
}
aside .oth img{
	height: 20px; 
}

#side-menu{
	display: flex;
	flex-direction: column;
}

#side-menu li{
	padding: 0 10px;
	text-align: center;
	
}
#side-menu a {
	display: block;
	padding: 0;
	margin: 1px;
/*	line-height: 60px;
	height: 60px;
	border: 2px solid red;
	border-radius: 5px;*/
}


#sub-side li a:after {
    content:attr(data-label);
}
#sub-side li img {
    display:none;
}

#company-1{
	text-align: left;
	font-size: 14px
}

#company-1 p{
	margin-bottom: -6px;
	margin-left: 20px;

}

#company-2 {
	text-align: center;
	margin: 15px 0;

}
/* フォーム */

input[type="number"]{
    width: 4em; /*親要素いっぱい広げる*/
    padding: 2px 0 0 4px; /*ボックスを大きくする*/
    font-size: 15px;
    border-radius: 3px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
	background: #fff;
}
input[type="text"]{
    width: 6em; /*親要素いっぱい広げる*/
    padding: 2px 0 0 4px; /*ボックスを大きくする*/
    font-size: 15px;
    border-radius: 3px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
	background: #fff;
}

select::-ms-expand {
	display: none;
}

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 2px solid #ddd;
  border-radius: 3px;
  font-size: 15px;
  height: 30px;
  padding: 2px 15px 0 8px;
  position: relative;
  width: 100%;
  z-index: 0;
}
.select-wrap{
  display: inline-block;
  position: relative;
  width: 120px;
}
.select-wrap::before{
  content: '';
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #3ec1d3 transparent transparent transparent;
  top: 10px;
  right: 8px;
  padding: 0;
  position: absolute;
  pointer-events: none;
  height: 0;
  width: 0;
  z-index: 1;
}

/* ========== footer ==========*/
footer{
	background: #757575;
    text-align: center;
    padding: 26px 0;
}
footer p{
    color: #fff;
    font-size: 0.875rem;
}

.item-1 img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.item-1 h3{
	background-color:#757575;
	color: #fff;
	font-size: 1.4rem;
	margin: 10px 0;
}

.item-1 h4{
	font-size:1.1em;
	font-family:  "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #494949;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px #3498db;/*左線*/
}
.item-2{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-top: 10px;
}
.img-box{
	order:1;
}
.text-box{
	order:2;
	margin-left:20px;
}
.cart-box{
	order:3;
	margin-left:auto;
}
.text2-box{
	order:3;
	margin-left:20px;
}
.img-box img{
	max-width:130px ;
}
.item-3{
}
.price{
	font-size:1.1em;
	color: #ff165d;
	font-weight:bold;
}
.emphasis{
	font-size:1em;
	color: #FF4500;
	font-weight:bold;
	
}

/* モバイル版
------------------------------- */

@media only screen and (max-width: 767px), print {


/* MAIN-NAV */
	#main-nav {
		display:none;
	}
	
	
	.logo img{
    width: 250px;
	}


#header-fixed
{
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    width: 100%;                /* 横幅100%　*/

}

/* CONTENTS */
	.contents{		
		flex-direction: column;
	}
	.contents-2{		
		flex-direction: row;
	}
	article,aside{
		width: 100%;
	}
	article {
		order: 1;
		margin: 18% 0 0 0;
	}
	.post-title {
	font-size: 1rem;
	border-bottom: 2px #3ec1d3 solid;
	font-weight: normal;
}
/* aside サイドバー*/
	aside {
		order: 2;
	}
	#side-menu{
		display:none;
	}
	#company-1 {
	text-align: left;
	margin: 0;
	}
	#company-2	{
	margin: 0 auto;
	width:100px;
	}

.text-box {
	order: 1;
	width: 100vh;
	margin: 10px 0;
}
.img-box{
	order: 2;
}

.item-1 p,.item-1 h3,.item-1 h4,.item-2 li{
	font-size:4vw;
}
#main_tokutei td,#main_tokutei th{
	font-size:2vw;
}

}/* モバイル版  --- */

/* Palette generated by Palette List - palettelist.com 
RED BLUE


.first-color { 
	background: #3ec1d3; 
}

.second-color { 
	background: #f6f7d7; 
}

.third-color { 
	background: #ff9a00; 
}

.fourth-color { 
	background: #ff165d; 
}

.primary-text-color { 
	color: #212121; 
}

.secondary-text-color { 
	color: #757575; 
}

.divider-color { 
	color: #BDBDBD; 
}

.icon-color { 
	color: #000000; 
}
*/