@charset "UTF-8";
/*===========================================================*/
/*共通
/*===========================================================*/

html {
    font-size: 62.5%;
    min-height: 100%;
    height: -webkit-fill-available;
}
body {
	position: relative;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
    font-size: 1.6rem;
    line-height: 1.4;
    background-color: #fff;
    color: #000;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
}
body.is-fixed {
	position: fixed;
	width: 100%;
	height: 100vh;
	left: 0;
    overflow-y: scroll;
}
.lp_wrapper {
    line-height: 1.4;
    color: #000;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
    letter-spacing: normal;
}
p {
    word-break: break-all;
}
a {
    text-decoration: none;
    transition: all .2s;
}
a:hover {
    opacity: 0.7;
}
*:focus {
	outline: none;
}
img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: bottom;
}

.bold { font-weight: bold !important; }

.c_red { color: #af0e18; }

.align_c { text-align: center !important; }
.align_l { text-align: left !important; }
.align_r { text-align: right !important; }

.indent_1 { padding-left: 1em; text-indent: -1em; }

.mt_5 { margin-top: 5px !important; }
.mt_10 { margin-top: 10px !important; }
.mt_15 { margin-top: 15px !important; }
.mt_20 { margin-top: 20px !important; }
.mt_25 { margin-top: 25px !important; }
.mt_30 { margin-top: 30px !important; }
.mt_35 { margin-top: 35px !important; }
.mt_40 { margin-top: 40px !important; }

.mb_5 { margin-bottom: 5px !important; }
.mb_10 { margin-bottom: 10px !important; }
.mb_15 { margin-bottom: 15px !important; }
.mb_20 { margin-bottom: 20px !important; }
.mb_25 { margin-bottom: 25px !important; }
.mb_30 { margin-bottom: 30px !important; }
.mb_35 { margin-bottom: 35px !important; }
.mb_40 { margin-bottom: 40px !important; }

/* #loading {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	z-index: 100;
} */

.shadow { box-shadow: 0 3px 6px rgba(0, 0, 0, .16); position: relative; }
.lp_wrapper {
    background-image: url("../img/bg_img.png");
    background-repeat: repeat;
    background-position: center center;
    background-size: 1366px 424px;
    overflow-x: hidden;
    padding-bottom: 100px;
}

.pc { display: block; }
.sp { display: none; }

@media screen and (max-width: 767px) {
    a:hover {
        opacity: 1;
    }
    .lp_wrapper {
        padding-bottom: 50px;
    }
    .pc { display: none; }
    .sp { display: block; }
    br.sp { display: inline-block; }
}

/* フェードイン */
/* 要素にクラス追加 js-trigger slide-up */
.slide-up {
    position: relative;
    transform : translate(0, 50px);
    opacity: 0;
    transition: top 860ms, opacity 1s;
}
.slide-up.is-show {
    transform : translate(0, 0);
    opacity: 1;
}

/*===========================================================*/
/*ヘッダー
/*===========================================================*/

.hoverImg img {
    width: 274px;
    max-width: 100%;
}
.header {
    background-color: #fff;
}
.header__inner {
    padding: 20px 50px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .header__inner {
        padding: 5%;
    }
    .header__logo {
        width: 36%;
    }
    .header__right {
        width: 36%;
    }
}

/*===========================================================*/
/*フッター
/*===========================================================*/

.footer {
    color: #231815;
    background-color: #fff;
    font-size: 1.4rem;
    padding: 50px 0 40px;
    line-height: 1;
}
.footer .wrapper {
    min-height: auto;
    max-width: 1120px;
    padding: 0 2%;
    margin: 0 auto;
}
.info-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.info-list li {
    padding: 10px;
}
.info-list li a:hover {
    opacity: .7;
    text-decoration: underline;
    transition: 0.4s;
}
.mb20 {margin-bottom: 20px;}
.text-center {
    text-align: center;
}
small {
    font-size: 80%;
}
.footer .logo img {
    width: 270px;
    max-width: 100%;
    display: inline-block;
}
.lp_footer {
    width: 100%;
    padding: 30px 1em;
}
.copyright {
    font-size: 1.3rem;
    color: #6a3906;
    letter-spacing: 0.05em;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .footer {
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .info-list li {
        padding: 20px;
    }
    .footer .logo {
        margin: 30px auto 10px;
    }
    .footer small {
        font-size: 1rem;
    }
    .copyright {
        font-size: 1rem;
    }
}

/* ====================================
    TOPに戻るボタン
==================================== */

#pagetop {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 99;
}
#pagetop a {
    width: 40px;
	height: 40px;
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
	color: #fff;
    text-align: center;
	text-decoration: none;
	background: #fff;
    border: 2px solid #6a3906;
    border-radius: 50%;
	opacity: .9;
    position: relative;
}
#pagetop a:hover {
    opacity: .7;
}
#pagetop .icon_arrow::before {
    content: '';
    width: 17px;
    height: 10px;
    background: url(../img/arrow_up.svg) no-repeat top center / cover;
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    margin: auto;
}

