@charset "utf-8";
/* CSS Document */
body{
  font-family: 'Noto Sans JP',  "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /* background: url(../images/back.png) top center; */
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
html{
  -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;}

/*******************************
共通CSS
********************************/    

  p {
    font-family: "Noto Sans JP", serif;
  }

  #wrapper {
    overflow: hidden;
  }

/***********************************************************************
    「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
**********************************************************************/
@media all and (min-width: 751px) {

.pc_no{display: none!important;}

#sns{
  display: flex;
  justify-content: space-between;
  width: 800px;
  margin: 0 auto 60px auto;
  position: relative;
  z-index: 1;
}

#facebook {
  background: url(../images/fb_bt.png) no-repeat;
}
#twitter {
  background: url(../images/twi_bt.png) no-repeat;
}
#facebook a,
#twitter a{
  width: 402px;
  height: 90px !important;
  position: absolute;
}

.facebook,
.twitter{
  margin: 0 24px 0 auto;
  width: 396px;
  height: 90px;
}

#facebook:hover {
  opacity: 0.5;
}
#twitter:hover {
  opacity: 0.5;
}

#sns .fb-timeline{
  width: 500px;
  height: 520px;
}

#sns .tw-timeline{
  width: 500px;
  height: 520px;
}

footer{
  background:#000;
  padding: 20px 0; 
}

footer address{text-align: center;
  font-size: 14px;
  color: #FFF;
}

#footer {
  position: relative;
  z-index: 2;
  color: #fff;
  background: #000;
  height: 54px;
  width: 100%;
  min-width: 1200px;
  font-size: 16px;
  line-height: 54px;
  text-align: center;
}

#wrapper::before{
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  min-height: 1200px;
  background: url("../images/bg.png") repeat-y center top/100% auto;
  position: fixed;
  top: 0;
  }

/**************
メニュー
**************/

#header{
  width: 100%;
  position: fixed;
  z-index: 100;
  filter: drop-shadow(2px 3px 10px black);
}

.menu {
  display: flex;
  justify-content: center;
}
.menu li a {
  display: block;
  width: 255px;
  height: 84px;
}
.menu01,.menu02,.menu03,.menu04,.menu05 {
  background-size: cover;
  width: 254px;
  height: 84px;
}
.menu00 {background: url(../images/menu00.svg) no-repeat; width: 332px; height: 84px;}
.menu01 {background: url(../images/menu01.svg) no-repeat;}
.menu02 {background: url(../images/menu02.svg) no-repeat;}
.menu03 {background: url(../images/menu03.svg) no-repeat;}
.menu04 {background: url(../images/menu04.svg) no-repeat;}
.menu05 {background: url(../images/menu05.svg) no-repeat;}
.header_entry {
  background-size: cover;
  width: 335px;
  height: 126px;
  margin-left: -7px;
  background: url(../images/header_entry_pc.svg) no-repeat;
}
#header .header_entry a {
  display: block;
  width: 335px;
  height: 126px;
}
.header_entry:hover{
  background: url(../images/header_entry_pc_hover.svg) no-repeat;
}
.menu00:hover {
  background: url(../images/menu00_hover.svg) no-repeat;
  /* background-size: cover; */
}
.menu01:hover {
  background: url(../images/menu01_hover.svg) no-repeat;
  /* background-size: cover; */
}
.menu02:hover {
  background: url(../images/menu02_hover.svg) no-repeat;
  /* background-size: cover; */
}
.menu03:hover {
  background: url(../images/menu03_hover.svg) no-repeat;
  /* background-size: cover; */
}
.menu04:hover {
  background: url(../images/menu04_hover.svg) no-repeat;
  /* background-size: cover; */
}
.menu05:hover {
  background: url(../images/menu05_hover.svg) no-repeat;
  /* background-size: cover; */
}

