/* ----------------------------------------
hotel 
---------------------------------------- */
.sec_tl {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 50px;
}
.under_yellow {
	background: linear-gradient(transparent 60%, var(--point-color) 60%);
}
.tl_yellow {
	color: var(--point-color);
}
.tl_dot {
	background-position: top 12px left 0px;
	background-repeat: repeat-x;
	background-size: 1em .3em;
	background-image: radial-gradient(0.1em .1em at center center, var(--point-color), var(--point-color) 100%, transparent, transparent);
	padding-top: .6em;
}
/* SNS メイン main
---------------------------------------- */
.main {
	background: var(--main-color);
	padding: 45px 0 100px;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0px -5px 10px rgba(0, 0, 0, .1);
}
.main::before {
	background: url(/scene/img/common/main_shape01.webp) 0 0 no-repeat;
	width: 420px;
	height: 270px;
	top: -60px;
	left: 60px;
	position: absolute;
	content: "";
}
.main::after {
	background: url(/scene/img/common/main_shape02.webp) 0 0 no-repeat;
	width: 490px;
	height: 280px;
	bottom: -100px;
	right: 60px;
	position: absolute;
	content: "";
}
.main_inner {
	width: 1200px;
	height: 550px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 1;
}
.main_box {
	position: relative;
	z-index: 1;
}
.main_sb_catch {
        font-size: 44px;
	line-height: 52px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.05em;
	margin-bottom: 19px;
}
.main_tl {
	margin-bottom: 34px;
}

.main_catch_txt {
	color: #fff;
	padding-left: 10px;
	margin-bottom: 30px;
	font-size: 15px;
}
.main_catch_contact {
	display: flex;
	gap: 20px;
}
a.btn_scene_main {
	height: 70px;
	border: none;
	border-radius: 35px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
	margin: 0;
}
.main_image {
	padding-bottom: 100px;
}
.main_chara {
	position: absolute;
	bottom: -40px;
	right: 210px;
}
/* hotel 課題 assign
---------------------------------------- */
.assign {
	width: 1200px;
        background: #fff;
        margin: -60px auto 60px;
        padding: 50px 0;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        border-radius: 50px;
}
.assign .sec_tl {
	margin-bottom: 40px;
}

.ass_li {
        display: flex;
        flex-wrap: wrap;
        gap: 50px 40px;
        width: 1100px;
        margin: 0 auto 100px;
}

.ass_li li {
                    position: relative;
            width: 240px;
            height: 240px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
            border-radius: 50%;
}

.ass_li li span {
                        display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-weight: 600;
                font-size: 17px;
                position: relative;
                z-index: 1;
                width: 230px;
                height: 55px;
                margin: 70px auto 0;
}

.ass_li li img {
                        position: absolute;
                top: 0;
                left: 0;
}

.ass_onayami_catch {
                font-size: 32px;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.ass_onayami_catch span {
        display: inline-block;
}

.ass_onayami_catch span::after {
            background: url(/scene/img/hotel/line_red.webp) 0 0 repeat-x;
            content: "";
            display: block;
            height: 9px;
            width: 100%;
}

.ass_onayami_chara {
                position: absolute;
        bottom: 0;
        right: 40px;
}


/* hotel 特徴 features
---------------------------------------- */
.features {
margin-top: 200px;
        padding-bottom: 80px;
        background: var(--main-bright-color);
        position: relative;
		&:before {
            background: url(/scene/img/common/bg_wave_top.webp) 50% 0 no-repeat;
            top: -160px;
            left: 0;
        }
		&::before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 160px;
        }
}
.fea_arrow {
        position: absolute;
        width: 36px;
        top: -193px;
        left: calc(50% - 18px);
}

.features h2 {
	text-align: center;
        margin-bottom: 110px;
}

.fea_chara {
	position: absolute;
        top: -40px;
        left: calc(50% - 600px);
}

.fea_list {
	display: flex;
        justify-content: center;
        gap: 45px;
        margin-bottom: 45px;
}

.fea_list li {
	        width: 370px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        padding: 35px 0;
        position: relative;
        z-index: 1;
}

.fea_li_number {
	        background: var(--main-color);
        width: 90px;
        height: 90px;
        border-radius: 90px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        color: #fff;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: -65px auto 20px;
		        & span:nth-child(1) {
            font-size: 16px;
            font-weight: 600;
        }
		        & span:nth-child(2) {
            font-family: "Jost", sans-serif;
            font-weight: 600;
            font-size: 35px;
        }
}

