/*
@font-face {
  font-family: "mplus";
  src: url("/site/magazine/assets/font/mplus/mplus-1p-thin.woff") format("woff"), url("/site/magazine/assets/font/mplus/mplus-1p-thin.ttf") format("truetype");
  font-weight: 200; }
*/

@font-face {
  font-family: "mplus";
  src: url("/site/magazine/assets/font/mplus/mplus-1p-light.woff") format("woff"), url("/site/magazine/assets/font/mplus/mplus-1p-light.ttf") format("truetype");
  font-weight: 300; }


@font-face {
  font-family: "mplus";
  src: url("/site/magazine/assets/font/mplus/mplus-1p-regular.woff") format("woff"), url("/site/magazine/assets/font/mplus/mplus-1p-regular.ttf") format("truetype");
  font-weight: 400; }

/*
@font-face {
  font-family: "mplus";
  src: url("/site/magazine/assets/font/mplus/mplus-1p-medium.woff") format("woff"), url("/site/magazine/assets/font/mplus/mplus-1p-medium.ttf") format("truetype");
  font-weight: 500; }

@font-face {
  font-family: "mplus";
  src: url("/site/magazine/assets/font/mplus/mplus-1p-bold.woff") format("woff"), url("/site/magazine/assets/font/mplus/mplus-1p-bold.ttf") format("truetype");
  font-weight: 700; }
*/

@font-face {
  font-family: "copperplate";
  src: url("/site/magazine/assets/font/copperplate/copperplate.woff") format("woff"), url("/site/magazine/assets/font/copperplate/copperplate.ttf") format("truetype");
  font-weight: 400; }
.copperplate{ font-family: "copperplate";}

@font-face {
  font-family: "hanazono";
  src: url("/site/magazine/assets/font/hanazono/HanaMinA.woff") format("woff"), url("/site/magazine/assets/font/hanazono/HanaMinA.ttf") format("truetype");
  font-weight: 400; }
.copperplate{ font-family: "copperplate";}
.hanazono {font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/site/magazine/assets/font/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/site/magazine/assets/font/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(/site/magazine/assets/font/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(/site/magazine/assets/font/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /*inherit*/
  line-height: 1; /*inherit*/
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
     -moz-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

i.material-icons.home:before { content: "\e88a";  font-size: inherit; line-height: 1; vertical-align: -22%; margin-right: 5px; }

i.material-icons.archive:before { content: "\e03b";  font-size: inherit; line-height: 1; vertical-align: -24%; margin-right: 5px; }

i.material-icons.link:after { content: "\e315";  font-size: inherit; line-height: 1; vertical-align: -28%;}

i.material-icons.totop:before { content: "\e25a";  font-size: inherit; line-height: 1; vertical-align: ; margin-right: 5px; }

.rotate-270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

@media only screen and (min-width: 480px) {
  .hide-on-sp-and-up {
    display: none !important;
  }
}


html, body
{
	padding: 0;
	margin: 0;
}

html {
  line-height: 1.5;
  font-family: "mplus", sans-serif;
  font-weight: 300;
  color: #424242; }
  @media only screen and (min-width: 0) {
    html {
      font-size: 14px; } }
  @media only screen and (min-width: 601px) {
    html {
      font-size: 14.5px; } }
  @media only screen and (min-width: 993px) {
    html {
      font-size: 15px; } }

header
{
	background: rgba(0, 0, 0, .7);
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	line-height: 40px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 40px;
	padding: 0 10px;
	z-index: 2000;
	position: fixed;
}
header a { color: #fff;}
header .logo { height: 30px; width: auto; margin: 5px 0 0 0; float: right;}

/***** Sub-Nav ******/
#sub-nav {
  font-weight: 500;
  font-size: 15px;
  color: #212121;
  background: rgba(255, 255, 255, 0);
  height: ;
  padding: 0 10px 0 10px;
  margin-bottom: 20px;
	width: 100%;
	border-bottom: 1px solid #212121;
  z-index: 1000;
}
#sub-nav a {
  color: #212121;
}
#sub-nav a:hover {
  color: #fff;
}
@media only screen and (min-width: 601px) {
  #sub-nav {
    font-size: 20px; 
  }
}

/***** Sub-Header ******/
#sub-header {
  position: fixed;
  left: 0;
  font-weight: 500;
  font-size: 15px;
  color: #212121;
  background: rgba(255, 255, 255, 0);
  height: 100px;
	width: 100%;
  z-index: 1000;
}
#sub-header a {
  color: #212121;
}
#sub-header a:hover {
  color: #fff;
}
.sub-header-inner {
  position: ;
  background: none;
  height: 60px;
  padding: 10px 10px 0 10px;
  margin-top: 40px;
	width: 100%;
  color: #212121;
}

