@charset "UTF-8";
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}
/* Font */
@font-face {
font-family: 'MyriadPro';
src: url(../font/MyriadPro-Regular.woff) format("woff");
}
@font-face {
font-family: 'Belleza';
src: url(../font/Belleza-Regular.woff) format("woff");
}
@font-face {
font-family: 'Cormorant-VariableFont_wght';
src: url(../font/Cormorant-VariableFont_wght.woff) format("woff");
}
/* Header */
.header-box {
  height: 70px;
  width:100%;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background:#ffffff;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  margin:auto;
}

.logo {
  width: 40%;
  height: 70px;
  text-align: center;
  background:#ffffff;
}

.logo img{ width:346px; height:auto;}

@media only screen and (max-width: 767px) {
	
  .logo {
    width: 90%;
    height: 70px;
    text-align: center;
    background:#ffffff;
	margin:auto;
  }
  .logo img{width:90%; height:auto; max-width:300px;}
}
@media only screen and (max-width: 400px) {
	
.logo {
    width: 90%;
    height: 70px;
    text-align: center;
    background:#ffffff;
	margin:auto;
  }
  .logo img{width:80%; height:auto; max-width:280px;}
	
}

/* Key Image */
.key-image-box{width:100%; margin:0px;}
.Keyimage{ width:100%; margin:auto;}
.Keyimage img{
    width: 100%;
    height: auto;
    margin-top:-20px;
}

/*How it works*/
.how-box{background:url(../images/BG-how-it-works.jpg) center no-repeat; width:100%; margin-top:-27px; text-align:center; padding:50px 0;　background-size: cover; margin-bottom:40px;}

@media only screen and (max-width: 767px) {
  .how-box{background:url(../images/BG-how-it-works767.jpg) center no-repeat; margin-top:-35px; text-align:center; padding:50px 0;　margin-bottom:30px; height:895px;}
  .how-box img{width:96%; height:auto; margin-bottom:10px;}	
}

@media only screen and (max-width: 600px) {
  .how-box{background:url(../images/BG-how-it-works600.jpg) center no-repeat; margin-top:-35px; text-align:center; padding:60px 0;　margin-bottom:30px; height:700px;}
  .how-box img{width:100%; height:auto; margin-bottom:10px;}	
}

/*step1*/
.step{margin:auto; text-align:center; width:100%; max-width:1200px; margin-bottom:50px;}
.step img{ width:100%; height:auto;}

@media only screen and (max-width: 767px) {
  .step{margin:auto; text-align:center; width:100%; max-width:767px;}
}

/* map */
.map-section{text-align:center; width:100%; max-width:800px; margin:auto;}
.map-section img{margin:auto;}

/* 選ばれたロケーションのImage */
.selected-title{margin:auto; text-align:center; width:100%; padding:50px 10px 30px 10px; box-sizing:border-box;}
#displayedTitle{margin:auto; text-align:center; margin-top:50px; margin-bottom:30px; font-family:MyriadPro; color:#00146e; font-style:italic; padding:20px; box-sizing:border-box; font-size:28px; margin:auto; text-align:center;}

#displayedTitle.titleSelected{color:#ff1388; font-size:24px;}

/*.selected-image{ margin:auto; border:3px #00146e dashed; width:366px; height:246px; padding:20px; box-sizing:border-box;}*/
.selected-image{ margin:auto; width:366px; height:246px; padding:20px; box-sizing:border-box;}

/*.selected-image img{width:100%; max-width:360px; padding:20px; box-sizing:border-box;}*/
img#displayedImage{width:100%; max-width:360px; padding:100px 150px; box-sizing:border-box; border:3px #00146e dashed; margin:auto;}
img#displayedImage.imageSelected{border:none; padding:20px;}

