@charset "shift_jis";

/* =icon fonts
----------------------------------*/
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.woff?27579303') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* =common
----------------------------------*/
html {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Helvetica, sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

body{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-feature-settings : "palt"; }

img {
  max-width: 100%;
}

.cf:after {
  content: "";
  display: block;
  clear: both;
}

a {
  text-decoration: none;
  color: #0000ff;
}

p,
dd,
h2,
h3 {
	margin: 0;
}

ul {
	padding: 0;
}

li {
	list-style-type: none;
}

iframe {
	border: 0;
}

input {
  border: 1px solid #8b8b8b;
}

table {
  width: 100%;
  line-height: 1.6;
}

table th {
  padding: 6px;
  background-color: #eeeeee;
  border: 1px solid #8b8b8b;
}

table td {
  padding: 4px;
  border: 1px solid #8b8b8b;
  background-color: #fff;
}

.table-common {
margin-bottom: 24px;
}


.table-common td.bg-none{
background-color: #fff;
padding: 0;
}

.table-common td{
padding: 10px;
background-color: #fff;
border: 1px solid #b9b9b9;
vertical-align: middle;
}

.table-common th{
width: 40%;
}

.table-inner {
width: 100%;
border-collapse: collapse;
}

.table-inner th{
border-top: 0;
border-left: 0;
}

.table-inner td{
border-top: 0;
border-right: 0;
}




.form-area {
background: #FFCC99;
padding: 20px;
}




.form-area2 p.table-section {
margin: 0 0 10px 20px;
padding: 0;
font-weight: bold;
text-align: left;
}

.common-table {
	/*margin-bottom: 24px;*/
}

.common-table th {
  padding: 6px;
  background-color: #eeeeee;
  border: 1px solid #8b8b8b;
}

.common-table td {
  padding: 4px;
  border: 1px solid #8b8b8b;
  background-color: #fff;
	text-align: center;
}

.common-h2 {
  color: #f02b1a;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.common-h2-02 {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;
	text-align: center;
	background-color: #f02b1a;
	padding: 6px;
}

.common-h3 {
  font-size: 16px;
  color: #f47b0f;
  line-height: 1.4;
}

.common-h3-02 {
  font-size: 16px;
  color: #f47b0f;
  line-height: 1.4;
  margin-top: 16px;
}

/* =モジュール 
.mb-8 {
  margin-bottom: 8px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-40 {
  margin-bottom: 40px;
}

.error-att {
	text-align: center;
	color: #f00;
	margin-bottom: 40px;
	font-size: 20px;
	font-weight: bold;
}

.form-att {
	text-align: center;
	color: #f00;
	margin-bottom: 40px;
}

.form-att2 {
	text-align: center;
	margin-bottom: 40px;
}

.back {
	text-align: center;
	margin-bottom: 40px;
	padding-top:24px;
}

.back a {

	text-decoration: underline;
}

/* =高さを揃える */
.arrange-height {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

/* =内部リンク */
a.internal::before {
  font-family: 'fontello';
  content: 'l';
  margin: 0 3px;
}

@media screen and (min-width: 768px) {
.common-h2 {
  margin-bottom: 16px;
}

.common-h3-02 {
  margin-bottom: 8px;
}
}
/*
@media screen and (min-width: 1024px) {
html {
  font-size: 16px;
}

.common-table th {
	width: 30%;
}

.common-table td {
	width: 70%;
	text-align: left;
	padding:12px;
}

.common-table2 th {
}

.common-table2 td {
	width: 40%;
	text-align: left;
	padding:12px;
}

.common-h2 {
  font-size: 20px;
}

.common-h3 {
  font-size: 18px;
}

.common-h3-02 {
  font-size: 16px;
}

table {
  line-height: 1.8;
}

table th {
  padding: 8px;
}

table td {
  padding: 8px 8px 8px 16px;
}

.sp-br {
  display: none;
}
}
*/
/* =ヘッダー
----------------------------------*/
header {
  background-color: #fff;
  border-top: solid 3px #e95098;
  min-height: 38px;
}

#logo-header {
  margin: 5px 0 0 5%;
  float: left;
  width: 92px;
}

/*h1 {
  font-size: 10px;
  color: #7f7f7f;
  margin: 10px 5% 0 0;
  float: right;
}*/
/*
@media screen and (min-width: 1024px) {
header {
  width: 960px;
  margin: 0 auto;
}

#logo-header {
  margin: 5px 0 0 20px;
  width: 92px;
}

h1 {
  margin: 10px 20px 0 0;
}
}*/

/* =
----------------------------------*/
/*#container {
  background-color: #fff;
	padding-bottom: 24px;
}
*/
.frame {
	border: 2px solid #f02b1a;
	margin-top: 24px;
}

.wrap {
  width: 90%;
  margin: 24px auto 0 auto;
}

.flow {
  width: 90%;
  margin: 24px auto;
}

.wrap-inner {
  width: 90%;
  margin: 24px auto 0 auto;
}

.att-info {
  color: #d51212;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  margin-bottom: 24px;
}

.info-ticket {
  color: #d51212;
  font-weight: bold;
  font-size: 16px;
  margin-top: 24px;
  text-align: center;
}

@media screen and (min-width: 768px) {
.wrap {
  margin: 32px auto 0 auto;
}

.info-ticket {
  font-size: 18px;
}
}

/*@media screen and (min-width: 1024px) {
#container {
  width: 960px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.wrap {
  width: 920px;
}

.info-ticket {
  font-size: 20px;
}
}
*/
/* =ボタン
----------------------------------*/
/*.red {
  color: #d51212;
}

.ticket-area {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 24px;
}

.btn-ticket {
  display: inline-block;
  width: 90%;
  outline: none;
  padding: 10px 8px 12px 8px;
  font-size: 16px;
  border: 1px solid #d51212;
  background-color: #ba0909;
  background-image: -webkit-linear-gradient(top, #f03a3a, #ba0909);
  background-image: linear-gradient(to bottom, #f03a3a, #ba0909);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
}

.btn-ticket::before {
  font-family: 'fontello';
  content: 'l';
  color: #fff;
  margin: 0 12px 0 0;
}

.btn-ticket:hover {
  border: 1px solid #e53d3d;
  background-color: #ba0909;
  background-image: -webkit-linear-gradient(top, #ba0909, #d12323);
  background-image: linear-gradient(to bottom, #ba0909, #d12323);
}

.col-3 .btn-ticket {
  width: 100%;
  font-size: 12px;
  padding: 10px 4px;
}

.col-4 .btn-ticket {
  width: 100%;
  font-size: 12px;
  padding: 10px 4px;
}

.btn-other {
  display: inline-block;
  width: 80%;
  outline: none;
  padding: 8px 4px 10px 4px;
  font-size: 14px;
  border: 1px solid #eea736;
  background-color: #e68200;
  background-image: -webkit-linear-gradient(top, #f5bb0c, #e68200);
  background-image: linear-gradient(to bottom, #f5bb0c, #e68200);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
}

.btn-other::before {
  font-family: 'fontello';
  content: 'l';
  color: #fff;
  margin: 0 12px 0 0;
}

.btn-other:hover {
  border: 1px solid #e0a903;
  background-color: #e68200;
  background-image: -webkit-linear-gradient(top, #df8510, #efa442);
  background-image: linear-gradient(to bottom, #df8510, #efa442);
}

@media screen and (min-width: 768px) {
.btn-ticket {
  width: 60%;
}

.btn-other {
  padding: 8px 4px 10px 4px;
  width: 50%;
}

.col-3 .btn-ticket {
  width: 80%;
}

.col-4 .btn-ticket {
  width: 80%;
}
}
*/
/*@media screen and (min-width: 1024px) {
.btn-ticket {
  width: 50%;
  font-size: 20px;
  padding: 12px 8px;
}

.col-2 .btn-ticket {
  width: 60%;
  font-size: 18px;
  padding: 10px 8px;
}

.col-3 .btn-ticket {
  font-size: 16px;
}

.col-4 .btn-ticket {
  width: 90%;
  font-size: 16px;
}

.btn-other {
  width: 50%;
  font-size: 16px;
  padding: 12px 8px;
}
}*/

/* =新着情報
----------------------------------*/
.news {
  width: 90%;
  margin: 16px auto 0 auto;
}

.news dt {
  margin-bottom: 8px;
  font-weight: bold;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 4px;
}

.news dd {
  margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
.news {
  margin: 32px auto 0 auto;
}
}

/*@media screen and (min-width: 1024px) {
.news {
  width: 920px;
}

.news-inner dt {
  width: 200px;
  float: left;
  clear:left;
  margin-top: 0;
  padding-right: 16px;
  border-bottom: 0;
}

.news-inner dd {
  padding-left: 201px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 16px;
}

.news-inner dd:last-child {
  border-bottom: 0;
}
}*/

/* =画像 1カラム
----------------------------------*/
.img-col-1 {
  margin-bottom: 12px;
  text-align: center;
}

/* =2カラム 流し込み 画像左寄せ
----------------------------------*/
.img-l {
  margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
.img-l {
  float: left;
  width: 47.5%;
  margin-right: 24px;
  margin-bottom: 40px;
}
}

/* =2カラム 流し込み 画像右寄せ
----------------------------------*/
.img-r {
  margin-bottom: 12px;
}

@media screen and (min-width: 768px) {
.table-r {
  float: right;
  width: 47.5%;
  margin-bottom: 16px;
}

.img-r {
  float: right;
  width: 47.5%;
  margin-left: 24px;
  margin-bottom: 16px;
}
}

/* =SP 1カラム / PC 2カラム
----------------------------------*/
.col-2 {
  margin-bottom: 16px;
  width: 100%;
}

@media screen and (min-width: 768px) {
.col-2 {
  width: 47.5%;
  margin-right: 5%;
  margin-bottom: 16px;
}

.col-2:nth-child(even) {
  margin-right: 0;
}
}

/*@media screen and (min-width: 1024px) {
.col-2 {
  width: 48.69%;
  margin-right: 24px;
  margin-bottom: 24px;
}
}*/

/* =SP 2カラム / PC 3カラム
----------------------------------*/
.col-3 {
  width: 47.499997%;
  margin-right: 5%;
  margin-bottom: 16px;
}

.col-3:nth-child(even) {
  margin-right: 0;
}

@media screen and (min-width: 768px) {
.col-3 {
  width: 30%;
  margin-right: 5%;
  margin-bottom: 16px;
}

.col-3:nth-child(2) {
  margin-right: 5%;
}

.col-3:nth-child(3) {
  margin-right: 0;
}

.col-3:nth-child(4) {
  margin-right: 5%;
}
}

/*@media screen and (min-width: 1024px) {
.col-3 {
  width: 31.59%;
  margin-right: 24px;
  margin-bottom: 24px;
}

.col-3:nth-child(2) {
  margin-right: 24px;
}

.col-3:nth-child(4) {
  margin-right: 24px;
}
}*/

/* =SP 2カラム / PC 4カラム
----------------------------------*/
.col-4 {
  width: 47.5%;
  margin-right: 5%;
  margin-bottom: 16px;
}

.col-4:nth-child(even) {
  margin-right: 0;
}

/*@media screen and (min-width: 1024px) {
.col-4 {
  width: 23.04%;
  margin-right: 24px;
  margin-bottom: 24px;
}

.col-4:nth-child(even) {
  margin-right: 24px;
}
  
.col-4:nth-child(4) {
  margin-right: 0;
}
}*/

/* =SNSボタン
----------------------------------*/
.arrange-sns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
}