/**************
トップ
**************/
#top {
  background: url(../images/top_bg_pc.png) no-repeat;
  background-size: cover;
  width: 1920px;
  height: 777px;
  top: 83px;
  position: relative;
}
.top_tit_area {
  width: 50%;
  height: 50%;
}
#top .top_catch {
  background: url(../images/top_catch.svg) no-repeat;
  background-size: cover;
  position: absolute;
  width: 1125px;
  height: 207px;
  top: -11px;
  left: -118px;
}
#top .top_tit {
  background: url(../images/top_tit.png) no-repeat;
  background-size: cover;
  width: 1100px;
  height: 310px;
  position: absolute;
  top: 160px;
  left: 170px;
}
#top .top_day {
  background: url(../images/top_day.svg) no-repeat;
  background-size: cover;
  position: absolute;
  width: 735px;
  height: 64px;
  top: 500px;
  left: 324px;
}
/**************
コンテンツ共通 
**************/
.con_box {
  position: relative;
  background: rgb(246 254 255 / 60%);
  border-radius: 43px;
  padding: 30px 50px 50px;
  text-align: center;
  overflow: visible;
}
.con_wrap {
  position: relative;
  border-radius: 20px;
  padding: 0; /* 枠線ではなく擬似要素で装飾するので不要 */
  width: 1280px;
  margin: 80px auto 50px;
  background: none;
}
/* 枠線用の擬似要素 */
.con_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  padding: 4px;
  background: linear-gradient(155deg, #975A19, #f5e7aa, #c49e4f, #c39d3f, #f5e7aa, #6c5b10);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}
/* 上部装飾（共通） */
.con_box::before {
  content: '';
  position: absolute;
  top: -58px;
  left: 6%;
  width: 100%;
  max-width: 210px;
  height: 260px;
  background: url(../images/con_obi_top.svg) no-repeat center top;
  background-size: contain;
  transform: translateX(-50%);
  z-index: 1;
}
/* 下部装飾（共通） */
.con_box::after {
  content: '';
  position: absolute;
  bottom: -61px;
  left: 94%;
  width: 100%;
  max-width: 210px;
  height: 260px;
  background: url(../images/con_obi_bottom.svg) no-repeat center bottom;
  background-size: contain;
  transform: translateX(-50%);
  z-index: 1;
}
/**************
コンテンツ1
**************/
.con01_tit {
  background: url(../images/con01_tit.svg) no-repeat center top;
  background-size: cover;
  width: 705px;
  height: 171px;
  margin: 0 auto;
}
.con01_lead {
  background: url(../images/con01_lead.svg) no-repeat center top;
  background-size: cover;
  width: 875px;
  height: 49px;
  margin: -20px auto 30px;
}
.con01_graph {
  background: url(../images/con01_graph.png) no-repeat center top;
  background-size: cover;
  position: relative;
  width: 1046px;
  height: 578px;
  margin: 0 auto;
}
.con01_graph::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background: url(../images/con01_coin.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -143px;
  right: 10px;
  z-index: 2;
}
/**************
コンテンツ2
**************/
.con02_tit {
  background: url(../images/con02_tit.svg) no-repeat center top;
  background-size: cover;
  width: 645px;
  height: 141px;
  margin: 16px auto;
}
.con02_sanka {
  background: url(../images/con02_sanka.png) no-repeat center top;
  background-size: cover;
  width: 1046px;
  height: 211px;
  margin: -20px auto 30px;
}
.con02_usu {
  background-color: rgb(156 147 255 / 30%);
  margin: -50px auto 0;
  position: relative;
  padding: 30px 0;
  width: 1280px;
  right: 50px;
  bottom: -50px;
  border-radius: 0 0 40px 40px;
}
.con02_up {
  background: url(../images/con02_up_pc.png) no-repeat center top;
  background-size: cover;
  width: 1046px;
  height: 156px;
  margin: 0 auto;
}
.con02_up_kare {
  font-size: 23px;
  font-weight: bold;
  margin: 20px;
}
.con02_up_kare a {
  text-decoration: underline;
  text-underline-offset: 9px;
}
.con02_up_kare a:hover {
  color: rgb(255, 0, 0);
}
.con02_usu::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 313px;
  left: 64px;
  width: 173px;
  height: 140px;
  background: url(../images/con02_neko.png) no-repeat left bottom;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}
/**************
コンテンツ3
**************/
.con03_tit {
  background: url(../images/con03_tit.svg) no-repeat center top;
  background-size: cover;
  width: 695px;
  height: 151px;
  margin: 16px auto 0px;
}
.con03_lead {
  background: url(../images/con03_lead.png) no-repeat center top;
  background-size: cover;
  width: 340px;
  height: 31px;
  margin: -18px auto 18px;
}

.tab-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1046px;
  margin: 0 auto;
}

.tab-menu .tab {
  width: 251px;
  height: 187px;
  background-size: cover;
  background-repeat: no-repeat;
  text-indent: -9999px;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s;
  filter: drop-shadow(2px 4px 6px gray);
}

