@charset "utf-8";
/********************************/
/*レイアウト用ＣＳＳ（基本設定）   */
/********************************/

/*背景、文字色、フォントなど   */
body, html{
    font-family: 'Yu Gothic','Hiragino Kaku Gothic ProN', sans-serif;
    height: 100%;
    margin: 0 auto;
    background-color:#f5f1e5;
    color:#000;
}

a{
    text-decoration:none;
    color: #000;
    cursor:pointer;
}
a:hover{
    text-decoration:none;
    color:#000;
}

/**********************************/
/*ログインＩＤ・Ｐａｓｓ入力フォーム */
/**********************************/

.input-class{
    border:1px solid #000;
}

/**********************************/
/*ログインＰａｓｓ確認目玉           */
/**********************************/
/*テキストボックス・アイコンの位置調整*/
.formItem {
    text-align: center;
    border:1px solid #000;
}
/*パスワードの非表示*/
.mdi-eye:before {
    background: url(../img/002_eye-slash.svg);
    background-size: contain;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top:3px;
    right: 5px;
}
/*パスワードの表示*/
.mdi-eye-off:before {
    background: url(../img/002_eye.svg);
    background-size: contain;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top:3px;
    right: 5px;
}
.field-icon {
    position: absolute;
}



/**********************************/
/*トップバナー 					   */
/**********************************/

/*Flexbox-top（両端にする）*/
.flexbox-top{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content:space-around;
    -webkit-justify-content: space-around;
    background-color:#fff;
    border-bottom:1px solid #000;
}

/*バナー部分   */
.top01{
    height:60px;
    width:100vw;
    padding:10px 0 0 2rem;
}
.top02{ /*アイコンを並べる   */
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;
}

/**********************************/
/*リンクずれ解消				   */
/**********************************/

#cazas,
#touch,
#fami,
#kagi,
#doa,
#style,
#select,
#selected,
#gaiheki,
#hisashi,
#gardinal,
#tile,
#yane,
#taiyo,
#mado_up,
#mado_op,
#lowe01,
#lowe02,
#lowe03,
#lowe04,
#mado_safe,
#tategu_s,
#tategu_g,
#doa01,
#doa02,
#doa03,
#doa04,
#doa05,
#closet_t,
#closet_k,
#closet01,
#closet02,
#closet03,
#closet04,
#counter,
#tatami,
#yuka_kabe,
#tenzyo,
#setubi,
#sentaku,
#setubi01,
#setubi02,
#setubi03,
#setubi04,
#setubi05,
#denki01,
#denki02,
#denki03,
#denki04{
    padding-top: 147px;
    margin-top: -147px;
}

/**********************************/
/*トップ画像   					   */
/**********************************/

/*Flexbox-top（両端にする）*/
.flexbox-top-img{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    justify-content:space-between;
    -webkit-justify-content: center;
}

/*Flexbox-top-btn（並べる）*/
.flexbox-top-btn{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;
}

/*Flexbox-top-select（並べる）*/
.flexbox-top-select{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: flex-end;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    background-color:#fff;
    border-radius:5px;
    padding:0.5rem 1rem;
    margin:1rem;
}

/*index左半分（白）   */
.index-left{
    background-color:#fff;
    height:60vh;
    width:100vw;
    padding:5rem 1rem;
    text-align:center;
}
/*index左半分（白・文字入れ）   */
.index-left-text{
    background-color:#fff;
    height:60vh;
    width:100vw;
    padding:1rem 1rem;
    text-align:center;
}
/*index右半分（画像）   */
.index-right{
    width:100vw;
    height:20vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/001_top_right.jpg);
}

/**********************************/
/*検索時   					   */
/**********************************/
/*Flexbox-select（中央にする）*/
.flexbox-select{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content:center;
    -webkit-justify-content: center;
    height:80vh;
    width:100vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/001_top_right.jpg);
}
/*Flexbox-select2（高さ制限なし・中央にする）*/
.flexbox-select2{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content:center;
    -webkit-justify-content: center;
    width:100vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/001_top_right.jpg);
}

/*flexbox-select-white（白地高さ80vh・検索用）*/
.flexbox-select-white{
    width:80vw;
    height:80vh;
    background-color:#fff;
    text-align:center;
}

/*flexbox-select-white2（白地高さ制限なし・検索用）*/
.flexbox-select-white2{
    width:80vw;
    background-color:#fff;
    text-align:center;
}

@media screen and (max-width: 770px) { /*【ＰＣ用】ウィンドウ幅が最大770pxの場合に適用。ipad向け*/
    .flexbox-select{
        height:70vh;
        width:100vw;
    }

    .flexbox-select-white {
        width:90vw;
        height:70vh;
    }

    .flexbox-select-white2 {
        width:90vw;
    }
}

/**********************************/
/*セレクト中   					   */
/**********************************/

/*select-top-flexbox（並べる）*/
.select-top-flexbox{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    border-bottom:1px solid #000;
    background-color:#fff;
    padding:0.5rem 0rem 0.2rem 0rem;
}

