@charset "UTF-8";
/*予約からの流れ 753/flow/index.html*/
/*step1*/
.flow #top.row900 {
    width: 100%;
}
.flow #top {
    background-color: white;
    padding-bottom: 1em;
    margin-bottom: 2em;
}
.flow #top ul {
    width: 100%;
    overflow: hidden;
}
.flow #top ul li {
    background-color: #c1c1c1;
    width: 25%;
    display: inline-block;
}
.flow #top ul li.current {
    background-color: white;
}
.flow #top ul li a {
    border-bottom: solid 1px;
}
.flow #top ul li+li {
    border-left: solid 1px white;
}
.flow #top ul li span {
 /*   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.flow .inner {
    width: 89%;
    margin: 0 auto;
    text-align: left;
}
.flow .before-inner-fl, .flow .before-inner-fr {
    padding: 2em 1.4em;
}
.flow .before-inner-fr {
    border-radius: 0 0 6px 6px;
}
.flow .inner .box_beige_r.stripe {
    padding: .3em 1em;
    border-radius: 6px;
    margin-bottom: 1em;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.flow .inner p ,.flow .inner ol {
    /* font-size: .9em; */
}
.flow h2 {
    font-family: unset;
    text-align: left;
    color: #ed6c00;
    position: relative;
    margin: 0 0 .4em;
    font-size: 1.2em;
}
.flow #inquiry h2 {    
color:  unset;
text-align:  center;
}
.flow .ttl-icon {
    margin-left: 3.5em;
    margin-top: 2em;
    margin-bottom: 1em;
}
.flow .ttl-icon span {
    font-size: unset;
}
.flow .ttl-icon::before {
    content: "";
    background-image: url(/img/753-flow-step1-icon-pc.png);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -3em;
    top: .5em;
}
.flow.sub_page h3 {
    text-align: left;
    margin: 1em 0 .5em;
    font-size: 1em;
    font-weight: bold;
}
.flow .inner #before {
    border-radius: 8px;
    /* text-align: left; */
    line-height: 1.5em;
    /* font-size: .9em; */
    padding: 0;
    margin: 2em auto;
    width: 100%;
}
.flow .inner .box_check {
    padding: 0 0 0 2em;
}
.flow .inner .box_check li {
    margin: 0;
}
.boder-btm {
    border-bottom: 1px solid;
    padding-bottom: .1em;
}

.flow .inner .boder-btm {
    font-weight: bold;
    font-size: 1.02em;
    width: fit-content;
    margin: 1em 0 .5em;
}
.disc::before {
    content: "●";
    margin-right: .2em;
}
.flow .inner p strong {
    display: block;
    font-size: 1.1em;
    font-weight: normal;
    color: #ed6c00;
    letter-spacing: .1em;
}
.flow.sub_page h3::before {
    content: "▼";
}
.flow .inner .before-inner-fr ol li {
    display: inline-block;
    border: solid 1px #999;
    margin: .1em;
    background-color: white;
    padding: 0 .6em;
}

.flow #top .row900 {
    text-align: left;
    margin-bottom: 2rem;
}
/*step2*/
.flow.step2 .ttl-icon::before {
    background-image: url(/img/753-flow-step1-icon-camera.png);
    width: 60px;
    height: 60px;
    top: 0;
}
.flow h2 span {
    font-size: 1em;
}
.flow .before-inner-fl .img_res {
    margin-bottom: 1em;
}
.flow .inner .before-inner-fr.box_beige_r {
    width: 100%;
}
/*.flow.step2 .inner .before-inner-fr.box_beige_r {
    background-color: #fceee1;
}*/
.flow.step2 .before-inner-fl, .flow.step2 .before-inner-fr {
    padding: 0em 0;
}
.flow.step2 .before-inner-fr {
    padding: 1.5em;
    border-radius: 8px;
}
.flow.step2 .before-inner-fr img {
    margin: 1em auto;;
}
.flow.step3 .before-inner-fl ,.flow.step4 .before-inner-fl {
    padding: 0;
}

.flow.step3 .before-inner-fr, .flow.step4 .before-inner-fr {
    padding: 0;
}

.flow.step3 .before-inner-fr .large {
    /* color: #ed6c00; */
    margin-bottom: .6em;
    font-weight: bold;
}

.flow.step3 .before-inner-fr .box_beige_r {
    margin-top: 1em;
    width: 100%;
    background: #fceee1;
    margin-bottom: 1em;
}

.flow.step3 .inner p strong {
    font-weight: bold;
    font-size: 1em;
    color: #3c3c3c;
    line-height: 2.5em;
}

.flow.step3 .before-inner-fr .box_beige_r img {
    margin: 1em auto;
}
.flow.step3 .btn_dotted {
    margin: 3em auto 1em;
}
/*step4*/
.flow.step4 .inner > p:first-of-type {
    margin-bottom: 1em;
}
.flow.step4 .btn_dotted {
    font-size: 1em;
}
.flow.step4 .ttl-icon::before {
    background-image: url(/img/753-flow-step1-icon-album.png);
    width: 60px;
    height: 60px;
    top: 0;
}



@media screen and (max-width: 360px) {
/*予約からの流れ 753/flow/index.html*/
}
@media screen and (min-width: 1024px) {
/*予約からの流れ 753/flow/index.html*/
.flow #top .inner .box_beige_r.stripe {
    margin-left: 0;
}
.flow.sub_page .inner > h2 {
    margin-top: 3em;
}

.flow.sub_page .inner > h2::before {
    top: 0;
}
.flow .before-inner-fl, .flow .before-inner-fr{
    float: left;
    width: 50%;
}

.flow .before-inner-fr {
    border-radius: 0 6px 6px 0;
}

.flow.step3 .before-inner-fl, .flow .inner .before-inner-fr.box_beige_r {
    width: 44%;
}
.flow .inner p ,.flow .inner ol {
    font-size: .9em;
}
p.small.row900 {
    font-size: .9em;
    max-width: 100%;
}
/*step2*/
.flow.step2 .inner .before-inner-fr.box_beige_r {
    margin: 3em 0 2em;
    padding: 1em 1em 0;
    width: 36%;
    float: right;
}

.flow.step2 .before-inner-fl .img_res {
    width: 499px;
}

.flow.step2 .inner .before-inner-fr.box_beige_r h2 {
    font-size: 1em;
    line-height: 1em;
}
/*step3*/
.before-inner-fl {
    width: 40%;
}

.flow.step3 .before-inner-fr {
    width: 52%;
    float: right;
}
.flow.step3 .before-inner-fr .large {
    margin-bottom: 1em;
}
.flow.step3 .before-inner-fr .box_beige_r img {
    width: 55%;
    margin-top: 0;
    float: left;

}
.flow.step3 .before-inner-fr .box_beige_r p:last-child {
    float: right;
    width: 43%;
    font-size: .9em;
}
.flow.step3 .inner p strong {
    margin-bottom: .5em;
}
/*step4*/
.flow.step4 .inner > p:first-of-type {
    margin: 2em auto 1em;
}
.flow.step4 .before-inner-fl {
    width: 31%;
}
.flow.step4 .before-inner-fr {
    width: 65%;
}
}












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

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

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

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

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

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

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

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

}