/* ホバー時は影を消す */
.tab-menu .tab:hover {
  transform: scale(1.02);
}

/* アクティブ時も影を消す */
.tab-menu .tab.active {
  filter: none;
}

.tab-contents {
  text-align: center;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* タブの背景画像（通常） */
.sche1 { background-image: url(../images/con03_tab01.png); }
.sche2 { background-image: url(../images/con03_tab02.png); }
.sche3 { background-image: url(../images/con03_tab03.png); }
.sche4 { background-image: url(../images/con03_tab04.png); }
.sche5 { background-image: url(../images/con03_tab05.png); }
.sche6 { background-image: url(../images/con03_tab06.png); }
.sche7 { background-image: url(../images/con03_tab07.png); }
.sche8 { background-image: url(../images/con03_tab08.png); }

/* アクティブ時の画像変更 */
.sche1.active { background-image: url(../images/con03_tab01_active.png); }
.sche2.active { background-image: url(../images/con03_tab02_active.png); }
.sche3.active { background-image: url(../images/con03_tab03_active.png); }
.sche4.active { background-image: url(../images/con03_tab04_active.png); }
.sche5.active { background-image: url(../images/con03_tab05_active.png); }
.sche6.active { background-image: url(../images/con03_tab06_active.png); }
.sche7.active { background-image: url(../images/con03_tab07_active.png); }
.sche8.active { background-image: url(../images/con03_tab08_active.png); }

.con03_usu {
  background-color: rgb(0 151 44 / 30%);
  margin: -20px auto 0;
  position: relative;
  padding: 30px 0;
  width: 1280px;
  right: 50px;
  bottom: -50px;
  border-radius: 0 0 40px 40px;
}
.con03_chance01 {
  background: url(../images/con03_chance01_pc.png) no-repeat center top;
  background-size: cover;
  width: 1046px;
  height: 94px;
  margin: 0 auto 15px;
}
.con03_chance02 {
  background: url(../images/con03_chance02_pc.png) no-repeat center top;
  background-size: cover;
  width: 1046px;
  height: 102px;
  margin: 0 auto;
}
.con03_chance {
  font-size: 16px;
  margin: 20px;
}
.con03_usu::before {
  content: "";
  position: absolute;
  bottom: 229px;
  right: 30px;
  width: 280px;
  height: 200px;
  background: url(../images/con03_boat.png) no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
/**************
コンテンツ4
**************/
.con04_tit {
  background: url(../images/con04_tit.svg) no-repeat center top;
  background-size: cover;
  width: 660px;
  height: 131px;
  margin: 26px auto 10px;
}
.con04_tousen {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: -23px;
}
.tousen01 {
  background: url(../images/con04_tousen01_pc.png) no-repeat center top;
  background-size: cover;
  width: 498px;
  height: 306px;
  margin-right: 27px;
}
.tousen02 {
  background: url(../images/con04_tousen02_pc.png) no-repeat center top;
  background-size: cover;
  width: 498px;
  height: 306px;
}
.con04_tousen::before {
  content: "";
  position: absolute;
  bottom: 34px;
  left: -16px;
  width: 190px;
  height: 162px;
  background: url(../images/con03_toko.png) no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
/**************
当選
**************/
.tosen_area {
  background: url(../images/con05_bg_pc.png) no-repeat center top;
  background-size: cover;
  width: 1280px;
  margin: 80px auto 50px auto;
  position: relative;
  height: 646px;
}
.tosen{
  text-align: center;
  padding: 70px 0;
}
/* 上部装飾（共通） */
.tosen::before {
  content: '';
  position: absolute;
  top: -58px;
  left: 6%;
  width: 100%;
  max-width: 210px;
  height: 260px;
  background: url(../images/con_obi_top.svg) no-repeat center top;
  background-size: contain;
  transform: translateX(-50%);
  z-index: 1;
}
/* 下部装飾（共通） */
.tosen::after {
  content: '';
  position: absolute;
  bottom: -61px;
  left: 94%;
  width: 100%;
  max-width: 210px;
  height: 260px;
  background: url(../images/con_obi_bottom.svg) no-repeat center bottom;
  background-size: contain;
  transform: translateX(-50%);
  z-index: 1;
}
.con05_tit {
  background: url(../images/con05_tit.svg) no-repeat center top;
  background-size: cover;
  width: 1015px;
  height: 71px;
  margin: 0px auto 40px;
}

.tosen .link{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 1040px;
  margin: 35px auto 0 auto;
 }
 
 .tosen .link li {
  width: 50%;
  margin-bottom: 5px;
  margin-right: 5px;
  overflow: hidden;
}
 .tosen .link li a{
  display: flex;
  line-height: 55px;
  justify-content: left;
 }

 .tosen .link li a p:nth-child(2){
  color: #FFF;
  font-size: 22px;
  font-weight: bold;
  margin-left: 15px;
  text-decoration: underline;
  text-decoration-color: #e0cfa2;
  width: 185px;
  text-align: center;
  font-family: serif;
 }
 .tosen .link li a p:nth-child(3){color: #FFF; text-align: center;width: 120px; margin-left: 20px;}

 .tosen .link li.no{
  pointer-events: none;
 }
 .tosen .link li.no p{display: none;}
 .tosen .link li.no p.month{
  display: block;
 }
 .tosen .link li:nth-child(odd):hover,
 .tosen .link li:nth-child(even):hover{
  background: rgba(0, 0, 0, 0.40);
 }
 .tosen .link li a .month {
  background: #d7cf60;
  width: 100px;
  text-align: center;
  color: #000;
  font-size: 40px;
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

/* 内側の黒い枠線を疑似要素で追加 */
.tosen .link li a .month::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 3px solid #958f35;
  box-sizing: border-box;
  z-index: 1;
  pointer-events: none;
}

/* 文字を内側の枠より上に */
.tosen .link li a .month span,
.tosen .link li a .month {
  position: relative;
  z-index: 2;
}
 .tosen .link li a .month span {
  font-size: 25px;
 }
 .tosen .link li {background: rgba(0, 0, 0, 0.25);}

.tosen .comingsoon{
  position: relative;
  top: 70px;
}
/**************
エントリー
**************/
.btn {
  background: url(../images/entry_btn_pc.svg) no-repeat center top;
  background-size: cover;
  width: 1280px;
  height: 145px;
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(2px 8px 5px gray);
}
.btn a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.btn:hover {
  background: url(../images/entry_btn_pc_hover.svg) no-repeat center top;
  background-size: cover;
  filter: none;
  transform: translateY(5px);
  transition: transform 0.3s ease;
}
ul.come{
  width: 1000px;
  margin: 50px auto;
  color: #000000;
  position: relative;
}

ul.come li{
  text-indent: -1em;
  padding-left: 1em;
}

ul.come li a{color: #000; text-decoration: underline;}
ul.come li a:hover{text-decoration: none;}

#con01::before,
#con02::before,
#con03::before,
#con04::before {
  content: "";
  display: block;
  height: 117px;        /* 固定ヘッダーと同じ高さ */
  margin-top: -117px;   /* 見た目上の位置を戻す */
}

}

/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) { 

.sp_no{display: none!important;}

#sns{
  display: flex;
  justify-content: center;
  width: 680px;
  margin: 0 auto 40px auto;
  position: relative;
}

#facebook {
  background: url(../images/fb_bt_sp.png) no-repeat;
}
#twitter {
  background: url(../images/twi_bt_sp.png) no-repeat;
  margin-right: -9px;
}