@media only screen and (min-width: 601px) {
  #sub-header {
    font-size: 18px; 
  }
  .sub-header-inner {
    padding: 30px 10px 0 10px;
}
}

.section {
  padding-top: 0;
  padding-bottom: 0;
}

.section.no-pad {
  padding: 0;
}

.section.no-pad-bot {
  padding-bottom: 0;
}

.section.no-pad-top {
  padding-top: 0;
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
}
.container_wide {
  margin: 0 auto;
  /*max-width: 1280px;*/
  width: 100%;
}
.left-to-center{ text-align: center;}

@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
  .container_wide {
    width: 100%;
  }
  .left-to-center{ text-align: left;}
}
@media only screen and (min-width: 993px) {
  .container {
    width: 75%;
  }
  .container_wide {
    width: 100%;
  }
  .left-to-center{ text-align: left;}
}

.container .row {
  margin-left: auto;
  margin-right: auto;
}
.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.title {
  font-weight: 300;
  font-size: 24px;
}
@media only screen and (min-width: 601px) {
  .title {font-size: 36px;}
}
@media only screen and (min-width: 993px) {
  .title {font-size: 42px;}
}

.sec1_contents{
  padding-top: 10px; padding-bottom: 20px; background: #da9c5d; height: auto;
}
@media only screen and (min-width: 601px) {
  .sec1_contents {padding-top: 30px; padding-bottom: 20px; height: auto;}

}
@media only screen and (min-width: 993px) {
  .sec1_contents {padding-top: 60px; padding-bottom: 20px; height: auto;}
}

.sec2_contents{
  padding-top: 10px; padding-bottom: 20px; background: #a79a4d; height: auto;
}
@media only screen and (min-width: 601px) {
  .sec2_contents {padding-top: 30px; padding-bottom: 20px; height: auto;}
}
@media only screen and (min-width: 993px) {
  .sec2_contents {padding-top: 60px; padding-bottom: 20px; height: auto;}
}

.sec3_contents{
  padding-top: 10px; padding-bottom: 20px; background: #94a4ae; height: auto;
}
@media only screen and (min-width: 601px) {
  .sec3_contents {padding-top: 30px; padding-bottom: 20px; height: auto;}
}
@media only screen and (min-width: 993px) {
  .sec3_contents {padding-top: 60px; padding-bottom: 20px; height: auto;}
}

.sec4_contents{
  padding-top: 10px; padding-bottom: 20px; background:#ae9487; height: auto;
}
@media only screen and (min-width: 601px) {
  .sec4_contents {padding-top: 30px; padding-bottom: 20px; height: auto;}
}
@media only screen and (min-width: 993px) {
  .sec4_contents {padding-top: 60px; padding-bottom: 20px; height: auto;}
}

.sec5_contents{
  padding-top: 10px; padding-bottom: 20px; background:#7c6b5d; height: auto;
}
@media only screen and (min-width: 601px) {
  .sec5_contents {padding-top: 30px; padding-bottom: 20px; height: auto;}
}
@media only screen and (min-width: 993px) {
  .sec5_contents {padding-top: 60px; padding-bottom: 20px; height: auto;}
}




.logo-mag { width: 50%;}
#modal-archive .logo-mag { width: 40%;}
@media only screen and (min-width: 601px) {
  .logo-mag { width: 80%;}
#modal-archive .logo-mag { width: 20%;}
}
@media only screen and (min-width: 993px) {
  .logo-mag { width: 100%;}
#modal-archive .logo-mag { width: 15%;}
}

.totop { position: absolute; bottom: 70px; right: 5%;}

#modal-archive { background: rgba(255, 255, 255, 1)}

.modal_bg {background-image: url(/site/magazine/assets/img/002/bg_start.jpg); background-position: top center; background-size: cover; background-repeat: no-repeat; height: auto;}
.layer_bgcolor{background: rgba(127, 192, 183, .6);}