@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:80%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background-image: url("https://goodsmate.jp/images/%E8%83%8C%E6%99%AF.jpg");

}


a{
	color: #000000;
        text-decoration: none;
}

a:hover, .active{
  text-decoration: none;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#mainnav a{
	color: #000;
	font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
    background: #f4d518;
}


/* 共通
------------------------------------------------------------*/
h1, h2{
	font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}

img{
	max-width: 100%;
	height: auto;
}

section{
  clear: both;
}


.inner{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 50px;
}

#sec03 .inner, #sec04 .inner{
	border-bottom: 0px solid #ffffff;
}

.innerS{
	width: 98%;
	margin: 0 auto;
	padding-bottom: 95px;
}


/* SEC02 Gallery
------------------------------------------------------------*/
#sec02{
	padding: 0 !important;
}

#sec02 header{
	display: none;
}

#gallery{
	overflow: hidden;
}

#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}
#gallery li.full{
	width: 100%;
}


#gallery img{
	display: block;
	width: 100%;
	height: auto;
}



/* SEC04 PROJECT
------------------------------------------------------------*/
#sec04{
	padding-bottom: 0 !important;
}


.article{
	clear: both;
	overflow: hidden;
	padding-bottom: 50px;
}

.article img{
	float: left;
	margin: 5px 20px 20px;
}

.article p{
	margin-bottom: 20px;
}



/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05{
	padding: 0 !important;
}

#sec05 header{
	display: none;
}

#gallery{
	overflow: hidden;
}

#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}
#gallery li.full{
	width: 100%;
}


#gallery img{
	display: block;
	width: 100%;
	height: auto;
}

/* 影ありボックス青
------------------------------------------------------------*/
.box13 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #6eb7ff;
    border-bottom: solid 6px #3f87ce;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box13 p {
    margin: 0; 
    padding: 0;
}
/* 影ありボックス青２段
------------------------------------------------------------*/

.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}




/* 頭赤いテーブル
------------------------------------------------------------*/

table{
  width: 100%;
  border-spacing: 0;
}

table th{
  border-bottom: solid 2px #b0f5fd;
  padding: 10px 0;
}

table td{
  border-bottom: solid 2px #b0f5fd;
  text-align: center;
  padding: 10px 0;
}



/* ボタンシンプル青下棒
------------------------------------------------------------*/


.btn-border-bottom {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0;
  text-decoration: none;
  color: #67c5ff;  
}

.btn-border-bottom:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.btn-border-bottom:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}



/* カーソル合わせると色変わるテーブル
------------------------------------------------------------*/
table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
	font-size: 10px;
}

table th,table td{
  padding: 10px 0;
  text-align: center;
	font-size: 10px;
}

table tr:nth-child(odd){
  background-color: #e9fafd
}













/* 吹き出し青
------------------------------------------------------------*/


.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}








/* 吹き出し無地
------------------------------------------------------------*/

.balloon2-top {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 10px;
	background: #FFF;
 	border: solid 3px #555;
 	box-sizing: border-box;
}

.balloon2-top:before{
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
 	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid #FFF;
 	z-index: 2;
}

.balloon2-top:after{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
 	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid #555;
 	z-index: 1;
}

.balloon2-top p {
	margin: 0;
	padding: 0;
}





/* h1
------------------------------------------------------------*/

h1 {
  position: relative;
  padding: 0 0px;


}

h1:before, h1:after {
  content: '';
  position: absolute;


  width: 15%;
  height: 30px;
  background-color: #f4dc0a;
}

h1:before {
  left:0;
}
h1:after {
  right: 0;
}

/* h2
------------------------------------------------------------*/

h2 {
  position: relative;
  padding: 0 0px;


}

h2:before, h2:after {
  content: '';
  position: absolute;


  width: 15%;
  height: 30px;
  background-color: #f4dc0a;
}

h2:before {
  left:0;
}
h2:after {
  right: 0;
}

/* h3
------------------------------------------------------------*/
h3 {
  position: absolute;
  background: #ca0202;
  padding: 2px 5px 3px 40px;
  font-size: 15px;
  color: #ffffff;
  border-radius: 0 15px 15px 0;
}

