@charset "utf-8";

input[type="submit"] { border: none; }

#spot { padding: 100px 4.5% 50px;}
#spot .head { padding: 0; text-align: center; }
#spot .head .cat { position: relative; text-align: left; }
#spot .head .cat p { line-height: 160%; text-align: left; padding: 0; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; }
#spot .head .cat p { padding: 8px 20px; line-height: 180%; display: inline-block; color: #FFFFFF; font-size: 16px;  font-weight: 600; }
#spot .head .cat .engineer { background: #E38582; }
#spot .head .cat .like { position: absolute; right: 0; top: 0;   }
#spot .head .cat .like a { padding: 0 10px 0 25px; font-size: 16px; height: 35px; line-height: 35px;  display: inline-block; text-decoration: none; color: #fff;
	background: #c4c1bd url(../../images/common/like_btn.png) no-repeat 10px center;
	background-size: 12px auto;
	border-radius: 8px;
}
#spot .head .cat .like .active { background-color: #f6ac19; }
#spot .head .cat .like span { padding: 0; font-size: 16px; }

.like .count { padding: 0 0 10px; }

#spot .head h2 { padding: 20px 0; text-align: left; font-size: 30px; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; line-height: 140%; }


#spot .pagelink{ padding: 40px auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
#spot .pagelink a{text-decoration: none; color: #fff; display: block; padding: 4px 30px; background: #EA5B00; margin: 1px; position: relative; font-size: 16px;font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; line-height: 160%;}
#spot .pagelink a:after{content: ""; display: block; width: 16px; height: 8px;position: absolute; transform:  translateY(50%); -webkit-transform: translateY(-50%); right: 10px; top: 50%; background: url(../../images/assets/showroom/pin_lg.png) no-repeat center center; background-size: cover;}
.main h3{font-size: 23px; text-align: center; line-height: 180%; margin: 40px auto 0;font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600;line-height: 180%;}
.main .youtube_box{margin: 40px auto 0;}
.main .youtube{width: 100%; padding: 56.5% 0 0; position: relative;}
.main .youtube iframe{width: 100%; height: 100%;position: absolute;top: 0px; right: 0px;}
.main .images_box{width: 100%; height: auto;margin: 40px auto 0px; }
.main .images_box img{width: 100%; height: auto;}
.main .text{line-height: 194%;font-size: 16px; margin: 60px auto 0;	padding: 0 6%;font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; }
.main .linkedbtn { max-width: 540px; height: auto; margin: 40px auto 0; text-align: center;}
.main .linkedbtn a{padding: 15px 30px; line-height: 150%; background:#EA5B00; border-radius: 100px; text-align: center; font-size: 16px; display: inline-block; min-width: 200px; box-sizing: border-box; height: auto;text-decoration: none; color: #fff; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600;　}

.main .video { margin: 20px auto 0; width: 70%; padding: 42% 0 0; position: relative; }
.main .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


#spot .videos h2 { text-align: center; font-size: 30px; }
#spot .videos ul { display: flex; flex-wrap: wrap; }
#spot .videos ul li { width: calc(100% / 4 - 20px); margin: 10px; }
#spot .videos ul li a { text-decoration: none; text-align: center; color: #000; }
#spot .videos ul li a p { padding: 10px 0 0; }
#spot .videos ul li a img { width: 100%; height: auto; }

/*------------------------------content-------------------------------*/
#spot .questionnaire_title{display: flex; align-items: center; justify-content: center; font-size: 30px; font-family: 'Noto-Sans-JP-Medium';padding: 0 0 30px;}
#spot .questionnaire_title img{display: inline-block; padding: 0 24px 0 0;}
#spot .content_box{ padding: 0 0 113px;}
#spot .content_box h3{ text-align: left; font-size: 28px; line-height: 150%; font-family: 'Noto-Sans-JP-Medium'; display: flex; align-items: center; }
#spot .content_box h3 span{ text-align: center; font-size: 20px;font-family: 'Noto-Sans-JP-Medium'; display: inline-block; padding: 15px 16px; min-width: 75px; box-sizing: border-box; background: #c91d30; color: #fff; margin: 0 26px 0 0; }
#spot .content_box p{line-height: 201%;font-family: 'Noto-Sans-JP-Regular'; padding: 40px 0 0; font-size: 16px;}
#spot .content_box .form_box{padding: 50px 0 0;}
#spot .content_box .form_box .ipt_box{border-radius: 15px; background: #eeeeee; position: relative; width: auto;font-size: 20px;font-family: 'Noto-Sans-JP-Medium'; }
#spot .content_box .form_box .ipt_box:not(:last-child){margin: 0 0 20px;}
#spot .content_box .form_box .ipt_box span{margin: 0 24px 0 0;position: relative; display:block;width: 35px; height: 35px; }
#spot .content_box .form_box .ipt_box label{display: flex; width: auto; height: auto;padding: 23px 29px; align-items: center}
#spot .content_box .form_box .ipt_box input{display: none; width: 100%;height: 80px;}


#spot .content_box .form_box .ipt_box input[type="radio"] + span:after {display: none; content: ""; width: 16px; height: 16px; position: absolute;background-color: #c9c9c9; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
#spot .content_box .form_box .ipt_box input[type="radio"] + span:before { display: block; content: ""; width: 29px; height: 29px; border: 3px solid #c9c9c9; border-radius: 50%; position: absolute;  background: #fff;}
#spot .content_box .form_box .ipt_box input[type="radio"]:checked + span:after{ display: block; background-color: #1b9065; }
#spot .content_box .form_box .ipt_box input[type="radio"]:checked + span:before{border: 3px solid #1b9065; }

/*----------------------------------content_2----------------------------*/
#spot .content_box .form_box .ipt_box input[type="checkbox"] + span:after{display: none; content: ""; width: 19px; height: 15px; position: absolute;background:  url(../../images/modal_questionnaire/check_1.png) no-repeat center center ; background-size: 100%;border-radius: 7px; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
#spot .content_box .form_box .ipt_box input[type="checkbox"] + span:before { display: block; content: ""; width: 29px; height: 29px; border: 3px solid #c9c9c9; border-radius: 7px; position: absolute;  background: #fff;}

#spot .content_box .form_box .ipt_box input[type="checkbox"]:checked + span:after{ display: block; background: url(../../images/modal_questionnaire/check_2.png) center center;background-size: 100%;}
#spot .content_box .form_box .ipt_box input[type="checkbox"]:checked + span:before{border: 3px solid #1b9065; }

/*----------------------------------content_3----------------------------*/
#spot .content_box .form_box textarea { resize: vertical; width: 100%; height: 303px;; background: #eeeeee; border-radius: 15px; border: none; padding: 27px 40px; box-sizing: border-box; }

/*----------------------------------btns----------------------------*/

#spot .main .btns { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0px 0 30px;}
#spot .main .btns .button_btn{width: 370px; height: auto; font-family: 'Noto-Sans-JP-Medium'; font-size: 24px; background: #c91d30; border-radius: 50px; color: #fff; font-size: 24px; padding: 26px 0; display: block;text-decoration: none;}
#spot .main .btns .link_btn{display: inline-block; margin: 30px 0 0; border: 1px solid #000; color: #000; text-decoration: none; padding: 10px 36px;  font-family: 'Noto-Sans-JP-Medium'; border-radius: 50px; }



/*----------------------------------error----------------------------*/
.main .confirmation h2.main_box{font-size: 42px !important; text-align: center;font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 40px;}
.main .confirmation .caution{text-align: center; font-size: 16px; padding: 0 0 40px; line-height: 180%;}
#error .alert{ display: flex; flex-direction: column; align-items: center; padding: 0 0 50px;}
#error .alert span{display: block; font-size: 16px; font-family: 'Noto-Sans-JP-Regular'; }
#error .alert span:not(:last-child){padding: 0 0 20px;}

#error .btns a{border: 1px solid #000; width: 200px; padding: 15px 0; display: block; margin: 0 auto; color: #000; text-decoration: none; border-radius: 50px;}



/*----------------------------------confirm----------------------------*/
#confirm table{width: 100%; height: auto;}
#confirm table tr th, 
#confirm table tr td { padding: 20px; font-size: 17px;font-family: 'Noto-Sans-JP-Regular'; line-height: 180%; }
#confirm table tr th { text-align: left; border: 1px solid #dcdcdc;; background: #7d7d7d; color: #fff;width: 30%;}
#confirm table tr td {border: 1px solid #dcdcdc; background: #fff; width: 70%;}
#spot .main #confirm .btns{display: flex; flex-direction: row; margin: 100px 0 0;}
#spot .main #confirm .btns .button_btn{ font-size: 16px; width: 30%; padding: 15px 0;}
#spot .main #confirm .btns .link_btn{ font-size: 16px;  width: 30%; border: 1px solid #000;padding: 15px 0; margin: 0px 10% 0 0; }


/*----------------------------------rating----------------------------*/

#spot .rating .btns { padding: 70px 0 0; }

#spot .rating { padding: 60px 0 0; }
#spot .rating .box { border: 4px solid #f6ac19; border-radius: 10px; padding: 30px; display: flex; justify-content: center; align-items: center;  }
#spot .rating .box p.name { padding: 10px 60px 10px 0; font-size: 18px; font-weight: bold; margin: 0 10px 0 0;
	background: url(../../images/common/arw_01.png) no-repeat right center;
	background-size: 50px auto;
}

