@charset "utf-8";

.flexible-mv {
    width: 100%;
    margin-bottom: 1rem;
}

/* 見出しデザイン */
h3.flexible-title {
    font-size: 1.5rem;
}
h4.flexible-title {
    font-size: 1.3rem;
}
h5.flexible-title {
    font-size: 1.2rem;
}
.flexible-title {
    margin-bottom: 1em;
}

.flexible-title.border-solid {
    border-bottom: 1px solid #ad661e;
}

.flexible-title.border-dot {
    border-bottom: 1px dotted #ad661e;
}

.flexible-title.border-dashed {
    border-bottom: 1px dashed #ad661e;
}

.flexible-title.border-double {
    border-bottom: 3px double #ad661e;
}

.flexible-title.border-under-two {
    border-bottom: 2px solid #ebdedb;
    position: relative;
}

.flexible-title.border-under-two::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30%;
    height: 2px;
    background: #ad661e;
}

.flexible-title.border-under-strip {
    position: relative;
}

.flexible-title.border-under-strip::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background-image: repeating-linear-gradient(-45deg, #ad661e, #ad661e 1px, #ebdedb 2px, #ebdedb 5px);
    background-size: 7px 7px;
}

.flexible-title.border-under-fade {
    text-align: center;
    position: relative;
}

.flexible-title.border-under-fade::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    background-image: repeating-linear-gradient(to right, transparent, #ad661e 25%, #ad661e 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

.flexible-title.border-left-single {
    border-left: 3px solid #ad661e;
    padding-left: 1%;
}

.flexible-title.border-left-double {
    border-left: 3px double #ad661e;
    padding-left: 1%;
}

.flexible-title.border-kakomi {
    border: 2px solid #ad661e;
    padding: 5px 1%;
}

.flexible-title.border-kakomi-dot {
    border: 2px dotted #ad661e;
    padding: 5px 1%;
}

.flexible-title.border-kakomi-hasen {
    border: 2px dashed #ad661e;
    padding: 5px 1%;
}

.flexible-title.border-kakomi-double {
    border: 3px double #ad661e;
    padding: 5px 1%;
}

.flexible-title.tb-border {
    border-top: 1px solid #ad661e;
    border-bottom: 1px solid #ad661e;
    padding: 5px 1%;
}

.flexible-title.tb-double {
    border-top: 3px double #ad661e;
    border-bottom: 3px double #ad661e;
    padding: 5px 1%;
}

.flexible-title.bg-fill {
    background: #ad661e;
    color: #fff;
    border-radius: 5px;
    padding: 5px 1%;
}

.flexible-title.bg-left {
    background: #f1eade;
    border-left: 3px solid #ad661e;
    padding: 5px 1%;
}

.flexible-title.bg-top {
    background: #f1eade;
    border-top: 2px solid #ad661e;
    padding: 5px 1%;
}

.flexible-title.bg-under {
    background: #f1eade;
    border-bottom: 2px solid #ad661e;
    padding: 5px 1%;
}

.flexible-title.ribon1 {
    text-align: center;
    color: #fff;
    background: #ff0000;
    position: relative;
    padding: 1% 0;
    margin-bottom: 20px;
    width: 100%;
}

.flexible-title.ribon1::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 26.5px 0 26.5px 19px;
    border-color: transparent transparent transparent #ffffff;
}

.flexible-title.ribon1::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 26.5px 19px 26.5px 0;
    border-color: transparent #ffffff transparent transparent;
}

.flexible-title.ribon2 {
    background: #633a2d;
    color: #fff;
    padding: 5px 1%;
    position: relative;
}

.flexible-title.ribon2::before {
    position: absolute;
    content: "";
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #ad661e transparent transparent;
}

.flexible-title.ribon2::after {
    position: absolute;
    content: "";
    bottom: -10px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #ad661e transparent transparent transparent;
}

