@charset "utf-8";

/* プレビューエリア */
.preview_area {
    border: lightgray solid 1px;
    display: grid;
    grid-template-columns: 1fr 70px 500px 70px 1fr;
    grid-template-rows: 550px 40px 1fr;
}
.preview_main {
    grid-row: 1;
    grid-column: 3;
    margin: auto;
}
/* 説明文 */
.preview_title p {
    margin-bottom: 5px;
}

/* 蓋の開閉ボタン */
.lid_button {
    grid-row: 2;
    grid-column: 2 / 5;
    display: flex;
    justify-content: center;
    margin-top: 5px;
    margin-top: 10px;
}
.lid_button button {
    font-size: large;
    border-radius: 5px;
    border: 1px #467ada solid;
    height: 33px;
}

/* 矢印 */
.arrow_round {
    position: relative;
    display: inline-block;
    padding: 25px;
    border-radius: 50%;
    background: rgb(143, 170, 220);
    margin: auto;
}
.arrow_round::before {
    /* 2辺だけ線を引いた四角を回転させて、くの字の矢印を描画する */
    content: '';
    width: 20px;
    height: 20px;
    border-top: solid 5px #fff;
    border-right: solid 5px #fff;
    position: absolute;
    left: 5px;
    top: 11px;
}
.arrow_round:hover {
    cursor: pointer;
    background: rgb(177, 201, 247);
}
.arrow_round.arrow_left {
    grid-row: 1;
    grid-column: 2;
}
.arrow_round.arrow_right {
    grid-row: 1;
    grid-column: 4;
}
.arrow_round.arrow_left::before {
    transform: rotate(-135deg);
    left: 15px;
}
.arrow_round.arrow_right::before {
    transform: rotate(45deg);
    left: 8px;
}

/* ケース */
.cube {
    position: relative;
    transform-style: preserve-3d;
    margin-top: 100px;
}

.no_preview {
    margin: 30px;
}

.change_view_buttons {
    margin: 10px;
    grid-row: 3;
    grid-column: 2 / 5;
    display: flex;
    justify-content: space-between;
}

/* 面 */
.cube > div {
    position: absolute;
}

/* 視点切り替えボタン */
.change_view_buttons button {
    font-size: large;
    border-radius: 5px;
    border: 1px #467ada solid;
    width: 70px;
}
.change_view_buttons button:hover {
    background: #a9ceec;
}
.change_view_buttons button.active {
    background: #467ada;
    color: #fff;
}

/* 袋取っ手 */
.handle_bag {
    background: rgba(255, 255, 255, 1);
}
.handle_bag_inner {
    border: 1px solid #000;
}
/* 穴取っ手 */
.handle_hole {
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
}
.handle_hole_inner {
    background: #000;
}
/* さげ手 */
.handle_hand {
    position: absolute;
}
.handle_hand_bottom {
    background: #fff;
}
/* 貫通カット穴 */
.handle_penetrate_cut {
    background: #000;
}
/* 取っ手の親要素（ケースの側面） */
.cube_side {
    /* 子要素を左右方向の真ん中に配置したり、等間隔に配置する */
    display: flex;
    justify-content: space-evenly;
}

/* ベルトの親要素（ケース本体と同じ立方体。透明） */
.belt_parent {
    background-color: rgba(255, 255, 255, 0);
    /* 子要素を左右方向の真ん中に配置したり、等間隔に配置する */
    display: flex;
    justify-content: space-evenly;
}
/* ベルト本体 */
.belt_body {
    height: 100%;
    background: #000;
}