#spot .rating .check { position: relative; width: 300px; display: flex; background: #b5b5b5; }
#spot .rating .check label { display: block; width: calc(100% / 5); }
#spot .rating .check .percent,
#spot .rating .check label span { left: 0; content: ''; z-index: 0; background: #f6ac19; position: absolute; display: none; width: 0%; height: 100%; }
#spot .rating .check label img { position: relative; z-index: 1; width: 100%; height: auto; }
#spot .rating .check label input { position: absolute; left: -100px; opacity: 0; width: 0; }
#spot .rating .check label input[type="radio"]:checked+span { display: block; }
#spot .rating .check .percent { display: block; }

#spot .rating .check label:nth-child(1) span { width: 20%; }
#spot .rating .check label:nth-child(2) span { width: 40%; }
#spot .rating .check label:nth-child(3) span { width: 60%; }
#spot .rating .check label:nth-child(4) span { width: 80%; }
#spot .rating .check label:nth-child(5) span { width: 100%; }

/*----------------------------------confirm----------------------------*/
#thanks small{ font-size: 16px; line-height: 180%; text-align: center; width: 100%; padding: 0 0 30px; display: block;}

@media only screen and (max-width: 768px) {
#spot { padding: 25px 4.5%;}
#spot .head .title {font-size: 17px; }
#spot .head .title .engineer{font-size: 12px; padding: 6px 11px;margin: 0 auto 15px;}

#spot .pagelink{ padding: 20px auto 0; }
#spot .pagelink a{padding: 8px 30px; font-size: 14px;}

.main h3{font-size: 16px; margin: 20px auto 0;}
.main .youtube_box{margin: 20px auto 0;}
.main .images_box{margin: 20px auto 0px; }
.main .linkedbtn{ width: 100%; height: auto; margin: 20px auto 0;}
.main .linkedbtn a {padding: 10px 20px; font-size: 14px;  }

#spot .head .cat p { max-width: calc(100% - 200px); line-height: 140%; padding: 8px 15px; font-size: 14px; }
#spot .head .cat .like a { font-size: 14px; padding: 0 8px 0 25px; font-size: 14px; height: 30px; line-height: 30px; }
#spot .head h2 { font-size: 20px }

/*------------------------------content-------------------------------*/
#spot .questionnaire_title{ font-size: 20px; padding: 0 0 30px;}
#spot .questionnaire_title img{ padding: 0 12px 0 0; width: 28px; height: auto;}
#spot .content_box{ padding: 0 0 58px;}
#spot .content_box h3{font-size:18px; text-align: left; }
#spot .content_box h3 span{ font-size: 15px; padding: 10px 15px; min-width: 60px; margin: 0 13px 0 0; }
#spot .content_box p{ padding: 20px 0 0; font-size: 13px;}
#spot .content_box .form_box{padding: 20px 0 0;}
#spot .content_box .form_box .ipt_box:not(:last-child){margin: 0 0 10px;}
#spot .content_box .form_box .ipt_box span{font-size: 16px; margin: 0 31px 0 0; width: 26px; height: 26px;}
#spot .content_box .form_box .ipt_box label{padding: 18px 15px; }
#spot .content_box .form_box .ipt_box input{height: auto;}

#spot .content_box .form_box .ipt_box input[type="radio"] + span:after{ width: 12px; height: 12px;}
#spot .content_box .form_box .ipt_box input[type="radio"] + span:before { display: block; content: ""; width: 20px; height: 20px;}

#spot .main p.text { margin: 30px 0 0; }

/*----------------------------------content_2----------------------------*/
#spot .content_box .form_box .ipt_box input[type="checkbox"] + span:after{ width: 15px; height: 11px; background:  url(../../images/modal_questionnaire/check_1.png) no-repeat center center ; background-size: 100%;border-radius: 7px; }
#spot .content_box .form_box .ipt_box input[type="checkbox"] + span:before { display: block; content: ""; width: 20px; height: 20px; border: 3px solid #c9c9c9; border-radius: 7px; position: absolute; background: #fff;}

#spot .content_box .form_box .ipt_box input[type="checkbox"]:checked + span:after{ background: url(../../images/modal_questionnaire/check_2.png) center center;background-size: 100%;}

/*----------------------------------content_3----------------------------*/
#spot .content_box .form_box textarea{width: 100%; height: 200px; padding: 13px 20px;}

#spot .main .btns{ display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0px 0 20px}
#spot .main .btns .button_btn{ width: 90%; font-size: 24px; font-size: 18px; padding: 16px 0;}
#spot .main .btns .link_btn{margin: 20px 0 0; padding: 10px 22px;font-size: 12px; }

/*----------------------------------btns----------------------------*/

#spot .main .btns{ display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0px 0 30px;}

#spot .main .btns .link_btn{display: inline-block; margin: 30px 0 0; border: 1px solid #000; color: #000; text-decoration: none; padding: 10px 36px;  font-family: 'Noto-Sans-JP-Medium'; border-radius: 50px; }



/*----------------------------------error----------------------------*/
.main .confirmation h2.main_box{font-size: 20px !important;  padding: 0 0 20px;}
.main .confirmation .caution{ font-size: 13px; padding: 0 0 20px; }
#error .alert{ ; padding: 0 0 25px;}
#error .alert span{font-size: 13px; }
#error .alert span:not(:last-child){padding: 0 0 20px;}

#error .btns a{width: 200px; padding: 10px 0; }



/*----------------------------------confirm----------------------------*/
#confirm table tr th,
#confirm table tr td { padding: 15px; font-size: 14px; display: block;}
#confirm table tr th {border:none; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; background: #7d7d7d; color: #fff;width: auto;}
#confirm table tr td {border: 1px solid #dcdcdc; background: #fff; width: auto;}
#spot .main #confirm .btns{margin: 50px 0 0;}
#spot .main #confirm .btns .button_btn{ font-size: 13px; width: 45%; padding: 10px 0;}
#spot .main #confirm .btns .link_btn{ font-size: 13px;  width: 45%; padding: 10px 0; margin: 0px 10% 0 0; }


/*----------------------------------confirm----------------------------*/
#thanks small{ font-size: 13px;  padding: 0 0 15px; display: block;}

/*----------------------------------rating----------------------------*/

#spot .rating .box { display: block; margin: 0 0 30px; }
#spot .rating .box p.name { padding: 10px 0; background: none; text-align: center; }

#spot .rating .check { width: 100%; text-align: center; }

}