/* 文章入力 */
.sentence-box {
    margin-bottom: 1rem;
}

/* 画像配置 */
.flexible-img-box {
    margin-bottom: 1rem;
}
.flexible-img-box img {
    width: 100%;
}

/* 箇条書き */
.flexible-list {
    margin-bottom: 1rem;
}
.flexible-list h3 {
    color: #f37900;
    font-size: 1.5rem;
}
.flexible-list ul {
    padding-left: 3%;
}
.flexible-list ul li {
    list-style: disc;
    margin-left: 1rem;
}
.flexible-list ol {
    counter-reset: number;
}
.flexible-list ol li {
    position: relative;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.5em 5%;
    list-style: none;
    box-shadow: 0px 2px 4px #80808036;
    margin-bottom: 0.5em;
    background: #fff;
}
.flexible-list ol li::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #f48c2a;
    color: white;
    font-weight: bold;
    width: 35px;
    height: 100%;
    line-height: 34px;
    text-align: center;
}

/* ボックス */
.flexible-box {
    margin-bottom: 20px;
    padding: 1em 3%;
}

.flexible-box p:not(:last-child) {
    margin-bottom: 1em;
}

.flexible-box.box-solid {
    border: 3px solid #f5a04b;
}

.flexible-box.box-round {
    border: 3px solid #f5a04b;
    color: #f5a04b;
    border-radius: 5px;
    font-weight: bold;
}

.flexible-box.box-fill {
    background: #ebe3e1;
}

.flexible-box.box-double {
    border: 3px double #f5a04b;
}

.flexible-box.box-dashed {
    border: 2px dashed #f5a04b;
    background: #fff9f4;
}

.flexible-box.box-fusen {
    border-left: 5px solid #f5a04b;
    background: #fff9f4;
}

.flexible-box.box-fukidashi {
    background: #ffecdd;
    color: #f5a04b;
    border-radius: 5px;
    font-weight: bold;
    position: relative;
}

.flexible-box.box-fukidashi::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ffecdd transparent transparent transparent;
}

/* タイトル付きボックス */
.flexible-box-title {
    padding: 1em 3%;
    margin-bottom: 20px;
    position: relative;
}
.flexible-box-title p:not(:last-child) {
    margin-bottom: 1rem;
}
.flexible-box-title.box-title1 {
    border: 3px solid #f37900;
    border-radius: 5px;
    margin-top: 10px;
}
.flexible-box-title.box-title1 .box-title_title {
    color: #f37900;
    font-weight: bold;
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
    background: #FFF;
}

.flexible-box-title.box-title2 {
    border: 3px solid #f37900;
    margin-top: 40px;
}

