@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

#body { background: url(../images/bg_main.png) repeat-x;}
	

#body_wrap {font-family:'Noto Sans Japanese';margin:auto auto; width:1000px;}

#logo_img {float:left;}
#header {position:relative; height:60px;}


.main_pic_wrap {position: relative;}
.main_image {float:left; border:3px #65d5ff solid; width:1000px; height:500px;}
.main_pic02 {display:none;}

#sticker { position:absolute; right:510px; top:30px;}

.forms {width:480px; position:absolute; top:20px; right:10px; z-index:99999; font-size:12px;}

.form_title {padding:5px; background:#00aeef; color:#fff; text-align:center; border-radius:10px 10px 0px 0px; }


#scene1,#scene2,#scene3,#scene4,#scene5 {background: #eee;}

.scene { border-top:3px solid #ccc; border-left:3px solid #ccc;border-right:3px solid #ccc; min-height: auto; padding:10px;}
.btns {padding: 10px 5px;text-align:center; background: #ccc; border-left:3px solid #ccc;border-right:3px solid #ccc;border-bottom:3px solid #ccc;}
.btn {
	text-decoration:none;
	border-radius:5px;
    padding: 10px 22px;
    border: 2px solid #65ab00;
    background-color: #65ab00;
    font-size: 14px;
	font-weight:bold;
    line-height: 40px;
    letter-spacing: 1px;
    color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	}
.btn:hover,
.btn:active,
.btn:focus {
    background-color: #fff;
    color: #65ab00;
}
.dib { display: inline-block }
/* 에러 관련 */
.error_msg { color: #f00; }
/* 공통 */
p { border: 1px solid gray; padding: 5px 5px; background-color: #eeeeee; display: block; font-size: 0.8rem }
.hidden { display: none; }

.tag.blue { background-color: #0000ff !important; }
.tag { background-color: #ff6699; color: #fff;padding:2px 5px; border-radius:3px; float:left;}

.title_wrap {padding-bottom:10px;}
.title {font-size:14px; color: #09F; font-weight:bold;margin-left:5px; padding-top:2px;}

.step {background:#ccc; padding:5px; margin-bottom:20px; border-left:5px  #CC0066 solid;}
.step_title { float:left; font-size:16px; font-weight:bold; color: #600;}
.step_number { float:left; border:2px #999 solid; background:#fff; width:20px; height:20px;border-radius:5px; text-align:center; padding-bottom:2px; margin-left:10px; color:#999;}
.step_number_act { float:left; border:2px #f00 solid; background: #F00; width:20px; height:20px;border-radius:5px; text-align:center; padding-bottom:2px; margin-left:10px;  box-shadow:2px 2px 2px #666; color:#fff; margin-top:-2px;}
.step_number_done { float:left; border:2px #999 solid; background:#999; width:20px; height:20px;border-radius:5px; text-align:center; padding-bottom:2px; margin-left:10px; color:#fff;}

.clear {clear:both; height:0px;}


.dib1{display: inline-block; border:2px #ccc solid; padding:2px;background:#fff; float:left; width: 100px; margin-right:5px; border-radius:5px; margin-bottom:5px; vertical-align:middle;}
.dib1:hover,
.dib1:active {background:#ccc;}

.dib2{display:inline-block; border:2px #ccc solid; background:#fff; float:left; width: 200px; margin-right:5px; border-radius:5px; margin-bottom:5px;}
.dib2:hover,
.dib2:active {background:#ccc;}

.selected {background: #ccc; }

#scene2 select, #scene3 select,  #scene4 select,  #scene5 select{font-size:12px; border:2px #ccc solid; margin-left:5px; border-radius:5px; height:28px;}

#scene3 input, #scene4 input, #scene5 input{font-size:14px; border:2px #ccc solid; margin-left:5px; border-radius:5px; height:23px; margin-bottom:5px;}


.left_side {width:506px; float:left; margin-top:20px; margin-bottom:30px;}
.side_title { background:#00aeef url(../images/bg_title.png) no-repeat right bottom; padding:10px; font-size:16px; font-weight:bold; color:#fff; margin-bottom:5px; border-radius:10px 10px 0px 0px;}
.side_icon {color:#999; float:left; margin-right:20px;}
.side_content {background:#f5cbd2; padding:10px;}
.side_subtitle {font-weight: bold; font-size:14px; margin-bottom:5px; margin-top:20px; color:#00aeef;}
.side_text {font-size:12px;}

.arrow {text-align:center;}

.fa-border {background:#FFF; min-width:70px; text-align:center;}

.form_bottom { background:#ccc; padding:10px;}
.illust { float:left; width:20%; padding-left:20px; padding-top:20px; padding-left:20px;}


.point_wrap .ul_wrap {float:right; width:72%;}
.point_wrap ul {width:100%; padding-left:0px;}
.point_wrap li {background:#FFF; padding:5px 5px 5px 5px; border-radius:5px; opacity:0.8; margin-bottom:5px; list-style:none; width:auto;}

.point_title_top {font-size:18px; font-weight:bold; color:#FC0; background:#603; padding:5px 5px; 5px 10px; border-left:5px #000000 solid; margin-top:20px; margin-bottom:10px;}

.point_exp{
	display:-webkit-flex;
	display:flex;
	justify-content: space-between;
	flex-flow:row wrap;
}
.point_content {width:24%; border:2px #f5cbd2 solid; margin-bottom:10px; border-radius:10px;}
.riyu .point_content {width:49%; border:2px #f5cbd2 solid; margin-bottom:10px; border-radius:10px;}
.omakase .point_content {width:32%; border:2px #f5cbd2 solid; margin-bottom:10px; border-radius:10px;}

.point_title {text-align:center; background:#f5cbd2; font-weight:bold; padding:5px; color:#000; border-radius:8px 8px 0px 0px; margin-top:-1px; margin-right:-1px;}
.point_img { float:left; margin:5px 10px 5px 5px; }
.point_text {padding:10px; text-align:center; background:#FFF; border-radius:0px 0px 10px 10px;}
.riyu .point_text {text-align:left;}
.omakase .point_text {text-align:left;}

.point_arrow {text-align:center;}


.thanks_msg {border:3px solid #ccc; margin-bottom:10px; padding:20px; border-radius:5px; background:url(../images/bg2.png);}
.thanks_title {text-align:center; font-weight:bold; font-size:20px; background: #F66; padding:10px; border-radius:5px; margin-bottom:20px; color:#FFF;}
.thanks_img {padding-left: 20px; float:left; margin-right:20px;}

.telbox {width:400px; font-size:50px; font-weight:bold; background:#fff; padding:15px; margin:auto auto; text-align:center; margin-top:20px; margin-bottom:20px;border:4px #CCC solid; border-radius: 10px; color: #F66;}
.caution { background:#FFF; padding:10px; border:2px  #ccc solid; border-radius: 10px;}

.thanks_name {color: #F36; font-weight:bold; font-size:18px;}
.thanks_addr {color:#039; font-weight:bold;}

.thanks_wrap .side_subtitle { padding-left: 110px; margin-top:0px;}
.thanks_wrap .side_text  { padding-left: 110px; }
.thanks_wrap .side_content { padding:20px;}

.mobilePhone {width:300px;}
.email {width:300px !important;}


.expl_wrap {clear:both;}

.kyujin {text-align:center; margin-top:30px; margin-bottom:50px;}
.kyujin img {width:250px; height:auto;}
.kyujin_btn a {font-size:18px;}

.footer {clear:both;background: #00aeef;}
.footer_menu {color:#fff; text-decoration:none; font-size:12px; text-align:right; padding:3px 10px 3px 3px; margin-top:3px;}

.footer_menu a{color:#fff; text-decoration:none;}
.footer_menu a:hover,
.footer_menu a:focus,
.footer_menu a:active {color: #F90;}

.paragraphTextTypeA {border:0px;}


@media screen and (max-width: 800px) {
#body {background:none; width:98%;}
#body_wrap {width:98%;}

#logo_img img{ width:70%; height:auto;}

.main_image {float:none;width:98%; height:auto; margin-bottom:20px; margin-top:-10px; border:none;}
.main_pic01 {display:none;}
.main_pic02 {display: inherit;border:3px #65d5ff solid;}
.forms {position: relative; top:0px; right:0px;font-size:12px; width:100%;}

#sticker { position:absolute; width:50%; height:auto; top:12px; right:10px; }
#sticker img{ width:100%; height:auto; }
.left_side {width:100%; margin-top:30px;}
.side_subtitle {margin-top:10px;}

.point_content { width:100%;}
.riyu .point_content { width:100%;}
.omakase .point_content { width:100%;}

.riyu .point_img { float:none; text-align:center;}
.omakase .point_img{float:none;text-align:center;}

.telbox {width:80%; font-size:25px; margin:20px auto 20px;}

.mobilePhone {width:90% !important;}
.email {width:90% !important;}

}

@media screen and (max-width: 450px) {
.kyoka { display:inline-block;}	
	
}