#facebook a,
#twitter a{
  margin: 0 -6px;
  width: 355px;
  height: 95px;
}

.facebook,
.twitter{
  width: 355px;
  height: 99px;
  position: relative;
  display: flex;
  justify-content: center;
}

#sns .fb-timeline{
  width: 500px;
  height: 520px;
}

#sns .tw-timeline{
  width: 500px;
  height: 520px;
}

footer{
  background:#000;
  padding: 20px 0; 
}

footer address{text-align: center;
  width: 387px;
  margin: 0 auto;
}

#footer {
  position: relative;
  z-index: 2;
  color: #fff;
  background: #000;
  height: 54px;
  width: 100%;
  min-width: 750px;
  font-size: 16px;
  line-height: 54px;
  text-align: center;
}

#wrapper::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  max-width: 750px;
  min-height: 1200px;
  background: url(../images/bg.png) repeat-y center top / 100% auto;
  position: fixed;
  top: 0;
}

header{
  bottom: 0;
  top: auto ;
  height: 150px;
}

#header {
  width: 750px;
  height: 225px;
  position: relative;
  z-index: 100;
}

/**************
メニュー
**************/

/* menu01〜menu04 だけ固定にする */
.menu_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 750px;
  z-index: 100;
}
.menu_news {
  position: relative;
  top: 164px;
  height: 73px;
}
.menu_news p a {
  font-size: 26px;
  color: #fff;
  font-weight: 500;
  line-height: 70px;
  margin-left: 167px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.menu li a {
  display: block;
  width: 187px;
  height: 103px;
}
.menu00 a {
  width: 750px !important;
  height: 48px !important;
}
.menu05 a {
  width: 750px !important;
  height: 74px !important;
}
.menu05 a {
  display: block;
  /* width: 327px !important; */
  height: 73px !important;
}
.menu01,.menu02,.menu03,.menu04 {
  background-size: cover;
  width: 187px;
  height: 103px;
}
.menu00 {background: url(../images/menu00_sp.svg) no-repeat; width: 100%; height: 60px;}
.menu01 {background: url(../images/menu01_sp.svg) no-repeat;}
.menu02 {background: url(../images/menu02_sp.svg) no-repeat;}
.menu03 {background: url(../images/menu03_sp.svg) no-repeat;}
.menu04 {background: url(../images/menu04_sp.svg) no-repeat;}
.menu05 {background: url(../images/news.svg) no-repeat;}
.menu05 {
  background-size: cover;
  width: 750px;
  height: 74px;
}
.header_entry {
  background-size: cover;
  width: 201px;
  height: 201px;
  background: url(../images/header_entry_sp.svg) no-repeat;
  position: relative;
  top: 636px;
  right: 200px;
  filter: drop-shadow(2px 6px 6px gray);
}
#header .header_entry a {
  display: block;
  width: 201px;
  height: 201px;
}
.entry_fixed {
  display: none;
  position: fixed;
  bottom: 0px;
  /* right: 20px; */
  width: 750px;
  height: 95px;
  background: url(../images/footer_entry_sp.svg) no-repeat center / cover;
  z-index: 9999;
  filter: drop-shadow(0px -2px 15px gray);
}