@media screen and (max-width: 767px) {
    #pagetop a {
        width: 30px;
        height: 30px;
    }
    #pagetop .icon_arrow::before {
        width: 10px;
        height: 6px;
    }
}



/*===========================================================*/
/*コンテンツ
/*===========================================================*/

/* ====================================
    コンテンツ共通
==================================== */

.lp_wrapper_inner {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
}
.inner {
    width: 100%;
    max-width: 1040px;
    padding: 0 20px;
    margin: 0 auto;
}
.lp_main {
    position: relative;
    max-width: 1296px;
    margin: 0 auto;
    z-index: 1;
    margin-top: -9%;
    padding: 0 15px;
}
.contents {
    background-color: #fff;
}

/* ====================================
    リスト
==================================== */

.list_note > li {
    position: relative;
    line-height: 1.4;
    padding-left: 1.2em;
    margin-bottom: 0.5em;
}
.list_note > li:last-child {
    margin-bottom: 0;
}
.list_note > li::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}
.list > li {
    position: relative;
    line-height: 1.4;
    padding-left: 0.8em;
    margin-bottom: 0.5em;
}
.list > li:last-child {
    margin-bottom: 0;
}
.list > li::before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 0.6em;
    left: 0;
    background-color: currentColor;
    border-radius: 50%;
}

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

}

/*===========================================================*/
/*mv
/*===========================================================*/