/*select-top-flexbox2（並べる）*/
.select-top-flexbox2{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    background-color:#f5f1e5;
    padding:0.5rem 0rem 0.2rem 0rem;
}

/* セレクト画面上部固定 */
.select-top-fixed{
    position: fixed;
    position: -webkit-fixed;
    top: 0;
    left:0;
    width:100%;
    z-index: 999;
}

/* セレクト全体表示 */
.select-all{
    max-width:770px;
    margin:0 auto;
    width:100%;
}

/* セレクト通常表示 */
.select-box{
    padding:0rem 1rem;
    width:100%;
}

/* セレクト通常表示（中央表示） */
.select-box-c{
    padding:0rem 1rem;
    width:100%;
    text-align:center;
}

/* セレクトflex（背景色なし） */
.select-flex{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    width:100%;
}

/* セレクトflex　計算用（背景色なし・右寄せ） */
.select-flex-vol{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    width:100%;
}

/* セレクトflex（均等表示・背景色なし） */
.select-flex-img{
    display:flex;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    width:100%;
    flex-wrap: wrap;
    -webkit-flex-wrap:wrap;
}

/* セレクトflex（背景色：白） */
.select-flex-w{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    background-color:#fff;
    width:95%;
    margin:1rem;
}

/* セレクトflex（背景色：緑→背景色へ変更。） */
.select-flex-g{
    background-color:#f5f1e5;
    width:95%;
    margin:1rem;
    border-radius:10px;
    padding:1rem;
    font-size:1.5rem;
    color:#000;
    text-align:center;
}

/* セレクトflex内部（60％・左） */
.select-flex-cl60{
    width:60%;
    padding:1rem 1rem 1rem 0.5rem;
    margin:0 auto;
}

/* セレクトflex内部（40％・右） */
.select-flex-cr40{
    width:40%;
    padding:1rem 0.5rem 1rem 1rem;
    margin:0 auto;
    text-align:center;
}

/* セレクトflex内部（50％・右） */
.select-flex-cr50{
    width:50%;
    padding:1rem 0.5rem 1rem 1rem;
    margin:0 auto;
}

/* セレクトflex内部（50％・左） */
.select-flex-cl50{
    width:50%;
    padding:1rem 1rem 1rem 0.5rem;
    margin:0 auto;
    text-align:left;
}
/* セレクトflex内部（50％・左・選択用） */
.select-flex-cl50-2{
    width:50%;
    margin:auto;
    text-align:center;
}

/* セレクトflex内部（40％・選択用） */
.select-flex-c40{
    width:40%;
    margin:auto;
}

/* セレクトflex内部（30％・選択用） */
.select-flex-cl30{
    width:30%;
    margin:0 auto;
}
/* セレクトflex内部（80％・選択用） */
.select-flex-cl80{
    width:75%;
    margin:auto;
    text-align:center;
}
/* セレクトflex内部（20％・選択用） */
.select-flex-cl20{
    width:20%;
    margin:auto;
    text-align:center;
}

/* セレクトflex内部（90％・選択用） */
.select-flex-cl90{
    width:97%;
    margin:auto;
    text-align:center;
}

/* セレクトflex内部（90％・コメント用） */
.select-flex-cl90-com{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;
    flex-wrap: nowrap;
    -webkit-flex-wrap:nowrap;
    width:97%;
    margin:0.5rem;
    padding:0.5rem;
    text-align:left;
    font-size:0.9rem;
    border:1px solid #000;
    background-color:#f5f1e5;
    border-radius:5px;
}
/* セレクトflex内部（15％・コメント用内部） */
.select-flex-cl15{
    width:15%;
    margin:auto;
    text-align:center;
}
/* セレクトflex内部（85％・コメント用内部右） */
.select-flex-cl85{
    width:80%;
    margin:auto;
    text-align:left;
}

/* セレクト利用規約文章（白枠） */
.select-text-w{
    width:100%;
    background-color:#fff;
    padding:1rem;
    margin:0;
    border:1px solid #000;
}

/* セレクトimg（白枠イメージ） */
.select-img-w{
    width:100%;
    max-width:200px;
    background-color:#fff;
    padding:0.5rem;
    margin:0 auto 0.5rem auto;
}
/* セレクトimg（白枠イメージ・max300px） */
.select-img-w2{
    width:100%;
    max-width:300px;
    background-color:#fff;
    padding:0.5rem;
    margin:0 auto 0.5rem auto;
}
/* セレクトflex（白枠イメージ・max350px・丸枠） */
.select-flex-w3{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    width:100%;
    max-width:350px;
    background-color:#fff;
    padding:0.5rem;
    margin:0 auto 0.5rem auto;
    border-radius:10px;
    border:1px solid #000;
}
.select-flex-w3:hover{
    background-color:#ece9e0;
    border:1px solid #000;
}
/* セレクトimg（白枠イメージ・max350px・丸枠） */
.select-img-w4{
    width:100%;
    max-width:350px;
    background-color:#fff;
    padding:0.5rem;
    margin:0 auto 0.5rem auto;
    border-radius:10px;
    border:1px solid #000;
}
.select-img-w4:hover{
    background-color:#ece9e0;
    border:1px solid #000;
}
/* セレクトimg（白枠イメージ・max350px・丸枠） */
.select-img-w4-2{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    flex-wrap:nowrap;
    -webkit-flex-wrap:nowrap;
    align-items:center;
    -webkit-align-items: center;
    justify-content:space-around;
    -webkit-justify-content: space-around;
    width:100%;
    max-width:770px;
    background-color:#fff;
    padding:0.5rem;
    margin:0 auto 0.5rem auto;
    border-radius:10px;
    border:1px solid #000;
}
.select-img-w4-2:hover{
    background-color:#ece9e0;
    border:1px solid #000;
}