.entry_fixed a {
  display: block;
  width: 100%;
  height: 100%;
}
/**************
トップ
**************/
#top {
  background: url(../images/top_bg_sp.png) no-repeat;
  background-size: cover;
  width: 750px;
  height: 1172px;
  position: relative;
  margin: -61px 0 0;
}
.top_tit_area {
  width: 100%;
  height: 34%;
  position: relative;
  top: 79px;
}
#top .top_catch {
  background: url(../images/top_catch.svg) no-repeat;
  background-size: cover;
  position: absolute;
  width: 975px;
  height: 202px;
  top: -31px;
  right: 0px;
}
#top .top_tit {
  background: url(../images/top_tit.png) no-repeat;
  background-size: cover;
  width: 690px;
  height: 195px;
  position: absolute;
  top: 130px;
  right: 4%;
}
#top .top_day {
  background: url(../images/top_day.svg) no-repeat;
  background-size: cover;
  position: absolute;
  width: 690px;
  height: 60px;
  top: 333px;
  right: 4%;
}
/**************
コンテンツ共通 
**************/
.con_box {
  position: relative;
  background: rgb(246 254 255 / 60%);
  border-radius: 43px;
  padding: 30px 30px 50px;
  text-align: center;
  overflow: visible;
}
.con_wrap {
  position: relative;
  border-radius: 20px;
  padding: 0;
  width: 1500px;
  margin: -30px auto 80px;
  background: none;
  right: 50%;
}
/* 枠線用の擬似要素 */
.con_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  padding: 4px;
  background: linear-gradient(155deg, #975A19, #f5e7aa, #c49e4f, #c39d3f, #f5e7aa, #6c5b10);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}
/**************
コンテンツ1
**************/
.con01_tit {
  background: url(../images/con01_tit.svg) no-repeat center top;
  background-size: cover;
  width: 705px;
  height: 171px;
  margin: 0 auto;
}
.con01_lead {
  background: url(../images/con01_lead_sp.svg) no-repeat center top;
  background-size: cover;
  width: 985px;
  height: 103px;
  margin: -20px auto 30px;
}
.con01_graph {
  background: url(../images/con01_graph_sp.png) no-repeat center top;
  background-size: cover;
  position: relative;
  width: 750px;
  height: 639px;
  margin: 0 auto;
}
/* .con01_graph::before {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  background: url(../images/con01_coin.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -135px;
  right: 13px;
  z-index: 2;
} */
/**************
コンテンツ2
**************/
.con02_tit {
  background: url(../images/con02_tit.svg) no-repeat center top;
  background-size: cover;
  width: 645px;
  height: 141px;
  margin: 16px auto;
}
.con02_sanka {
  background: url(../images/con02_sanka.png) no-repeat center top;
  background-size: cover;
  width: 750px;
  height: 211px;
  margin: -20px auto 40px;
}
.con02_usu {
  background-color: rgb(156 147 255 / 30%);
  margin: -50px auto 0;
  position: relative;
  padding: 45px 0;
  width: 750px;
  bottom: -50px;
}
.con02_up {
  background: url(../images/con02_up_sp.png) no-repeat center top;
  background-size: cover;
  width: 690px;
  height: 259px;
  margin: 0 auto;
}
.con02_up_kare {
  font-size: 28px;
  font-weight: bold;
  margin: 20px;
}
.con02_up_kare a {
  text-decoration: underline;
  text-underline-offset: 9px;
}
.con02_up_kare a:hover {
  color: rgb(255, 0, 0);
}
.con02_usu::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 555px;
  left: 8px;
  width: 188px;
  height: 140px;
  background: url(../images/con02_neko.png) no-repeat left bottom;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}
