@charset "UTF-8";
@import url("reset.css");

body {color: #333; font-family: 'Shippori Mincho', serif;}
a {color: #333; text-decoration: none;}
.faq_q {font-family: sans-serif;}
#footer {font-family: sans-serif;}

@media (max-width: 375px) {
	.tb {display: none;}
	.pc {display: none;}
	.sp {display: block;}
	
	#hotel {width: 375px; position: relative;}
	/* main_visual */
	#main_visual {background: url("../img/sp/main_visual_bg.png") no-repeat; background-size:contain; width: 376px; height: 667px; position: relative;}
	.main_visual_title {position: absolute; top: 75px;}
	.main_visual_point01 {position: absolute; top: 483px; left: 10px; z-index: 999;}
	.main_visual_point02 {position: absolute; top: 483px; left: 131px; z-index: 999;}
	.main_visual_point03 {position: absolute; top: 483px; left: 251px; z-index: 999;}
	.main_visual_scroll {position: absolute; top: 580px; height: 87px; width: 375px; padding-left: 165px; display: block; background: #f0f0f0;}
	.main_visual_scroll img {margin-top: 39px;}
	/* about */
	.about_therapita {font-size: 14px;}
	.about_therapita_title {margin-top: 50px;}
	.about_therapita_tagline {margin-top: 30px; text-align: center; line-height: 24px; position: relative;}
	.about_therapita_tagline .about_pita {position: absolute; top: 40px; left: 15px;}
	.about_therapita_bodycare {margin: 30px 33px 0;}
	.about_therapita_paragraph {margin: 14px 33px 0; text-align: center; line-height: 24px;}
	.about_quality {margin-top: 27px; padding-top: 35px; padding-bottom: 30px; background: #f0f0f0; font-size: 14px;}
	.about_quality_ravita {margin: 30px 33px 0;}
	.about_quality_ravita_paragraph {margin: 16px 33px 0; text-align: center; line-height: 24px;}
	.about_quality_facial {margin: 30px 33px 0;}
	.about_quality_facial_paragraph {margin: 16px 33px 0; text-align: center; line-height: 24px;}
	/* menu */
	#menu {margin-top: 50px;}
	.menu_point {margin-top: 25px;}
	.menu_point01,
	.menu_point02,
	.menu_point03,
	.menu_point04 {display: flex; margin-bottom: 30px; padding: 0px 26px 0px 30px;}
	.menu_point .wrap {margin-top: 8px; margin-left: 15px;}
	.menu_point01_title,
	.menu_point02_title,
	.menu_point03_title,
	.menu_point04_title {font-size: 18px; line-height: 21px;}
	.menu_point01_paragraph,
	.menu_point02_paragraph,
	.menu_point03_paragraph,
	.menu_point04_paragraph {margin-top: 7px; font-size: 14px; line-height: 18px;}
	.menu_gallery {padding-top: 30px; padding-bottom: 25px; padding-left: 50px; background: #f0f0f0; display: flex; overflow: scroll;}
	.menu_gallery div {margin-right: 20px;}
	/* flow_of_use */
	.flow_of_use_title {margin-top: 50px;}
	.flow_of_use {margin-top: 25px;}
	.flow_of_use_img {margin-top: 23px; margin-left: 50px; margin-bottom: 40px;}
	/* features */
	.features_title {margin-top: 50px;}
	.features_case {margin-top: 30px; margin-bottom: 38px;}
	.features_case01_img, .features_case02_img, .features_case03_img, .features_case04_img {margin-left: 60px;}
	.features_case01_head, .features_case02_head, .features_case03_head, .features_case04_head {margin-top: 6px; margin-bottom: 22px; text-align: center;}
	.features_case01_head {padding-left: 77px;}
	.features_case02_head {padding-left: 44px;}
	.features_case03_head {padding-left: 67px;}
	.features_case04_head {padding-left: 69px;}
	.features_case01_paragraph, .features_case02_paragraph, .features_case03_paragraph, .features_case04_paragraph {margin: 15px 30px 27px; font-size: 14px; line-height: 21px; text-align: center;}
	/* flow */
	.flow_of_contract_img {margin-top: 29px; margin-left: 52px;}
	/* area */
	#area {margin-top: 50px;}
	.area_map_txt_ttl {display: none;}
	.area_map_txt {text-align: center; font-size: 14px; line-height: 21px;}
	.area_map_txt_paragraph {margin: 25px 35px 40px; font-family: sans-serif;}
	/* faq */
	#faq {margin-top: 45px;}
	.faq_title_head {margin-bottom: 18px;}
	.faq_q {margin-left: 20px; padding: 3px 20px 3px 25px; font-size: 16px; background: url(../img/sp/faq_q.png) left no-repeat; font-feature-settings: "palt";}
	.faq_a {margin-top: 5px; margin-left: 25px; margin-right: 20px; padding-left: 22px; font-size: 14px; line-height: 21px; background: url(../img/sp/faq_a.png) top left no-repeat;}
	.faq_contents {padding-bottom: 25px;}
	.faq_contents .faq_box {margin: 0 20px 15px; padding: 17px 0px 19px;}
	.faq_contents .faq_box:nth-child(even)  {background: #EBEBEB;}
	.faq_contents .faq_box:nth-child(odd) {background: #F5F0E6;}
	/* footer */
	#hotel #footer {padding-bottom: 80px;}
	.footer_therapita_logo {margin-top: 28px; margin-left: 105px;}
	.footer_therapita_btn {margin: 17px 0px 0px 68px;}
	.footer_therapist_btn {margin: 20px 50px 0;}
	.footer_hotel_btn {margin: 10px 0px 0px 68px;}
	.footer_nav {margin-top: 29px;}
	.footer_nav div {font-size: 14px; line-height: 38px; text-align: center;}
	.privacy {border-top: 1px solid #333;}
	.anpiel {border-top: 1px solid #333;}
	.contact {border-top: 1px solid #333; border-bottom: 1px solid #333;}
	.footer_copy {font-size: 12px; padding-top: 36px; padding-bottom: 10px; text-align: center;}
	#fixedbnr {position: fixed; bottom: 0; width: 376px; height: 70px; padding: 10px 10px 20px; background: #595758; z-index: 9999;}
	
	/* bnr */
	.therapita_hakone_cta01,
	.therapita_hakone_cta02,
	.therapita_hakone_cta03 {position: relative;}

	.hotelbnr_btn {position: absolute; top: 172px; left: 42px;}
}

@media (min-width: 376px) and (max-width: 768px) {
	.sp {display: none;}
	.pc {display: none;}
	.tb {display: block;}
	
	#thotel {width: 768px; position: relative;}
	/* main_visual */
	#main_visual {margin-top: -1px; background: url("../img/tb/main_visual_bg.png") no-repeat; background-size:contain; width: 769px; height: 1025px; position: relative;}
	.main_visual_title {position: absolute; top: 116px;}
	.main_visual_point01 {position: absolute; top: 745px; left: 112px; z-index: 999;}
	.main_visual_point02 {position: absolute; top: 745px; left: 297px; z-index: 999;}
	.main_visual_point03 {position: absolute; top: 745px; left: 482px; z-index: 999;}
	.main_visual_scroll {position: absolute; top: 891px; height: 134px; width: 768px; padding-left: 356px; display: block; background: #f0f0f0;}
	.main_visual_scroll img {margin-top: 60px;}
	/* about */
	.about_therapita {font-size: 16px;}
	.about_therapita_title {margin-top: 70px;}
	.about_therapita_tagline {margin-top: 40px; text-align: center; line-height: 28px;}
	.about_therapita_bodycare {margin: 30px 33px 0;}
	.about_therapita_paragraph {margin: 14px 33px 0; text-align: center; line-height: 28px;}
	.about_quality {height: 500px; margin-top: 57px; padding-top: 70px; padding-bottom: 30px; background: #f0f0f0; font-size: 14px; position: relative; overflow: hidden;}
	.about_quality_ravita_paragraph {width: 350px; line-height: 24px; position: absolute; top: 152px; left: 352px;}
	.about_quality_facial {position: absolute; top: 152px; left: 70px;}
	.about_quality_facial_paragraph {width: 350px; line-height: 24px; position: absolute; top: 295px; left: 352px;}
	/* menu */
	#menu {margin-top: 70px;}
	.menu_point {height: 273px; position: relative;}
	.menu_point01 {display: flex; position: absolute; top: 45px; left: 50px;}
	.menu_point02 {display: flex; position: absolute; top: 165px; left: 50px;}
	.menu_point03 {display: flex; position: absolute; top: 45px; left: 402px;}
	.menu_point04 {display: flex; position: absolute; top: 165px; left: 402px;}
	.menu_point .wrap {margin-top: 8px; margin-left: 15px;}
	.menu_point01_title,
	.menu_point02_title,
	.menu_point03_title,
	.menu_point04_title {font-size: 18px; line-height: 21px;}
	.menu_point01_paragraph,
	.menu_point02_paragraph,
	.menu_point03_paragraph,
	.menu_point04_paragraph {width: 215px; margin-top: 7px; font-size: 14px; line-height: 18px;}
	.menu_gallery {margin-top: 14px; padding-top: 30px; padding-bottom: 25px; padding-left: 50px; background: #f0f0f0; display: flex; overflow: scroll;}
	.menu_gallery div {margin-right: 20px;}
	/* flow_of_use */
	.flow_of_use_title {margin-top: 70px;}
	.flow_of_use_img {margin: 45px 0 45px 68px;}
	.flow_of_use {margin-top: 25px;}
	.flow_of_contract_img {margin: 45px 0 70px 50px }
	/* features */
	.features_title {margin-top: 70px;}
	.features_case {margin-top: 30px; margin-bottom: 38px;}
	.features_case .wrap {padding-left: 32px;}
	.features_case01, .features_case02, .features_case03, .features_case04 {display: flex;}
	.features_case01_img, .features_case02_img, .features_case03_img, .features_case04_img {margin-left: 60px;}
	.features_case01_head, .features_case02_head, .features_case03_head, .features_case04_head {margin-top: 6px; margin-bottom: 22px; text-align: center;}
	.features_case01_paragraph, .features_case02_paragraph, .features_case03_paragraph, .features_case04_paragraph {width: 400px; margin: 15px 30px 27px 0px; font-size: 14px; line-height: 21px;}
	/* area */
	#area {margin-top: 70px; font-family: sans-serif;}
	.area_map {margin: 45px 0; background: #f0f0f0; display: flex; postion: relative; overflow: hidden;}
	.area_map_txt_ttl {margin-top: 55px; font-size: 18px; line-height: 24px; color: #583822;}
	.area_map_txt {width: 500px; margin-left: 8px; text-align: center;}
	.area_map_txt_paragraph {width: 410px; margin-top: 27px; margin-left: 19px; font-size: 14px; line-height: 24px;}
	/* faq */
	#faq {margin-top: 70px;}
	.faq_title_head {margin-bottom: 45px;}
	.faq_q {margin-left: 25px; padding: 3px 20px 3px 25px; font-size: 18px; background: url(../img/sp/faq_q.png) left no-repeat;}
	.faq_a {margin-top: 5px; margin-left: 30px; margin-right: 20px; padding-left: 22px; font-size: 14px; line-height: 21px; background: url(../img/sp/faq_a.png) top left no-repeat;}
	.faq_contents {padding-bottom: 25px;}
	.faq_contents .faq_box {margin: 0 90px 15px; padding: 17px 0px 19px;}
	.faq_contents .faq_box:nth-child(even)  {background: #EBEBEB;}
	.faq_contents .faq_box:nth-child(odd) {background: #F5F0E6;}
	/* footer */
	.footer_therapita_logo {margin-top: 28px; margin-left: 105px;}
	.footer_therapita_btn {margin: 17px 0px 0px 68px;}
	.footer_hotel_btn {margin: 40px 0px 0px 265px;}
	.footer_nav {margin-top: 37px; display: flex;}
	.footer_nav div {padding: 0 35px; font-size: 14px; line-height: 14px; text-align: center;}
	.privacy {margin-left: 140px; border-left: 1px solid #333;}
	.anpiel {border-left: 1px solid #333;}
	.contact {border-left: 1px solid #333; border-right: 1px solid #333;}
	.footer_copy {margin-top: 18px; border-top: 1px solid #333; border-bottom: 1px solid #333; font-size: 14px; padding-top: 7px; padding-bottom: 27px; text-align: center;}

	/* bnr */
	.therapita_hakone_cta01,
	.therapita_hakone_cta02,
	.therapita_hakone_cta03 {position: relative;}

	.hotelbnr_btn {position: absolute; top: 179px; left: 88px;}
}

@media (min-width: 769px) {
	.sp {display: none;}
	.tb {display: none;}
	.pc {display: block;}

	#hotel {width: 1080px; margin: 0 auto; position: relative;}
	/* main_visual */
	#main_visual {margin-top: -1px; background: url("../img/pc/main_visual_bg.png") no-repeat; background-size:contain; width: 1081px; height: 601px; position: relative;}
	.main_visual_title {position: absolute; top: 132px;}
	.main_visual_point01 {position: absolute; top: 77px; right: 50px; z-index: 999;}
	.main_visual_point02 {position: absolute; top: 235px; right: 50px; z-index: 999;}
	.main_visual_point03 {position: absolute; top: 393px; right: 50px; z-index: 999;}
	.main_visual_scroll {position: absolute; top: 553px; left: 520px;}
	/* about */
	.about_therapita {font-size: 16px;}
	.about_therapita_title {margin-top: 69px;}
	.about_therapita_tagline {margin-top: 43px; text-align: center; line-height: 28px;}
	.about_therapita_bodycare {margin: 30px 33px 0;}
	.about_therapita_paragraph {margin: 14px 33px 0; text-align: center; line-height: 24px;}
	.about_quality {height: 381px; margin-top: 57px; padding-top: 70px; padding-bottom: 30px; background: #f0f0f0; font-size: 14px; position: relative; overflow: hidden;}
	.about_quality_ravita_paragraph {width: 615px; line-height: 24px; position: absolute; top: 152px; left: 400px;}
	.about_quality_facial {position: absolute; top: 152px; left: 70px;}
	.about_quality_facial_paragraph {width: 615px; line-height: 24px; position: absolute; top: 230px; left: 400px;}
	/* menu */
	#menu {margin-top: 70px;}
	.menu_point {height: 273px; position: relative;}
	.menu_point01 {display: flex; position: absolute; top: 45px; left: 70px;}
	.menu_point02 {display: flex; position: absolute; top: 165px; left: 70px;}
	.menu_point03 {display: flex; position: absolute; top: 45px; left: 567px;}
	.menu_point04 {display: flex; position: absolute; top: 165px; left: 567px;}
	.menu_point .wrap {margin-top: 8px; margin-left: 15px;}
	.menu_point01_title,
	.menu_point02_title,
	.menu_point03_title,
	.menu_point04_title {font-size: 18px; line-height: 21px;}
	.menu_point01_paragraph,
	.menu_point02_paragraph,
	.menu_point03_paragraph,
	.menu_point04_paragraph {width: 215px; margin-top: 7px; font-size: 14px; line-height: 18px;}
	.menu_gallery {padding-top: 30px; padding-bottom: 25px; padding-left: 30px; display: flex;}
	.menu_gallery div {margin-right: 18px;}
	/* flow_of_use */
	.flow_of_use_title {margin-top: 55px;}
	.flow_of_use_img {margin-top: 50px; margin-left: 69px; margin-bottom: 40px;}
	/* features */
	.features_title {margin-top: 70px;}
	.features_case {margin-top: 50px; margin-left: 55px; margin-bottom: 38px; display: flex;}
	.features_case01_img, .features_case02_img, .features_case03_img, .features_case04_img {margin-left: 0px;}
	.features_case01_head, .features_case02_head, .features_case03_head, .features_case04_head {margin-top: 6px; margin-bottom: 22px; text-align: center;}
	.features_case01_head {padding-left: 38px;}
	.features_case02_head {padding-left: 38px;}
	.features_case03_head {padding-left: 39px;}
	.features_case04_head {padding-left: 54px;}
	.features_case01_paragraph, .features_case02_paragraph, .features_case03_paragraph, .features_case04_paragraph {width: 185px; margin: 15px 25px 27px 38px; font-size: 14px; line-height: 21px;}
	/* flow */
	#flow {padding-top: 70px; background: #f0f0f0;}
	.flow_of_contract_img {padding: 50px 0 70px 95px;}
	/* area */
	#area {margin-top: 70px; font-family: sans-serif;}
	.area_map {margin: 45px 0; padding-left: 90px; background: #f0f0f0; display: flex; postion: relative; overflow: hidden;}
	.area_map_txt_ttl {margin-top: 39px; font-size: 22px; line-height: 32px; color: #583822;}
	.area_map_txt {width: 500px; margin-left: 95px; text-align: center; font-size: 16px; line-height: 28px;}
	.area_map_txt_paragraph {margin-top: 27px; font-size: 16px; line-height: 28px;}
	/* faq */
	#faq {margin-top: 70px;}
	.faq_title_head {margin-bottom: 45px;}
	.faq_q {margin-left: 25px; padding: 3px 20px 3px 25px; font-size: 18px; background: url(../img/sp/faq_q.png) left no-repeat;}
	.faq_a {margin-top: 5px; margin-left: 30px; margin-right: 20px; padding-left: 22px; font-size: 14px; line-height: 21px; background: url(../img/sp/faq_a.png) top left no-repeat;}
	.faq_contents {padding-bottom: 25px;}
	.faq_contents .faq_box {margin: 0 90px 15px; padding: 17px 0px 19px;}
	.faq_contents .faq_box:nth-child(even)  {background: #EBEBEB;}
	.faq_contents .faq_box:nth-child(odd) {background: #F5F0E6;}
	/* footer */
	.footer_therapita_logo {margin-top: 28px; margin-left: 105px;}
	.footer_therapita_btn {margin: 17px 0px 0px 68px;}
	.footer_therapist_btn {margin: 20px 400px 0;}
	.footer_hotel_btn {margin: 10px 0px 0px 420px;}
	.footer_nav {margin-top: 37px; display: flex;}
	.footer_nav div {padding: 0 35px; font-size: 14px; line-height: 14px; text-align: center;}
	.privacy {margin-left: 295px; border-left: 1px solid #333;}
	.anpiel {border-left: 1px solid #333;}
	.contact {border-left: 1px solid #333; border-right: 1px solid #333;}
	.footer_copy {margin-top: 18px; border-top: 1px solid #333; border-bottom: 1px solid #333; font-size: 14px; padding-top: 7px; padding-bottom: 27px; text-align: center;}

	/* bnr */
	.therapita_hakone_cta01,
	.therapita_hakone_cta02,
	.therapita_hakone_cta03 {position: relative;}

	.hotelbnr_btn {position: absolute; top: 179px; left: 395px;}
}