.btn-sns {
  padding-right: 6px;
}

.fb_iframe_widget {
  width: auto !important;
  display: inline-block !important;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}

.btn-sns-pc {
  display: none;
}

@media screen and (min-width: 768px) {
.arrange-sns {
		margin-top: 48px;
}
}

/*@media screen and (min-width: 1024px) {
.btn-sns-sp {
  display: none;
}

.btn-sns-pc {
  display: inherit;
  padding: 7px 0 0 16px;
  float: right;
}

.btn-sns-pc div {
  float: left;
  padding-left: 8px;
}
}
*/
/* =動画
----------------------------------*/
.movie {
  padding-bottom: 12px;
}

.movie .player {
  position: relative;
  padding-top: 18px;
  padding-bottom: 50%;
}

.movie .player iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

@media screen and (min-width: 768px) {
.movie .player {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}

.movie .player iframe {
  height: 315px;
  width: 560px;
  top: 0;
  position: static;
}

.col-2 .movie .player iframe {
  height: 186px;
  width: 330px;
  top: 0;
  position: static;
}
}

/*@media screen and (min-width: 1024px) {
.col-2 .movie .player iframe {
  height: 252px;
  width: 448px;
  top: 0;
  position: static;
}
}*/

/* =ページトップに戻る
----------------------------------*/
.page-top {
  text-align: right;
  font-size: 11px;
  margin-right: 5%;
  padding-bottom: 16px;
  padding-top: 24px;
}

