@charset "utf-8";
/*=============== common ==============*/
html, body {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: bordr-box;
	-o-box-sizing: boder-box;
	-ms-box-sizing: border-box;
}
body {
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	-webkit-text-size-adjust: none;
	color: #222;
}
p, li {
	text-align: justify;
	text-justify: inter-ideograph;
}
a {
	text-decoration: none;
	color: #960101;
}
a:hover {
	text-decoration: none;
}
a[target="_blank"]:after {
    content: "";
    padding-left: 13px;
    background: url(../img/outlink_icn.png) no-repeat center left;
    background-size: 100%;
    width: 11px;
    height: 10px;
    margin-left: 4px;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
li {
	list-style-type: none;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
	display: block;
	border: 1px solid #bebebe;
	padding: 10px 24px;
	border-radius: none;
	-webkit-appearance: none;
}
input[type="submit"], input[type="button"] {
	border-radius: 0;
	-webkit-appearance: none;
	border: none;
}
input[type="button"] {
	display: inline-block;
	padding: 18px 50px;
	border: 1px solid #707070;
	background: #FFF;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 0;
}
input[type="submit"] {
	background-image: url(../img/submit_btn_bg.png);
	background-position: center;
	background-repeat: repeat;
	background-color: #960101;
	color: #fff;
	font-weight: bold;
}
input[type="submit"]:hover {
	opacity: 0.8;
}
input[type="radio"].radio_design {
	display: none;
}
.clearfix::after {
	content: " ";
	display: block;
	clear: both;
}
.center {
	text-align: center;
}

@media screen and (max-width:767px) {
body {
	font-size: 12px;
	line-height: 1.6em;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
	font-size: 16px;
}
input[type="radio"] + .radio:before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	width: 1em;
	height: 1em;
	border: 1px solid #9e9e9e;
	background-color: #fff;
	vertical-align: middle;
	cursor: pointer;
}
input[type="radio"] + .radio {
	margin-right: 10px;
	display: inline-block;
}
input[type="radio"]:checked + .radio:before {
	background-color: #960101;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
body {
	font-size: 14px;
	line-height: 1.7em;
	margin-top: 88px;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
	font-size: 14px;
}
input[type="radio"] + .radio:before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	width: 1.8em;
	height: 1.8em;
	border: 1px solid #9e9e9e;
	background-color: #fff;
	vertical-align: middle;
	cursor: pointer;
}
input[type="radio"] + .radio {
	margin-right: 40px;
}
input[type="radio"]:checked + .radio:before {
	background-color: #960101;
}
}

@media screen and (min-width:1024px) {
body {
	font-size: 14px;
	line-height: 1.7em;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
	font-size: 14px;
}
input[type="radio"] + .radio:before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	width: 1.8em;
	height: 1.8em;
	border: 1px solid #9e9e9e;
	background-color: #fff;
	vertical-align: middle;
	cursor: pointer;
}
input[type="radio"] + .radio {
	margin-right: 40px;
}
input[type="radio"]:checked + .radio:before {
	background-color: #960101;
}
}
/*=============== layout ==============*/

h3 {
	margin-bottom: 40px;
}
.container {
	max-width: 100%;
	text-align: left;
	background: #fff;
}
#contents {
	width: 100%;
}
.attention {
	font-size: 12px;
}
.wrapper {
	display: block;
	max-width: 1024px;
	margin: 0 auto;
	overflow: hidden;
}
.p_box {
	display: block;
}
.content_3_rows ul{
	display: flex;
	justify-content: center;
}
.content_3_rows ul li {
	width: 32%;
	margin-right: 2%;
}
.content_3_rows ul li:last-child {
	margin-right: 0;
}
.content_2_rows_box01, .content_2_rows_box02 {
	float: left;
	width: 48%;
	margin-right: 4%;
}
.content_2_rows_box02 {
	margin-right: 0;
}