/**************
コンテンツ3
**************/
.con03_tit {
  background: url(../images/con03_tit.svg) no-repeat center top;
  background-size: cover;
  width: 695px;
  height: 151px;
  margin: 16px auto 0px;
}
.con03_lead {
  background: url(../images/con03_lead_sp.png) no-repeat center top;
  background-size: cover;
  width: 423px;
  height: 35px;
  margin: -20px auto 21px;
  position: relative;
  right: 10px;
}

.tab-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 690px;
  margin: 0 auto 10px;
}

.tab-menu .tab {
  width: 165px;
  height: 144px;
  background-size: cover;
  background-repeat: no-repeat;
  text-indent: -9999px;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s;
  filter: drop-shadow(2px 4px 6px gray);
}

/* アクティブ時も影を消す */
.tab-menu .tab.active {
  filter: none;
}

.tab-contents {
  text-align: center;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* タブの背景画像（通常） */
.sche1 { background-image: url(../images/con03_tab01_sp.png); }
.sche2 { background-image: url(../images/con03_tab02_sp.png); }
.sche3 { background-image: url(../images/con03_tab03_sp.png); }
.sche4 { background-image: url(../images/con03_tab04_sp.png); }
.sche5 { background-image: url(../images/con03_tab05_sp.png); }
.sche6 { background-image: url(../images/con03_tab06_sp.png); }
.sche7 { background-image: url(../images/con03_tab07_sp.png); }
.sche8 { background-image: url(../images/con03_tab08_sp.png); }

/* アクティブ時の画像変更 */
.sche1.active { background-image: url(../images/con03_tab01_active_sp.png); }
.sche2.active { background-image: url(../images/con03_tab02_active_sp.png); }
.sche3.active { background-image: url(../images/con03_tab03_active_sp.png); }
.sche4.active { background-image: url(../images/con03_tab04_active_sp.png); }
.sche5.active { background-image: url(../images/con03_tab05_active_sp.png); }
.sche6.active { background-image: url(../images/con03_tab06_active_sp.png); }
.sche7.active { background-image: url(../images/con03_tab07_active_sp.png); }
.sche8.active { background-image: url(../images/con03_tab08_active_sp.png); }

.con03_usu {
  background-color: rgb(0 151 44 / 30%);
  margin: -20px auto 0;
  position: relative;
  padding: 50px 0;
  width: 750px;
  bottom: -50px;
}
.con03_chance01 {
  background: url(../images/con03_chance01_sp.png) no-repeat center top;
  background-size: cover;
  width: 690px;
  height: 223px;
  margin: 0 auto 15px;
}
.con03_chance02 {
  background: url(../images/con03_chance02_sp.png) no-repeat center top;
  background-size: cover;
  width: 690px;
  height: 232px;
  margin: 0 auto;
}
.con03_chance {
  font-size: 28px;
  margin: 20px;
  text-align: left;
}
.con03_usu::before {
  content: "";
  position: absolute;
  bottom: 654px;
  right: -10px;
  width: 280px;
  height: 200px;
  background: url(../images/con03_boat.png) no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
/**************
コンテンツ4
**************/
.con04_tit {
  background: url(../images/con04_tit.svg) no-repeat center top;
  background-size: cover;
  width: 660px;
  height: 131px;
  margin: 26px auto 10px;
}
.con04_tousen {
  margin: -23px auto 20px;
  width: 690px;
}
.tousen01 {
  background: url(../images/con04_tousen01_sp.png) no-repeat center top;
  background-size: cover;
  width: 690px;
  height: 209px;
  margin-bottom: 20px;
}
.tousen02 {
  background: url(../images/con04_tousen02_sp.png) no-repeat center top;
  background-size: cover;
  width: 690px;
  height: 209px;
}
.con04_tyui p {
  font-size: 24px;
}
/**************
当選
**************/
.tosen_area {
  background: url(../images/con05_bg_sp.png) no-repeat center top;
  background-size: cover;
  width: 750px;
  margin: -30px auto 50px auto;
  position: relative;
  height: 1380px;
}
.tosen{
  text-align: center;
  padding: 70px 0;
}

.con05_tit {
  background: url(../images/con05_tit.svg) no-repeat center top;
  background-size: cover;
  width: 750px;
  height: 71px;
  margin: 0px auto 40px;
}

.tosen .link{
  height: 1160px;
  width: 690px;
  margin: 35px auto 0 auto;
 }
 
 .tosen .link li {
  margin-bottom: 12px;
  margin-right: 5px;
  overflow: hidden;
}
 .tosen .link li a{
  display: flex;
  line-height: 78px;
  justify-content: left;
 }

 .tosen .link li a p:nth-child(2){
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
  margin-left: 15px;
  text-decoration: underline;
  text-decoration-color: #e0cfa2;
  width: 265px;
  text-align: center;
  font-family: serif;
 }
 .tosen .link li a p:nth-child(3){color: #FFF; text-align: center;width: 120px; margin-left: 20px;}

 .tosen .link li.no{
  pointer-events: none;
 }
 .tosen .link li.no p{display: none;}
 .tosen .link li.no p.month{
  display: block;
 }
 /* .tosen .link li:nth-child(odd):hover,
 .tosen .link li:nth-child(even):hover{
  background: rgba(238, 255, 0 , 0.5);
 } */
 .tosen .link li a .month {
  background: #d7cf60;
  width: 150px;
  text-align: center;
  color: #000;
  font-size: 54px;
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

/* 内側の黒い枠線を疑似要素で追加 */
.tosen .link li a .month::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 3px solid #958f35;
  box-sizing: border-box;
  z-index: 1;
  pointer-events: none;
}

/* 文字を内側の枠より上に */
.tosen .link li a .month span,
.tosen .link li a .month {
  position: relative;
  z-index: 2;
}
 .tosen .link li a .month span {
  font-size: 40px;
  margin-left: 3px;
 }
 .tosen .link li {background: rgba(0, 0, 0, 0.25);}

.tosen .comingsoon{
  position: relative;
  top: 70px;
}
/**************
エントリー
**************/
.btn {
  background: url(../images/entry_btn_sp.svg) no-repeat center top;
  background-size: cover;
  width: 690px;
  height: 135px;
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(2px 8px 5px gray);
}
.btn a {
  position: absolute;
  width: 100%;
  height: 100%;
}
ul.come{
  width: 690px;
  margin: 50px auto;
  color: #000000;
  position: relative;
  font-size: 24px;
}

ul.come li{
  text-indent: -1em;
  padding-left: 1em;
}

ul.come li a{color: #000; text-decoration: underline;}
ul.come li a:hover{text-decoration: none;}

.header_entry {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

}


/***********************************************************************
keyframes
**********************************************************************/

@keyframes narusmile{
  0%{
    transform: translateY(0px);
  }
  50%{
    transform: translateY(5px);
  }
  100%{
    transform: translateY(0px);
  }
}
@keyframes city{
  0%{
    background-position: 0 bottom;
  }
  100%{
    background-position: -2774px bottom;
  }
}
@keyframes arrow{
  0%{
    transform:translateX(0);
  }
  50%{
    transform:translateX(5px);
  }
  100%{
    transform:translateX(0);
  }
}
@keyframes kaiten{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
@keyframes photo{
  0%{
    transform:scale(1);
  }
  20%{
    transform:scale(0.8);
  }
  40%{
    transform:scale(1);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

.fade-in.delay-1 {
  animation-delay: 0.3s;
}
.fade-in.delay-2 {
  animation-delay: 0.6s;
}
.fade-in.delay-3 {
  animation-delay: 0.9s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}