/**************** layout 980 ****************/

html {
  overflow: auto;
}

body {
  overflow: hidden;
}

#header {
  width: 100%;
  margin: 0;
  display: block;
  text-align: center;
}

h1 {
  margin: auto;
}


#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 186px;
  margin: 0;
  background-color: #2e2e2e;
  color: #add8e6;
}


#contents-base {
  max-width: 980px;
  height: 100%;
  margin: auto;
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  overflow: hidden;

}

#contents-main {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  display: -webkit-flex;
}



#contents-sub {
  width: 100%;
  margin: 0;
  padding: 0 0 200px 0;
  display: flex;
  display: -webkit-flex;
}

#contents-sub>div {
  margin: 0 2em 0 0;
}



@media screen and (min-width: 980px) {
div#contents-644 {
/*  margin: 0;
  padding: 0;
  display: flex;
  display: -webkit-flex;*/
  display: none;
  }
}

/**************** layout 644 ****************/

@media screen and (min-width: 646px) and (max-width: 979px) {

  #contents-main,#contents-sub,#contents-644 {
    width: 644px;
    height: 100%;
    margin: auto;
  }
  .main-3 { display: none;}

div#contents-644 {
/*  width: 100%;
  margin: 0;
  padding: 0;*/
  display: flex;
  display: -webkit-flex;
  }

}

/**************** layout 320 ****************/

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

  #modal-content {
    font-size: 0.6em;
  }

  #contents-main {
    width: 320px;
    flex-direction: column;
    margin: 0;
  }
   #contents-sub {
    width: 320px;
    flex-direction: column;
  }
   #contents-sub>div {
    margin: 0 0 2em 1em;
  }

  div#contents-644 { display: none;}

  #footer {
    height: 120px;
  }
}



/**************** fonts ****************/
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

body {
  color: #2e2e2e;
}

#footer>p {
  font-family: "Noto Sans Japanese";
  font-weight: 200;
  font-size: 0.8em;
  text-align: center;
}



/* cbn = toppageコンテンツメニュー用 */
.cbn {
  margin: 0 2px 2px 0;
  padding: 0;
  cursor:pointer;
  text-align: center;
}

.cbn h2 {
  font-family: "Noto Sans Japanese";
  font-weight: 300;
  font-size: 0.9em;
  color: #fff;
  -moz-text-shadow: 0.5px 0.5px 1.5px #1c1c1c;
  -webkit-text-shadow: 0.5px 0.5px 1.5px #1c1c1c;
  text-shadow: 0.5px 0.5px 1.5px #1c1c1c;
  margin: 0 0 0.1em 0;
  padding: 1em 0 0 0;
}
.cbn>span {
  font-family: "Noto Sans Japanese";
  font-weight: 300;
  font-size: 0.7em;
  color: #fff;
  -moz-text-shadow: 0.2px 0.2px 1px #1c1c1c;
  -webkit-text-shadow: 0.2px 0.2px 1px #1c1c1c;
  text-shadow: 0.2px 0.2px 1px #1c1c1c;
  margin: 0;
  padding: 0;
}

h3,h4,h5,h6 {
  font-family: "Noto Sans Japanese";
  font-weight: 300;
  font-size: 1em;
  margin-bottom: 0.1em;
  padding: 0;
}

h3+span {
  font-family: "Noto Sans Japanese";
  font-weight: 300;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
}

dt,dd {
  font-family: "Noto Sans Japanese";
  font-weight: 200;
  font-size: 0.8em;
}

.al-r {
  text-align: right;
}

.al-c {
  text-align: center;
}

/* banner 画像指定 */
div.greeting {
  width: 320px;
  height: 92px;
  background-image: url(../img/bnr/320_92.png);
}

div.shop {
  width: 320px;
  height: 92px;
  background-image: url(../img/bnr/320_92.png);
}

div.peddler {
  width: 320px;
  height: 186px;
  background-image: url(../img/bnr/320_186.png);
}

div.single-cuffs {
  width: 320px;
  height: 374px;
  background-image: url(../img/bnr/320_374.png);
}


div.about-forte {
  width: 320px;
  height: 186px;
  background-image: url(../img/bnr/320_186.png);
}

div.cuffs-type {
  width: 320px;
  height: 92px;
  background-image: url(../img/bnr/320_92.png);
}

div.cuffs-history {
  width: 320px;
  height: 92px;
  background-image: url(../img/bnr/320_92.png);
}

div.shirt-shop {
  width: 320px;
  height: 92px;
  background-image: url(../img/bnr/320_92.png);
}

/**************** modal ****************/
#modal-content{
  width: 62% ;
	margin: 0 ;
	padding: 10px 20px ;
	border: 1px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
  text-align:left;
}

.modal-p{
	margin-top:1em;
}

.modal-p:first-child{
	margin-top:0;
}


#modal-overlay{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}