@media screen and (max-width:767px) {
.m40 {
	margin-bottom: 20px;
}
.mt40 {
	margin-top: 20px;
}
.m64 {
	margin-bottom: 32px;
}
.pt64 {
	padding-top: 32px;
}
.p64 {
	padding-bottom: 32px;
}
.bgfff {
	background: #fff;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
.m40 {
	margin-bottom: 40px;
}
.mt40 {
	margin-top: 40px;
}
.m64 {
	margin-bottom: 64px;
}
.pt64 {
	padding-top: 64px;
}
.p64 {
	padding-bottom: 64px;
}
}

@media screen and (min-width:1024px) {
.m40 {
	margin-bottom: 40px;
}
.mt40 {
	margin-top: 40px;
}
.m64 {
	margin-bottom: 64px;
}
.pt64 {
	padding-top: 64px;
}
.p64 {
	padding-bottom: 64px;
}
}
.buy_button {
	margin-bottom: 20px;
}
.buy_button a {
	display: inline-block;
	background-color: #4a9fbe;
	;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	padding: 8px 48px;
	;
	margin-top: 12px;
	transition: .4s;
}
.buy_button a:hover {
	text-decoration: none;
	background: #e5004f;
}
.buy_button_icn:before {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	width: 29px;/*画像の幅*/
	height: 10px;/*画像の高さ*/
	background-image: url(../img/buy_button.png);
	background-size: contain;
	vertical-align: middle;
}

@media screen and (min-width: 768px) {
.c_txt {
	width: 720px;
	margin: 0 auto;
	text-align: center;
}
.wrapper {
}
}

@media screen and (max-width: 767px) {
.wrapper {
	padding: 0 20px;
}
.content_3_rows ul {
	display: block;
}
.content_3_rows ul li {
	width: 100%;
	margin-right: 0;
	margin-bottom: 3%;
}
.content_3_rows ul li:last-child {
	margin-right: 0;
	margin-bottom: 0;
}
.content_2_rows_box01, .content_2_rows_box02 {
	float: none;
	width: 100%;
	margin-right: 0;
}
.content_2_rows_box01 {
	margin-bottom: 20px;
}
.content_2_rows_box02 {
	margin-right: 0;
	margin-bottom: 20px;
}
}
/*=============== header ==============*/
header {
	width: 100%;
}
header .h1Wrap {
	width: 100%;
	font-size: 10px;
	color: #fff;
	background-color: #51aae0;
	;
}
header .navi {
	border-bottom: 1px solid #eee;
	background-color: #FFFFFF;
}
header wrapper {
	width: 1024px;
	margin: 0 auto;
}
.bg_none header {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9999;
}
.navi .wrapper {
	overflow: hidden;
}

@media screen and (max-width:767px) {
header .logo {
	width: 36%;
	margin: 10px 0;
	float: left;
}
header {
	text-align: center;
}
header .container {
}
header #navi_contact {
	float: right;
	margin: 10px 0;
	width: 50%;
}
header #navi_contact li {
	float: right;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
header .logo {
	width: 30%;
	margin: 20px 0;
	float: left;
}
header #navi_contact {
	width: 70%;
	float: right;
	margin: 0;
}
header #navi_contact li {
	display: inline-block;
	margin: 24px 0px 0 8px;
}
}

@media screen and (min-width:1024px) {
header .logo {
	width: 278px;
	margin: 20px 0;
	float: left;
}
header #navi_contact {
	float: right;
}
header #navi_contact li {
	display: inline-block;
	margin-top: 20px;
}
}
/*=============== common ==============*/
.section_title {
	position: relative;
}
.section_title.border {
	border-bottom: 1px solid #9e9e9e;
}
.left {
	float: left;
	width: 50%;
}
.right {
	float: right;
	width: 50%;
}
h3 {
	text-align: center;
}

@media screen and (min-width: 768px) {
section {
	padding-bottom: 48px;
}
.w100 {
	width: 90%;
}
.sp {
	display: none;
}
.section_title {
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}
.section_title h3 {
	line-height: 1.2em;
	margin-bottom: 24px;
}
.section_title h3 span {
	font-size: 30px;
}
}

@media screen and (max-width: 767px) {
section {
	padding: 28px 20px;
}
.w100 {
	width: 75%;
}
.pc {
	display: none;
}
.section_title {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 16px;
}
.section_title h3 {
	line-height: 1.2em;
	margin-bottom: 8px;
}
.section_title h3 span {
	font-size: 18px;
}
}
/*=============== to_top ==============*/
#page-top {
	position: fixed;
	bottom: 5px;
	right: 20px;
}
.page-top a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}
.page-top a:hover {
	text-decoration: none;
}

@media screen and (min-width: 768px) {
.page-top {
	right: 16px;
	bottom: 66px;
	width: 80px;
	height: 80px;
}
.page-top a {
	width: 80px;
	height: 80px;
}
}