.flexible-box-title.box-title2 .box-title_title {
    position: absolute;
    display: inline-block;
    top: -31px;
    left: -3px;
    padding: 4px 9px 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f37900;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.flexible-box-title.box-title3 {
    border: 3px solid #f37900;
}

.flexible-box-title.box-title3 p:first-of-type {
    margin-top: 30px;
}

.flexible-box-title.box-title3 .box-title_title {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    padding: 4px 9px 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f37900;
    color: #ffffff;
    font-weight: bold;
}

.flexible-box-title.box-title4 {
    background: #f5edea;
}

.flexible-box-title.box-title4 p:first-of-type {
    margin-top: 30px;
}

.flexible-box-title.box-title4 .box-title_title {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    padding: 4px 9px 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #4b291f;
    color: #ffffff;
    font-weight: bold;
}

/* 注意事項 */
.flexible-attention {
    background: #faebeb;
    border: 3px solid #ff0000;
    padding: 1em 3%;
    margin-bottom: 20px;
}

.flexible-attention_title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ff0000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flexible-attention_title span {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background: #ff0000;
    color: #fff;
    margin-right: 5px;
}

.flexible-attention ul {
    padding-left: 2rem;
}

.flexible-attention ul li {
    list-style: disc;
}

/* 画像＋文章（横並び） */
.flexible-img-sentence {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.flexible-img-sentence._reverse {
    flex-direction: row-reverse;
}

.flexible-img-sentence_img {
    flex: 0 0 38%;
}

.flexible-img-sentence_img img {
    width: 100%;
}

.flexible-img-sentence_sentence {
    flex: 0 0 60%;
}

.flexible-img-sentence_sentence p:not(:last-child) {
    margin-bottom: 1rem;
}

/* チェックリスト */
.flexible-check-list {
    background: #fffde6 none repeat scroll 0 0;
    border: 1px solid #ede79d;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 20px;
}
.flexible-check-list .flexible-check-list_img {
    flex: 0 0 300px;
    margin-left: 15px;
}
.flexible-check-list .flexible-check-list_img img {
    width: 100%;
}
.flexible-check-list ul {
    flex: 0 1 100%;
}
.flexible-check-list ul li {
    border-bottom: 1px dotted #111;
    font-size: 15px;
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 5px;
    list-style: none;
}
.flexible-check-list ul li::before {
    content: "\f14a";
    font-family: "font awesome 5 free";
    color: #f37900;
    margin-right: 5px;
}

/* ボタン */
.flexible-btn {
    margin-bottom: 20px;
    text-align: center;
}

.flexible-btn a {
    display: inline-block;
    width: 600px;
    max-width: 100%;
    padding: 1rem 3%;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.flexible-btn a:hover {
    opacity: 0.7;
    text-decoration: none;
    color: #fff;
}

.flexible-btn.red a{
    background: red;
}

.flexible-btn.blue a {
    background: blue;
}

.flexible-btn.light-blue a {
    background: lightblue;
    color: #ad661e;
}

.flexible-btn.green a {
    background: green;
}

.flexible-btn.yellow a {
    background: yellow;
    color: #ad661e;
}

.flexible-btn.pink a {
    background: pink;
    color: #ad661e;
}

.flexible-btn.deep-pink a {
    background: deeppink;
}

.flexible-btn.orange a {
    background: orange;
}

.flexible-btn.white a {
    background: #fff;
    color: #ad661e;
}

.flexible-btn.grad-red a {
    background: -moz-linear-gradient(bottom, red, rgb(253, 135, 135));
    background: -webkit-linear-gradient(bottom, red, rgb(253, 135, 135));
    background: linear-gradient(to top, red, rgb(253, 135, 135));
}

.flexible-btn.grad-blue a {
    background: -moz-linear-gradient(bottom, blue, rgb(152, 152, 248));
    background: -webkit-linear-gradient(bottom, blue, rgb(152, 152, 248));
    background: linear-gradient(to top, blue, rgb(152, 152, 248));
}

.flexible-btn.grad-light-blue a {
    background: -moz-linear-gradient(bottom, lightblue, #fff);
    background: -webkit-linear-gradient(bottom, lightblue, #fff);
    background: linear-gradient(to top, lightblue, #fff);
    color: #ad661e;
}

.flexible-btn.grad-green a {
    background: -moz-linear-gradient(bottom, green, rgb(93, 189, 93));
    background: -webkit-linear-gradient(bottom, green, rgb(93, 189, 93));
    background: linear-gradient(to top, green, rgb(93, 189, 93));
}

.flexible-btn.grad-yellow a {
    background: -moz-linear-gradient(bottom, yellow, rgb(248, 248, 188));
    background: -webkit-linear-gradient(bottom, yellow, rgb(248, 248, 188));
    background: linear-gradient(to top, yellow, rgb(248, 248, 188));
    color: #ad661e;
}

.flexible-btn.grad-pink a {
    background: -moz-linear-gradient(bottom, pink, rgb(248, 228, 231));
    background: -webkit-linear-gradient(bottom, pink, rgb(248, 228, 231));
    background: linear-gradient(to top, pink, rgb(248, 228, 231));
    color: #ad661e;
}

.flexible-btn.grad-deep-pink a {
    background: -moz-linear-gradient(bottom, deeppink, rgb(255, 156, 209));
    background: -webkit-linear-gradient(bottom, deeppink, rgb(255, 156, 209));
    background: linear-gradient(to top, deeppink, rgb(255, 156, 209));

}

.flexible-btn.grad-orange a {
    background: -moz-linear-gradient(bottom, rgb(255, 123, 0), orange);
    background: -webkit-linear-gradient(bottom, rgb(255, 123, 0), orange);
    background: linear-gradient(to top, rgb(255, 123, 0), orange);
}

.flexible-btn.grad-gold a {
    background: -moz-linear-gradient(bottom, lightblue, #fff);
    background: -webkit-linear-gradient(bottom, lightblue, #fff);
    background: linear-gradient(to top, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    color: #ad661e;
}

.flexible-btn.grad-white a {
    background: -moz-linear-gradient(bottom, rgb(230, 230, 230), #fff);
    background: -webkit-linear-gradient(bottom, rgb(230, 230, 230), #fff);
    background: linear-gradient(to top, rgb(230, 230, 230), #fff);
    color: #ad661e;
}

/* youtube */
.movie-box {
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
    background: #f9f9f9;
    padding: 1em 1.2em;
    font-size: .9em;
    color: var(--color6);
    margin: 1em auto 2em;
    border-radius: 3px;
    max-width: 560px;
    font-weight: 400;
}
.movie-box iframe {
    max-width: 100%;
}
.movie-title {
    padding-left: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 選ばれる理由 */
.flexible-reason {
    margin-bottom: 20px;
}

.flexible-reason_box {
    display: flex;
    justify-content: space-between;
}

.flexible-reason_box:not(:last-child) {
    margin-bottom: 20px;
}

.flexible-reason_img {
    flex: 0 0 38%;
}

.flexible-reason_img img {
    width: 100%;
}

.flexible-reason_text {
    flex: 0 0 60%;
}

.flexible-reason_heading {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.flexible-reason_title {
    flex: 0 1 100%;
    margin-left: 10px;
    font-size: 1.5em!important;
    font-weight: bold;
    color: #f37900;
}

.flexible-reason_icon {
    text-align: center;
}

.flexible-reason_en {
    display: block;
    font-size: 12px;
    color: #f37900;
}

.flexible-reason_num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 2em;
    background: #f37900;
    color: #fff;
    border-radius: 50%;
}

/* step */
.flexible-step {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flexible-step::after {
    content: "";
    width: 32%;
}

.flexible-step_card {
    flex: 0 0 32%;
    position: relative;
    margin-bottom: 20px;
}

.flexible-step_img {
    width: 100%;
    padding: 32%;
    box-sizing: border-box;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.flexible-step_num {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f37900;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    line-height: 1;
    font-size: 1.5rem;
}

.flexible-step_sentence {}

/* 予約・お問い合わせ */
.cv-container {
    border: 10px solid rgb(233, 233, 233);
    margin-bottom: 1rem;
}

.cv-inner {
    padding: 30px 5%;
}

.cv-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2em;
}

.cv-btn__wrap {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
}

.cv-btn {
    margin-bottom: 20px;
}

.cv-btn a {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    display: block;
    padding: 2rem 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 640px;
    background: #000;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.cv-btn a:hover {
    opacity: 0.7;
    color: #fff;
}

.cv-btn a::after {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

.cv-btn._tel a {
    background: #448f22;
    position: relative;
}

.cv-btn._tel a::before {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    content: "\f2a0";
    font-weight: 900;
    font-size: 2em;
}

.cv-tel__msg01 {}

.cv-tel__msg02 {
    color: #FFEB3B;
}

.cv-btn._mail a {
    background: #ad661e;
    position: relative;
}

.cv-btn._mail a::before {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    content: "\f0e0";
    font-weight: 900;
    font-size: 2em;
}

.cv-btn._line a {
    background: #03bb01;
    position: relative;
}

.cv-btn._line a::before {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-family: "Font Awesome 5 Brands";
    content: "\f3c0";
    font-weight: 400;
    font-size: 2em;
}

.cv-line__msg01 {}

.cv-line__msg02 {
    color: #FFEB3B;
}

.line-info__title {
    text-align: center;
    color: #fff;
    background: #ff0000;
    position: relative;
    font-size: 1.5em;
    padding: 2%;
    margin-bottom: 20px;
}

.line-info__title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 36px 0 36px 25px;
    border-color: transparent transparent transparent #ffffff;
}

.line-info__title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 36px 25px 36px 0;
    border-color: transparent #ffffff transparent transparent;
}

.line-info__container {
    display: flex;
    justify-content: flex-end;
}

.line-info__reward {
    flex: 0 1 100%;
}

.line-info__reward dl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.line-info__reward dt {
    background: #f37900;
    color: #fff;
    border-radius: 5px;
    padding: 5px 3%;
    flex: 0 0 60px;
    text-align: center;
}

.line-info__reward dd {
    margin-left: 10px;
}

.line-info__qr {
    flex: 0 0 180px;
}

.shop-info {
    display: flex;
    justify-content: space-between;
}

.shop-table {
    flex: 0 0 60%;
}

.shop-table table {
    width: 100%;
    border-collapse: collapse;
}

.shop-table tr {}

.shop-table th {
    background: #ad661e;
    color: #fff;
    padding: 5px 0;
    border: 1px solid #f1eade;
    width: auto;
    text-align: center;
}

.shop-table td {
    text-align: center;
    border: 1px solid #ece0cb;
    padding: 5px 0;
    width: auto;
}

.shop-time {
    flex: 0 0 35%;
}

.shop-time dl {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-top: 0;
}

.shop-time dt {
    background: #f37900;
    color: #fff;
    border-radius: 5px;
    padding: 5px 3%;
}

.shop-time dd {
    margin-left: 5px;
}

/* 自由作成 */
.flexible-free-box p {
    margin-bottom: 1em;
}

/*== 画面の横幅が480pxまで  ======*/
@media screen and (max-width: 480px) {
    .flexible-img-sentence {
        flex-direction: column;
    }
    .flexible-img-sentence_img {
        margin-bottom: 10px;
    }
    .flexible-check-list {
        flex-direction: column;
    }
    .flexible-check-list .flexible-check-list_img {
        margin-left: 0;
        margin-bottom: 10px;
        flex: auto;
    }
    .flexible-reason_box {
        flex-direction: column;
    }
    .flexible-reason_img {
        margin-bottom: 10px;
    }
    .cv-title {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .cv-btn__wrap {
        margin-bottom: 20px;
        margin-top: 0!important;
    }
    .cv-btn {
        margin-bottom: 10px;
    }

    .cv-btn a {
        font-size: 0.8rem;
        padding: 1rem 0;
    }

    .cv-btn a::after {
        right: 12px;
        width: 6px;
        height: 6px;
    }

    .cv-btn._tel a::before {
        left: 8px;
        font-size: 1.5em;
    }

    .cv-btn._mail a::before {
        left: 8px;
        font-size: 1.5em;
    }

    .line-info__title {
        font-size: 1em;
    }

    .line-info__container {
        flex-direction: column;
        margin-top: 0!important;
    }

    .line-info__reward dl {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .line-info__qr {
        text-align: center;
    }

    .shop-info {
        flex-direction: column;
    }

    .shop-table {
        margin-bottom: 10px;
    }
    .flexible-step {
        flex-direction: column;
    }
    .flexible-list ol li {
        padding: 0.5em 0.5em 0.5em 13%;
    }
}