.page-top a::before {
  font-family: 'fontello';
  content: 't';
  margin: 0 3px;
}

@media screen and (min-width: 1024px) {
.page-top {
  font-size: 12px;
  margin-right: 20px;
}
}

/* =お気に入り登録
----------------------------------*/
.fv-area {
  margin: 24px auto 0 auto;
  padding: 0;
  width: 90%;
  border-radius: 4px;
  padding-bottom: 16px;
  border: 1px solid #f396c1;
}

.fv-area h2 {
  font-size: 16px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  text-align: center;
  background-color: #f396c1;
  padding: 8px;
  color: #fff;
}

.txt-fv {
  padding: 12px 12px 6px 12px;
}

.about-fv {
  padding-bottom: 12px;
  padding-left: 12px;
}

.btn-fv-area {
  text-align: center;
}

.btn-fv {
  display: inline-block;
  width: 80%;
  outline: none;
  padding: 8px 8px 10px 8px;
  font-size: 14px;
  border: 1px solid #c0c0c0;
  background-color: #b1b1b1;
  background-image: -webkit-linear-gradient(top, #dbdbdb, #b1b1b1);
  background-image: linear-gradient(to bottom, #dbdbdb, #b1b1b1);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
}

.btn-fv::before {
  font-family: 'fontello';
  content: 'l';
  color: #fff;
  margin: 0 12px 0 0;
}

.btn-fv:hover {
  border: 1px solid #c0c0c0;
  background-color: #b1b1b1;
  background-image: -webkit-linear-gradient(top, #b1b1b1, #cbcbcb);
  background-image: linear-gradient(to bottom, #b1b1b1, #cbcbcb);
}

@media screen and (min-width: 768px) {
.fv-area {
  margin: 32px auto 0 auto;
}

.btn-fv {
  width: 50%;
}
}

/*@media screen and (min-width: 1024px) {
.fv-area {
  margin: 40px auto 0 auto;
  width: 640px;
  border-radius: 4px;
  padding-bottom: 24px;
}

.fv-area h2 {
  font-size: 18px;
  padding: 12px;
}

.txt-fv {
  padding: 16px 16px 10px 16px;
}

.about-fv {
  padding-bottom: 12px;
  padding-left: 16px;
}

.btn-fv {
  width: 50%;
  padding: 12px 8px;
  font-size: 16px;
}
}*/

/* パンくずリスト
----------------------------------*/
.breadcrumb {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 16px;
}

.breadcrumb li {
  display: inline;
  font-size: 11px;
}

.breadcrumb li a {
  text-decoration: underline;
}

.breadcrumb li::after {
  content: " > ";
}

.breadcrumb li:last-child::after {
  content: "";
}

/*@media screen and (min-width: 1024px) {
.breadcrumb {
  width: 920px;
}

.breadcrumb li {
  font-size: 14px;
}
}*/

/* =フォーム
----------------------------------*/
select {
  border: 1px solid #8b8b8b;
	}

.maisuu {
	width: 30%;
	}


/* =フッター
----------------------------------*/
footer {
  padding: 16px 0;
  text-align: center;
  color: #000;
  background-color: #fff;
}

footer img {
  width: 41px;
  margin-bottom: 8px;
}

/*@media screen and (min-width: 1024px) {
footer {
  width: 960px;
  margin: 0 auto;
}
}*/

/* 20190123 */
/* linkButtonBased */

/* 入力エラーのスタイル */
#app-form input[type=text]:required,
#app-form input[type=email]:required,
#app-form input[type=email]:invalid,
textarea:required {
  color: #630015;
  border-color: #c20c33;
  background-color: #ffd9e1;
}

/* 入力値が正常な時のスタイル */
#app-form input[type=text]:valid,
#app-form input[type=email]:valid,
textarea:valid {
 color: #727272;  border: 1px solid #c0c0c0; background-color: #f8f8f8;
}

.link-button a { box-sizing: border-box; display: block; font-size: 28px; font-weight: bold; line-height: 1em; margin: 0 auto; padding: 1.2em 0 1.1em; position: relative; text-align: center; transition: .1s; width: 54%; }
.link-button a:hover { text-decoration: none; }
.link-button a:active {  }
/* linkButtonColor */
.link-button a { background: #e95098; color: #fff; }
.link-button a:hover { opacity: .7;}
.link-button a:active { }
p.text-list,
span.text-list,
.text-list ul li { padding: 0 0 .2em 0; font-size: 14px; line-height: 1.4em; }

.container{max-width: 1000px; width: 92%; margin: 0 auto; padding: 80px 0 60px;}
.bg-full{width: 100%; background-color: #fff; margin: 0 auto; display: block;}
.bg-full:nth-of-type(even){background-color: #f8f8f8;}
.clearfix,
.float-box::after{content: ""; clear: both; display: block;}
.text-pink{color: #ff0876;}
.font-bold { font-weight: bold; }
.pc-none{display: none !important;}
.sp-none{display: block !important;}

#main-img{width: 100%; background-color: #fff;}
#main-img h1{width: 100%; max-width: 900px; margin: 0 auto;}
#main-img h1 img{width: 100%;}

#howto .float-box{width: 100%;}
#app-form h2,
#howto h2{position: relative; font-size: 34px; line-height: 1em;margin-bottom: 60px;}
#app-form h2::after,
#howto h2::after{content: ""; border-bottom:3px solid #000; position: absolute; left: 0; bottom: -20px; width: 65px;}
#howto h3{font-size: 24px; line-height: 1em; margin-bottom: 10px;}
#howto .content-wrap{}
#howto .content-wrap:not(:last-of-type){ border-bottom:3px solid #d6d6d6; position: relative;padding-bottom: 20px; margin-bottom: 30px;}
#howto .content-wrap:not(:last-of-type)::after{position: absolute; margin: auto; left: 0; right: 0; width: 16px; content: ""; height: 16px; border: 3px solid; border-color: #d6d6d6 #d6d6d6 #f8f8f8 #f8f8f8; bottom: -8px; transform: rotate(135deg); background-color: #f8f8f8;}
#howto .text-box{position: relative; padding-left: 5em;margin-bottom: 15px;}
#howto .howto01::before,
#howto .howto02::before,
#howto .howto03::before,
#howto .howto04::before,
#howto .howto05::before { background-repeat: no-repeat; background-position: center top; background-size: contain; content: ""; position: absolute; top: 0; left: 0; width: 65px; }
#howto .howto01::before { background-image: url(../images/icon_order.png); height: calc(84px * 0.509); }
#howto .howto02::before { background-image: url(../images/icon_answer.png); height: calc(94px * 0.57); }
#howto .howto03::before { background-image: url(../images/icon_payment.png); height: calc(87px * 0.527); }
#howto .howto04::before { background-image: url(../images/icon_send.png); height: calc(52px * 0.315); }
#howto .float-box .box02 p{}
#howto .float-box .box02{float: left;}
#howto .float-box .box02:first-of-type{width: 25%; margin-right: 2%;}
#howto .float-box .box02:last-of-type{width: 73%;}

#app-form .container{max-width: 900px;}
#app-form h2{text-align:center; }
#app-form h2::after{left: 0; right: 0; margin: auto; }
#app-form p.comment{color: #d51212; font-size: 16px; text-align: center; margin-bottom: 24px;}
#app-form .content-wrap{}
#app-form .content-wrap:not(:last-of-type){ border-bottom:1px solid #d6d6d6; position: relative;padding-bottom: 0px; margin-bottom: 60px;}
#app-form .dotted-line{}
#app-form .solid-line{ margin-bottom: 60px; border-bottom: 1px solid #d6d6d6; padding-bottom: 40px;}
#app-form table,
#app-form table th,
#app-form table td{border:none; background-color: transparent; vertical-align:top; padding: 0 0 40px 0; text-align:left;  line-height: 1.4em;}
#app-form table{width: 100%; margin-bottom: 30px;}
#app-form table th{width: 26%; text-align:left; }
#app-form table td{ width: 64%; }
#app-form select{height: 40px;color: #727272; padding-left:1em; border: 1px solid #c0c0c0; background-color: #f8f8f8;}
#app-form input{height: 40px;padding-left: 1em;color: #727272;  border: 1px solid #c0c0c0; background-color: #f8f8f8;}
#app-form input.red-box{border:1px solid #ff666a; background-color: #ffd7d7; }
#app-form .addnum-button{text-decoration: none; margin-top: 10px;font-size: 14px; display: block; background-color: #dc8f01; color: #fff; font-weight: normal; width: 100px; border-radius: 5px; text-align: center; line-height: 1em; padding: 0.5em 0.2em 0.5em; position: relative; cursor: pointer;}
#app-form .addnum-button:hover{opacity: .7;}
#app-form .check-link{text-decoration: none; margin-top: 10px;font-size: 14px; display: block; background-color: #dc8f01; color: #fff; font-weight: normal; width: 60%; border-radius: 26px; text-align: center; line-height: 1em; padding: 0.5em 0.2em 0.5em; position: relative;}
#app-form .check-link:hover{opacity: .7;}
#app-form .check-link::after{right: 10px; top: 50%; transform: translate3d(0,-50%,0) rotate(45deg); width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff;   content: ""; position: absolute;}
#app-form .smaller{width: 100%; max-width: 150px;}
#app-form .small{width: 100%; max-width: 220px;}
#app-form .normal{width: 100%; max-width: 250px; }
#app-form .game-day{width: 100%; max-width: 400px; }
#app-form .middle{width: 100%; max-width: 300px;}
#app-form .full{width: 100%;}
#app-form span{text-align:left; font-size: 14px; font-weight: normal; }
#app-form .text-red{color: #c00;}
#app-form .less{font-size: .8em; line-height: 1em;}
.mb-1em{margin-bottom: 1em;}
.pad-r-1em{padding-right: 1em;}
.pad-l-1em{padding-left: 1em;}
.pad-l-2em{padding-left: 2em;}
.pad-b-1em{padding-bottom:1em;}
.pad-b-06em{padding-bottom:.6em;}
.pad-t-06em{padding-top:.6em;}
.pad-l-06em{padding-left: .6em;}
.pad-l-04em{padding-left: .4em;}
#app-form .check-wrap{position: relative;}
#app-form .check-wrap p{}
#app-form .check-wrap input{position: absolute; right: 0; bottom: 0; height: auto; }
#app-form .checkbox-input{}
#app-form h3,
#app-form .anniversary-plan h4{line-height: 1.4em; color: #000; font-size:18px ; font-weight: bold; margin-bottom: 40px;}
#app-form h3 span.disc,
#app-form .anniversary-plan h4 span.disc{color: #c6c6c6;font-size: 1.1em;}
#app-form .must{position: relative;}
#app-form .must::before{content: ""; position: absolute; left: -4em; width: 40px; height: 20px; background-image: url(../images/must.gif); top:50%; transform: translate3d(0,-50%,0); background-size: contain;}
#app-form .pad-20{padding-bottom: 20px!important;}
#app-form .anniversary-plan{background-color: #fcede6; padding: 40px 30px 30px;margin-bottom: 60px;}
#app-form .anniversary-plan h3{text-align: center; font-size: 24px; margin-bottom: .8em;}
#app-form .anniversary-plan p{text-align: center; font-size: 16px; margin-bottom: 2em; color: #000;}
.btn-ticket{margin: 0 auto; text-align: center; font-weight: bold;width: 54%; padding: 1.5em 0 1.4em; font-size: 20px; line-height: 1em; text-decoration: none; background-image: none; text-shadow: none; color: #fff; border: none; background-color: #df0100; border-radius: 50px;}
.btn-ticket:hover{opacity: .7;}
.btn-ticket::before{content: none;}
.btn-ticket a{color: #fff; display: block; width: 100%;}
#app-form .inline-box{display: inline-block;padding-right: 2em;}
#app-form .inline-box p{display: inline-block;}
#app-form .inline-box .form-box{display: inline-block;}
#app-form .check-wrap02{width: 100%;}
#app-form .inline-box-02{display: inline-block; width: 40%;}
#app-form .check-wrap02 span{padding-left: 3em;}


.checkbox-input{display: none;}
.checkbox-parts{cursor: pointer; display: block; width: 100%; margin:0 auto;  position:relative; transition: 0.2s; }

.checkbox-parts::before{ content: ""; display: block; position: absolute;  bottom:0; right: 0;  width: 20px; height: 20px; border: 1px solid #999; }
.checkbox-input:checked ~ label {color:#c00;}
.checkbox-input:checked ~ .checkbox-parts::after{ content: ""; display: block; position: absolute; bottom: 5px; right: 4px; width: 12px; height: 18px; transform: rotate(40deg); border-bottom: 3px solid #c00;  border-right: 3px solid #c00;}
.bg-grey{background-color: #e5e5e5; padding: 1.6em 1em;}
.bg-grey::before{ content: ""; display: block; position: absolute;  top:50%; transform: translate3d(0,-50%,0); right: 5%;  width: 20px; height: 20px; border: 1px solid #999; }
.checkbox-input:checked ~ .bg-grey::after{ content: ""; display: block; position: absolute; top: calc(50% - 12px); right: 5.5%; width: 12px; height: 18px; transform: rotate(40deg); border-bottom: 3px solid #c00;  border-right: 3px solid #c00;}
.inline-box-02 .checkbox-parts::before{ content: ""; display: block; position: absolute;  top:50%; transform: translate3d(0,-50%,0); left: 0;  width: 20px; height: 20px; border: 1px solid #999; }
.checkbox-input:checked ~ .uniform::after{content: ""; display: block; position: absolute; top: 0; left: 5px; width: 12px; height: 18px; transform: rotate(40deg); border-bottom: 3px solid #c00;  border-right: 3px solid #c00;}
p.sub-ttl{padding-bottom: .6em;text-align: left; font-size: 14px; font-weight: normal; line-height: 1em;}

/* エラーページ */
p.error-att{font-size: 20px; line-height: 1em; color: #c00; font-weight: bold; text-align:center; }

/* 完了ページ */
#fin h2{position: relative; font-size: 34px; line-height: 1em;margin-bottom: 60px; text-align:center; }
p.form-att{font-size: 20px; line-height: 1.4em; color: #c00; font-weight: bold; text-align:center; }

/* 確認ページ */
p.form-att2{font-size: 18px; line-height: 1.4em; color: #000; font-weight: normal; text-align:center; }

@media screen and (max-width: 768px){
tbody,tr{display: block;}
/* linkButton */
.link-button a { font-size: 20px; text-decoration: none; width: 90%; }
.text-list p,
.text-list ul li { padding-bottom: .3em; }
.pc-none{display: block !important;}
.sp-none{display: none !important;}
.container{ padding: 8vw 0 10vw;}

#main-img{}
#main-img h1{width: 100%; margin: 0 auto;}
#main-img h1 img{}

#howto .float-box{width: 100%;}
#app-form h2,
#howto h2{font-size: 26px; margin-bottom: 8vw; text-align:center; margin-bottom: 16vw;}
#app-form h2::after,
#howto h2::after{content: ""; border-bottom:3px solid #000; position: absolute; left: 0; right: 0; margin:auto;  bottom: -20px; width: 65px;}
#howto h3{font-size: 20px; line-height: 1em; margin-bottom: 10px;}
#howto .content-wrap{}
#howto .content-wrap:not(:last-of-type){padding-bottom: 5vw; margin-bottom: 10vw;}
#howto .content-wrap:not(:last-of-type)::after{}
#howto .text-box{padding-left: 6em;margin-bottom: 5vw;}
#howto .float-box .box02 p{font-size: 16px; line-height: 1.4em;}
#howto .float-box .box02{float: none;}
#howto .float-box .box02:first-of-type,
#howto .float-box .box02:last-of-type{width: 100%; margin-right: 0%;}

#app-form .container{max-width: 900px;}
#app-form h2{}
#app-form h2::after{ }
#app-form p.comment{ font-size: 14px; text-align:left;  line-height: 1.4em;margin-bottom: 8vw;}
#app-form .content-wrap{}
#app-form .content-wrap:not(:last-of-type){ margin-bottom: 10vw;}
#app-form .dotted-line{}
#app-form table{margin-bottom: 0;}
#app-form table,
#app-form table th,
#app-form table td{padding: 0 0 0 0; text-align:left; width: 100%; display: block;}
#app-form table{}
#app-form table th{font-size: 18px; line-height: 1.4em; padding: 0 0 6vw 0;}
#app-form table td{padding: 0 0 10vw 0;}
#app-form select{height: 40px;color: #727272; padding-left:1em; border: 1px solid #c0c0c0; background-color: #f8f8f8;}
#app-form input{height: 40px;padding-left: 1em;color: #727272;  border: 1px solid #c0c0c0; background-color: #f8f8f8;}
#app-form a.check-link{width: 60%;}
#app-form .smaller{width: 100%; max-width: 150px;}
#app-form .small{width: 100%; max-width: 220px;}
#app-form .normal{width: 100%; max-width: 250px; }
#app-form .middle{width: 100%; max-width: 300px;}
#app-form .full{width: 100%;}
#app-form span{padding-left: 0; text-indent: 0; }
#app-form .text-red{color: #c00;}
#app-form .less{font-size: .7em; line-height: 1em;}
.mb-1em{margin-bottom: 1em;}
#app-form .check-wrap{position: relative;}
#app-form .check-wrap p{}
#app-form .check-wrap input{position: absolute; right: 0; bottom: 0; height: auto; }
#app-form .checkbox-input{}
#app-form h3,
#app-form .anniversary-plan h4{margin-bottom: 8vw; margin-top: 0;}
#app-form h3 span.disc,
#app-form .anniversary-plan h4 span.disc{color: #c6c6c6;}
#app-form .must{}
#app-form .must::before{display: none;}
#app-form .must-sp{position: relative;}
#app-form .must-sp::after{content: ""; position: absolute;  width: 40px; height: 20px; background-image: url(../images/must.gif); top:50%; transform: translate3d(0,-50%,0); background-size: contain;left: 10px;}
#app-form .pad-20{padding-bottom:0!important;}
#app-form .anniversary-plan{ padding: 20px 15px 15px; margin-bottom: 10vw;}
#app-form .anniversary-plan h3{text-align: center; font-size: 24px; margin-bottom: .8em;}
#app-form .anniversary-plan p{text-align: center; font-size: 16px; margin-bottom: 2em; color: #000;}
#app-form .solid-line{ margin-bottom: 9vw; padding-bottom: 5vw;}
.btn-ticket{width: 90%; padding: 1.2em 0 1.3em; font-size: 18px;}
#app-form tr.solid-line{padding-bottom: 0;}
.btn-ticket:hover{opacity: .7;}
.btn-ticket::before{content: none;}
.checkbox-parts{ width: 100%; padding: 10px 40px 10px 10px ;margin-right: 0px;}
.checkbox-parts::before {top: unset; left: unset; margin: 0; bottom: 10px;}
.bg-grey::before {top: unset; left: unset; margin: 0; bottom: 0px;}
.checkbox-input:checked ~ .checkbox-parts::after {left: unset; top: unset; bottom: 15px;}
.checkbox-input:checked ~ .bg-grey::after{bottom: 13px; right: 20px;}
#app-form .inline-box{padding-right: 0em; margin-bottom: 7vw;}
#app-form .inline-box p{margin-bottom: 0;}
#app-form .inline-box .form-box{}
#app-form .check-wrap02{width: 100%;}
#app-form .inline-box-02{display: block; width: 100%;}
#app-form .check-wrap02 span{padding-left: 2em;}
.sp-pad-b-none{padding-bottom: 0;}
.checkbox-input:checked ~ .uniform::after{right: unset; left: 4px; bottom: 16px;} 
.pad-l-06em,
.pad-l-2em{padding-left: 0em;}

/* 完了ページ */
#fin h2{ font-size: 26px; text-align: center; margin-bottom: 8vw;}
p.form-att{font-size: 16px;}
}

/*20200124 add*/
.must.top-10px { top: 10px; }
.paymentmethod ul { list-style-type: none; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; margin-bottom: 10px; width: 102%; }
.paymentmethod ul::after { content: ""; display: block; clear: both; }
.paymentmethod ul li { border-bottom: 1px solid rgba(0,0,0,.5); color: #000; display: block; float: left; margin-right: 2%; position: relative; width: 48%; }
.paymentmethod ul li input[type=radio]{position: absolute; visibility: hidden; }
.paymentmethod ul li label { box-sizing: border-box; display: block; position: relative; padding: 0 0 12px 67px; z-index: 9; cursor: pointer; transition: all 0.25s linear; }
.paymentmethod ul li:hover label{color: #f1f1f1; }
.paymentmethod ul li .check { display: block; position: absolute; border: 5px solid #aaa; border-radius: 100%; height: 25px; width: 25px; top: -1px; left: 20px; z-index: 5; transition: border .25s linear; }
.paymentmethod ul li:hover .check { border: 5px solid #f1f1f1; }
.paymentmethod ul li .check::before {display: block; position: absolute; content: ''; border-radius: 100%; height: 10px; width: 10px; top: 2.18px; left: 2.56px; margin: auto; transition: background 0.25s linear; }
.paymentmethod input[type=radio]:checked ~ .check {border: 5px solid #14c575; }
.paymentmethod input[type=radio]:checked ~ .check::before{background: #14c575; }
.paymentmethod input[type=radio]:checked ~ label{color: #14c575; }
.uniform.plan-ouen .inline-box-02 .checkbox-parts::before { border-radius: 50%; }
.checkbox-input:checked ~ .uniform::after { border: 5px solid #cc0000; border-radius: 50%; top: 6px; width: 8px; height: 8px; }

@media screen and (max-width: 768px){
.paymentmethod ul { width: 100%; }
.paymentmethod ul li,
.uniformouen-plan ul li { float: none; width: 100%; margin-right: 0; }
.paymentmethod ul li:not(:last-of-type),
.uniformouen-plan ul li:not(:last-of-type) { margin-bottom: 20px; }
.uniformouen-plan { width: 100%; }
}

#app-form .caution-h{font-weight: bold; font-size: 18px; line-height: 1em; margin-bottom: 7px; display: inline-block; background-color: #c00; color: #fff; width: 100px; text-align: center; padding: 8px 0;}
#caution p{padding: 0 1em 1em;}
#app-form .note-block{ background-color: #fff; box-sizing: border-box; padding: 30px; margin: 0 auto 50px; max-width: 600px; border-radius: 7px;}
#app-form .block-h{text-align: center; font-weight: bold; margin-bottom: 1em; font-size: 20px; line-height: 1.4em; color: #c00;}
#app-form .note-link{text-align: center;}
#app-form .note-link a{text-decoration: underline;}
#app-form .note-link a:hover{text-decoration: none;}
#app-form .checkbox-label-agree { display: none; }
#app-form .checkbox-parts-agree { cursor: pointer; display: block; margin: 0 auto; position: relative; padding: 35px 60px; text-align: center; width: 100%; box-sizing: border-box;}
#app-form .checkbox-parts-agree::before { background: #fff; border: 1px solid #999; content: ""; display: block; position: absolute; top: calc(50% - 17px); left: 15px; width: 34px; height: 34px; box-sizing: border-box;}
#app-form .checkbox-label-agree:checked ~ .checkbox-parts-agree::after { border-bottom: 3px solid; border-right: 3px solid; color: #f00; content: ""; display: block; position: absolute; left: 26px; top: calc(50% - 12px); transform: rotate( 40deg ); width: 10px; height: 16px; }

@media screen and (max-width: 768px){
  #app-form .note-block{ padding: 20px; margin: 0 auto 30px;}
  #app-form .checkbox-agree { margin-bottom: 25px;}
  #app-form .checkbox-parts-agree { padding: 25px 20px 25px 60px; text-align: left;}
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        /* #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;} */

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}