@media screen and (max-width: 767px) {
.page-top {
	right: 16px;
	bottom: 10px;
	width: 40px;
	height: 40px;
}
.page-top a {
	width: 40px;
	height: 40px;
}
}
/*=============== line_bottom ==============*/
#footer_cta_sp {
	position: fixed;
}
#footer_cta_sp ul li{
	width: 50%;
	margin: 0 auto;
}
/* #footer_cta_sp ul li:last-child{
	margin-right: 0;
} */
#footer_cta_sp a:hover {
	text-decoration: none;
}

@media screen and (min-width: 768px) {
#footer_cta_sp {
	right: 16px;
	bottom: 66px;
	width: 80px;
	height: 80px;
}
#footer_cta_sp a {
	width: 80px;
	height: 80px;
}
#footer_cta_sp a {
	display: none;
}
}

@media screen and (max-width: 767px) {
#footer_cta_sp {
	bottom: 1%;
	left: 1%;
	width: 98%;
}
#footer_cta_sp a {
}
#footer_cta_sp a {
	display: block;
}
}
/*=============== footer ==============*/
footer {
	text-align: center;
	color: #fff;
	font-size: 12px;
	background-color: #000;
}
footer .copyright {
	padding: 8px 0;
}
.copyright {
	text-align: center
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
}
/*=============== contents ==============*/
.catch_section {
	padding: 0;
	position: relative;
}
.catch_section .slider {
	position: relative;
	display: block;
	overflow: hidden;
	z-index: -100;
	width: 100%;
}
.catch_section .catch_content h2 {
	display: inline-block;
	color: #fff;
	text-align: right;
	line-height: 1.5em;
	text-shadow: 0 4px rgba(0,0,0,.16);
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
}
/*=============== mainvisual ==============*/

#mv {
	height: 598px;
	background-image: url('sample1.jpg');
	background-size: contain;
	background-attachment: fixed;
	background-repeat:repeat;
	background-position: center center;
	z-index: 1;
}
#mv .wrapper{
	position: relative;
	height: 598px;
}
.card {
	padding: 32px 0;
	background: #bee2f8;
}

@media screen and (max-width:767px) {
/*#mv {
	
	background-size: cover;
	background-position: 60%;
	width: 100%;
}*/
#mv {
	background: none;
	height: 668px;
}
#mv:before {
	background-image: url(../img/main_bg_1_sp.jpg);
	background-size: 100% auto;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 108px;
	content: "";
	z-index: -1;
}
#mv_catch {
	width: 88%;
	position: absolute;
	top: 460px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
	#mv_arrow {
	margin: 0 auto;
    display: inherit;
    margin-top: 420px;
}
#mv_catch02 {
	width: 34%;
	position: absolute;
	bottom: 20px;
	right: 2%;
}
.bg_none #mv:before {
	background: none !important;
}
.bg_none #mv {
	padding-top: 80px;
}
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
#mv {
	background-image: url(../img/main_bg_1.jpg);
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 598px;
}
#mv_catch {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#mv_catch02 {
	position: absolute;
	bottom: 32px;
	right: 10%;
}
}

@media screen and (min-width:1024px) {
#mv {
	background-image: url(../img/main_bg_1.jpg);
	width: 100%;
	height: 688px;
}
#mv_catch {
	position: absolute;
	top: 450px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#mv_catch02 {
	position: absolute;
	bottom: 32px;
	right: 10%;
}
}
/*=============== line@ ==============*/
.line {
	background-color: #51aae0;
}

@media screen and (max-width:767px) {
.line .wrapper {
	padding: 20px;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
.line {
	padding-top: 30px;
	padding-bottom: 50px;
}
}

@media screen and (min-width:1024px) {
.line {
	padding-top: 30px;
	padding-bottom: 50px;
}
}
/*=============== 利用方法01 ==============*/

#howtouse {
	background: #51aae0;
	padding: 80px 0;
	background-image: url(../img/cloud_bg.png);
	background-size: cover;
	width: 100%;
}

#howtouse_2 {
	padding: 40px;
}
#howtouse_2 h4 {
	font-size: 32px;
	color: #51aae0;
	margin: 20px 0;
}
#howtouse_2 .content_2_rows {
	margin-bottom: 80px;
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
#howtouse {
	padding: 40px 0;
}
#howtouse_2 h4 {
	font-size: 24px;
	text-align: center;
}
	