.lp_mv {
    position: relative;
    padding: 6.8% 0 11.7%;
    z-index: 2;
}
@media screen and (max-width: 767px) {
    .lp_mv {
        padding: 7% 0 12%;
    }
}
.lp_mv::before {
    content: '';
    width: 100%;
    height: 100%;
    background: url("../img/bg_left.png") no-repeat top 25% left 5% / 54.68% auto,
                url("../img/bg_right.png") no-repeat top 40px right 4% / 37.18% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
@media screen and (max-width: 767px) {
    .lp_mv::before {
        background: url("../img/bg_sp.png") no-repeat top center / 100% auto;
        z-index: 2;
    }
}
.top_left {
    width: 21.37%;
    position: absolute;
    top: 6.4%;
    left: -3.8%;
    z-index: 0;
}
@media screen and (max-width: 767px) {
    .top_left {
        width: 32.8%;
        z-index: 2;
        top: 13%;
        left: -12.5%;
    }
}
.top_right {
    width: 27.67%;
    position: absolute;
    top: 8.2%;
    right: -5%;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .top_right {
        width: 36.26%;
        z-index: 2;
        top: 2%;
        right: -12%;
    }
}
.bottom_left {
    width: 31.18%;
    position: absolute;
    bottom: 4.1%;
    left: -8%;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .bottom_left {
        width: 38.93%;
        z-index: 2;
        left: -13%;
        bottom: 10%;
    }
}
.bottom_right {
    width: 23.42%;
    position: absolute;
    bottom: 18%;
    right: 1.2%;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .bottom_right {
        width: 35.2%;
        z-index: 2;
        right: -10%;
        bottom: 18%;
    }
}
.main_ttl {
    width: 934px;
    max-width: 68.37%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.bg_wht {
    width: 934px;
    max-width: 68.37%;
    position: absolute;
    top: 8.4%;
    left: 50%;
    transform: translate(-50%, 2.2%);
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .main_ttl {
        width: 80%;
        max-width: none;
        background: none;
        z-index: 3;
    }
    .main_ttl img {
        position: relative;
        z-index: 2;
    }
    .bg_wht {
        width: 80%;
        max-width: none;
        position: absolute;
        top: 4%;
        left: 50%;
        transform: translate(-50%, 2.2%);
        z-index: 1;
    }
}

/* ====================================
sec_01
==================================== */

.sec_01 {
    padding-top: 9.32%;
    background-image: url("../img/bg_wht.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}
.sec_01 .contents {
    padding-top: 4.7%;
    padding-bottom: 7%;
}
@media screen and (max-width: 767px) {
    .sec_01 .contents {
        padding-top: 12%;
        padding-bottom: 14.49%;
    }
}
.desc {
    font-size: 3.2rem;
    font-weight: 900;
    color: #6a3906;
    text-align: center;
    margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
    .desc {
        font-size: 4vw;
        margin-bottom: 8vw;
    }
}
.desc .lg {
    font-size: 1.5em;
}
@media screen and (max-width: 767px) {
    .desc .lg {
        font-size: 2.2em;
        display: inline-block;
        margin-top: 0.3em;
    }
}
.pre {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 110px;
}
@media screen and (max-width: 767px) {
    .pre {
        display: block;
        text-align: center;
        margin-bottom: 18.66vw;
    }
}
.pre_item {
    flex: 0 1 448px;
}
@media screen and (max-width: 767px) {
    .pre_item {
        width: 91.8%;
        margin: 0 auto;
    }
    .pre_item img {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
}
.pre .and {
    flex: 0 1 54px;
    margin: 0 2.5%;
}
@media screen and (max-width: 767px) {
    .pre .and {
        display: inline-block;
        margin: -20px 0 0;
        position: relative;
        z-index: 2;
    }
    .pre_item2 {
        margin-top: -20px;
    }
}
.step {
    color: #6a3906;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
    .step {
        display: block;
        margin-bottom: 10%;
    }
}
.step_item {
    width: 29.8%;
    border: 5px dotted #6a3906;
    border-radius: 15px;
    position: relative;
    padding: 4% 2% 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (max-width: 767px) {
    .step_item {
        width: 88.52%;
        margin: 0 auto 39.34%;
        padding: 14.75% 4.9%;
    }
    .step_item.step3 {
        margin-bottom: 0;
        padding: 11.47% 4.9%;
    }
}
.step1::after,
.step2::after {
    content: '';
    display: block;
    width: 11.7%;
    height: 15.6%;
    background: url("../img/arrow_r.svg") no-repeat center center / contain;
    position: absolute;
    top: 50%;
    right: -18%;
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .step1::after,
    .step2::after {
        width: 18.88%;
        height: 9.62%;
        background: url("../img/arrow_d.svg") no-repeat center center / contain;
        top: auto;
        bottom: -26%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}
.step_ttl {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 0.4em;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    top: -0.7em;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .step_ttl {
        font-size: 7.2vw;
    }
}
.step_img {
    margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
    .step_img {
        width: 95%;
        margin: 0 auto 5.5%;
    }
}
.step_txt {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .step_txt {
        font-size: 5.86vw;
    }
}
/* @media screen and (max-width: 1060px) {
    .step_txt br.pc {
        display: none;
    }
} */

.step_head_txt {
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .step_head_txt {
        font-size: 4.533vw;
        line-height: 1.2;
    }
}
.step_head_txt .lg {
    font-size: 2.7rem;
}
@media screen and (max-width: 767px) {
    .step_head_txt .lg {
        font-size: 6.666vw;
        display: inline-block;
        margin-top: -0.15em;
    }
}
.step_head_txt .lg > span {
    font-size: 1.5em;
    line-height: 1;
}
.fwhv {
    font-weight: 900;
}
.step .and {
    width: 27px;
    margin: 20px auto 10px;
}
.step_btm_txt {
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .step_btm_txt {
        font-size: 6.666vw;
    }
}
.step_btm_txt .lg {
    font-size: 1.2em;
    display: inline-block;
    margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
    .step_btm_txt .lg {
        margin-bottom: 6%;
    }
}
.step_note_wrap {
    text-align: center;
}
.step_note {
    display: inline-block;
    margin-bottom: 100px;
    text-align: left;
}
@media screen and (max-width: 767px) {
    .step_note {
        width: 88.52%;
        margin: 0 auto 16.39%;
    }
}
.step_note > li {
    font-size: 2rem;
    color: #6a3906;
    font-weight: 500;
}
@media screen and (max-width: 767px) {
    .step_note > li {
        font-size: 1.2rem;
    }
}
.box_txt .txt {
    font-size: 2.6rem;
    font-weight: bold;
    color: #ffdc00;
    letter-spacing: 0.05em;
    background-color: #6a3906;
    padding: 0.3em 0.8em;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .box_txt {
        width: 88.52%;
        margin: 0 auto;
        background-color: #6a3906;
        padding: 13% 7%;
    }
    .box_txt .txt {
        font-size: 6.666vw;
        padding: 0 0 13%;
        border-bottom: 3px dotted #ffdc00;
    }
    .box_txt .txt.bd_none {
        border-bottom: none;
        padding-bottom: 0;
    }
    .box_txt .txt .sp_fsm {
        font-size: 5.333vw;
        display: inline-block;
    }
    .box_txt .txt .sp_sm {
        font-size: 0.64em;
        display: block;
        margin-bottom: 5px;
    }
    .box_txt .txt .sp_date {
        display: block;
        padding-bottom: 0.8em;
        position: relative;
    }
    .box_txt .txt .sp_date::after {
        content: '';
        display: block;
        width: 8.67%;
        height: 19.53%;
        background: url("../img/arrow_d.svg") no-repeat center center / contain;
        position: absolute;
        bottom: 0.1em;
        left: 50%;
        transform: translateX(-50%);
    }
}
.box_txt .txt .pc {
    display: inline-block;
}
@media screen and (max-width: 767px) {
    .box_txt .txt .pc {
        display: none;
    }
}
.box_txt .txt + .txt {
    margin-top: 10px;
}
@media screen and (max-width: 767px) {
    .box_txt .txt + .txt {
        margin-top: 0;
        padding-top: 13%;
    }
}
.box_txt .txt .sm {
    font-size: 0.7em;
}

/* ====================================
sec_02
==================================== */

.sec_02 .contents {
    padding-top: 12.6%;
    padding-bottom: 3%;
}
.onsen_ttl {
    width: 100%;
    max-width: 556px;
    text-align: center;
    border-left: 6px dotted #4f1912;
    border-right: 6px dotted #4f1912;
    padding: 15px 20px 10px;
    margin: 0 auto 60px;
}
@media screen and (max-width: 767px) {
    .onsen_ttl {
        border-left-width: 3px;
        border-right-width: 3px;
        margin-bottom: 8vw;
    }
}
.onsen_ttl img {
    width: 78.8%;
    max-width: 416px;
    display: block;
    margin: 0 auto 10px;
}
@media screen and (max-width: 767px) {
    .onsen_ttl img {
        margin-bottom: 5px;
    }
}
.onsen_ttl .sub_txt {
    font-size: 3.4rem;
    font-weight: bold;
    color: #6a3906;
}
@media screen and (max-width: 767px) {
    .onsen_ttl .sub_txt {
        font-size: 5.333vw;
    }
}
.onsen_txt {
    font-size: 2rem;
    font-weight: bold;
    color: #6a3906;
    text-align: center;
    margin-bottom: 65px;
}
@media screen and (max-width: 767px) {
    .onsen_txt {
        font-size: 4vw;
        margin-bottom: 7vw;
    }
}
.info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width: 767px) {
    .info {
        display: block;
    }
}
.info_item {
    width: 47.5%;
    background-color: #d8e4aa;
    padding: 6% 3% 3%;
    margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
    .info_item {
        width: 100%;
        padding: 7% 6% 6%;
        margin-bottom: 7vw;
    }
}
.info_link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.info_link:hover {
    opacity: 1;
}
.info_link:hover .info_img img {
    transform: scale(1.1);
}
.info_ttl {
    font-size: 3.3rem;
    font-weight: 900;
    text-align: center;
    margin: 0 -0.5em 0.2em;
}
@media screen and (max-width: 1059px) {
    .info_ttl {
        font-size: 3.113vw;
    }
}
@media screen and (max-width: 767px) {
    .info_ttl {
        font-size: 5.066vw;
    }
}
.info_item .line {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 15px;
}
.address {
    font-size: 1.7rem;
}
@media screen and (max-width: 1059px) {
    .address {
        font-size: 1.6vw;
    }
}
@media screen and (max-width: 1059px) {
    .address {
        font-size: 1.6vw;
    }
}
@media screen and (max-width: 767px) {
    .address {
        font-size: 3.2vw;
    }
}
.tel {
    font-size: 2.5rem;
    display: inline-block;
    text-align: left;
}
@media screen and (max-width: 767px) {
    .tel {
        font-size: 5.333vw;
    }
}
.address > span,
.tel > span {
    display: inline-block;
    text-align: left;
}
.info_txt {
    font-size: 1.7rem;
    line-height: 1.47;
}
@media screen and (max-width: 767px) {
    .info_txt {
        font-size: 3.2vw;
    }
}
.info_txt.txt1 {
    margin-bottom: 1em;
    text-align: center;
}
.info_txt.txt2 {
    letter-spacing: 0.05em;
    margin-bottom: 2em;
}
.ib {
    display: inline-block;
}
.info_img {
    margin-bottom: 15px;
    overflow: hidden;
}
.info_img img {
    transition: all .3s;
}
.list_icon {
    display: flex;
    margin: auto -2px -4px;
}
@media screen and (max-width: 767px) {
    .list_icon {
        /* flex-wrap: wrap; */
        justify-content: center;
        margin: 0;
    }
}
.list_icon > li {
    flex: 0 1 100px;
    font-size: 1.4rem;
    text-align: center;
    padding: 0.2em 0.8em;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 2px 4px;
}
@media screen and (max-width: 1030px) {
    .list_icon > li {
        font-size: 1.359vw;
    }
}
@media screen and (max-width: 767px) {
    .list_icon > li {
        flex: 0 1 25%;
        padding: 0.2em 0.5em;
        font-size: 3.2vw;
        margin: 0 3px 6px;
        border-radius: 2.133vw;
    }
}
.bottom_menu {
    background-color: #6a3906;
    padding: 30px 15px;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .bottom_menu {
        padding: 20px 15px;
    }
}
.bottom_menu_list_wrap {
    max-width: 1166px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media screen and (max-width: 767px) {
    .bottom_menu_list_wrap {
        display: block;
    }
}
.bottom_menu_list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.bottom_menu_list > li {
    border-right: 1px solid #fff;
    margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
    .bottom_menu_list > li:nth-child(2) {
        border-right: none;
    }
}
.bottom_menu_list.list2 > li:last-child {
    border-right: none;
}
@media screen and (max-width: 1190px) {
    .bottom_menu_list.list1 > li:last-child {
        border-right: none;
    }
}
.bottom_menu_list > li > a {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.07em;
    color: #fff;
    padding: 0.1em 0.5em;
}
@media screen and (max-width: 767px) {
    .bottom_menu_list > li > a {
        font-size: 3.2vw;
    }
}