@charset "utf-8";
/* contents------------------------------------------------------------------------------------------------------------ */
body {font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;color:#626262;}
html,body {height: 100%;margin:0;padding:0;}
.maincontents {margin:0;padding:0;margin-top:10px;padding-bottom:100px;}
/*.wrap {height: 100%;margin:0;padding:0;}  右にできる余白を消すためのタグ */
.wrap{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:0px;/*←footerの高さその都度変更が必要*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

/* topimgPC----------------------------------------------- */
#visual {
    padding-top:22.5%;margin-top:-30px;
    width: 100%;
    background:url("images/infotop_pc2.jpg") no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position: center top;
    position: relative;
    background-size:100%;
    	animation: fadeIn 1.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
/* backimg----------------------------------------------- */
#wrapper{
		background:url('images/back.jpg') no-repeat;
		background-position:center top;
		background-attachment:fixed;
	}
#wrapper::before {
  content: "";
  background: url('images/back.jpg')no-repeat center center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}/* sp対策 */
.clearfix{clear: both;}
div.bg2{background:rgba(255,255,255,0.9)}
/* animation----------------------------------------------- */
@keyframes fadeIn { 
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
/*古いブラウザ用*/
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}
}
.goodsbox { opacity: 0;
        transform: translateY(50px);
        transition: transform 0.8s ease, opacity 0.5s ease;
      }
.goodsbox.visible,.goodsbox2.visible {
        opacity: 1;
        transform: translateY(0);
      }
.goodsbox2 { opacity: 0;
        transform: translateY(80px);
        transition: transform 1.8s ease, opacity 0.5s ease;
      }

/* commonimg----------------------------------------------- */
.img-responsive,img {display: block;max-width: 100%;height: auto;}
.center-block {display: block;margin-right: auto; margin-left: auto;}
/* info＆slider----------------------------------------------- */
.slider {width:100%; max-width:90%;margin: 0 auto;margin-top:20px;border: solid 0px #413603;}
.slider-box {margin: 0 4px;background:rgba(255,255,255,0.8);border: solid 1px #c4c4c4;}
.slider-inbox{padding:10px;height:125px}
.slider-boxwrap {overflow:hidden;}
/*.slider-box img {height: auto;width: 100%;transition:1s all;}
.slider-box img:hover{transform:scale(1.2,1.2);transition:1s all;}*/
.slider-box_link{
  position:relative;
  display:block;
  height:auto;
}
.slider-box_link img{
  display:block;
  width:100%;
}
.slider-box_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.5s;
}
.slider-box_link:hover:before{opacity:0.4;}
.slider-box span{font-size:0.8rem;}
.slider-box span+p{font-size:1.0rem;}
.slick-arrow{border: solid 0px #413603!important;left:97%;}
.slick-arrow:before{content:""!important;}
.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
  }
.slick-next:before{
    background-size: contain!important;
    content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-70%, -50%)rotate(135deg);
  }
  .slick-prev:before{
  background-size: contain!important;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%)rotate(-45deg);
  }