#howtouse_2 {
	padding: 20px;
}
}
/*=============== 選ばれる理由01 ==============*/
#reason {
	background: #dceef9;
	padding: 80px 0;
	background-image: url(../img/cloud_bg.png);
	background-size: cover;
	width: 100%;
}
#reason ul li p {
	color: #000;
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
}
/*=============== お客様の声 ==============*/
#voice {
	background: #dceef9;
	padding: 80px 0;
}
#voice h4 {
	color: #51aae0;
}
/*=============== 利用方法02 ==============*/

#howtouse02_1, #howtouse02_3 {
	background: #51aae0;
}
#howtouse02_1 .wrapper, #howtouse02_2 .wrapper, #howtouse02_3 .wrapper {
	padding: 80px 0;
}
#howtouse02_1 .wrapper h3, #howtouse02_3 .wrapper h3{
	font-size: 32px;
    margin: 20px 0;
    color: #fff;
	font-size: 20px;
}
#howtouse02_2 .wrapper h3{
	font-size: 32px;
    margin: 20px 0;
    color: #51aae0;
	font-size: 20px;
}
@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
#howtouse02_1 .wrapper, #howtouse02_2 .wrapper, #howtouse02_3 .wrapper {
	padding: 20px 0;
	margin: 0 20px;
}
}
/*=============== 選ばれる理由02 ==============*/

#reason02 {
	padding: 80px 0;
	background: #dceef9;
	background-image: url(../img/cloud_bg.png);
	background-size: cover;
	width: 100%;
}
#reason02 h4 {
	font-size: 32px;
	text-align: center;
	margin: 40px 0 64px 0;
	position: relative;
}
#reason02 h4 span {
	color: #e5004f;
	font-size: 80px;
}
#reason02 .wrapper {
	background: #fff;
	border-radius: 16px;
	margin-bottom: 80px;
	position: relative;
	overflow: visible;
	padding: 40px 0;
}
#reason02 .reason_label {
	position: absolute;
	left: -27px;
}
#reason02 .wrapper .wrap_inner {
	margin: 0 16px;
}
.reason02_3_l {
	width: 60%;
	float: left;
	margin-right: 2%;
}
.reason02_3_r {
	width: 38%;
	float: left;
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
#reason02 .wrapper {
	margin: 0 20px 40px;
}
#reason02 .reason_label {
	position: absolute;
	left: -12px;
	width: 120px;
}
#reason02 h4 {
	font-size: 20px;
	margin: 20px 0 40px 0;
}
#reason02 h4 span {
	font-size: 40px;
}
.reason02_3_l {
	width: 100%;
	float: none;
	margin-right: 0;
	margin-bottom: 20px;
}
.reason02_3_r {
	width: 100%;
	float: none;
}
.reason02_3_r p {
	margin-top: 20px;
}
}
/*=============== area ==============*/

#area {
	padding: 80px 0 340px 0;
	background-image: url(../img/area_bg.jpg);
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
}
#area h3 {
	font-size: 32px;
	color: #fff;
	margin: 24px 0;
}
#area .wrapper {
	padding: 40px 0;
	background: #fff;
	border-radius: 8px;
}
#area .wrapper h4 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 16px;
	color: #51aae0;
}
#area .wrapper p {
	text-align: center;
}
#area .wrapper .area_osaka {
	margin-bottom: 32px;
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
#area h3 {
	font-size: 20px;
}
#area .wrapper {
	margin: 0 20px;
	padding: 20px;
}
}
/*=============== comparison ==============*/
#comparison {
	background-image: url(../img/comparison_bg.png);
	background-repeat: repeat;
	background-size: 26px;
}

@media screen and (max-width:767px) {
#comparison {
	padding: 40px 0;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
}

@media screen and (min-width:1024px) {
#comparison .wrapper {
	padding: 64px 0;
}
}
/*=============== example ==============*/
#example {
	background: #51aae0;
}
#example h4 {
	font-size: 12px;
	color: #878787;
	font-weight: normal;
}
#example h4 span {
	font-size: 14px;
	font-weight: bold;
	color: #009944;
}
#example .price {
	color: #e5004f;
	margin-top: 8px;
}
#example .price span {
	font-size: 30px;
}
#example .car_info {
	display: inline-block;
	border: solid 1px #878787;
	padding: 0 8px;
	text-align: center;
	font-size: 12px;
	color: #878787;
}
#example p {
}

@media screen and (min-width: 768px) {
#example li {
	width: 22%;
	float: left;
	margin: 16px;
	position: relative;
}
}