h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ca0202;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -0.75em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}



/* e3
------------------------------------------------------------*/
e3 {
  position: relative;/*相対位置*/
  padding: 0.5em 1em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 3;/*行高*/
  color: #555555;/*文字色*/
  font-weight: bold;/*太字*/
  font-size: 1.25em;/*サイズ*/
  background: ;
}

e3:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  left: 0.25em;/*アイコンの位置*/
  top: -0.2em;/*アイコンの位置*/
  color: #ca0202; /*アイコン色*/
}


/* h4
------------------------------------------------------------*/
h4 {
  position: relative;/*相対位置*/
  padding-left: 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  font-size: 1.25em;/*サイズ*/
  font-weight: bold;/*太字*/
  color: #333333; /*アイコン色*/
}

h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 1.5;/*アイコンの位置*/
  color: #ca0202; /*アイコン色*/
}

/* パンくずリスト
------------------------------------------------------------*/

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;

}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  font-size: 0.75em;
}

.breadcrumb li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #5d627b;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color:  #5d627b;;
}

.breadcrumb li:first-child a:before {
  /*家アイコン*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #5d627b;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/* LINE風 吹き出し
------------------------------------------------------------*/

/*以下、①背景色など*/
.line-bc {
  padding: 20px 10px;
  max-width: 450px;
  margin: 2px auto;
  text-align: right;
  font-size: 8px;
  background: #7da4cd;

}

/*以下、②左側のコメント*/
.balloon6 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.balloon6 .faceicon {
  float: left;
  margin-right: -50px;
  width: 40px;
}

.balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 50px;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.says p {
  margin: 0;
  padding: 0;
}

/*以下、③右側の緑コメント*/
.mycomment {
  margin: 10px 0;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  text-align: left;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.mycomment p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}



/* 背景塗りつぶし
------------------------------------------------------------*/
.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #e9fcfa;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}


/* 枠BOX下吹き出し上
------------------------------------------------------------*/

.balloon1-top {
	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #e0edff;
}

.balloon1-top:before{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #e0edff;
}

.balloon1-top p {
	margin: 0;
	padding: 0;
}


/* 枠BOX下吹き出し2
------------------------------------------------------------*/

.balloon1 {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #e0edff;
}

.balloon1:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #e0edff;
}

.balloon1 p {
	margin: 0;
	padding: 0;
}




/* 枠コメント入れれる
------------------------------------------------------------*/
.box40 {
    position: relative;
    margin: 2em 75;
    padding: 0.5em 1em;
    border: solid 3px #38b2db;
    border-radius: 8px;
}
.box40 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #38b2db;
    font-weight: bold;
}
.box40 p {
    margin: 0; 
    padding: 0;
}



/* ボタンシンプル
------------------------------------------------------------*/

.square_btn{
   position: relative;
   display: inline-block;
   font-weight: bold;
   padding: 0.25em 0;
   text-decoration: none;
   color: #67c5ff;   
}

.square_btn:before{
   position: absolute;
   content: '';
   width: 100%;
   height: 4px;
   top:100%;
   left: 0;
   border-radius: 3px;
   background:#67c5ff;
   transition: .2s;
}

.square_btn:hover:before {
    top: -webkit-calc(100% - 3px);
    top: calc(100% - 3px);
}
/* 画像の上に文字
------------------------------------------------------------*/

.example {/*親div*/
  position: relative;
  }

.example p {
  position: absolute;
  color: #55555;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 1em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 0;
  left: 0;
  }

.example img {
  width: 100%;
  }

/* 買取強化のピンク
------------------------------------------------------------*/

