@charset "utf-8";
/* CSS Document */
html{
  font-size: font-size: 62.5%;/*10px*/
}
#main-content{
  background-image: url(../images/bg_fix.jpg);
  background-size: contain;
  background-repeat: repeat-y;
  font-size: 1.6em;
  padding-bottom: 80px;
}
h1, h2, h3, h4, p, ul, a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  color: #000;
}
img {
  vertical-align: bottom;
}

#wrap{
  max-width: 1400px;
  margin: 0 auto;
/*  padding: 0 80px;*/
}
.social{
  position:absolute;
  top: 2%;
  right: 1.5%;
}
.logo{
  margin: 10px 0 10px;
  display: block;
  width: 50%;
  padding-left: 20px;
}
.logo img{
  max-width: 100%;
}
h1{
  text-align: center;
  margin: 1.5em auto 1.2em;;
  font-size: 2.0rem;
  display: block;
  width: 100%;
}
.header-title img ,.sp-header-title img{

  padding: 0.3em;
  border-radius: 0.5em;
  background-color: #f5f4fd;
  padding: 0.3em 0.5em;
  background: -webkit-repeating-linear-gradient(-45deg, #f5f4fd, #f5f4fd 3px,#fff 3px, #fff 7px);
  background: repeating-linear-gradient(-45deg, #f5f4fd, #f5f4fd 3px,#fff 3px, #fff 7px);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.sp-header-title img{
  width: 80%;
}
/*新版ヘッダーデザイン*/
#pc-header{
  position: relative;
  text-align: center;
}
#pc-header ul{
  display: flex;
  width: 100%;
  justify-content: center;
}
#pc-header li{
  position: relative;
}
.pc-logo{
  padding-top: 2em;
}



/*PCヘッダーのキャプション表示*/
#pc-header li div{
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: rgba(255,235,169, .4);/*黄色背景*/
  /*background-color: rgba(0,0,0, .6);/*黒背景*/
  width: 100%;
  height: 100%;
  padding: 50%;
  z-index: 1;
  cursor: pointer;
}
#pc-header li div p{
  position: relative;
  /*bottom: 20px;*/
  left: 50%;
  color: #000;
  writing-mode: vertical-rl;
  -webkit-transform: translate(-50%, 0%,);
  transform: translate(-50%, 0%);
  font-size: 1.8rem;
}
/*黒背景の場合に*/
/*#pc-header li div p span{
  color: #EAFF16;
}*/
@media screen and (max-width:1200px) {
 /*　画面サイズが1051px以下の場合　*/
  #pc-header li div p{
    font-size: 1.5rem;
  }
}
@media screen and (max-width:1051px) {
 /*　画面サイズが1051px以下の場合　*/
  #pc-header li div p{
    font-size: 1.5rem;
  }
}
@media screen and (max-width:873px){
   #pc-header li div p{
    font-size: 1.2rem;
  }
}
#pc-header img{
  max-width: 100%;
}
/*#pc-header .pc-logo{
  position: absolute;
  top: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%,);
  transform: translate(-50%, -50%);
}*/
#pc-header #black div{
  background-color: rgba(193,184,227, .6);
}
#pc-header #brown div{
  background-color: rgba(230,218,200, .6);
}
#pc-header #blue div{
  background-color: rgba(154,236,255, .4);
}
#pc-header #pink div{
  background-color: rgba(255 ,194,202, .4);
}
#pc-header #silver div{
  background-color: rgba(218,211,201, .4);
}


/*新版SP版ヘッダー*/
#sp-header{
  position: relative;
  display: none;
}
#sp-header ul{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
}
#sp-header li img{
  width: 100%;
}
/*.sp-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%,);
  transform: translate(-50%, -50%);
}*/
/*.sp-logo img{
  width: 100%;
  display: block;
}*/
.sp-logo{
  text-align: center;
  padding-top: 2em;
}
.sp-logo img{
  width: 60%;
  display: inline-block;
}
.sp-hover img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.sp-hover:hover img {
	opacity: .6;
}



/*ページトップへ戻る*/
#page-top{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:100;
  background:#372f2d;
}
#page-top a{
  color:#fff;
  font-weight:bold;
  display:block;
  padding:15px;
}


/*グリッドレイアウト*/
#glid-section{
  margin-top: 7%;
}
.panel-title{
  margin-bottom: 4%;
}
.panel-title img{
  width: 100%;
}
.row{
  margin-right: 15px;
  margin-left: 15px;
}
.item-box{
  position: relative;
  margin: 0 0 1em 0;;
}
.item-box img{
    width: 98%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: 0.3s;
    padding: 5% 5% 25%;
    background-color: #fff;
  /*  box-shadow: 1px 1px 8px rgba(0,0,0,0.3);*/
     overflow: hidden;
}
/*.item-box img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.item-box:hover img{
  opacity: .5;
  }*/
.item-box a {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .1s ease;
	transition: .1s ease;
}
.item-box:hover a {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}
/*.item-box a{
    display: inline-block;
}*/
.item-box a{
    display: block;
    height: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.3);
}



/*.item-box a::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/flame_logo.png);
  background-repeat: no-repeat;
  background-position: bottom 4% right 25%;
  background-size: 60% auto;
  position: absolute;
  top: 0;
  left: 0;
}*/
.item-box a::after{
    content: "";
    display: block;
    width: 91%;
    height: 100%;
    background-image: url(../images/flame_logo.png);
    background-repeat: no-repeat;
    background-position: bottom 4% right 15%;
    background-size: 60% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}





@media screen and (max-width:768px) {
 /*　画面サイズが768px以下の場合　*/
  #pc-header{
    display: none;
  }

  #sp-header{
    display: block;
  }
/*  .sp-banner img{
    width: 100%;
    height: auto;
  }*/
  html{
    font-size: 60%;
  }
}
@media screen and (max-width:440px) {


}