@charset "UTF-8";

@media screen and (max-width: 768px) {
    body{
        font-size: 1.6rem;
        line-height: 1.5;
        color: #000000;
        font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
        min-width:100%;
    }
    a.hover:hover img {
        opacity: 1.0;
        filter: alpha(opacity=100);
        -moz-opacity:1.00;
        opacity:1.00;
    }
    a:hover{
        text-decoration: none !important;
        opacity: 1.0 !important;
    }
    .menu-trigger {
        display: block;
    }
    .show_pc{
        display: none !important;
    }
    .show_sp{
        display: block !important;
    }
    .show_sp02{
        display: inline !important;
    }

    img{
        max-width: 100%;
    }
    /* #pagetop{
            right: 10px;
            width: 35px;
    } */

    /****************************ボタン設定****************************/
    .search_btn {
        padding: 3px;
    }
    .search_btn02 {
        padding: 3px;
    }
    .search_btn02 span {
        border: none;
        font-size: 1.5rem;
    }

    .condition_btn {
        margin: 0 10px 10px 0;
        padding: 3px 15% 3px 15px;
        font-size: 1.4rem;
    }

    .reset {
        padding: 10px 0 0;
    }
    .reset_btn {
        padding: 0;
        font-size: 1.4rem;
        font-weight: 600;
    }

    .button01 {
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
        padding: 15px;
    }
    .button02 {
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
        padding: 15px;
    }

    .btnBlock .add_btn {
        max-width: 145px;
        width: 40%;
    }
    .btnBlock_02 .add_btn {
        max-width: 145px;
        width: 40%;
    }
    .btnBlock02 .button01 {
        max-width: 350px;
        padding: 15px 0;
    }

    .selectWrap.w80 {
        width: 100%;
    }

    /****************************段落設定****************************/
    .headingL {
        display: flex;
        justify-content: center;
        padding: 0 0 25px;
        font-size: 2.1rem;
        font-weight: 600;
        color: #6E6132;
    }
    .headingL .deco {
        width: 25px;
    }
    .headingL .deco01 {
        margin-right: 1rem;
    }
    .headingL .deco02 {
        margin-left: 1rem;
    }
    .headingL .deco img {
        vertical-align: middle;
    }

    .headingM {
        padding: 0 0 20px;
        text-align: center;
        font-weight: 600;
    }
    .headingM span {
        display: inline-block;
        position: relative;
        width: 1px; /* 縦棒の幅 */
        height: 13px; /* 縦棒の長さ */
        background: #DECE51; /* 縦棒の色 */
        margin: 0 15px;
    }
    .headingM span::after {
        content: "";
        position: absolute;
        top: 6px; /* 横棒のy位置 */
        left: -4px; /* 横棒のX位置 */
        width: 10px; /* 横棒の長さ */
        height: 1px; /* 横棒の幅 */
        background: #DECE51; /* 横棒の色 */
    }

    /**************************** header ****************************/
    .headerbox{
        padding: 5px 10px;
    }
    .headerbox_in .logo {
        /*width: ;*/
    }



    /**************************** footer ****************************/
    footer{
        margin: 0;
        padding: 0;
        background:#6E6132;
    }

    .footerbox{
        margin: 0;
        padding: 20px 0;
        text-align: center;
    }
    .footerbox_in{
        margin: 0 auto;
        padding: 0;
        /* width: 920px; */
        font-size: 1.1rem;
        font-weight: bold;
        color: #fff;
    }
    /**************************** container ****************************/
    .main {
        padding: 0;
    }
    .container{
        width: 100%;
        padding: 30px 20px;
        border-radius: 0;
        box-shadow: none;
    }

    /******************** 
    衣装一覧 
    ********************/
    .search .search_item {
        flex-wrap: wrap;
        width: 100%;
        padding: 0 0 30px;
    }
    .search .search_btn {
        width: 48%;
        margin: 0 1% 10px;
    }
    .search .search_btn._last {
        width: 100%;
    }
    .search_active {
        margin: 0 auto 30px;
        padding: 20px 13px;
    }
    .search_active .search_item {
        width: 100%;
        padding-bottom: 0;
    }
    .search_condition .title {
        padding: 0 0 10px;
        font-weight: 600;
    }

    .section02 {
        padding: 40px 0 0;
    }
    .cardList .inner {
        padding: 30px 0;
    }
    .cardList_item {
        display: block;
        width: 49%;
        height: 400px;
    }

    /********** モーダル **********/
    /* 予約種別選択モーダル */
    .modal_window.reservationSelect {
        width: 90%;
        padding: 45px 25px;
        height: auto;
    }
    .btnBlock10 {
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 0 0 10px;
    }
    .btnBlock10 .button03 {
        margin: 0 auto;
    }
    .reservationSelect .text {
        font-size: 1.4rem;
        font-weight: 600;
        width: 260px;
        color: #cb2b3d;
        margin: 0 auto;
        padding: 0 0 20px 0;
        padding: 5px 0 20px 30px;
        text-indent: -14px;
    }
    /* 衣装対象者選択モーダル */
    .modal_window.tragetSelect {
        width: 90%;
        padding: 45px 25px;
        height: auto;
    }
    .tragetSelect .title {
        padding: 0 0 20px;
    }
    .tragetSelect .inputField {
        padding: 0 0 20px;
    }
    .tragetSelect .inputField._last {
        padding: 0 0 50px;
    }
    .dateSelect .inputField dl {
        flex-direction: column;
    }
    .tragetSelect .inputField dl dt,
    .tragetSelect .inputField dl dd {
        width: 100%;
        padding: 10px 0 0;
    }
    .tragetSelect .inputField._radio {
        flex-direction: column;
        width: fit-content;
        margin: 0 auto;
        padding: 0 0 30px;
    }
    .tragetSelect .inputField._radio .inputLabel {
        display: inline-block;
        padding: 5px 0;
        text-align: left;
    }

    /* 日時選択モーダル */
    .modal_window.dateSelect {
        width: 90%;
        padding: 50px 25px 30px;
        height: 90%;
    }
    .dateSelect .title {
        padding: 0 0 20px;
    }
    .dateSelect .inputField {
        padding: 0 0 20px;
    }
    .dateSelect .inputField._last {
        padding: 0 0 50px;
    }
    .dateSelect .inputField dl {
        flex-direction: column;
    }
    .dateSelect .inputField dl dt,
    .dateSelect .inputField dl dd {
        width: 100%;
        padding: 10px 0 0;
    }
    .mode-decision .dateSelect .inputField dl dt{
        width: 100%;
    }
    .dateSelect .inputField._radio {
        flex-direction: column;
        width: fit-content;
        margin: 0 auto;
        padding: 0 0 30px;
    }
    .dateSelect .inputField._radio .inputLabel {
        display: inline-block;
        padding: 5px 0;
        text-align: left;
    }

    /* 衣装詳細モーダル */
    .modal_window.clothesDetail {
        width: 90%;
        padding: 50px 25px 30px;
        height: 90%;
    }
    .modalBlock01 {
        padding: 0;
    }
    .modalBlock01 .inner {
        flex-direction: column;
    }
    .modalBlock01 .inner > div {
        width: 100%;
    }
    .modalBlock01 .sliderBox {
        padding: 0 10px;
    }
    .sliderBox .tag {
        left: 10px;
    }
    .modalBlock01 .slider01_item {
        height: 385px;
    }
    .modalBlock01 .contentBox {
        padding: 30px 0 0;
    }
    .modalBlock02 {
        padding: 30px 0;
    }
    .modalBlock02 .sliderBox {
        height: 100%;
    }
    .modalBlock02 .slider02 {
        margin-left: -1%;
    }
    .modalBlock02 .slider02 .slick-track {
        width: 100%;
    }
    .modalBlock02 .slider02 .slick-slide {
        width: 100%;
    }
    .modal_window .modalBlock02 .slick-prev {
        left: -15px;
    }
    .modal_window .modalBlock02 .slick-next {
        right: -20px;
    }
    .modalBlock02 .cardList_item {
        width: 49% !important;
        height: 224px;
        margin: 0 0 0 1%;
    }


    /********************
    マイページ見学申し込み詳細情報入力 
    ********************/
    .form_body {
        padding: 0 20px;
    }
    .form_body._bg {
        margin: 0 auto 50px;
        padding: 60px 20px 20px;
    }
    .form_body .dateSelect .title {
        padding: 20px 0 10px;
    }
    .form_body .dateSelect .title._first {
        padding: 0;
    }
    .form_body .inputField._last {
        padding-bottom: 10px;
    }
    .form_body .dateSelect .inputField._radio {
        padding: 0 0 20px;
    }
    .form_body .inputField .plan,
    .form_body .inputField .desired_plan {
        width: 100%;
    }
    .registForm table {
        border-top: none;
    }
    .registForm table tr {
        border-bottom: none;
    }
    .registForm table th,
    .registForm table td {
        display: block;
        width: 100%;
        padding: 0;
    }
    .registForm table th {
        padding: 0 0 10px;
    }
    .registForm table td {
        padding: 0 0 25px;
    }
    .registForm table tr.sp_col {
        display: flex;
        align-items: center;

    }
    .registForm table tr.sp_col th {
        width: 40%;
        padding: 0 0 15px;
    }
    .registForm table tr.sp_col td {
        width: 60%;
        padding: 0 0 15px;
    }
    .registForm table td._last {
        width: 100%;
    }
    /*.registForm02 .memo {
        display: block;
            width: 100%;
            font-size: 1.4rem;
            font-weight: bold;
    }*/
    .registForm02 .memo a {
        font-weight: bold;
        color: #3770B2;
        text-decoration: underline;
    }
    .registForm table .memo {
        display: inline-block;
        font-size: 1.3rem;
        font-weight: 600;
        position: absolute;
        bottom: -20px;
        left: -67%;
        white-space: nowrap;
    }
    .sp_position {
        position: relative;
    }
    .sp_col.sp_width {
        padding: 0 0 30px;
    }


    /*
    .hideBox04.block {
      display: block;
      opacity: 1;
      visibility: visible;
      height: 1570px;
    }  
    */

    .cardLis02  {
        flex-wrap: wrap;
        margin-left: -1%;
        padding: 30px 0;
    }
    .cardLis02 .cardList_item {
        padding: 0 0 20px;
    }
    .cardLis02 .cardList_item .image {
        height: 400px;
    }
    .cardLis02 .cardList_item .alert_text {
        font-size: 1.4rem;
    }

    .btnBlock {
        width: 100%;
        padding: 30px 0;
    }
    .caution_memo {
        order: 2;
        margin: 30px auto;
        padding: 20px 30px;
    }
    .caution_memo .text {
        text-align: left;
        display: inline-block;
    }
    .btnBlock02 {
        flex-direction: column;
        width: 100%;
        padding: 30px 0;
    }
    .btnBlock02 .cancel_btn {
        order: 3;
    }
    .btnBlock02 .return_btn {
        order: 3;
    }
    .btnBlock02 .past_reservation_btn {
        order: 3;
    }
    .btnBlock02 .next_btn {
        order: 1;
    }

    .confirmationForm02 table {
        /* border-top: none; */
    }
    .confirmationForm02 table tr {
        /* border-bottom: none; */
    }
    .confirmationForm02 table th,
    .confirmationForm02 table td {
        padding: 0;
        display: block;
        width: 100%;
    }
    .confirmationForm02 table th {
        padding: 10px 0;
    }
    .confirmationForm02 table td {
        padding: 0 0 10px 15px;
    }
    .confirmationForm02_img {
        text-align: center;
        padding: 0 0 0 25px;
    }
    .form_body .cardLis02 .cardList_item {
        width :49%;
    }

    /* 見学検討中BOX */
    .caution_memo02 {
        margin: 0 auto 30px;
        padding: 30px;
    }
    .caution_memo02 .text {
        text-align: left;
        display: inline-block;
    }
    .btnBlock04 {
        flex-direction: column;
        width: 100%;
        padding: 0 0 30px 0;
    }
    .btnBlock04 .button01 {
        margin-bottom: 30px;
        max-width: 350px;
    }
    .btnBlock04 .button01:last-child {
        margin-bottom: 0;
    }

    .selected_number {
        padding: 10px 10px 12px 35px;
        position: fixed;
        bottom: 5px;
        right: 5px;
        z-index: 100;
        background-color: #ffffff;
        border: solid 1px #666;
        border-radius: 5px;
        font-size: 1.4rem;
    }
    .selected_number .selected_number_text::before {
        position: absolute;
        content: '';
        background: url("../img/icon_select.png") top right no-repeat;
        background-size: 15px;
        width: 15px;
        height: 15px;
        right: 128px;
        top: 10px;
    }

    /* 見学申込 */
    .btnBlock05 {
        width: 100%;
        padding: 0 0 40px 0;
    }

    /* 撮影申込 */
    .space {
        margin: 15px auto;
        order: 2
    }


    /* マイページ見学申込内容変更確認 */
    table.application_details_table {
        /*  width: 270px;*/
    }

    .application_details_table_body {
        padding: 0 20px;
    }

    .caution_memo03 {
        margin: 40px auto 50px;
        padding: 20px 30px;
    }
    .caution_memo03 .text {
        text-align: left;
        display: inline-block;
    }
    .caution_memo03_in {
        padding: 10px 0 10px 0;

        display: block;
        align-items: center;
    }
    .caution_memo03_icon {
        margin: 0 auto;
        padding-bottom: 10px;
    }
    .btnBlock06 {
        /*    width: 100%;*/
        padding: 0 0 0 0;
    }

    /* 会員登録 */
    .btnBlock_02 {
        width: 100%;
        padding: 30px 0;
    }
    .form_body .dateSelect .title._padding_none {
        padding: 20px 0 10px;
    }
    .form_body._padding_none02 {
        padding: 0;
    }


    /* ログイン */
    .headingL._padding_re {
        display: flex;
        justify-content: center;
        padding: 0 0 25px;
        font-size: 2.1rem;
        font-weight: 600;
        color: #6E6132;
    }
    .btnBlock07 {
        width: 100%;
        padding: 30px 0 100px 0;
    }

    /* マイページ予約一覧 */
    .my_name {
        padding-top: 0;
    }
    .news-list_body {
        padding: 0 20px;
    }

    .visit_day_body {
        padding: 0 20px 30px;
    }
    .visit_day_box {
        text-align: center;
        width: 100%;
    }
    .btnBlock08 {
        margin: 0 auto;
        padding: 0 0 50px 0;
    }
    .btnBlock08 .button01 {
        width: 310px;
        margin-top: 50px;
    }
    .btnBlock09 {

        padding: 10px 0 30px 0;
    }
    .btnBlock09 .button01 {
        width: 310px;
        margin-bottom: 0;
    }

    /* 会員マイページトップ */
    .visit_day_body02 {
        width: 100%;
        padding: 0 10px 30px;
        display: block;
    }
    .visit_day_box02 {
        text-align: center;
        width: 100%;
        padding: 0 10px;
    }
    .visit_day_box02:first-child {
        padding-bottom: 30px;
    }

    /* 非会員マイページトップ */
    .benefits_img_body {
        padding: 0 0 20px;
        color: #000;
    }

    .benefits_body {
        padding: 0 20px;
    }
    .benefits_body._bg {
        margin: 0 auto 50px;
        padding: 60px 20px 20px;
    }

    .benefits {
        display: block;
    }
    .benefits_box {
        width: 97%;
    }
    .benefits_box:nth-child(n+3) {
        border-bottom: dotted 2px #dece51;
    }
    /* チャット */
    .chat_box {
        padding: 0;
    }
    .chat_box_in ul li.operater_box {
        padding: 0 10% 0 0;
    }
    .chat_box_in ul li.user{
        padding: 0 0 0 20%;
    }
    .chat_box_in ul li span.message:before {
        /* top: 20px; */
    }
    .chat_box_in ul li span.message:after {
        /* top: 22px; */
    }

    /* グラフ */
    .graph {
        width: 160px;
        height: 160px;
    }
    .graph .graph_name {
        font-size: 1.8rem;
    }
    .graph .graph_percent {
        font-size: 4rem;
    }
    .graph .graph_percent span {
        font-size: 2.5rem;
    }
    .graph_text {
        padding-top: 25px;
        margin: 0 auto;
        width: 270px;
    }


    /* 会員見学後マイページトップ */
    /* グラフ */
    .graph02 {
        width: 160px;
        height: 160px;
    }
    .graph02 .graph_box {
        padding-top: 30px;
    }
    .graph02 .graph_name {
        font-size: 1.8rem;
    }
    .graph02 .graph_percent {
        font-size: 4rem;
    }
    .graph02 .graph_percent span {
        font-size: 2.5rem;
    }

    /* 予約内容入力 */
    .time_form_body {
        padding: 40px 20px 0;
    }
    .mode-decision .time_form_body{
        padding: 40px 20px;
    }

    .confirmation_form_body {
        padding: 0 20px;
    }
    .confirmation_form_body._bg {
        margin: 0 auto 25px;
        padding: 60px 20px 20px;
    }


    .confirmationForm table {
        border-top: none;
    }
    .confirmationForm table tr {
        border-bottom: none;
    }
    .confirmationForm table th,
    .confirmationForm table td {
        padding: 0;
    }
    .confirmationForm table th {
        width: 40%;
        padding: 0 0 25px;
    }
    .confirmationForm table td {
        width: 60%;
        padding: 0 0 25px;
    }
    .confirmationForm_img {
        text-align: center;
        padding: 10px 0 20px 0;
    }

    /* 衣装予約状況確認 */
    .reservation_date_table_body {
        padding: 0 10px 30px;
    }
    /*カレンダー*/
    .date_selection_calendar_body {
        padding: 0 10px;
    }


    /*********************
     20220907 追加 
    *********************/
    /* 申し込み内容 */
    .cardLis02 .cardList_item .alert_text {
        font-size: 1.3rem;
    }
    .cardLis02 .cardList_item .alert_text::after {
        font-size: 1.5rem;
        right: 5px;
        bottom: 7px;
    }
    /* モーダル削除ボタン */
    .delete_btn06 {
        top: 10px;
        right: 10px;
        width: 30px;
    }


    /*********************
     20221209 追加 
    *********************/
    /* 日程選択モーダル */
    .dateSelect .inputField._radio {
        justify-content: center;
    }
    .dateSelect .inputField._radio input[type="radio"] {
        margin: 0 auto;
    }
    .dateSelect .inputField._radio label {
        margin: 7px 0 15px 0;
    }
    .dateSelect .inputField dl dd .date {
        width: 100% !important;
        min-width: 160px !important;
        border-radius: 0;
    }
    .dateSelect .inputField dl .selectWrap {
        /* width: 100%; */
    }

    /* 見学お申し込み */
    .btnBlock05 .button01 {
        text-align: center;
    }
    #select-entry-costume {
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        padding: 20px;
        color: #DC0037;
    }
    .reserve-entry-confirm .dateSelect .title {
        padding: 0 0 10px;
    }
    .reserve-entry-confirm .dateSelect .inputField._radio {
        padding: 0 0 20px;
    }
    .reserve-entry-confirm .form_body {
        padding: 0 20px ;
    }


    /* 申込内容変更確認 */
    .registForm table td._radio  {
        flex-direction: column;
        width: fit-content;
        min-width: 60%;
        margin: 0 auto;
        padding: 0 0 30px;
    }
    .registForm table td._radio input[type="radio"] {
        margin: 0 auto;
    }
    .registForm table td._radio label {
        margin: 7px 0 15px 0;
        text-align: center;
    }

    /* 20230113 追加 */
    .btnBlock02 .return_btn {
        margin-top: 15px;
    }
    .headingL_02 {
        font-size: 1.8rem;
    }
    .reserve-entry-confirm .confirmationForm02_img span {
        width: 48%;
        padding: 0 0 10px;
        margin-right: 2%;
    }
    .all_select {
        padding: 5px 0 0;
    }

    /* 日程・店舗検索 エラー */
    .error-photodate,
    .error-outingdate {
        padding-right: 0;
        text-align: left;
    }

    /* 20230306 追加 */
    .store_name {
        margin: 0 auto 40px;
        font-size: 1.8rem;
        padding: 5px 12%;
    }
    .headerInfo {
        position: absolute;
        right: 60px;
        top: 15px;
        padding: 0;
        border-radius: 10px;
        border: 1px solid #ddd;
        /* background-color: unset; */
        width: 40px;
        height: 40px;
    }
    .headerInfo .info_item {
        display: block;
        padding: 9px;
    }
    .headerInfo .fa-solid {
        font-size: 2rem;
    }

    /* add20230425 マイページ 新着メッセージ */
.message_info{
    margin: 0 0 30px 0;
}
.message_info.mb30{
    margin: 0 0 30px 0;
}

/* 20230629 追加　ページトップへスクロール */
#pagetop{
	right: 10px;
    bottom: 70px;
	width: 50px;
    height: 50px;
	font-size: 1.4rem;
	/* width: 35px; */
}

}


@media screen and (max-width: 500px) {
    .cardList_item {
        height: 245px;
    }
    .cardLis02 .cardList_item .image {
        height: 245px;
    }
}