.box1 {
    padding: 0.5em 1em;
    margin: 2em 20;
    font-weight: bold;
    color: #555555;/*文字色*/
    background: #FFF;
    border: solid 3px #e6296d;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/* box2 買取強化の青
------------------------------------------------------------*/

.box2 {
    padding: 0.5em 1em;
    margin: 2em 20;
    font-weight: bold;
    color: #555555;/*文字色*/
    background: #FFF;
    border: solid 3px #38b2db;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}


/* 買取強化の黄色
------------------------------------------------------------*/

.box3 {
    padding: 0.5em 1em;
    margin: 2em 20;
    font-weight: bold;
    color: #555555;/*文字色*/
    background: #FFF;
    border: solid 3px #f3c800;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

/* box26 左に線ありボックス 緑
------------------------------------------------------------*/

.box26{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #ffffff;
    font-weight: bold;
    color: #555555;/*文字色*/
    border-left: solid 6px #00d37c;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box26 p {
    margin: 0; 
    padding: 0;
}


/* box22 左に線ありボックス グレー
------------------------------------------------------------*/

.box25{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #ffffff;
    font-weight: bold;
    color: #555555;/*文字色*/
    border-left: solid 6px #5d627b;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box25 p {
    margin: 0; 
    padding: 0;
}


/* box24 左に線ありボックス ピンク
------------------------------------------------------------*/

.box24{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #ffffff;
    font-weight: bold;
    color: #555555;/*文字色*/
    border-left: solid 6px #e6296d;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box24 p {
    margin: 0; 
    padding: 0;
}


/* box23 左に線ありボックス 黄
------------------------------------------------------------*/

.box23{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #ffffff;
    font-weight: bold;
    color: #555555;/*文字色*/
    border-left: solid 6px #ffffff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box23 p {
    margin: 0; 
    padding: 0;
}


/* box22 左に線ありボックス 青
------------------------------------------------------------*/

.box22{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #ffffff;
    font-weight: bold;
    color: #555555;/*文字色*/
    border-left: solid 6px #38b2db;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box22 p {
    margin: 0; 
    padding: 0;
}

/* m5 緑
------------------------------------------------------------*/

m5 {
  position: relative;
  background: #00d37c;
  padding: 2px 5px 3px 20px;
  font-size: 20px;
  color: #ffffff;
  border-radius: 0 10px 10px 0;
}

m5:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #00d37c;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
/* m4 グレー
------------------------------------------------------------*/

m4 {
  position: relative;
  background: #5d627b;
  padding: 2px 5px 3px 20px;
  font-size: 20px;
  color: #ffffff;
  border-radius: 0 10px 10px 0;
}

m4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #5d627b;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}



/* m3 赤
------------------------------------------------------------*/

m3 {
  position: relative;
  background: #ca0202;
  padding: 2px 5px 3px 20px;
  font-size: 20px;
  color: #ffffff;
  border-radius: 0 10px 10px 0;
}

m3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ca0202;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

/* m2 ピンク
------------------------------------------------------------*/

m2 {
  position: relative;
  background: #e6296d;
  padding: 2px 5px 3px 20px;
  font-size: 20px;
  color: #ffffff;
  border-radius: 0 10px 10px 0;
}

m2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #e6296d;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

/* m1 青
------------------------------------------------------------*/

m1 {
  position: relative;
  background: #38b2db;
  padding: 2px 5px 3px 20px;
  font-size: 20px;
  color: #ffffff;
  border-radius: 0 10px 10px 0;
}

m1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #38b2db;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
/* 文字下のライン under赤
------------------------------------------------------------*/
.under9 {
  background: linear-gradient(transparent 0%, #d70000 0%);
}


/* 文字下のライン under紫
------------------------------------------------------------*/
.under6 {
  background: linear-gradient(transparent 50%, #eaccfb 50%);
}

/* 文字下のライン under緑
------------------------------------------------------------*/
.under7 {
  background: linear-gradient(transparent 50%, #96fdaa 50%);
}

/* 文字下のライン under青
------------------------------------------------------------*/
.under2 {
  background: linear-gradient(transparent 50%, #8fe1fd 50%);
}

/* 文字下のライン under黄
------------------------------------------------------------*/
.under3 {
  background: linear-gradient(transparent 50%, #fffc00 50%);
}

/* 文字下のライン underピンク
------------------------------------------------------------*/
.under4 {
  background: linear-gradient(transparent 50%, #ffb0cc 50%);
}


/* 文字下のライン under アンダーライン黒
------------------------------------------------------------*/
.under5 {
  background: linear-gradient(transparent 90%, #000000 70%);
}


/* カテゴリ用ボタン
------------------------------------------------------------*/
.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #2a424c;/*背景色*/
  border-bottom: solid 2px #2a424c;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 2px #000000;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/* 枠BOX1
------------------------------------------------------------*/
.box11{
    padding: 0.5em 1em;
    margin: 0.5em 1.5;
    color: #5d627b;
border-radius: 10px;
    background: #ffffff;
    font-size: 8px;
   line-height: 1.5;
    border-top: solid 5px #eeeeee;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}



/* 枠BOX9
------------------------------------------------------------*/
.box9 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #555555;
    background: #cde4ff;/*背景色*/
}
.box9 p {
    margin: 0; 
    padding: 0;
}

/* 枠BOX1
------------------------------------------------------------*/

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ff6701;
    background: #ffffff;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #ff6701;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}


/* アコーディオン
------------------------------------------------------------*/

/*全体*/
.hidden_box {
    margin: 2em 0;
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    background: #ffffff;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
    color: #5d627b;
}

/*アイコンを表示*/
.hidden_box label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #ffffff;
    color: #5d627b;
}

/*アイコンを切り替え*/
.hidden_box input:checked + label:before {
     content: '\f00d';
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #5d627b;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked + label + .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}


/* 文字の下半分だけ色をつける
------------------------------------------------------------*/

.under {
  border-bottom: solid 5px #c90202;
  padding: 5px 0;
}


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

#footerFloatingMenu {
    display: block;
    width: 100%;
    background-color: #f5f5f5;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
}

@media (min-width: 481px) {
    #footerFloatingMenu {
        display: none;
    }
}


/* box
------------------------------------------------------------*/



.box15 {
    padding: 0.3em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #81dd0a;
    border-bottom: solid 6px #609f0e;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}


.box14 {
    padding: 0.3em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #4390ef;
    border-bottom: solid 6px #2769bb;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box14 p {
    margin: 0; 
    padding: 0;
}


/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 800px){
	body{
		font-size:14px;
	}
	
	#wrapper{
		width: 100%;
	}
	
	#content{
		width: 80%;
	}
	
	#sidebar{
		width: 12%;
		position: fixed;
		top: 0;
		right: 4%;
		background: #fff;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}
	
	#sidebar h1{
		padding: 30px 0;
	}

	#mainnav li{
		font-size: 14px;
		padding: 10px 0;
	}
	
	#sns{
		margin-top: 50px;
	}
	
	#sns li{
		display: inline-block;
		padding-right: 10px;
	}

	#sns a:hover img{
		opacity: .8;
	}
	
	/* SEC03 BRAND
	-----------------*/
	.col4{
		text-align: center;
	}

	.col4 li{
		display: inline-block;
		width: 18%;
		padding: 0 3%;
		vertical-align: top;
		text-align: left;
	}
	
	#map iframe{
		height: 200px !important;
  }
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}