@media screen and (max-width: 767px) {
#example li {
	width: 22%;
	float: left;
	margin: 16px;
	position: relative;
}
}
/*=============== flow ==============*/
#flow {
/*background:#51aae0;*/
}
#flow li {
	width: 22%;
	display: inline-block;
	margin-right: 4%;
	position: relative;
	vertical-align: top;
}
#flow li:last-child {
	margin-right: 0;
}
#flow li p {
	font-size: 14px;
	border-top: 1px dotted #000;
	padding-top: 16px;
}
#flow li p span {
	color: #e5004f;
	font-weight: bold;
}

@media screen and (max-width:767px) {
#flow {
	padding: 40px 0;
}
#flow li {
	text-align: center;
	width: 100%;
	margin-bottom: 64px;
}
#flow li:not(:last-child):after {
	content: '';
	position: absolute;
	top: 110%;
	background: url(../img/flow_arrow_sp.png);
	background-size: 100%;
	width: 15px;
	height: 15px;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
#flow li:after {
	content: '';
	position: absolute;
	right: 106%;
	top: 186px;
	background: url(../img/flow_arrow.png);
	background-size: 100%;
	width: 15px;
	height: 15px;
}
}

@media screen and (min-width:1024px) {
#flow .wrapper {
	padding: 64px 0;
}
#flow li:after {
	content: '';
	position: absolute;
	right: 106%;
	top: 186px;
	background: url(../img/flow_arrow.png);
	background-size: 100%;
	width: 15px;
	height: 15px;
}
}
/*=============== reason ==============*/
#reason #reason_txt {
	line-height: 1.6em;
	border: 8px solid #eee;
	padding: 16px;
}
#reason #reason_txt span {
	font-weight: bold;
	color: #FF0004;
}
.yachin, .madori, .station {
	margin-right: 8px;
    padding: 0 4px;
    border: 2px solid #757575;
    color: #757575;
    font-size: 12px;
    margin-bottom: 4px;
    display: inline-block;
}
.chukai {
	margin-right: 8px;
	padding: 4px;
	background: #e5004f;
	color: #fff;
	margin-bottom: 4px;
	display: inline-block;
}
.chukai_zero {
	font-size: 24px;
	font-weight: bold;
	color: #e5004f;
}
.chukai_yen {
	color: #e5004f;
}
#reason li {
	margin-bottom: 12px;
}
#reason li:last-child {
	margin-bottom: 0;
}
.more_button {
	width: 100%;
	border: none;
	display: inline-block;
	background-color: #4a9fbe;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	padding: 8px 0;
	transition: .4s;
	margin-top: 20px;
}
.line_button a {
	width: 100%;
	display: inline-block;
	background-color: #00b900;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	padding: 8px 0;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: .4s;
}
.modal_content {
	margin: 20px;
}
.room_modal .room_modal_photo ul {
	font-size: 0;
}
.room_modal .room_modal_photo li {
	width: 30%;
	margin-right: 5%;
	display: inline-block;
}
.room_modal .room_modal_photo li:nth-child(3n) {
	margin-right: 0;
}
.room_modal .room_modal_photo {
	margin-bottom: 20px;
}
.room_modal .room_modal_photo .room_modal_madori {
	margin-top: 20px;
}
.room_modal .room_modal_info li {
	margin-bottom: 12px;
}

@media screen and (max-width:767px) {
#reason {
	padding: 40px 0;
}
#reason #reason_txt {
	font-size: 12px;
}
.room_info {
	margin-top: 16px;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
#reason #reason_txt {
	font-size: 18px;
}
#reason #reason_txt {
	margin: 32px 0 64px 0;
}
.room_photo {
	width: 48%;
	float: left;
}
.room_info {
	width: 48%;
	float: right;
}
.more_button a {
	margin-top: 12px;
}
#overlay {
	/* viewpointを相対位置にし、全画面表示にする */
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.3);  /* 背景を半透明にする */
	display: none;  /* HTML要素を非表示にする */
	z-index: 1  /* 「メインのHTML要素」よりもスタックレベルを高くする */
}
#modalWindow {
	width: 350px;
	height: 150px;
	position: fixed; /* viewpointを相対位置にする */
	border: 2px solid #D04255;
	background-color: #FFF;
	display: none;
	z-index: 2  /* 「オーバーレのHTML要素」よりもスタックレベルを高くする */
}
body {
	text-align: center;
}
button {
	width: 100px;
	height: 50px;
	font-size: 1.2em;
	color: #D04255;
	background-color: #FFF;
	border: solid 2px #D04255;
	border-radius: 3px;
	transition: .4s;
}
button:hover {
	background: #D04255;
	color: #FFF;
}
}