/* セレクト（白枠イメージ・max210px・丸枠） */
.select-flex-w4{
    width:100%;
    max-width:210px;
    background-color:#fff;
    padding:0.5rem;
    margin:1rem;
    border-radius:10px;
}
.select-flex-w4:hover{
    background-color:#ece9e0;
}

/* セレクト（白枠イメージ・maxなし・丸枠） */
.select-img-w5{
    background-color:#fff;
    padding:0.5rem;
    margin:1rem;
    border-radius:10px;
}

/* セレクトimg */
.select-img{
    width:100%;
    margin:0 auto;
}

/* セレクトimg33% */
.select-img-33{
    width:33%;
    height:100%;
    margin:0 auto;
}

/* セレクトimg20% */
.select-img-20{
    width:20%;
    height:100%;
    margin:0 auto;
}

/* セレクトtext（白枠イメージ下部のテキスト） */
.select-text{
    width:100%;
    padding:0.5rem;
    margin:0 auto 0.5rem auto;
}

/**********************************/
/*スタイル   					   */
/**********************************/

/* スタイル全体表示 */
.style-all{
    max-width:770px;
    margin:0 auto;
    width:100%;
    background-color:#fff;
}

/* スタイルtop（アンダーバー） */
.style-top01{
    margin:1rem 0rem;
    border-bottom:10px solid #8bca26;
    width:100%;
}
.style-top02{
    margin:1rem 0rem;
    border-bottom:10px solid #ff5050;
    width:100%;
}
.style-top03{
    margin:1rem 0rem;
    border-bottom:10px solid #c58cf0;
    width:100%;
}
.style-top04{
    margin:1rem 0rem;
    border-bottom:10px solid #3f7bbc;
    width:100%;
}
.style-top05{
    margin:1rem 0rem;
    border-bottom:10px solid #fabe00;
    width:100%;
}
.style-top06{
    margin:1rem 0rem;
    border-bottom:10px solid #007e46;
    width:100%;
}

/* スタイルflex-top（背景色なし） */
.style-flex-top{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    width:100%;
}

/* スタイルtop（100px・左） */
.style-top-l{
    width:calc(100/770*100%);
    margin:0 0 1rem 0;
}
/* スタイルtop（残り・中） */
.style-top-c{
    width:calc(100% - calc(300/770*100%));
    border-bottom:2px solid #444;
    margin:0 0rem 1rem 0;
}
/* スタイルtop（180px・右） */
.style-top-r{
    width:calc(180/770*100%);
}

/* スタイルtop（タイトル） */
.style-top-text{
    font-size:1.3rem;
}
/* スタイルtop（タイトル・強調） */
.style-top-text01{
    font-size:1.8rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #8bca26 60%);
}
.style-top-text02{
    font-size:1.8rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #ff7878 60%);
}
.style-top-text03{
    font-size:1.8rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #d4c0e2 60%);
}
.style-top-text04{
    font-size:1.8rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #7fbbce 60%);
}
.style-top-text05{
    font-size:1.8rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #ffd448 60%);
}
.style-top-text06{
    font-size:1.8rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #40d190 60%);
}

/* スタイルimg */
.style-img-top{
    width:100%;
}