.slick-prev {left:0;z-index:1;margin-left:38px;}
.slick-next {right:0;}
.slick-dots li button:before{font-size:20px!important;}
a.slider-boxrink {text-decoration: none;color:#32a0b0;position: relative;display: inline-block;transition: .3s;z-index:100;}
a.slider-boxrink::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color:#92e7f3;
transition: .3s;
}
a.slider-boxrink:hover::after {width: 100%;}
a.slider-boxrink:hover{color:#92e7f3;}

/* box1----------------------------------------------- */
.cont-box1 {width:100%; max-width:90%;margin: 0 auto;padding:5px;}
/* box2----------------------------------------------- */
.cont-box2{width:97%;margin: 0 auto;padding:5px;}
.cont-box2 h2{padding:3px;position: relative;margin-bottom:1.8em;font-size:90%;}
.cont-box2 h3{padding:2px;position: relative;margin-bottom:1.8em;text-align: center;}
.cont-box2 h3:before {
  content: '';
  position: absolute;display:  block;
  bottom: -15px;
  width: 90%;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background:linear-gradient(to right, #32a0b0, #32a0b0);
  border-radius: 2px;
}
.cont-box2 h3 span{font-size:16px;}
.cont-box2 h3 +p{font-size:1.2rem;text-align: center;}

/* txt----------------------------------------------- */
.txt1{font-weight:600;font-size:100%;}
.txt2{font-weight:600;font-size:120%;}
.txt3{font-weight:600;font-size:130%;}
.txt4{font-weight:600;font-size:140%;}
.txt5{font-weight:600;font-size:150%;}
.txt6{font-weight:600;font-size:200%;}
.txt7{font-weight:600;font-size:80%;}
.txt8{font-size:95%;}
.txtsp{font-weight:600;font-size:1.5rem;}
.txtw{color:aliceblue;}
.txty{color:#f4ff95;}
.txtr{color:#b40808;}
.txtp{color:#b24949;}
.txtg{color:#9E9E9E;}
.txtg2{color:#303340;}
.tg2{color:#605864;}
.game {color: #fff;background:#ff8f34;margin:0.3em; padding: 0.2em;border-radius:5px;display:inline-block;width:100px;text-align-last:center;}
.goods {color: #fff;background:#63aabc;margin:0.3em; padding: 0.2em;border-radius:5px;display:inline-block;width:100px;text-align-last:center;}
/* 高さ調整 */
.inbox-1{margin-top:10px;}
.inbox-2{margin-top:20px;}
.inbox-3{margin-top:30px;}
.inbox-4{margin-bottom:20px;}
.inbox-5{margin-top:30px;margin-bottom:20px;}
.inbox-6{margin-bottom:30px;}
.boxdown{margin-bottom:10px;}
.boxdown2{margin-bottom:-20px;}


/* list */
.inList,.inList2 {padding-left:0.1em;}
.inList > li {list-style:none;
list-style-type:none;
line-height:1.2;margin-left:1.2em;text-indent:-1.2em;padding: 5px;
}
.inList2 > li {line-height:1.6;margin-left:1.2em;text-indent:-0.1em;}
.inList > li::before {
content: '※';
margin-right:5px;
}

/* flexbox------------------------------------------------------------- */
.flexbox{display:flex;flex-wrap: wrap;justify-content: center;align-content:flex-start;width:100%;max-width:95%;margin: 0 auto;padding:0px;}
.fb_item1{flex-basis:30%;max-width:30%;margin:2px;padding:5px;border-radius:10px;border: solid 1px #c4c4c4;background:rgba(255,255,255,1.0);}
.fb_item2{flex-basis:21.5%;max-width:21.5%;margin:9px;padding:5px;border-radius:10px;border: solid 1px #c4c4c4;background:rgba(255,255,255,1.0);}
.fb_item3{flex-basis:50%;max-width:50%;margin:2px;padding:5px;}
.fb_item4{flex-basis:100%;max-width:100%;margin:2px;padding:5px;}


.banner{display: flex;flex-wrap: wrap;justify-content: center;lign-content:flex-start;}
.column { width: calc((100% / 5) - 8px);padding:5px;}

@media screen and (max-width: 639px) {
.column {width: calc((130% / 4) - 8px);}
}

/* dltable--------------------------------------------------------- */
.list_table,.list_table > dt,.list_table > dd {box-sizing: border-box;}
.list_table > dt,.list_table > dd {padding:0.5em;margin: 0px;}
.list_table > dt {background-color:rgba(4,95,138,0.0);font-weight:700;}
.list_table > dd {background-color: rgba(250,250,250,0.0);font-size:85%;}
.list_table > dd .kara{margin-top:0px;}
@media screen and (max-width: 639px) {
    .list_table > dd {border: 0px solid #a9b3bb;border-top: none;border-bottom: none;}
    .list_table > dt {border-bottom:1px solid #a9b3bb;}
    .list_table > dd > ul {text-align: left;}
	.list_table > dd:last-of-type { border-bottom: 0px solid #a9b3bb;}
}
@media print, (min-width: 639px) {
    .list_table {display: flex;flex-wrap: wrap;border-bottom:0px solid #a9b3bb;}
    .list_table > dt,.list_table > dd {display: flex;flex-direction: column;justify-content: center;border-top: 0px solid #a9b3bb4;}
    .list_table > dt {width: 20%;border-left: 0px solid #a9b3bb;border-right:none;border-bottom:1px solid #a9b3bb;}
    .list_table > dd {width: 80%;border-right: 0px solid #a9b3bb;border-left:none;border-bottom:1px solid #a9b3bb;}
}

/* button--------------------------------------------------------- */
.button1{
display: inline-block;position: relative;color: #fff;
padding: 15px 60px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #e3073b, #c4163f);
background: -moz-linear-gradient(left, #e3073b, #c4163f);
background: -webkit-linear-gradient(left, #e3073b, #c4163f);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button1::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}
.button1:hover{transform: scale(0.95);}
.button2{
display: inline-block;position: relative;color: #fff;font-size:85%;
padding: 10px 40px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #e3073b, #c4163f);
background: -moz-linear-gradient(left, #e3073b, #c4163f);
background: -webkit-linear-gradient(left, #e3073b, #c4163f);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button2::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}
.button2:hover{transform: scale(0.95);}
.button3{
display: inline-block;position: relative;color: #fff;
padding: 15px 60px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #7b7b7b, #4b4b4b);
background: -moz-linear-gradient(left, #7b7b7b, #4b4b4b);
background: -webkit-linear-gradient(left, #7b7b7b, #4b4b4b);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button3::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}
.button3:hover{transform: scale(0.95);}

/*改行------------------------------------------------------------- */
@media screen and (min-width: 768px){
.sp-br {display: none; }
}


/* 下部コピーライト */
.copy:after{content:' \A ';white-space: pre;}
.copytxt{font-size:100%;}


/* ▼表示領域が639px以上の場合 */
@media screen and (min-width:639px) {
img.grp1simage { display: none; }  /* miniを非表示 */
img.grp1image { display: block; } /* bigを表示 */
.txtsp2 {font-size:10px;display: none;}
.txtsp {font-size:14px;display: block;}
}
/* ▼表示領域が640px未満の場合 */
@media screen and (max-width:640px) {
img.grp1simage { display: block; } /* miniを表示 */
img.grp1image { display: none; }  /* bigを非表示 */
#visual {
    padding-top:84.5%;
    width: 100%;
    background: #fff url(images/infotop_sp.jpg) no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position: center top;
    position: relative;
    background-size: 100%;
}
.slick-arrow{border: solid 0px #413603!important;left:92%;}
.fb_item1,.fb_item1a,.fb_item2,.fb_item3{flex-basis:100%;max-width:100%;}
}

@media screen and (max-width: 768px) and (min-width: 640px) {
.slick-prev:before{top:50%;left:200%;}
.slick-next:before {top:50%;left:-100%;}
.fb_item3{flex-basis:45%;max-width:45%;margin:2px;padding:5px;}
.cont-box3 .info_name {width:51%;}
.cont-box3 .info_btn-wrap {width:40%;}
}
@media screen and (max-width: 1099px) and (min-width: 769px) {
.fb_item3{flex-basis:40%;max-width:40%;margin:2px;padding:5px;}

}