.fea_li_tl {
	        font-size: 24px;
        color: var(--main-color);
        font-weight: 600;
        text-align: center;
        line-height: 32px;
		letter-spacing: 0.02em;
        margin-bottom: 20px;
}

.fea_list li img {
	text-align: center;
    margin: 0 auto 20px;
	display: block;
}

.fea_li_desc {
	        font-size: 15px;
			line-height: 25px;
			font-weight: 700;
                        padding: 0 27px;
}

/* hotel アプローチ approch
---------------------------------------- */

.approach {
        margin: 107px 0 145px;
}

.app_inner {
        width: 1200px;
        margin: 0 auto;
        position: relative;
}

.app_tl {
        margin-bottom: 103px;
        text-align: center;
}

.app_tl img {
}

.app_sb_tl {
                position: absolute;
        top: -70px;
        right: calc(50% - 570px);
}

.app_tl_sb {
        background-color: var(--main-color);
        border-radius: 30px;
        padding: 15px 0;
        margin-bottom: 64px;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}

.app_li {
        display: flex;
        gap: 60px;
        flex-wrap: wrap;
}

.app_li_box {
        width: calc((100% - 120px) / 3);
}

.app_li_ass {
        width: 307px;
        height: 339px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        margin: 0 auto;
}

.app_li_ass_01 {
        background-image: url(/scene/img/hotel/app_list_bg_01.webp);
}

.app_li_ass_02 {
        background-image: url(/scene/img/hotel/app_list_bg_02.webp);
}

.app_li_ass_03 {
        background-image: url(/scene/img/hotel/app_list_bg_03.webp);
}

.app_li_ass_04 {
        background-image: url(/scene/img/hotel/app_list_bg_04.webp);
}

.app_li_ass_05 {
        background-image: url(/scene/img/hotel/app_list_bg_05.webp);
}

.app_li_ass_06 {
        background-image: url(/scene/img/hotel/app_list_bg_06.webp);
}

.app_li_ass div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* margin-top: -17px; */
        height: 75%;
}

.app_list_index {
        color: var(--main-color);
        font-size: 25px;
        line-height: 32px;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}

.app_li_content {
        background-image: url(/scene/img/hotel/app_list_content_bg.webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
                width: 360px;
        height: 389px;
        display: flex;
        align-items: end;
                margin-top: -10px;
        position: relative;
        z-index: 1;
}

.app_li_content div {
                height: 100%;
        padding: 80px 20px 20px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
}

.app_li_content img {

}

.app_li_desc {
        font-size: 16px;
        line-height: 30px;
        font-weight: 700;
}

.app_blue {
        color: var(--main-color);
}

.app_red {
        color: var(--red-color);
}


/* hotel 想い mind
---------------------------------------- */
.mind {
        padding: 80px 0;
}

.mind_inner {
        max-width: 1705px;
        height: 800px;
        overflow: hidden;
        background: url(/scene/img/hotel/mind_bg.webp) 50% 0 no-repeat;
        margin: 0 auto 37px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 5px rgba(0, 0, 0, .2);
        font-weight: 600;
}

.mind_catch {
        font-size: 30px;
        margin: 0 0 60px;
        position: relative;
                & span {
            text-emphasis: filled var(--point-color);
        }
}

.mind_catch::after {
        position: absolute;
        
            background: url(/scene/img/hotel/line_yellow.webp) 0 0 repeat-x;            content: "";
            display: block;
            height: 9px;
            margin-top: 10px;
            width: 100%;

}

.mind_message {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0.02em;
        font-weight: 700;
        padding-bottom: 140px;
}

.mind_staff_01, .mind_staff_02 {
        position: absolute;
        bottom: 20px;
}

.mind_staff_01 {
        right: calc(50% + 470px);
}

.mind_staff_02 {
        left: calc(50% + 470px);
}

.mind ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        gap: 17px;
}

.mind ul li {
        border: 2px solid var(--main-color);
        border-radius: 10px;
        padding: 15px;
        color: var(--main-color);
        font-size: 32px;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 700;
}

.mind_closing {
        color: #000;
        font-size: 32px;
        line-height: 55px;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}



/* SNS フォーム form
---------------------------------------- */

.hotel_form {
	background: #f6f6f6;
    padding: 80px 0;
}
h2.hotel_ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
		& img {
            margin-bottom: 15px;
        }
		& span {
            font-size: 32px;
            font-weight: 600;
        }
}