@media screen and (min-width:1024px) {
#reason #reason_txt {
	font-size: 18px;
}
#reason #reason_txt {
	margin: 32px 0 64px 0;
}
.room_photo {
	width: 48%;
	float: left;
}
.room_info {
	width: 48%;
	float: right;
}
.more_button a {
	margin-top: 12px;
}
}
/*=============== staff ==============*/
#staff_member {
	background-color: #51aae0;
}
#staff_list {
	background-image: url(../img/staff_bg.jpg);
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
}
#staff_list li {
	color: #fff;
}
.staff_massage {
	border-top: 1px dotted;
}

@media screen and (max-width:767px) {
#staff_list {
	margin-bottom: 40px;
}
#staff_list li {
	max-width: 100%;
	text-align: center;
	margin-bottom: 30px;
}
#staff_list li img {
	float: left;
	width: 34%;
}
.staff_prof {
	width: 64%;
	float: right;
}
.staff_massage {
	font-size: 12px;
}
#staff_list h4 {
	text-align: left;
	font-size: 18px;
	margin-bottom: 4px;
}
.company_position {
	font-size: 12px;
	text-align: left;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
#staff_list {
}
#staff_list li {
	max-width: 232px;
	float: left;
	margin: 0 3% 0 0;
}
#staff_list li:last-child {
	margin-right: 0;
}
#staff_list h4 {
	text-align: center;
	font-size: 24px;
	margin: 8px 0;
}
.company_position {
	text-align: center;
}
.staff_massage {
	padding-top: 16px;
}
}

@media screen and (min-width:1024px) {
#staff_list {
}
#staff_list li {
	max-width: 232px;
	float: left;
	margin: 0 3% 0 0;
}
#staff_list li:last-child {
	margin-right: 0;
}
#staff_list h4 {
	text-align: center;
	font-size: 24px;
	margin: 8px 0;
}
.company_position {
	text-align: center;
}
.staff_massage {
	padding-top: 16px;
}
}
/*=============== message ==============*/
.ceo_message h3 {
	font-size: 18px;
	line-height: 1.6em;
	color: #4a9fbe;
	text-align: left;
	margin-bottom: 24px;
}
.ceo_message p {
	margin-bottom: 24px;
}
.ceo_message {
	float: left;
	width: 50%;
}
.ceo_name {
	float: right;
}
.ceo_img {
	float: right;
}

@media screen and (max-width:767px) {
.ceo_message {
	float: left;
	width: 100%;
}
.ceo_message img {
	width: 70%;
	margin: 0 auto;
	/* text-align: center; */
	display: block;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
}

@media screen and (min-width:1024px) {
}
/*=============== faq ==============*/
#faq h3 {
}
.accordion ul {
	width: 100%;
	padding: 0;
}
.accordion li {
	position: relative;
	margin-bottom: 24px;
	list-style: none;
}
.accordion li:first-child {
}
.accordion > ul > li > a {
	display: block;
	text-decoration: none;
	cursor: pointer;
	padding: 20px 16px;
	position: relative;
}
.accordion > ul > li > a h5:hover {
	color: #111;
	text-decoration: none;
}
.accordion > ul > li > p {
	display: none;
	text-align: left;
	padding: 0 .8em 1.4em 1em;
	color: #555;
	line-height: 1.8;
}
.accordion li .accordion_icon, .accordion li .accordion_icon span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
}
.accordion li .accordion_icon span {
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #fff;
	margin: 10px 0;
}
.accordion li .accordion_icon span:nth-of-type(1) {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}
.accordion li .accordion_icon span:nth-of-type(2) {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}
.accordion li .accordion_icon.active span:nth-of-type(1) {
	display: none;
}
.accordion li .accordion_icon.active span:nth-of-type(2) {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}
#faq a {
	background-color: #4a9fbe;
}
#faq h5 {
	color: #FFFFFF;
}
#faq .answer {
}