@media only screen and (min-width: 641px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}
}

@media only screen and (max-width: 640px){
	.innerS{
		width: 94%;
		padding-bottom: 30px;
	}
	#gallery li{
		float: none;
		width: 100%;
	}
	.article img{
		float: none;
		display: block;
		margin: 0 auto 20px;
	}
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
}

@media only screen and (max-width: 799px){
	#sidebar{
		position: fixed;
		width: 100%;
		z-index:500;
	}
	
	#sidebarWrap{
		position: relative;
		width: 100%;
		height: 60px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}
	
	#sidebar h1{
		text-align: center;
		padding-top: 15px;
	}
	
	#sidebar h1 img{
		width: auto !important;
		max-height: 25px;
	}
	
  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -10px;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display: block;
		padding: 15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 400;
	}
	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainnav #sns li{
		display: inline-block;
	}
	#mainnav #sns li a{
		position: relative;
		display: inline-block;
		padding: 15px 10px 0;
		border: 0;
	}
	#mainnav #sns li a:before{
		border: 0;
	}
.col4 li {
    margin: 0 auto 50px;
    display: block;
    text-align: center;
    display: inline-block;
    width: 43%;
    padding: 0 3%;
    vertical-align: top;
    text-align: left;
}
	section h2{
		margin: 55px auto;
	}
}