/* PIN設置関連 */
.map-container {position: relative; display: inline-block; width: 100%;}
.map img {width: 100%; height: auto; display: block;}
.pin-group {opacity: 0;}
.pin-group.map-loaded {opacity: 1; transition: opacity 0.3s ease-in-out;}
.image-container {position: absolute; display: inline-block; max-width: none;}
.image-container picture {display: block;}
.image-container img {position: absolute; top: 0; left: 0; cursor: pointer; transform: translate(-50%, -100%); transition: opacity 0.1s ease, transform 0.2s ease;}
.sign-image img {transform: translate(0, 0);}
.pin-normal img, .sign-normal img {opacity: 1;}
.pin-hover img, .sign-hover img {opacity: 0; pointer-events: none;}
.pin-group:hover .pin-normal img, .pin-group:hover .sign-normal img {opacity: 0;}
.pin-group:hover .pin-hover img {opacity: 1; transform: translate(-50%, -110%) scale(1.1) !important; z-index: 1;}
.pin-group:hover .sign-hover img {opacity: 1;}
.image-container.sp-active picture.pin-normal {opacity: 0;}
.image-container.sp-acitve picture.pin-hover {opacity: 1;}

/* モーダルウインドウ表示関連 */
.modal {display: none; position: fixed; top: 0; right: 50%; width: 40%; height: 100%; z-index: 1000; justify-content: center; align-items: center;}
.modal-content {position: relative; background-color: #000000; color:#ffffff; width: 80%; max-width: 800px; height: auto; max-height: 90%; overflow: auto; overflow-x: hidden;}
.swiper {width: 100%; height: calc(100% - 60px); margin-top: 30px;}
.swiper-slide {position: relative; width: 100%; padding-bottom: 65%; overflow: hidden; display: flex; justify-content: center; align-items: center;  background-color: #000;}
.swiper-image-wrapper {position: absolute; top: 0; width: 100%; height: 100%;}
.swiper-slide img {width: 95%; height: 100%; object-fit: contain; display: block;}
.modal-content .swiper-button-prev, .modal-content .swiper-button-next {background-color: #888; opacity: 0.8 !important; visibility: visible !important; width: 28px !important; height: 28px !important;}
.modal-content .swiper-button-next {right: 2.5%; border-radius: 14px 0 0 14px;}
.modal-content .swiper-button-prev {left: 2.5%; border-radius: 0 14px 14px 0;}
.modal-content .swiper-button-next:after, .modal-content .swiper-button-prev:after {color: #fff; font-size: 24px; font-weight: 500; transform: scaleX(0.6); margin-top: -4px;}
.modal-content .swiper-button-next:after {content: '>'; margin-right: -4px;}
.modal-content .swiper-button-prev:after {content: '<'; margin-left: -4px;}
.caption-area {background-color: #000; color: #fff; padding: 15px; text-align: center; font-size: 0.9em; font-family: MyriadPro; height: 150px; overflow-x: hidden; overflow-y: scroll;}
.caption-area span{ font-family:belleza; font-size:30px; }
.button-area {width: 100%; padding: 10px; text-align: center; background-color: #000; z-index: 1002; margin: .5rem auto;}
.button-area button {padding: 8px 15px; font-size: 1em; cursor: pointer;}
.sub-button{background:#ff1388; display: flex; justify-content: center; align-items: center; width: 80%; margin:0 auto; padding: .9em 2em; border: none; border-radius: 25px; color: #fff; font-size: 0.7em; font-family: MyriadPro;}
.close-button {position: absolute; top: 0px; right: 0px; font-size: 1.5em; color: #fff; background-color: rgba(255, 255, 255, 0.4); cursor: pointer; z-index: 1001; width:30px; height:30px;}
.close-button:hover {opacity: 1;}

@media (max-width: 810px) {
  .modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 100000000000; justify-content: center; align-items: center; box-sizing:border-box;}
  .modal-content {width: 95%; height: auto; max-height: 95%; max-width:390px;}
  .sub-button{background:#ff1388; display: flex; justify-content: center; align-items: center; width: 80%; margin:0 auto; padding: .7em 1.4em; border: none; border-radius: 25px; color: #fff; font-size: 0.3em;}
}

/*Step 2 form*/
#form-section-box{background:url(../images/bk-step2.jpg) center top no-repeat; margin-top:50px; padding:50px 0;　background-size: cover; margin-bottom:0px; background-color:#dbefee;}
.title-step2{ width:100%; text-align:center; margin-top:50px;}
.title-step2 img{width:90%; max-width:662px;}
.text-step2{font-family:MyriadPro; font-weight:700; font-size:20px; margin:auto; text-align:center; width:100%; box-sizing:border-box; padding:0px 10px;}
.required-tips{color:#ff1388;}
.note{margin:auto; text-align:left; width:100%; max-width:600px; font-size:14px; box-sizing:border-box; padding:10px; line-height:24px; color:#333333;}




/* 共通 */
section{width:100%; margin:auto; box-sizing:border-box;}

/* footer */
footer {position: sticky; bottom:0; width: 100%; background:#ffffff; color:#000000; text-align:center; font-family: 'MyriadPro'; font-size:15px; padding-bottom:20px; z-index:10000; padding-top:10px;}
.footer-box{width:100%; max-width:1200px; margin:auto; font-family:MyriadPro; font-size:15px; box-sizing:border-box; padding:5px 15px;}
.copy{float:left; width:30%;}
.footer-navi{float:left; width:70%; text-align:right;}
.footer-navi a{color:#000000; text-decoration:none;}

@media only screen and (max-width: 900px) {
	footer{ position:static; margin:auto; box-sizing:border-box; width:90%; text-align:center; max-width:400px; padding-bottom:5px; padding-top:5px; text-size-adjust: none;}
  .copy{float: none; width:100%; text-align:center}
  .footer-navi{float:none; width:100%; text-align:center;}
}

/*Thank you page*/
.thank-you-box{width:100%; background:url(../images/BG-Thank-you-PC.gif) repeat-x; padding-bottom:50px;}
.thanks-title{margin:auto; text-align:center; width:100%; padding-top:50px;}
.thanks-title img{width:100%; max-width:430px;}
.thanks-text{font-family:MyriadPro; color:#00146e; font-size:20px; font-style:italic; margin:auto; text-align:center; margin-top:20px;}
.thanks-title2{margin:auto; text-align:center; width:100%; padding-top:20px;}
.thanks-title2 img{width:100%; max-width:430px;}

.chart-box{ 
	width:90%; 
	max-width:800px; 
	box-sizing:border-box; 
	background:#fff; 
	margin:auto;
	padding:30px;
	}
.Vote-results-title{margin:auto; text-align:center; width:100%; padding-top:10px;}
.Vote-results-title img{width:100%; max-width:293px;}	
.share-title{margin:auto; text-align:center; width:100%; padding-top:50px;}
.share-title img{width:100%; max-width:670px; margin-bottom:30px;}	

/*Chart*/
.chart-box {margin: 0 auto; display: flex; padding: 0; box-sizing: border-box; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, .2);}
.chart-box .chart-wrapper {background-color: #fff; width: 100%; min-height: 400px; border-radius: 10px;}
.chart-box img {width: 100%; border-radius: 10px;}

/*Share*/
.share-box{
	width:90%; 
	max-width:800px;
	box-sizing:border-box;
	border-radius: 10px;
	background:#fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	margin:auto;
	padding-top:50px;
}
.facebook-sapporo {margin:auto; text-align:center;}
.facebook-sapporo img{width:90%; max-width:649px;}
.share-box p{margin:auto; text-align:center; font-family:MyriadPro; font-size:18px; box-sizing:border-box; width:90%; padding:30px;}
.button-fb{margin:auto; text-align:center;}
.button-fb img{width:80%; max-width:325px; padding-bottom:30px;}

@media only screen and (max-width: 767px) {
	.share-box p{margin:auto; text-align:center; font-family:MyriadPro; font-size:16px; box-sizing:border-box; width:90%; padding:30px 0;}
}

/*more from ANA*/
.more{width:100%; box-sizing:border-box; margin:auto; padding:40px 0; background:url(../images/Background_MoreFromANA.jpg) no-repeat center top; height:650px;}
.more-title{margin:auto; text-align:center;}
.more-title img{ width:70%; max-width:300px; margin-bottom:30px;}

/* Form Section */
.form-wrapper {max-width: 600px; margin: 20px auto; padding: 20px; background-color: transparent; background: none; box-shadow: none; font-family: sans-serif; font-size: 15px; font-weight: 400;}
.form-group {margin-bottom: 25px; display: flex; flex-direction: column; align-items: flex-start;}
.form-group label {display: block; margin-bottom: 10px; width: 100%;}
.form-group .form-input-wrapper {width: 100%;}
.form-group input[type="text"], .form-group input[type="email"] {width: calc(100% - 22px); padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;}
.form-group input[type="text"]:focus, .form-group input[type="email"]:focus {outline: none; border-color: #87CEEB; box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.4);}
.form-group .form-required {color : #ff1388 !important; margin-left: .5rem;}
.error-message {color: #ff1388; font-size: 0.85em; margin-top: 5px;}
.form-group.form-check {flex-direction: row;align-items: center;}
.form-group.form-check input[type="checkbox"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 24px !important; height: 24px !important; border: 1px solid #ddd; background-color: #fff; border-radius: 4px; box-sizing: border-box; cursor: pointer; position: relative; vertical-align: middle; margin-right: 8px; transition: background-color 0.2s, border-color 0.2s;}
.form-group.form-check input[type="checkbox"]:checked {background-color: #ff1388; border-color: #00146e;}
.form-group.form-check input[type="checkbox"]::after {content: ""; position: absolute; top: 2px; left: 7px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); display: none;}
.form-group.form-check input[type="checkbox"]:checked::after {display: block;}
.form-group.form-check label {width: 90%;}
.form-hidden-group {margin: 0;padding: 0;}
.form-submit-group {margin-top: 50px; text-align: center;}
.form-submit-group button { background-color: #ff1388; color: #fff; padding: 14px 40px; border: none; border-radius: 1.5rem; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s ease; box-shadow: none;}
.form-submit-group button:hover {background-color: #e72b88; box-shadow: none;}

/*div.alert.alert-danger ul{list-style-position: inside; list-style-image:url(../../images/alert_icon.png)}*/
div.alert.alert-danger ul{list-style:none; padding-inline-start: 0px !important;}
/*div.alert.alert-danger ul li{background:#cd2431; padding:4px; margin:5px 0px; color:#ffffff;}*/
div.alert.alert-danger ul li{
	background-image:url(../../images/alert_icon2.png);
    background-repeat:no-repeat;
    background-position:left center;
	padding:5px 5px 5px 25px;
	margin:5px 0px; color:#ffffff;
	background-color:#cd2431;
}

div.form-group.error-control input[type="text"]{
	border:solid 1px #cd2431;
	width: calc(100% - 0px);
	padding:10px;
	border-radius:4px;
	box-sizing:border-box;
	transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

div.form-group.error-control input[type="email"]{
	border:solid 1px #cd2431;
	width: calc(100% - 0px);
	padding:10px;
	border-radius:4px;
	box-sizing:border-box;
	transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

div.form-group.form-check.error-control input[type="checkbox"]{border:1px solid #cd2431;}

@media (min-width: 768px) {
    .form-group {flex-direction: row; align-items: center;}
    .form-group label {width: 230px; flex-shrink: 0; margin-bottom: 0; margin-right: 20px; text-align: left;}
    .form-group .form-input-wrapper {flex-grow: 1; width: auto;}
    .form-group.form-check label {text-align: left;}
}
.form-label.form-label-auto {display : inline-block; float : left; text-align : left;}

@media only screen and (max-width: 400px) {
	.form-wrapper{ font-size:13px;}
}