@media screen and (min-width: 768px) {
#faq h3 {
	font-size: 36px;
}
.accordion li .accordion_icon {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 32px;
	right: 10px;
}
#faq h5:before {
	margin: 0 10px 0 0;
	content: " ";
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url( "../img/faq01.png");
	background-size: contain;
	vertical-align: middle;
}
#faq .answer:before {
	margin: 0 10px 0 0;
	content: " ";
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url( "../img/faq02.png");
	background-size: contain;
	vertical-align: middle;
}
#faq li .answer {
	margin: 16px 0 32px 0;
	padding: 16px;
	background-color: #eeeeee;
	padding-left: 62px;
	text-indent: -3.5em;
}
}

@media screen and (max-width: 767px) {
#faq h3 {
	font-size: 20px;
}
.accordion li .accordion_icon {
	position: absolute;
	width: 16px;
	height: 16px;
	display: block;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.accordion > ul > li > a h5 {
	width: 92%
}
#faq h5:before {
	margin: 0 6px 0 0;
	content: " ";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url( "../img/faq01.png");
	background-size: contain;
	vertical-align: middle;
}
#faq .answer:before {
	margin: 0 6px 0 0;
	content: " ";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url( "../img/faq02.png");
	background-size: contain;
	vertical-align: middle;
}
#faq li .answer {
	margin: 16px 0 32px 0;
	padding: 16px;
	background-color: #eeeeee;
}
}
/*=============== pp ==============*/
#pp p {
	height: 200px;
	padding: 16px;
	overflow: scroll;
}
#pp th {
	vertical-align: middle;
	width: 25%;
	background-color: #51aae0;
	color: #fff;
}
/*=============== company ==============*/
#company {
	background: #eee;
}
#company h3 {
	background-color: #51aae0;
	color: #fff;
	padding: 8px;
}
#contract h3 {
	margin-bottom: 20px;
}
#contract p {
	height: 160px;
	overflow: scroll;
	padding: 8px;
	margin-bottom: 40px;
}
#company table {
	text-align: left;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0px;
}
#company tr {
	border-bottom: 2px solid #eee;
}
#company th {
	width: 25%;
	background-color: #51aae0;
	border-right: 2px solid #eee;
	color: #fff;
}
#company td {
	background: #fff;
}
#company td, th {
	padding: 12px;
	vertical-align: middle;
}

@media screen and (max-width:767px) {
#company {
	padding: 40px 0;
}
#campany_info li {
	margin: 20px 0;
}
#company_logo {
	margin-bottom: 40px;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
#company {
	padding: 64px 0;
}
#campany_info {
	float: right;
	width: 50%;
}
#company_logo {
	float: left;
	width: 45%;
}
}

@media screen and (min-width:1024px) {
#company {
	padding: 64px 0;
}
#campany_info {
	float: right;
	width: 50%;
}
#company_logo {
	float: left;
	width: 45%;
}
}
/*=============== company ==============*/
#thought {
}
#thought h3 {
}
#thought_message p {
	padding: 8px;
}
.name {
	width: 30%;
	float: right;
	margin-bottom: 40px;
}

@media screen and (max-width:767px) {
#campany_info li {
	margin: 20px 0;
}
#thought_message h3 {
	color: #51aae0;
	line-height: 1.6em;
	font-size: 18px;
	text-align: left;
	margin-bottom: 20px;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
#thought_message h3 {
	color: #51aae0;
	line-height: 1.6em;
	font-size: 20px;
	text-align: left;
	margin-bottom: 20px;
}
#thought_img {
	float: left;
	width: 40%;
}
#campany_info li {
	margin: 20px 0;
}
#thought_message {
	float: right;
	width: 52%;
}
}

@media screen and (min-width:1024px) {
#thought_message h3 {
	color: #51aae0;
	line-height: 1.6em;
	font-size: 20px;
	text-align: left;
	margin-bottom: 20px;
}
#thought_img {
	float: left;
	width: 40%;
}
#thought_img li {
	margin: 20px 0;
}
#thought_message {
	float: right;
	width: 52%;
}
}

/*=============== footer ==============*/
@media screen and (max-width:767px) {
footer {
	margin-bottom: 20%;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
}

@media screen and (min-width:1024px) {
}
/*=============== law ==============*/
#law {
	margin-top: 48px;
}
#law h3 {
	background-color: #51aae0;
	color: #fff;
	padding: 8px;
}
#contract h3 {
	margin-bottom: 20px;
}
#contract p {
	height: 160px;
	overflow: scroll;
	padding: 8px;
	margin-bottom: 40px;
}
#law table {
	text-align: left;
	margin: 0px auto;
	border-collapse: collapse;
	border-spacing: 0px;
}
#law tr {
	border-bottom: 1px solid rgb(238, 238, 238);
}
#law th {
	width: 320px;
	padding: 25px 0px;
}
#law td {
	width: 320px;
	padding: 25px 0px;
}

