

/* 注 この環境はデモとして見せたいためにcss_extension.cssファイルにCSSを追記しています。CSSの読み込み順的に!importantをつけてますが、本来指定するべきHTMLの<style></style>タグ内で指定すれば本来は不要です。 */
@media screen and (max-width:768px) {
    body {
        overflow-y: auto !important;
    }
    /* 
    .mdc-drawer-app-content {
        height: auto !important;
    }
     */
    .split {
        grid-template-columns: minmax(0, 1fr) !important;
	width: auto!important;
    }

    .template_preview {
        min-height: 90vh !important;
    }
}

/* 下記はiframeタグの#document配下のbodyに対して指定（ヘッダーの上に隙間ができているのを詰めるため） */
@media screen and (max-width:768px) {
    body {
        transform: none !important;
        /* もしくはstyleでtransform:scale(1);を上書き */
    }
}



/* SEO設定 */
@media screen and (max-width:768px) {
    .mdc-text-field {
        width: 100%!important;
    }
    .lang_tab_contents .mdc-form-field {
        display: block!important;
    }
}

/* カラー/フォント設定 */
/* LPモード→カラー/フォント設定 */
@media screen and (max-width:768px) {
    .color-picker-hue {
        width: 100%!important;
    }
}

/* テンプレート一覧 */
@media screen and (max-width:768px) {
    .drag-handle,
    .url {
        display: none!important;
    }
}

/* LPモード編集画面 */

@media screen and (max-width:768px) {
    .cms_edit_caption {
        max-width: 40px;
        right: 3px;
        left: initial !important;
        overflow: hidden;
        transition: max-width 0.3s;
    }

    .cms_edit_caption.open {
        max-width: 100%;
    }
}


/* LPモード→パーツ編集 */
@media screen and (max-width:768px) {  
    .fileuploader-input {
	flex-direction: column;
    }  
    .mdc-form-field,
    .fileuploader.fileuploader--compact,
    .fileuploader-input-caption {
        width: 100%;
    }
    .fileuploader-input-caption span {
        word-break: break-word;
    }
    
    .fileuploader-caption label {
        margin-right: 0;
    }
}

/* LPモード→相互リンク設定 */
@media screen and (max-width:768px) {  
    #cross_link_list > ul > li > div {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1.5rem;
    }

    .mdc-switch {
	margin-right: 1rem;
    }
}

/* LPモード→ディレクトリ選択 */
@media screen and (max-width:1080px) {  
    #primaryNav {
        flex-direction: column;
    }
}

/* LPモード→パーツ編集 */
@media screen and (max-width:768px) {  
    .contents div .form-field-container {
	flex-direction: column;
    }
}

/* パーツ編集　カラーピッカー */
@media screen and (max-width:768px) {  
  .color-picker-pallet,
  .color-picker-sample {
    width: 50%!important;
  }
}

/* LPモード　履歴 */
@media screen and (max-width:768px) {  
  .mdc-dialog__actions div .mdc-form-field{
    justify-content: center;
  }
  .mdc-dialog__content{
    min-width: auto!important;
  }

}

/* ディレクトリ新規作成 */
.mdc-dialog__content div span {
    white-space: inherit!important;
    overflow: inherit!important;
}