/* スタイル見出し（中） */
.style-h4-01{
    font-size:1.2rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #8bca26 60%);
    margin:0.5rem 1rem 1rem 1rem;
    padding:0rem 0.5rem;
}
.style-h4-02{
    font-size:1.2rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #ff7878 60%);
    margin:0.5rem 1rem 1rem 1rem;
    padding:0rem 0.5rem;
}
.style-h4-03{
    font-size:1.2rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #c58cf0 60%);
    margin:0.5rem 1rem 1rem 1rem;
    padding:0rem 0.5rem;
}
.style-h4-04{
    font-size:1.2rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #3f7bbc 60%);
    margin:0.5rem 1rem 1rem 1rem;
    padding:0rem 0.5rem;
}
.style-h4-05{
    font-size:1.2rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #fabe00 60%);
    margin:0.5rem 1rem 1rem 1rem;
    padding:0rem 0.5rem;
}
.style-h4-06{
    font-size:1.2rem;
    font-weight:bold;
    background:linear-gradient(transparent 60%, #007e46 60%);
    margin:0.5rem 1rem 1rem 1rem;
    padding:0rem 0.5rem;
}

/* スタイルflex-body（本文・背景色なし） */
.style-flex-body{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    width:100%;
}
/* スタイルflex50（本文２カラム） */
.style-flex50{
    width:45%;
    margin:0.5rem;
}
/* スタイルflex60（本文２カラム・変則左） */
.style-flex60{
    width:55%;
    margin:0.5rem;
}
/* スタイルflex40（本文２カラム・変則右） */
.style-flex40{
    width:35%;
    margin:0.5rem;
}
/* スタイルflex50（本文１カラム） */
.style-flex100{
    width:95%;
    margin:0.5rem;
}
/* スタイル本文img */
.style-img-body-div{
    position:relative;
    width:100%;
    padding:1rem 5rem 1rem 1rem;
}
/* スタイル本文img */
.style-img-body{
    width:300px;
    height:300px;
    object-fit: cover;
}
/* スタイル本文・ポイント */
.style-img-body-point1{
    position:absolute;
    width:50px;
    height:50px;
    padding:8px 0px;
    text-align:center;
    color:#fff;
    top: 0px;
    right:20px;
    border-radius:50px;
    border:2px double #fff;
    background-color:#8bca26;
    font-size:1.3rem;
    font-weight:bold;
    z-index:900;
}
.style-img-body-point2{
    position:absolute;
    width:50px;
    height:50px;
    padding:8px 0px;
    text-align:center;
    color:#fff;
    top: 0px;
    right:20px;
    border-radius:50px;
    border:2px double #fff;
    background-color:#ff5050;
    font-size:1.3rem;
    font-weight:bold;
    z-index:900;
}
.style-img-body-point3{
    position:absolute;
    width:50px;
    height:50px;
    padding:8px 0px;
    text-align:center;
    color:#fff;
    top: 0px;
    right:20px;
    border-radius:50px;
    border:2px double #fff;
    background-color:#7030a0;
    font-size:1.3rem;
    font-weight:bold;
    z-index:900;
}
.style-img-body-point4{
    position:absolute;
    width:50px;
    height:50px;
    padding:8px 0px;
    text-align:center;
    color:#fff;
    top: 0px;
    right:20px;
    border-radius:50px;
    border:2px double #fff;
    background-color:#3f7bbc;
    font-size:1.3rem;
    font-weight:bold;
    z-index:900;
}
.style-img-body-point5{
    position:absolute;
    width:50px;
    height:50px;
    padding:8px 0px;
    text-align:center;
    color:#fff;
    top: 0px;
    right:20px;
    border-radius:50px;
    border:2px double #fff;
    background-color:#fabe00;
    font-size:1.3rem;
    font-weight:bold;
    z-index:900;
}
.style-img-body-point6{
    position:absolute;
    width:50px;
    height:50px;
    padding:8px 0px;
    text-align:center;
    color:#fff;
    top: 0px;
    right:20px;
    border-radius:50px;
    border:2px double #fff;
    background-color:#007e46;
    font-size:1.3rem;
    font-weight:bold;
    z-index:900;
}

/* スタイル見出し（小） */
.style-h5{
    font-size:1.1rem;
    margin:0.5rem 0rem;
    padding:0rem 0.5rem 0rem 1rem;
    border-bottom:2px solid #444;
}

/* スタイル本文 */
.style-body-text{
    font-size:0.9rem;
    margin:0.5rem 0rem;
    padding:0.5rem;
}
/* スタイル本文 */
.style-body-text2{
    margin:0rem auto;
    padding:0.5rem;
    text-align:center;
}

/* スタイル注意文 */
.style-body-attention {
    position: relative;
    border-top: solid 2px #e2c028;
    border-bottom: solid 2px #e2c028;
    background: #f4f4f4;
    line-height: 1.4;
    padding: 0.4rem 0.5rem;
    margin: 2rem auto 0.5rem;
    font-size:0.9rem;
    max-width:700px;
}

.style-body-attention:after {
    /*タブ*/
    position: absolute;
    font-weight: 800;
    content: 'Attention';
    background: #e2c028;
    color: #fff;
    left: 0px;
    bottom: 100%;
    border-radius: 5px 5px 0 0;
    padding: 5px 7px 3px;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* スタイルline */
.style-line-01{
    height:1rem;
    margin:0rem 1rem 4rem 1rem;
    border-bottom:2px dashed #8bca26;
}
.style-line-02{
    height:1rem;
    margin:0rem 1rem 4rem 1rem;
    border-bottom:2px dashed #ff7878;
}
.style-line-03{
    height:1rem;
    margin:0rem 1rem 4rem 1rem;
    border-bottom:2px dashed #c58cf0;
}
.style-line-04{
    height:1rem;
    margin:0rem 1rem 4rem 1rem;
    border-bottom:2px dashed #7fbbce;
}
.style-line-05{
    height:1rem;
    margin:0rem 1rem 4rem 1rem;
    border-bottom:2px dashed #ffd448;
}
.style-line-06{
    height:1rem;
    margin:0rem 1rem 4rem 1rem;
    border-bottom:2px dashed #40d190;
}

/* スタイルbutton・全体 */
input[type=checkbox] {
    display: none;
    appearance: none;
    -webkit-appearance: none;
}
input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
}
.style-button-div{
    margin:0 auto;
    text-align:center;
}

/* スタイルbutton01 */
.style-button01{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    background-color:#8bca26;
    border-radius:5px;
    width:100%;
    margin:4rem auto 0rem auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.style-button01::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.style-button01::after {
    border-right: 8px solid #8bca26;
    border-bottom: 4px solid #8bca26;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .style-button01::before {
    border-color: #666;
}
input[type=checkbox]:checked + .style-button01::after {
    opacity: 1;
}

/* スタイルbutton02 */
.style-button02{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    background-color:#ff5050;
    border-radius:5px;
    width:100%;
    margin:4rem auto 0rem auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.style-button02::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.style-button02::after {
    border-right: 8px solid #ff5050;
    border-bottom: 4px solid #ff5050;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .style-button02::before {
    border-color: #666;
}
input[type=checkbox]:checked + .style-button02::after {
    opacity: 1;
}

/* スタイルbutton03 */
.style-button03{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    background-color:#7030a0;
    border-radius:5px;
    width:100%;
    margin:4rem auto 0rem auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.style-button03::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.style-button03::after {
    border-right: 8px solid #7030a0;
    border-bottom: 4px solid #7030a0;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .style-button03::before {
    border-color: #666;
}
input[type=checkbox]:checked + .style-button03::after {
    opacity: 1;
}

/* スタイルbutton04 */
.style-button04{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    background-color:#3f7bbc;
    border-radius:5px;
    width:100%;
    margin:4rem auto 0rem auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.style-button04::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.style-button04::after {
    border-right: 8px solid #3f7bbc;
    border-bottom: 4px solid #3f7bbc;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .style-button04::before {
    border-color: #666;
}
input[type=checkbox]:checked + .style-button04::after {
    opacity: 1;
}

/* スタイルbutton05 */
.style-button05{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    background-color:#fabe00;
    border-radius:5px;
    width:100%;
    margin:4rem auto 0rem auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.style-button05::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.style-button05::after {
    border-right: 8px solid #fabe00;
    border-bottom: 4px solid #fabe00;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .style-button05::before {
    border-color: #666;
}
input[type=checkbox]:checked + .style-button05::after {
    opacity: 1;
}

/* スタイルbutton06 */
.style-button06{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    background-color:#007e46;
    border-radius:5px;
    width:100%;
    margin:4rem auto 0rem auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.style-button06::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.style-button06::after {
    border-right: 8px solid #007e46;
    border-bottom: 4px solid #007e46;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .style-button06::before {
    border-color: #666;
}
input[type=checkbox]:checked + .style-button06::after {
    opacity: 1;
}

/**********************************/
/*文字         					   */
/**********************************/

/*index文字（小）   */
.h1-s{
    font-size:1rem;
}
/*index文字（極小）   */
.h1-ss{
    font-size:0.9rem;
}
/*index文字（極小２）   */
.h1-sss{
    font-size:0.8rem;
}
/*index文字（h1指定）   */
h1 {
    font-size:1.8rem;
    font-weight:normal;
}
/*index文字（中）   */
.h1-m{
    font-size:1.3rem;
}
/*index文字（中大）   */
.h1-mb{
    font-size:1.5rem;
}
/*index文字（大）   */
.h1-b{
    font-size:1.8rem;
}
/*index文字（極大・太）   */
.h1-bb{
    font-size:2.2rem;
    font-weight:bolder;
}
/*index文字（赤）   */
.h1-red {
    color:#dd2932;
}

/*index文字（緑）   */
.h1-green {
    color:#32CC57;
}

/*選択時の文字（h4指定）   */
h3.h3-select {
    margin-bottom:0rem;
}

/*セレクトタイトル用（h3指定）   */
h3.h3-title {
    border-bottom: 1px solid #000;
    text-align:center;

}
/*セレクトタイトル用（h3指定・小）   */
.h3-title-2 {
    font-size:1.2rem;

}

/*取消線（白）*/
.text-none-line{
    position: relative;
}
.text-none-line::before {
    position: absolute;
    content: "";
    display: block;
    transform: rotate(0);
    background-color: #fff;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

/**********************************/
/*Style 関連   			           */
/**********************************/

/* style1緑色 文字  */
.s1-color {
    color:#4a7702;
}
/* style2赤色 文字  */
.s2-color {
    color:#ff5050;
}
/* style3紫色 文字  */
.s3-color {
    color:#7030a0;
}
/* style4青色 文字  */
.s4-color {
    color:#3f7bbc;
}
/* style5黄色 文字  */
.s5-color {
    color:#fabe00;
}
/* style6青緑色 文字  */
.s6-color {
    color:#007e46;
}

/* style1緑色マーカー */
.s1-marker {
    background:linear-gradient(transparent 60%, #def1ca 60%);
    font-weight:bolder;
}
/* style2赤色マーカー */
.s2-marker {
    background:linear-gradient(transparent 60%, #ffcaca 60%);
    font-weight:bolder;
}
/* style3紫色マーカー */
.s3-marker {
    background:linear-gradient(transparent 60%, #d4c0e2 60%);
    font-weight:bolder;
}
/* style4青色マーカー */
.s4-marker {
    background:linear-gradient(transparent 60%, #b2d4ec 60%);
    font-weight:bolder;
}
/* style5黄色マーカー */
.s5-marker {
    background:linear-gradient(transparent 60%, #ffecb2 60%);
    font-weight:bolder;
}
/* style5青緑色マーカー */
.s6-marker {
    background:linear-gradient(transparent 60%, #abdfd1 60%);
    font-weight:bolder;
}

/**********************************/
/*アンダーライン    			   */
/**********************************/

/* 黄色マーカー */
.y-marker {
    background:linear-gradient(transparent 60%, #ff6 60%);
    font-weight:bolder;
}
/* オレンジ色マーカー */
.o-marker {
    background:linear-gradient(transparent 70%, #ffc000 70%);
}
/* 黄緑色マーカー */
.m-marker {
    background:linear-gradient(transparent 70%, #70cc11 70%);
}

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

footer{
    margin:2rem;
    text-align:center;
}

/**********************************/
/*ボタン     					   */
/**********************************/

/*ボタン緑*/
.btn-green {
    min-width:160px;
    max-width:160px;
    padding: 0.5em;
    font-size:1.2rem;
    text-decoration: none;
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
    margin:1rem 0.5rem;
    text-align:center;
}

.btn-green:hover {
border: solid 1px #32CC57;
background-color:#fff;
border-radius: 5px;
color: #32CC57;
}

/*ボタン緑　アウトライン*/
.btn-green-out {
    min-width:200px;
    max-width:200px;
    padding: 0.5em;
    font-size:1.2rem;
    text-decoration: none;
    border: solid 1px #32CC57;
    background-color:#fff;
    border-radius: 5px;
    color: #32CC57;
    margin:1rem auto;
    text-align:center;
}

.btn-green-out:hover {
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
}

/*ボタン緑（小）*/
.btn-green-s {
    min-width:50px;
    max-width:50px;
    padding: 0.5em;
    font-size:1rem;
    text-decoration: none;
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
    margin:1rem auto;
    text-align:center;
}

.btn-green-s:hover {
border: solid 1px #32CC57;
background-color:#fff;
border-radius: 5px;
color: #32CC57;
}

/*ボタングレー（ログアウト用）*/
.btn-logout {
    min-width:100px;
    max-width:100px;
    padding: 0.5em;
    font-size:1rem;
    text-decoration: none;
    color: #fff;
    background-color:#e0dcd0;
    border: none;
    border-radius: 5px;
    margin:1rem auto;
    text-align:center;
}

.btn-logout:hover {
border: solid 1px #e0dcd0;
background-color:#fff;
border-radius: 5px;
color: #b3aea2;
}

/*ボタングレー（ログアウト・アイコン用）*/
.btn-logout2 {
    min-width:50px;
    max-width:100px;
    font-size:1rem;
    text-decoration: none;
    color: #adaaa0;
    background-color:#e0dcd0;
    border: none;
    border-radius: 5px;
    margin:0 0.5rem;
    text-align:center;
}

.btn-logout2:hover {
border: solid 1px #e0dcd0;
background-color:#fff;
border-radius: 5px;
color: #74726c;
}

/*ボタングレー（小・検索用）*/
.btn-gray-s {
    min-width:60px;
    max-width:60px;
    padding: 0.5em;
    font-size:1.2rem;
    text-decoration: none;
    color: #fff;
    background-color:#adaaa0;
    border: none;
    border-radius: 5px;
    margin:0 0.5rem 0.5rem 0.5rem;
    text-align:center;
}

.btn-gray-s:hover {
    min-width:60px;
    max-width:60px;
    padding: 0.5rem;
    margin:0 0.5rem 0.5rem 0.5rem;
    border: solid 1px #adaaa0;
    background-color:#fff;
    border-radius: 5px;
    color: #adaaa0;
}

/*ボタン緑（小・検索用）*/
.btn-green-s-search {
    min-width:50px;
    max-width:60px;
    padding: 0.5em;
    font-size:1rem;
    text-decoration: none;
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
    margin:0 0.5rem 0.5rem 0.5rem;
    text-align:center;
}

.btn-green-s-search:hover {
    min-width:50px;
    max-width:60px;
    padding: 0.5rem;
    margin:0 0.5rem 0.5rem 0.5rem;
    border: solid 1px #32CC57;
    background-color:#fff;
    border-radius: 5px;
    color: #32CC57;
}

/*ボタン緑（中・検索用）*/
.btn-green-m-search {
    min-width:100px;
    max-width:120px;
    padding: 0.5em;
    font-size:1rem;
    text-decoration: none;
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
    margin:0 0.5rem 0.5rem 0.5rem;
    text-align:center;
}

.btn-green-m-search:hover {
border: solid 1px #32CC57;
background-color:#fff;
min-width:100px;
max-width:120px;
padding: 0.5rem;
margin:0 0.5rem 0.5rem 0.5rem;
border-radius: 5px;
color: #32CC57;
}

/*ボタン緑（中・アイコン用）*/
.btn-green-m-icon {
    min-width:50px;
    max-width:100px;
    font-size:1rem;
    text-decoration: none;
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
    margin:0 0.5rem;
    text-align:center;
    padding:0.5rem;
}

.btn-green-m-icon:hover {
border: solid 1px #32CC57;
background-color:#fff;
border-radius: 5px;
color: #32CC57;
}

/*ボタン緑（大）*/
.btn-green-l {
    width:60%;
    max-width:600px;
    padding: 0.5em;
    font-size:1.2rem;
    text-decoration: none;
    color: #fff;
    background-color:#32CC57;
    border: none;
    border-radius: 5px;
    margin:1rem auto;
    text-align:center;
}

.btn-green-l:hover {
border: solid 1px #32CC57;
background-color:#fff;
border-radius: 5px;
color: #32CC57;
}

/*ボタン緑（中・アウトライン）*/
.btn-green-m-out {
    min-width:50px;
    max-width:100px;
    padding: 0.5em;
    border: solid 1px #32CC57;
    background-color:#fff;
    color: #32CC57;
    border-radius: 5px;
    margin:0 0.5rem;
    text-align:center;
}

.btn-green-m-out:hover {
text-decoration: none;
color: #fff;
background-color:#32CC57;
border: none;
}

/*ボタン緑（中・アウトライン・チェックボックス用rerative）*/
.btn-green-m-out-re {
    position:relative;
    min-width:50px;
    max-width:100px;
    width:50px;
    height:42px;
    padding: 0.5em;
    font-size:1rem;
    border: solid 1px #32CC57;
    background-color:#fff;
    color: #32CC57;
    border-radius: 5px;
    margin:0 0.5rem;
    text-align:center;
}

.btn-green-m-out-re:hover {
text-decoration: none;
color: #fff;
background-color:#32CC57;
border: none;
}

/*ボタン赤（中・アウトライン）*/
.btn-red-m-out {
    min-width:50px;
    max-width:100px;
    padding: 0.5em;
    font-size:1rem;
    border: solid 1px #dd2932;
    background-color:#fff;
    color: #dd2932;
    border-radius: 5px;
    margin:0 0.5rem;
    text-align:center;
}

.btn-red-m-out:hover {
text-decoration: none;
color: #fff;
background-color:#dd2932;
border: none;
}

/*ボタングレー（選択用）*/
.btn-select {
    width:100%;
    padding: 0.5em;
    font-size:1.5rem;
    text-decoration: none;
    color: #000;
    background-color:#fff;
    border: solid 1px #000;
    margin:0.5rem auto;
    text-align:center;
}

.btn-select:hover {
    background-color:#e0dcd0;
}

/*ボタングレー反転版（選択用）*/
.btn-select-g {
    width:100%;
    padding: 0.5em;
    font-size:1.5rem;
    text-decoration: none;
    color: #000;
    background-color:#e0dcd0;
    border: solid 1px #000;
    margin:0.5rem auto;
    text-align:center;
}

.btn-select-g:hover {
    background-color:#fff;
}

/*ボタンオレンジ（別サイトへ移動用）*/
.btn-orange {
    width:100%;
    padding: 0.5em;
    font-size:1.5rem;
    text-decoration: none;
    color: #fff;
    background-color:#FF6600;
    border: none;
    margin:0.5rem auto;
    text-align:center;
}

.btn-orange:hover {
    background-color:#fff;
    border: solid 1px #FF6600;
    color: #FF6600;
}

/* チェックボックス02 */
input[type=checkbox] {
    display: none;
}
.checkbox02 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    position: relative;

    width:80%;
    padding: 0.5em;
    font-size:1.5rem;
    text-decoration: none;
    color: #000;
    background-color:#e0dcd0;
    border: solid 1px #000;
    margin:0.5rem auto;
    text-align:center;
}
.checkbox02::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;

}
.checkbox02::after {
    border-right: 8px solid #32CC57;
    border-bottom: 4px solid #32CC57;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox02::before {
    border-color: #666;
}
input[type=checkbox]:checked + .checkbox02::after {
    opacity: 1;
}

/* チェックボックス03 */
.checkbox03{
    position: relative;
    font-size:1.4rem;
    color:#fff;
    width:3rem;
    margin:auto;
    padding:0.2rem 1rem;
    text-align:center;
    max-width:300px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
.checkbox03::before {
    background: #fff;
    border: 1px solid #222;
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    right: 15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.checkbox03::after {
    border-right: 8px solid #32CC57;
    border-bottom: 4px solid #32CC57;
    content: '';
    display: block;
    height: 2rem;
    width: 1rem;
    right: 1.5rem;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox03::before {
    border-color: #666;
}
input[type=checkbox]:checked + .checkbox03::after {
    opacity: 1;
}

/**********************************/
/*吹き出し（下向き）			   */
/**********************************/
.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1rem 0;
    padding: 0.2rem 0.5rem;
    min-width: 100px;
    max-width: 100%;
    color: #fff;
    font-size: 0.9rem;
    background: #7fbbce;
    border-radius:5px;
}

.balloon1:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 7px solid transparent;
    border-top: 12px solid #7fbbce;
}

.balloon1 p {
    margin: 0;
    padding: 0;
}

/**********************************/
/*選択中のサービス一覧  		   */
/**********************************/

/*ボタン設定*/
.selected-flex{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    padding:0.5rem;
}

.selected-flex-btn{
    display:flex;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;
}

/*テーブル設定*/
.selected-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: solid 1px #f5f1e5;
}
.selected-table tr {
    background: #fff;
}
.selected-table th,
.selected-table td {
    padding: 0.5rem;
    border-bottom: solid 1rem #f5f1e5;
    font-size:0.9rem;
}
.selected-table th{
    background-color: #f5f1e5;
    text-align:center;
}

.selected-table img{
    width:100%;
    max-width:50px;
}
/*テーブル内容部分を広くする*/
.selected-table-text{
    width:40%;
    max-width:300px;
}
/*テーブル内容部分を広くする（全体で選択するバージョン）*/
.selected-table-text2{
    width:30%;
    max-width:300px;
}

.table-img img{
    width: 100%;
    max-width:50px;
}

/***************************************************/
/*インプット要素（選択中のサービスの数量変更） 		   */
/***************************************************/
/*フォームデザインのデフォルトスタイルの削除*/
input {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-vol{
    text-align:center;
    padding:0.3rem;
    margin:0 0.5rem;
    border:1px solid #666;
    font-size:1.3rem;
    text-align:center;
    max-width:60px;
}

/**********************************/
/* 承諾チェックボックス             */
/**********************************/
/*フォームデザインのデフォルトスタイルの削除*/
input, button, textarea, select {
    margin: 0;
    padding: 2px;
    background: none;
    border: solid 1px #999;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* チェックボックス01 */
input[type=checkbox] {
    display: none;
}
.checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #aaa;
    content: '';
    display: block;
    height: 20px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 20px;
}
.checkbox01::after {
    border-right: 3px solid #ff6600;
    border-bottom: 3px solid #ff6600;
    content: '';
    display: block;
    height: 12px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 8px;
}
input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}

/*チェックボックスoff時グレー（来場予約ボタン）*/
.btn-o:disabled {
	background-color: #999;
}

/*チェックボックスoff時グレー*/
button:disabled {
	background-color: #999;
}

/**********************************/
/* 光が入るオレンジ色ボタン         */
/**********************************/
/*オレンジ色ボタン*/
.btn-o{
    position:relative;
    display:inline-block;
    overflow:hidden;
    text-align:center;
    width:15em;/*タイトル幅*/
    height:2.5em;/*タイトル高さ*/
    border-radius: 5px; /* ボックスの四つ角を丸くする */
    background:#ff6600;
    color:#fff;
    padding:0 1em;
    margin:1em auto;
    font-size: 1em;
}

/*キラッと光る（来場予約ボタン）*/
.btn-o::before {
    content: '';
    /*絶対配置でキラッと光るの位置を決める*/
    position: absolute;
    top: 0;
    left: -75%;
    /*キラッと光る形状*/
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}

/*hover（来場予約ボタン）*/
.btn-o:hover {
    background:#ff6600;
}

/*hoverした際の移動のアニメーション（来場予約ボタン）*/
.btn-o:hover::before {
    animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/**********************************/
/* 光が入る灰色ボタン               */
/**********************************/
/*灰色ボタン*/
    .btn-g{
    position:relative;
    display:inline-block;
    overflow:hidden;
    text-align:center;
    width:15em;/*タイトル幅*/
    height:2.5em;/*タイトル高さ*/
    border-radius: 5px; /* ボックスの四つ角を丸くする */
    background:#333;
    color:#fff;
    padding:0 1em;
    margin:1em auto;
    font-size: 1em;
}

/*キラッと光る（来場予約ボタン）*/
.btn-g::before {
    content: '';
    /*絶対配置でキラッと光るの位置を決める*/
    position: absolute;
    top: 0;
    left: -75%;
    /*キラッと光る形状*/
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}

/*hover（来場予約ボタン）*/
.btn-g:hover {
    background:#333;
}

/*hoverした際の移動のアニメーション（来場予約ボタン）*/
.btn-g:hover::before {
    animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/**********************************/
/* モーダルウィンドウ               */
/**********************************/

/*モーダルを開くボタン*/
.modal-open {
    min-width:50px;
    max-width:100px;
    padding: 0.5em;
    font-size:1rem;
    border: solid 1px #32CC57;
    background-color:#fff;
    color: #32CC57;
    border-radius: 5px;
    margin:0 0.5rem;
    text-align:center;
}

.modal-open:hover {
text-decoration: none;
color: #fff;
background-color:#32CC57;
border: solid 1px #32CC57;
border: none;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 750px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #000;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
}

/**********************************/
/*ページネーション  ここから         */
/**********************************/

.paging {
    margin-top: 30px;
    text-align: center;
  }
  .paging_item {
    border: 1px solid #999;
    padding: 10px;
    margin: 0px 4px;
  }
  .paging .current {
    background-color: #89db9c;
    color: #fff;
  }