@media screen and (max-width:767px) {
}

@media screen and (min-width:768px) and ( max-width:1023px) {
}

@media screen and (min-width:1024px) {
}
/*=============== contact ==============*/
.application #table_head {
	text-align: center;
	background-color: #51aae0;
	color: #fff;
}
.application th {
	vertical-align: middle;
	width: 20%;
	background: #ececec;
	font-weight: bold;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 15px;
}
.application td {
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
	border-bottom: 1px solid #fff;
	padding: 8px;
	background: #f9f9f9;
}
.application #submit_btn {
	display: block;
	padding: 15px 30px;
	color: #000;
	background-color: #efefef;
	border: 1px solid #ccc;
	margin: 20px auto 0 auto;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
	width: 93%;
	width: -moz-available;
	width: -webkit-fill-available;
 display: display: inline-block;
	border: 1px solid #bebebe;
	padding: 10px 24px;
	border-radius: none;
	-webkit-appearance: none;
}
input[type="button"] {
	display: block;
	margin: 24px auto;
	padding: 15px 30px;
	border: 1px solid #707070;
	background: #FFF;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 0;
}
input, select {
	vertical-align: middle;
}
#demand {
	height: 160px;
}
.required {
	color: #e60012;
}
.application table {
	width: 100%;
}

@media screen and (max-width:767px) {
.application th {
	width: auto;
	display: block;
}
.application td {
	width: auto;
	display: block;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
.application {
	margin-top: 120px;
}
}

@media screen and (min-width:1024px) {
.application {
	margin-top: 120px;
}
}


/*=============== company ==============*/

#company h2{
	font-family:  'Sawarabi Mincho';
	padding-top: 100px;
	margin-bottom: 64px;
	color:#0068b6;
}

#company h2:before {
	background-color: #ff8425;
	content: '';
    position: absolute;
    bottom: -16px;
    display: inline-block;
    width: 60px;
    height: 2px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.accordion ul {
	width:100%;
	padding:0;
}
.accordion li {
	position:relative;
	margin-bottom:24px;
	list-style:none;
}
.accordion li:first-child {
}

.accordion > ul > li > a {
	display: block;
	text-decoration: none;
	cursor: pointer;
	padding: 20px 16px;
	position: relative;
}
.accordion > ul > li > a h5:hover {
	color: #111;
	text-decoration:none;
}
.accordion > ul > li > div {
	display: none;
	text-align:left;
	color:#555;
	line-height:1.8;
}

.accordion li .accordion_icon,
.accordion li .accordion_icon span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
}

.accordion li .accordion_icon span {
	position: absolute;
    width: 100%;
	height: 2px;
    background-color: #fff;
	margin:10px 0;
}
.accordion li .accordion_icon span:nth-of-type(1) {
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion li .accordion_icon span:nth-of-type(2) {
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
.accordion li .accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion li .accordion_icon.active span:nth-of-type(2) {
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
#company .toggle{
	background-color: #4a9fbe;
}

#company h5 {
	text-align: center;
	color:#FFFFFF;
}

#company .answer {
}

.accordion li .accordion_icon {
	position: absolute;
	width: 32px;
	height: 32px;
	right:10px;
	top: 20px;
}

#company li .answer{
	margin: 16px 0 32px 0;
}

#company table{
	width:100%;
	text-align: left;
    margin: 0px auto;
    border-collapse: collapse;
    border-spacing: 0px;
}

#company tr {
    border-bottom: 1px solid rgb(238, 238, 238);
}

#company th {
    color: #fff;
    font-weight: bold;
    width: 30%;
    padding: 25px 0px;
	text-align: center;
}

#company td {
	width:70%;
    padding: 25px 16px;
}


/* ふわふわさせたいものに fuwafuwaクラスを付与 */
.fuwafuwa {
	-webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}

#cp{
	background: #fabe02;
	padding: 40px 0;
}
.cp_contents {
    position: relative;
}
#cp .wrapper{
	overflow: visible;
}
.cp_h2{
	position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 50%;
}
@media screen and (max-width:767px) {
.cp_h2{
	position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
	z-index: 999;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {

}

@media screen and (min-width:1024px) {

}