/* 面ファスナー */
.fastener {
    background: #fff;
    position: absolute;
}
/* 境界線（基本色） */
.border_base {
    border: solid 1px #000;
}
/* 境界線（部材基本色） */
.border_parts_base {
    border: solid 1px #000;
}
/* 境界線（本体が黒色の場合） */
.border_for_black {
    border: solid 1px #fff;
}
/* 境界線（部材が黒色の場合） */
.border_parts_for_black {
    border: solid 1px #fff;
}
/* 境界線（基本色・上だけ） */
.border_base_top {
    border-style: solid none none none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上だけ） */
.border_for_black_top {
    border-style: solid none none none;
    border-width: 1px;
    border-color: #fff;
}
/* 境界線（基本色・右だけ） */
.border_base_right {
    border-style: none solid none none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・右だけ） */
.border_for_black_right {
    border-style: none solid none none;
    border-width: 1px;
    border-color: #fff;
}
/* 境界線（基本色・下だけ） */
.border_base_bottom {
    border-style: none none solid none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・下だけ） */
.border_for_black_bottom {
    border-style: none none solid none;
    border-width: 1px;
    border-color: #fff;
}
/* 境界線（基本色・左だけ） */
.border_base_left {
    border-style: none none none solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・左だけ） */
.border_for_black_left {
    border-style: none none none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・上と右） */
.border_base_top_right {
    border-style: solid solid none none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上と右） */
.border_for_black_top_right {
    border-style: solid solid none none;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・上と下） */
.border_base_top_bottom {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上と下） */
.border_for_black_top_bottom {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・上と左） */
.border_base_top_left {
    border-style: solid none none solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上と左） */
.border_for_black_top_left {
    border-style: solid none none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・上と右と下） */
.border_base_top_right_bottom {
    border-style: solid solid solid none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上と右と下） */
.border_for_black_top_right_bottom {
    border-style: solid solid solid none;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・上と右と左） */
.border_base_top_right_left {
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上と右と左） */
.border_for_black_top_right_left {
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・上と下と左） */
.border_base_top_bottom_left {
    border-style: solid none solid solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・上と下と左） */
.border_for_black_top_bottom_left {
    border-style: solid none solid solid;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・右と下） */
.border_base_right_bottom {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・右と下） */
.border_for_black_right_bottom {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・右と左） */
.border_base_right_left {
    border-style: none solid none solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・右と左） */
.border_for_black_right_left {
    border-style: none solid none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・下と左） */
.border_base_bottom_left {
    border-style: none none solid solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・下と左） */
.border_for_black_bottom_left {
    border-style: none none solid solid;
    border-width: 1px;
    border-color: #fff;
}

/* 境界線（基本色・右と下と左） */
.border_base_right_bottom_left {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（本体が黒色の場合・右と下と左） */
.border_for_black_right_bottom_left {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #fff;
}
/* 境界線（フレームの基本） */
.border_frame_base {
    border: solid 1px #000;
}
/* 境界線（フレームが黒色の場合） */
.border_frame_for_black {
    border: solid 1px #fff;
}
/* 境界線（コーナーパーツの基本） */
.border_corner_base {
    border: solid 1px #000;
}
/* 境界線（コーナーパーツが黒色の場合） */
.border_corner_for_black {
    border: solid 1px #fff;
}
/* フレーム */
.frame_c {
    position: absolute;
}
/* 天面、底面ビューでの、フレームの厚みを見せる為の要素 */
.frame_top_thickness {
    display: grid;
}

.frame_top_thickness_1 {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}
.frame_top_thickness_2 {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
}
.frame_top_thickness_3 {
    grid-column: 3 / 3;
    grid-row: 1 / 1;
}
.frame_top_thickness_4 {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
}
.frame_top_thickness_5 {
    grid-column: 3 / 3;
    grid-row: 2 / 2;
}
.frame_top_thickness_6 {
    grid-column: 1 / 1;
    grid-row: 3 / 3;
}
.frame_top_thickness_7 {
    grid-column: 2 / 2;
    grid-row: 3 / 3;
}
.frame_top_thickness_8 {
    grid-column: 3 / 3;
    grid-row: 3 / 3;
}

/* 天面、底面ビューでの、コーナーパーツの厚みを見せる為の要素 */
.corner_top_thickness {
    display: grid;
}
.corner_top_thickness_1 {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}
.corner_top_thickness_2 {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
}
.corner_top_thickness_3 {
    grid-column: 4 / 4;
    grid-row: 1 / 1;
}
.corner_top_thickness_4 {
    grid-column: 5 / 5;
    grid-row: 1 / 1;
}
.corner_top_thickness_5 {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
}
.corner_top_thickness_6 {
    grid-column: 5 / 5;
    grid-row: 2 / 2;
}
.corner_top_thickness_7 {
    grid-column: 1 / 1;
    grid-row: 4 / 4;
}
.corner_top_thickness_8 {
    grid-column: 5 / 5;
    grid-row: 4 / 4;
}
.corner_top_thickness_9 {
    grid-column: 1 / 1;
    grid-row: 5 / 5;
}
.corner_top_thickness_10 {
    grid-column: 2 / 2;
    grid-row: 5 / 5;
}
.corner_top_thickness_11 {
    grid-column: 4 / 4;
    grid-row: 5 / 5;
}
.corner_top_thickness_12 {
    grid-column: 5 / 5;
    grid-row: 5 / 5;
}

/* 厚み用パーツの境界線（基本色・上と下） */
.border_thickness_base_top_bottom {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（パーツが黒色の場合・上と下） */
.border_thickness_for_black_top_bottom {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・上と左） */
.border_thickness_base_top_left {
    border-style: solid none none solid;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・上と左） */
.border_thickness_for_black_top_left {
    border-style: solid none none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・上と右と下） */
.border_thickness_base_top_right_bottom {
    border-style: solid solid solid none;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・上と右と下） */
.border_thickness_for_black_top_right_bottom {
    border-style: solid solid solid none;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・右と左） */
.border_thickness_base_right_left {
    border-style: none solid none solid;
    border-width: 1px;
    border-color: #000;
}
/* 境界線（パーツが黒色の場合・右と左） */
.border_thickness_for_black_right_left {
    border-style: none solid none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・上と下と左） */
.border_thickness_base_top_bottom_left {
    border-style: solid none solid solid;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・上と下と左） */
.border_thickness_for_black_top_bottom_left {
    border-style: solid none solid solid;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・上と右） */
.border_thickness_base_top_right {
    border-style: solid solid none none;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・上と右） */
.border_thickness_for_black_top_right {
    border-style: solid solid none none;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・右と下） */
.border_thickness_base_right_bottom {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・右と下） */
.border_thickness_for_black_right_bottom {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・上と右と左） */
.border_thickness_base_top_right_left {
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・上と右と左） */
.border_thickness_for_black_top_right_left {
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・下と左） */
.border_thickness_base_bottom_left {
    border-style: none none solid solid;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・下と左） */
.border_thickness_for_black_bottom_left {
    border-style: none none solid solid;
    border-width: 1px;
    border-color: #fff;
}

/* 厚み用パーツの境界線（基本色・右と下と左） */
.border_thickness_base_right_bottom_left {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #000;
}
/* 厚み用パーツの境界線（パーツが黒色の場合・右と下と左） */
.border_thickness_for_black_right_bottom_left {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #fff;
}

/* 羽フタ */
.wing_flap {
    display: grid;
}
.wing_flap_child {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
}

/* ファイルボックス型 */
/* 右側面：斜めになる部分：borderで斜めの線を描画するので、斜めの部分自体に枠線を描画できない
その為、同じ大きさの三角形を2つ作る（1つは背景が枠線の色、1つは背景がケース本体の色）
そして、2つの三角形を少しずらすことで、斜めの部分に枠線が見えるようにする */
.henkei_right1_1 {
    grid-column: 1;
    grid-row: 1;
}
.henkei_right1_2 {
    /* 三角形にして、背景をケース本体と同じ色にする要素 */
    grid-column: 2 / 3;
    grid-row: 1;
}
.henkei_right1_3 {
    /* 三角形にして、背景を枠線と同じ色にする要素 */
    grid-column: 3 / 4;
    grid-row: 1;
}
.henkei_right2 {
    grid-column: 1 / 5;
    grid-row: 2;
}
.henkei_left1_1 {
    grid-column: 1;
    grid-row: 1;
}
.henkei_left1_2 {
    /* 三角形にして、背景をケース本体と同じ色にする要素 */
    grid-column: 2 / 3;
    grid-row: 1;
}
.henkei_left1_3 {
    /* 三角形にして、背景を枠線と同じ色にする要素 */
    grid-column: 3 / 4;
    grid-row: 1;
}
.henkei_left2 {
    grid-column: 1 / 5;
    grid-row: 2;
}
/* 前面 */
.henkei_front {
    grid-row: 2;
}

/* 緩衝材 */
.preview_cushion {
    border: 1px solid #000;
}

/* フタ裏緩衝材 */
.cushion_lid_back {
    width: 90%;
    height: 90%;
    margin: auto;
    border: 1px solid #000;
}

/* ---------------------------------------------------- */
/* シート */
.preview_area_sheet {
    border: lightgray solid 1px;
}
.sheet_area {
    display: flex;
    flex-direction: row;
    width: 510px;
    height: 500px;
    margin: 10px auto;
}
.sheet_icon {
    width: 32px;
    margin: 10px;
}
.sheet_guide_explain_area {
    padding: 10px;
}
.sheet_guide_title {
    border-radius: 10px;
    background-color: lightblue;
    width: 13em;
    text-align: center;
}
.sheet_guide_explain {
    margin-top: 0px;
}
.sheet_guide_icon_area {
    display: flex;
    flex-direction: row;
}
.sheet_guide_icon_title {
    position: absolute;
    margin-top: -0.8em;
    margin-left: 1em;
    background-color: #fff;
}
.sheet_guide_icon {
    display: flex;
    flex-direction: row;
    border: lightgray solid 1px;
    border-radius: 5px;
    margin-left: 8px;
}
.sheet_guide_icon img {
    width: 80px;
    margin: 20px 10px;
}
.c_cut {
    position: absolute;
}

/* 穴あけ */
.punching {
    position: absolute;
}

/* ガイド線 */
.guide_line {
    position: absolute;
}

/* ガイド線（基本） */
.border_base_guide_line {
    border-style: dashed;
    border-width: 1px;
    border-color: #000;
}

/* ガイド線（本体が黒色の場合） */
.border_for_black_guide_line {
    border-style: dashed;
    border-width: 1px;
    border-color: #fff;
}

/* ガイド線（基本）：CカットのA */
.border_base_guide_line_ccut_right {
    border-right-style: dashed;
    border-width: 1px;
    border-color: #000;
}

/* ガイド線（本体が黒色の場合）：CカットのA */
.border_for_black_guide_line_ccut_right {
    border-right-style: dashed;
    border-width: 1px;
    border-color: #fff;
}

/* ガイド線（基本）：CカットのD */
.border_base_guide_line_ccut_left {
    border-left-style: dashed;
    border-width: 1px;
    border-color: #000;
}

/* ガイド線（本体が黒色の場合）：CカットのD */
.border_for_black_guide_line_ccut_left {
    border-left-style: dashed;
    border-width: 1px;
    border-color: #fff;
}

@media screen and (max-width:750px) {
    /* プレビューエリア */
    .preview_area {
        grid-template-columns: 1fr 240px 1fr;
        grid-template-rows: 260px 40px 1fr;
    }
    .preview_main {
        grid-column: 2;
    }
    .cube {
        margin-top: 70px;
    }
    
    .lid_button {
        grid-column: 1 / 4;
    }
    
    .arrow_round.arrow_left {
        grid-column: 1;
    }
    
    .arrow_round.arrow_right {
        grid-column: 3;
    }
    .change_view_buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        gap: 10px;
        grid-column: 1 / 4;
    }
 
    .sheet_area {
        width: 100%;
        height: 240px;
    }
    .sheet_guide_icon_area {
        flex-direction: column;
    }
    .sheet_guide_icon_group {
        margin-top: 15px;
    }
    .sheet_guide_icon img {
        width: 70px;
    }
}