@charset "utf-8";

/* smart phone */
@media only screen and (max-width: 768px) {
  html {
    height: 100%;
    overflow: visible;
    font-size: 12px;
    min-width: 100%;
  }
  body {
    height: auto;
    position: relative;
    word-break: break-all;
    font-size: 14px;
    font-family:
      "Noto Sans JP", -apple-system, "Helvetica Neue", Verdana, "メイリオ", Meiryo,
      "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
      "Hiragino Kaku Gothic ProN", sans-serif;
    transition: none;
    transition: height 0.5s linear 0.1s;
  }
  html, body {
    overflow: visible;
    height: auto;
    display: block;
  }
  body.nav-overwrap {
    overflow: hidden !important;
    height: 100% !important;
  }
  .body {
    position: relative;
    filter: none;
    display: block;
  }
	body,
	div.body {
		/*overflow-x: visible;*/
		overflow-y: visible;
		overflow-x: hidden;
	}
  header div.title2 {
    min-width: 100% !important;
    padding-top: 50px;
    margin-bottom: 0;
    min-height: 450px;
    overflow: hidden;
  }
  header div.title2.privacy {
		min-height: 200px;
	}
  header div.title2:after {
	    background: url(../../images/common/title2_main_program_before_sp.png) no-repeat center;
	    background-size: 110%;
        background-position: -24px 3px;
	}
	.osaka header div.title2:after {
		background: url(../../images/common/title2_main_normal_before_osaka_sp.png) no-repeat center;
		background-size: 110%;
        background-position: -24px 3px;
	}
  header div.title2 .wrap {
  	min-height: 480px;
  	max-width: 100%;
  }
  header div.title2.privacy .wrap {
	    min-height: 200px;
	}
	header div.title2.privacy .main_title {
		width: 95%;
		margin: 0 auto;
	}
  header div.title2 .value {
	  margin: 40px 0 0 10px;
	  width: 40%;
	}
	header div.title2 .value img {
		width: 100%;
		height: auto;
	}
  header div.title2 p.tagline {
    font-size: 19px;
  }
  header div.title2 h1 {
    font-size: 16px;
    margin: 10px 0 10px 10px;
  }
  header div.title2 .page-title {
		width: 95%;
		height: 45px;
		background-size: contain;
		background-position: left;
		margin: 0 auto;
	}
  header div.title2 .subtitle {
    font-size: 18px;
  }
  header div.title2 .info {
    font-size: 16px;
  }
  header div.title2 .info span {
    display: block;
    margin: 6px auto 0;
  }
  header div.title2::after {
  	height: 450px;
  }
  h2 {
    font-size: 22px;
    margin: 40px 0 20px;
  }
  select {
    padding: 0 24px 0 5px;
    background: url("../../images/responsive/common/select_btn.svg") right
      center no-repeat;
  }
  input,
  select {
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 12px;
    font-family:
      -apple-system, "Helvetica Neue", Verdana, "メイリオ", Meiryo,
      "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
      "Hiragino Kaku Gothic ProN", sans-serif;
  }
  img {
    max-width: 100%;
  }
  .br-sp {
    display: inline;
  }
  .wrap {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  .wrap.wrap2 {
		min-height: 390px;
	}
  a,
  label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  /* nav */
  nav {
    /*position: static;*/
    padding: 0;
  }
  nav .wrap {
    height: 50px;
  }
  nav .logo {
    max-width: 200px;
    padding: 10px;
  }
  nav .nav-op-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 2.6875%;
    width: 30px;
    height: 30px;
    padding: 0;
    z-index: 5000;
    background: #fff;
  }
  nav .nav-op-btn.open {
  	background: none;
  }
  nav .nav-op-btn:before {
    content: "";
    width: 20px;
    height: 2px;
    background-color: #0062a4;
    position: absolute;
    top: 19px;
    left: 5px;
    transition-delay: 0.3s;
    transition-duration: 0.5s;
  }
  nav .nav-op-btn:after {
    content: "";
    width: 20px;
    height: 2px;
    background-color: #0062a4;
    position: absolute;
    top: 14px;
    left: 5px;
    transition-delay: 0.3s;
    transition-duration: 0.5s;
  }
  nav .nav-op-btn.open:before {
  	transform: rotate(135deg);
    top: 14px;
    transition-duration: 0.4s;
    background-color: #fff;
  }
  nav .nav-op-btn.open:after {
    transform: rotate(135deg);
    top: 14px;
    transition-duration: 0.4s;
    background-color: #fff;
  }
  nav .nav-op-btn div {
    position: absolute;
    width: 20px;
    top: 9px;
    left: 5px;
    height: 2px;
    background-color: #0062a4;

    transition-delay: 0.3s;
    transition-duration: 0.3s;
  }
  nav .nav-op-btn.open div {
    transform: rotate(45deg);
    top: 14px;
    transition-duration: 0.2s;
    background-color: #fff;
  }
  nav ul {
    display: block;
  }
  nav ul li,
  nav ul li:last-child {
    margin-right: auto;
  }

  /* nav */
  nav ul {
    opacity: 0;
    position: absolute;
    z-index: 4000;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border: none;
    box-sizing: border-box;
    background-color: var(--navy);
    overflow: hidden;

    transition:
      opacity 0.1s linear 0.6s,
      height 0.4s ease-out 0.1s;
  }
  nav.tokyo ul {
  	background-color: var(--blue);
  }
  nav.osaka ul {
  	background-color: #ff6d16;
  }
  nav ul.open {
    opacity: 1;
    height: calc(650px - 50px);
    overflow-y: scroll;
    padding: 0 0 30px;

    transition:
      opacity 0.1s linear 0.1s,
      height 0.4s ease-out 0.1s;
  }
  nav ul {
    margin-top: 50px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  nav ul li {
    text-align: center;
    opacity: 0;
    float: none;
    width: 70%;
    margin: 0 auto;
    transform: scale(1.1) translateY(-24px);

    transition:
      opacity 0.35s ease-out,
      transform 0.35s ease-out;
  }
	nav ul li.sougou,
	nav ul li.tokyo,
	nav ul li.osaka,
	nav ul li.registration,
	nav ul li.mypage{
		width: 70%;
		margin:5px auto;
	}
	nav.tokyo ul li.registration,
	nav.tokyo ul li.mypage,
	nav.osaka ul li.registration,
	nav.osaka ul li.mypage {
		width: 70%;
		margin:5px auto;
	}
  nav ul li > a {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
  nav ul li.active a:after {
  	display: none;
  }
  nav ul .register-btn a {
    box-sizing: border-box;
  }
  nav ul li:nth-child(1) {
    transition-delay: 0.45s, 0.45s;
  }
  nav ul li:nth-child(2) {
    transition-delay: 0.4s, 0.4s;
  }
  nav ul li:nth-child(3) {
    transition-delay: 0.35s, 0.35s;
  }
  nav ul li:nth-child(4) {
    transition-delay: 0.3s, 0.3s;
  }
  nav ul li:nth-child(5) {
    transition-delay: 0.25s, 0.25s;
  }
  nav ul li:nth-child(6) {
    transition-delay: 0.2s, 0.2s;
  }
  nav ul li:nth-child(7) {
    transition-delay: 0.15s, 0.15s;
  }

  nav ul.open li {
    opacity: 1;
    transform: none;

    transition:
      opacity 0.35s ease-out,
      transform 0.35s ease-out;
      border-bottom: 1px solid #fff;
  }
  nav ul.open li:nth-child(1) {
    transition-delay: 0.35s, 0.35s;
  }
  nav ul.open li:nth-child(2) {
    transition-delay: 0.4s, 0.4s;
  }
  nav ul.open li:nth-child(3) {
    transition-delay: 0.45s, 0.45s;
  }
  nav ul.open li:nth-child(4) {
    transition-delay: 0.5s, 0.5s;
  }
  nav ul.open li:nth-child(5) {
    transition-delay: 0.55s, 0.55s;
  }
  nav ul.open li:nth-child(6) {
    transition-delay: 0.6s, 0.6s;
  }
  nav ul.open li:nth-child(7) {
    transition-delay: 0.65s, 0.65s;
  }
  nav ul li.tokyo,
  nav ul li.osaka,
  nav ul li.registration,
  nav ul li.mypage {
  	border-bottom: none;
  }
	nav ul li.sougou {
		order: 3;
	}
	nav ul li.tokyo {
		order: 2;
	}
	nav ul li.osaka {
		order: 1;
	}
	nav ul li.outline {
		order: 4;
	}
	nav ul li.sponsor {
		order: 5;
	}
nav ul:after {
  	position: absolute;
  	content: "";
  	width: 100%;
  	height: 200px;
  	bottom: 0;
  	background: url(../../images/common/sougou_nav_after.png) no-repeat center/contain;
  }	
  /* main */
  main {
    padding: 0;
    width: 100%;
  }
  main:after {
	height: 200px;
	left: 0;
}


  /* footer */
  footer {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
    position: relative;
  }
  footer .wrap {
    margin: 0 auto;
    padding: 20px 0;
    width: 90%;
  }
  footer .wrap ul {
    text-align: right;
    margin-bottom: 20px;
  }
  footer .wrap ul li {
    display: inline;
    line-height: 1;
    border-left: 1px solid #000;
    padding-left: 14px;
    margin-left: 10px;
  }
  footer .wrap ul li:first-child {
    border-left: none;
  }
  footer .wrap ul li a {
    color: #000;
    text-decoration: none;
  }
  footer .wrap ul li a:hover {
    color: #777;
  }
  footer .wrap dl dt {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 20px;
    line-height: 1.5;
    padding: 0 0 0 20px;
  }
  footer .wrap dl dt::before {
		background-size: contain;
		width: 30px;
		height: 30px;
		top: -7px;
		left: 0px;
	}
  footer .wrap dl dd {
    font-size: 13px;
    line-height: 1.625;
  }
  footer .wrap dl dd p a {
    color: #32373e;
  }
  footer .wrap dl dd p a:hover {
    text-decoration: underline;
  }
  footer .wrap .office-time {
    font-size: 12px;
    margin: 4px 0;
  }
  footer .wrap .notice {
	  font-size: 11px;
	}
  footer .copy {
    font-size: 10px;
    margin: 10px auto;
    width: 90%;
  }
  .pc-non {
    display: block;
  }
  .sp-non {
    display: none;
  }
  /* pc sp */
	.pc_on {
		display: none;
	}
	.sp_on {
		display: block;
	}
  /* ============================================
	   #sponsorスポンサー
	============================================ */
	#sponsor {
	  padding: 40px 0;
	  margin: 0;
	}
	#sponsor .wrap:before {
		top: -158px;
        width: 100%;
        height: 85px;
	}
	
	#sponsor .wrap .cloud01 {
		width: 52%;
		height: 44px;
		left: -105px;
	}
	#sponsor .wrap .cloud02 {
		width: 52%;
	    top: -70px;
	    height: 44px;
	    right: -50px;
	}
	#sponsor h2 .title {
		font-size: 16px;
	}
	#sponsor h2 .img{
		width: 50%;
		display: block;
		margin: 0 auto 15px;
	}
	#sponsor h3.platinum .img{
		width: 58%;
	}
	#sponsor ul.platinum_list li {
		width: 100%;
	}
	#sponsor ul.platinum_list li a.logo {
	  width: 100%;
	}
	#sponsor ul.platinum_list li .video {
		width: 85%;
	}
	#sponsor h3.gold .img{
		width: 48%;
	}
	#sponsor h3.silver .img{
		width: 58%;
	}
	#sponsor h3.pca .img{
		width: 58%;
	}
	#sponsor ul {
		margin: 0 auto 40px;
		gap: 10px;
	}
	#sponsor ul li {
		border-radius: 15px;
		padding: 20px;
	}
	#sponsor ul.gold_list li {
		width: 47%;
		padding: 20px 15px;
		min-height: 135px;
		height: 135px;
	}
	#sponsor ul.silver_list li {
		width: 31%;
		padding: 20px 10px;
		min-height: 135px;
		height: 135px;
	}
	#sponsor ul.pca_list li {
		width: 47%;
		min-height: 135px;
		height: 135px;
	}
	#sponsor ul li a img.dreamhop{
		margin: 0;
	}
	#sponsor .wrap .sponsor-deco.parts01 {
	  width: 40%;
		bottom: -116px;
		left: -50px;
	}
	#sponsor .wrap .sponsor-deco.parts02 {
		width: 45%;
		bottom: -96px;
		right: -50px;
	}
	/* ============================================
	   #present プレゼント
	============================================ */
	
	
	#present {
		padding: 80px 0 250px;
	}
	#present .wrap {
		border-radius: 20px;
		padding: 20px 15px;
		width: 90%;
	}
	.present-title {
	  width: 60%;
	  margin: 0 auto 20px;
	}
	.present-title img {
	  height: auto;
	  width: 100%;
	}
	.present-subtitle {
	  font-size: 16px;
	  margin: 10px 0 0;
	  text-align: center;
	}
	#present .wrap p {
		font-size: 13px;
		text-align: center;
	}
	#present .wrap p span {
		font-size: 10px;
	}
	#present .wrap .item {
		position: relative;
	    right: 0;
	    top: 20px;
	    left: 0;
	    margin: 0 auto 20px;
	    width: 70%;
	}
	#present .wrap .item01 {
		display: none;
	}
	#present .pca-title {
		width: 80%;
		margin: 90px auto 20px;
	}
	.link-area {
		flex-wrap: wrap;
		position: relative;
		z-index: 10;
	}
	.link-area li {
	  width: 45%;
	}
	.link-area .linkbtn {
	  width: 100%;
	  margin: 20px auto 0;
	  border-radius: 40px;
	}
	.link-area .linkbtn a {
	  font-size: 16px;
	  padding: 10px 0;
	}
	.link-area .linkbtn a::after {
	  width: 10px;
	  height: 10px;
	  right: 20px;
	}
	footer::before {
	  position: absolute;
	  content: "";
	  width: 100%;
	  height: 320px;
	  background: url(../../images/common/footer_item_full_sp.png) no-repeat center;
	  background-size: cover;
	  top: -240px;
	  left: 0;
	}
	.registration_area {
		padding: 30px 0 40px;
	}
	.registration_area .link_area {
		width: 90%;
		margin: 20px auto 0;
	}
	.registration_area .link_area a {
		border: 6px solid var(--white);
		padding: 10px;
	}
	.registration_area .link_area a .icon {
		width: 70%;
		margin: 0 auto 15px;
	}
	.registration_area .link_area a p.date {
		font-size: 20px;
	}
	.registration_area .link_area a p.date span {
		font-size: 30px;
	}
	.registration_area .link_area a p.hotel {
		font-size: 14px;
		margin-bottom: 20px;
	}
	.venue-link-text {
	  font-size: 16px;
	  gap: 8px;
	}
	.venue-link-icon {
	  width: 30px;
	  height: 30px;
	  margin-right: 10px;
	}
	.venue-link-icon img {
	  width: 16px;
	  height: auto;
	}
	/* =================
	cv_btn
	====================*/
	.cv_btn {
		bottom: 10px;
		right: 10px;
		width: 119px;
		height: 154px;
	}
	
	/*=================
	privacy
	==================*/
	#privacy .wrap {
	    padding: 20px;
	    border-radius: 10px;
	    margin-bottom: 180px;
	}
	#privacy h3 {
	    font-size: 16px;
	    margin: 0 0 20px;
	}
	.privacy_list li {
	    font-size: 13px;
	    margin: 0 0 10px;
	}
	#privacy p {
	    font-size: 13px;
	}
}
@media only screen and (max-width: 480px) {
	header div.title2 .title_archan {
        bottom: 0;
        width: 100%;
    }
    footer::before {
        background-size: contain;
    }
    #sponsor .wrap:before {
		top: -123px;
		width: 100%;
		height: 44px;
	}
    #sponsor .wrap .sponsor-deco.parts01 {
        width: 60%;
    }
    #sponsor .wrap .sponsor-deco.parts02 {
        width: 63%;
    }
    #sponsor ul.gold_list li {
        width: 47%;
        padding: 20px 15px;
        min-height: 90px;
        height: 90px;
    }
    #sponsor ul.silver_list li {
		width: 31%;
		padding: 20px 10px;
		min-height: 90px;
		height: 90px;
	}
	#sponsor ul.pca_list li {
        width: 47%;
        min-height: 90px;
        height: 90px;
    }
}