@charset "utf-8";

/* -------------- */
/* 各画面共通設定 */
/* -------------- */
/* ページ全体の背景色 */
body {
    background-color: #f1f3f8;
    -webkit-text-size-adjust: 100%;
    font-family: Meiryo;
}

/* ヘッダー */
#header,
.header,
#footer {
    /*background: #999;*/
    color: #fff;
    text-align: center;
    height: 60px;
    /*padding-top: 8px;*/
}

/* ヘッダーメニュー */
#fixing-base{
    box-shadow:0px 0px 6px 3px #dfdfdf;
    /*position: fixed;*/
    /*z-index: 999;*/
    background: rgba(255,255,255,.9);
    /*left: 0;*/
}

/* ヘッダーのロゴ */
.spNaviLog .imgWrap img{
    width: 200px;
	padding-top: 15px;
}
.spNaviLog{
    width: calc(100%);
}

.note{
    width: 98%;
	padding-right: 10px;
}


/* 封筒シミュレーター文字 */
h1{
	font-size: 18px;										/* 文字大きさ */
    display: inline-flex;
}

/* liタグ全般 */
/* 貼りイメージ、展開図タブ・表裏ボタン */
.menu li{
	font-size: 12px;										/* 文字大きさ */
	float: left;											/* 左寄せ表示 */
}

/* パンくずスタイル設定 */
div#heder-menu {
    margin-left: 4px;
    margin-bottom: 5px;
    margin-top: 65px;
}

#scroll-menu {
    height: 30px;
}

#scroll-menu .scroll-menu-inner {
    list-style-type: none;
    width: 100%;
    height: 100%;
    padding: 0;
}

/* パンくず同士の表示間隔の設定 */
#scroll-menu li {
    float: left;
    margin-left: 8px;
	margin-right: 8px;
    height: 100%;
}

/* パンくず通常時 */
#scroll-menu a {
    display: block;
    height: 100%;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 12px;
    line-height: 30px;
    background: #005eb7;
	color: #ffffff;
	text-decoration: none;
    position: relative;
}

/* Σ部分の設定 */
#scroll-menu a::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-width: 15px 0 15px 8px;
    border-style: solid;
    border-color: #005eb7 #005eb7 #005eb7 transparent;
    left: -7px;
}

/* ＞部分の設定 */
#scroll-menu a::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 8px solid #005eb7;
    right: -7px;
}

/* パンくずマウスホバー時 */
#scroll-menu a:hover {
    background: #0a95e0;
}

/* Σ部分の設定 */
#scroll-menu a:hover::before {
    border-color: #0a95e0 #0a95e0 #0a95e0 transparent;
}

/* ＞部分の設定 */
#scroll-menu a:hover::after {
    border-left-color: #0a95e0;
}

/* パンくず選択時 */
#scroll-menu li.active a {
    background: #e87900;
}

/* Σ部分の設定 */
#scroll-menu li.active a::before {
    border-color: #e87900 #e87900 #e87900 transparent;
}

/* ＞部分の設定 */
#scroll-menu li.active a::after {
    border-left-color: #e87900;
}

/* ブラウザ幅600px以下でactiveなStep以外の文字を表示しない */
@media screen and (max-width: 600px) {
    #scroll-menu a {
        font-size: 0px;
    }

    #scroll-menu li.active a {
        font-size: 12px;
    }
}

/* 各STEP画面タイトル */
h2 {
	font-size: 20px;
	margin-top:10px;
	margin-bottom:15px;
}

/* ヘルプ */
h2 a{
	float: right;
	margin-right: 8px;
    text-decoration: none;
}

/* 次へ・前へボタン */
a.nextStep {
    display:block;
    background-color: #005eb7;
    border: none;
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 30px;
    cursor: pointer;
    position: relative;
}

/* ＞部分の設定（次へボタン） */
a.next::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 8px solid #005eb7;
    right: -8px;
}

/* ＜部分の設定（前へボタン） */
a.back::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 8px solid #005eb7;
    left: -8px;
}

/* 次へボタンを＞で区切る */
div.next {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.next::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-width: 15px 0 15px 8px;
    border-style: solid;
    border-color: #f1f3f8 #f1f3f8 #f1f3f8 transparent;
    left: -8px;
}

div.next::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 8px solid #f1f3f8;
    right: -8px;
}

/* 前へボタンを＜で区切る */
div.back {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.back::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 8px solid #f1f3f8;
    left: -8px;
}

div.back::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-width: 15px 8px 15px 0;
    border-style: solid;
    border-color: #f1f3f8 transparent #f1f3f8 #f1f3f8;
    right: -8px;
}

/* マウスオーバー時ボタン色を変える */
a.nextStep:hover {
    background-color: #0a95e0;
}

a.next:hover::after {
    border-left-color: #0a95e0;
}

a.back:hover::before {
    border-right-color: #0a95e0;
}

/* 貼りイメージ表示部分 */
#imageArea{
	background-color: #ffffff;
	border:1px solid #ffffff;
}

/* 展開図表示部分 */
#tenkaiArea{
	background-color: #ffffff;
	border:1px solid #ffffff;
}

/* 封筒描画部分 */
canvas{
	border:0px solid #000;
}


#imageTd {
    display: block;
    width: 55%;
}

#c1 {
    width: 45% !important;
    height: 45% !important;
}

#c2 {
    width: 45% !important;
    height: 45% !important;
}

#c3 {
    width: 60% !important;
    height: 60% !important;
}

@media screen and (max-width: 4096px) {
}

@media screen and (max-width: 736px) {
    #imageTd {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 90%;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 5%;
        margin-right: 5%;
    }

    #c1 {
        width: 70vmin !important;
        height: 70vmin !important;
    }

    #c2 {
        width: 70vmin !important;
        height: 70vmin !important;
    }

    #c3 {
        width: 100vmin !important;
        height: 100vmin !important;
    }
    #c4 {
        width: 80vmin !important;
        height: 80vmin !important;
    }
}

/* 封筒情報入力部分 */
@media screen and (max-width: 4096px) {
    .settingArea {
        float: left;
        padding: 0px 4px 2px 4px;
        width: 40%;
        max-width: 400px;
        min-height: 600px;
        border: none;
    }

    .settingAreaPC {
        float: left;
        padding: 0px 4px 2px 4px;
        width: 40%;
        min-height: 570px;
        border: none;
        margin-left: 10px;
    }

    .settingAreaSP {
        width: 98% !important;
        padding: 0px 4px 2px 4px;
    }
}

@media screen and (max-width: 736px) {
    .settingArea {
        width: 98%;
        max-width: none;
        padding: 0px 4px 2px 4px;
    }

    .settingAreaPC {
        width: 98%;
        max-width: none;
        padding: 0px 4px 2px 4px;
    }
}

/* placeholder文字色 */
textarea:-moz-placeholder{
	color:#999999;
}
textarea:-ms-input-placeholder{
	color:#999999;
}
textarea::-webkit-input-placeholder{
	color:#999999;
}

/* 数値入力欄サイズ調整 */
input.number,
input.numberSize{
	width: 80px;
}

/* 左上トグルボタン押下時に出てくるメニュー */
#urlLink ul li {
    color: #333;
}

/* 右上トグルボタン押下時に出てくるメニュー */
#global-nav ul li {
    float: left;
    position: relative;
}

#global-nav ul li a {
    padding: 0 20px;
}

/* Toggle Button */
#nav-toggle-1 {
    display: block;
    left: 12px;
}

#nav-toggle-2 {
    display: none;
    right: 12px;
}

#nav-toggle-3 {
    display: none;
}

#linkTd {
    display: table-cell;
}

.nav-toggle {
    position: absolute;
    top: 18px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}

.nav-toggle div {
    position: relative;
}

.nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

.nav-toggle span:nth-child(1) {
    top: 0;
}

.nav-toggle span:nth-child(2) {
    top: 11px;
}

.nav-toggle span:nth-child(3) {
    top: 22px;
}

/* #nav-toggle-1 切り替えアニメーション */
.mm-opening #nav-toggle-1 span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}

.mm-opening #nav-toggle-1 span:nth-child(2) {
    width: 0;
    left: 50%;
}

.mm-opening #nav-toggle-1 span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

html.mm-background *.ui-spinner,
html.mm-background #PaperChoiseNote,
html.mm-background #showToolsButton,
html.mm-background *.nextStep {
    display: none;
}

/* #nav-toggle-2 切り替えアニメーション */
.open #nav-toggle-2 span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}

.open #nav-toggle-2 span:nth-child(2) {
    width: 0;
    left: 50%;
}

.open #nav-toggle-2 span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

/* #global-nav スライドアニメーション */
.open #global-nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(556px);
    -webkit-transform: translateY(556px);
    transform: translateY(556px);
}


@media screen and (max-width: 4096px) {
    #global-nav ul {
        display: none;
    }
    .banner {
        display: block;
    }
    .close-button {
        display: none;
    }
}

@media screen and (max-width: 736px) {
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -505px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        z-index: 1;
    }

    #global-nav ul {
        display: block;
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 11px;
    }

    #global-nav ul li {
        float: none;
        position: static;
    }

    #global-nav ul li:after {
        display: none;
    }

    #header #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }

    #nav-toggle-2 {
        display: block;
    }

    #nav-toggle-3 {
        display: block;
    }

    #step1menu li {
        display: none;
    }
    .banner {
        display: none;
    }
    .close-button {
        display: block;
    }

    @media screen and (orientation: portrait) {
        .height-100 {
            height: 115%;
        }
    }
    @media screen and (orientation: landscape){
        .height-100 {
            height: 130%;
        }
    }   
}

.modal-body {
    /*max-height: 100vmax;*/
    max-height: none;
}

.modal .large{
    height: 550px;
}
.modal .large .modal-body {
    min-height:450px;/* - height - 100*/
    max-height:450px;/* - height - 100*/
}

.modal .modal-SP {
    /*width: 100% !important;*/
}

@media screen and (max-width: 736px){
    @media screen and (orientation: landscape){
        .modal.fade.in{
            top: 20%;
        }
    }
}

.infoArea {
    margin: 5px auto;
    padding: 10px;
    border: 1px solid #999;
}

.positionTable {
    width: 90%;
    margin: 5px auto;
}
.positionTable tr td {
    border: none;
}
.positionTable td {
    width: 25px;
}

#imageViewer {
    float: left;
    width: 50%;
    height: 100%
}

#slideContent {
    float: left;
    width: 50%;
    height: 100%
}

#header {
    clear: both;
}

.left-0 {
    left: 0;
}

.clearFix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearFix {
	min-height: 1px;
	/*display: inline-block;!*インラインレベル表示設定*!*/
}

.dialog table, .dialog tr, .dialog th, .dialog td{
	border:1px solid #ccf;
	border-collapse: collapse;
}

.dialog th {
    padding: 6px;
    text-align: left;
    vertical-align: top;
    color: #333;
    background-color: #f1f3f8;
    border: 1px solid #b9b9b9;
}
.dialog td{
	padding: 6px;
	background-color: #fff;
	border: 1px solid #b9b9b9;
}

.dialogArea{
	/*height: 300px;*/
	overflow: scroll;
}

.dialogToolArea{
	width: 810px;
	height: 550px;
	overflow: scroll;
	font-size:0.8em;
}

/* ------ */
/* STEP.1 */
/* ------ */
/* 表示切替ボタンを囲んでいる部分 */
#step1menu{
	background-color: #f1f3f8;								/* 背景色の指定 */
	margin: 10px;											/* 表示位置の調整（高さ） */
	height: 40px;											/* 灰色部分のサイズ調整 */
	padding: 5px;											/* 余白部分の調整 */
}
/* 封筒表示切替ボタン（表裏）部分のスタイル設定 */
.menu li.step1_kind{
	border: none;
	margin-top: 15px;										/* 表示位置の調整（高さ） */
	margin-left: 5px;										/* ボタン同士の間隔 */
}

/* 表裏・表・裏ボタン　※実際にはaタグなので注意 */
.menu li.step1_kind a{
	background-color: #ffffff;								/* 背景色の指定 */
	border: none;											/* 枠線を消す */
	text-decoration: none;									/* 文字の下線を消す */
	font-size: 12px;										/* 文字サイズ */
	color: #000000;											/* 文字色 */
	margin-left: 0px;										/* 横との間隔 */
	margin-right: 0px;										/* 横との間隔 */
	padding: 10px;											/* 余白部分の調整（ボタンサイズになっている） */
	cursor: pointer;										/* マウスポインター変更 */
	box-shadow: -1.8px -1.8px rgba(0, 0, 0, 0.25) inset;	/* 影をつける */
}

/* 表裏・表・裏ボタンマウスホバー時 */
.menu li.step1_kind a:hover {
	padding-top: 11px;										/* 余白部分の調整（ボタンサイズになっている） */
	padding-left: 10.5px;									/* 余白部分の調整（ボタンサイズになっている） */
	box-shadow: inset -3.3px -3.3px rgba(0, 0, 0, 0.20);	/* 影をつける */
}

/* 表裏・表・裏ボタン選択時 */
.menu li.step1_kind.active a {
	padding: 10px;											/* 余白部分の調整（ボタンサイズになっている） */
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2) inset;	/* 影をつける */
}

/* 貼りイメージ・展開図タブ */
.menu li.view_kind{
	border: none;											/* 枠線を消す */
	margin-top: 10px;										/* 上との間隔 */
	margin-left: 5px;										/* 横との間隔 */
}

#changeViewMenu ul.menu li a {
	display: block;											/* ブロック表示 */
	border: 1px solid #dddddd;								/* 枠線の設定 */
	background-color: #dddddd;								/* 背景色の指定 */
	text-decoration: none;									/* 文字の下線を消す */
	color: #000000;											/* 文字色 */
	text-align: Left;										/* 文字左寄せ */
	width: 95px;											/* 幅の調整 */
	height: 8px;											/* 高さの調整 */
	margin-left: 10px;										/* 横との間隔 */
	padding: 8px 8px;										/* 余白部分の調整 */
	border-top-left-radius: 8px;							/* 角を丸くする（左） */
	border-top-right-radius: 8px;							/* 角を丸くする（右） */
	position: relative;										/* 相対位置にて配置する */
	z-index: 0;												/* 最前面にて表示 */
}

/* タブactive時のスタイル設定 */
#changeViewMenu>.menu>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus{
	border: 1px solid #ffffff;								/* 枠線の設定 */
	background-color: #ffffff;								/* 背景色の指定 */
	color: #555555;											/* 文字色 */
}

/* 封筒種類画像の表示位置調整 */
div#no1 div.clearFix{
	/*margin-top: 45px;*/
    width: 306px;
    margin: 0 auto;
}

/* 封筒種類選択用の画像のスタイル設定 */
div#no1 .intext{
    float: left;
    margin:10px;
    width:82px;
    height:82px;
    border:none;
    cursor:pointer;
    background-color: #ffffff;
    box-shadow: -1.8px -1.8px rgba(0, 0, 0, 0.25) inset;
    padding: 0px;
}

div#no1 img{
	/*float: left;*/
	/*margin:10px;*/
	/*width:82px;*/
	/*height:82px;*/
	/*border:none;*/
	/*cursor:pointer;*/
	/*background-color: #ffffff;*/
	/*box-shadow: -1.8px -1.8px rgba(0, 0, 0, 0.25) inset;*/
	/*padding: 0px;*/
}

div#no1 img:hover{
	box-shadow: inset -3.3px -3.3px rgba(0, 0, 0, 0.15);
	width:81px;
	height:81px;
	padding-bottom: 1px;
	padding-right: 1px;
}

div#no1 img.active{
	width:82px;
	height:82px;
	background-color: #ffcb00;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
	padding: 0px;
}

/* 画像の中に文字を表示 */
.intext {/*親div*/
    position: relative;/*相対配置*/
}

.intext p {
    position: absolute;/*絶対配置*/
    font-size: 11px;
    font-weight: 500;
    color: black;/*文字は白に*/
    top: 100%;
    left: 0;
}
.intext img {
    width: 100%;
}
/* ------ */
/* STEP.2 */
/* ------ */
dl{
    width: 98%;
}

/*!* 封筒サイズ設定グループ *!*/
/*div#no2 p{*/
	/*font-size: 14px;*/
/*}*/

/*!* パーツサイズ設定グループ *!*/
/*div#no2 p{*/
	/*font-size: 14px;*/
/*}*/

/* ボタン説明文字サイズ */
div#no2 p{
	font-size: 90%;
	margin-left: 5px;
    width: 98%;
}

/* よくあるサイズから選ぶボタン */
div#no2 input[type=button]{
	background: #005eb7;
	color: #ffffff;
	font-size: 20px;
	height: 45px;
	margin-top: 5px;
	border-style: none;
	border-radius: 6px;
	box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
}

/* マウスオーバー時ボタン色を変える */
div#no2 input[type=button]:hover {
	background-color: #0a95e0;
}

/* 封筒サイズ・パーツサイズ文字 */
div#no2 dl dt{
	background: #ffffff;
	font-size: 16px;
	padding: 10px;
	margin-top: 20px;
}

/* 封筒サイズ・パーツサイズ設定場所 */
div#no2 dl dd{
	background: #ffffff;
	padding: 10px;
	margin-top: 10px;
}

/* 幅・天地文字サイズ */
div#no2 table td{
	font-size: 16px;
}

/* 数値入力欄の表示調整 */
div#no2 table span.ui-spinner{
	margin: 5px;
}

/* 数値入力欄の文字スタイル設定 */
div#no2 input[type=text]{
	font-size: 16px;
	font-weight: normal;
	text-align: right;
}

/* 定型封筒サイズから選ぶモーダルの調整 */
/* モーダル幅表示位置の調整 */
#SizeSelectDialog {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 80%;
    margin-top: 55px;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
    border:2px solid #aaa;
    background:#fff;
    z-index: 1451;
}

/* モーダルの閉じる */
.modal-header .close {
    height: 20px;
    opacity: 1;
    color: red;
}

/* 各サイズ表示領域の設定 */
#sizeTable {
    width: 100%;
    /*margin-bottom: 16px;*/
}

/* 各サイズ表示領域の設定 */
#sizeTable th,
#sizeTable td {
    padding: 8px;
    line-height: 16px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}

/* スマホ版表示の詳細設定 */
@media screen and (max-width: 736px) {
    #SizeSelectDialog {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    #sizeTable th,
    #sizeTable td {
        font-size: 12px;
    }
}

/* ------ */
/* STEP.3 */
/* ------ */
/* 窓の有無文字サイズ */
div#no3 p{
	font-size: 90%;
    margin-left: 5px;
    width: 98%;
}

div#no3 div:nth-of-type(3),
div#no3 div:nth-of-type(4) {
	background-color: #ffffff;
    width: 98%;
}

/* 窓追加ボタン */
div#no3 #step3Button1Add,
div#no3 #step3Button2Add{
	height: 30px;
	background: #ffffff;
	color: #005eb7;
	border-radius: 4px;
	border-style: none;
	box-shadow: 2px 2px 2px rgba(255,255,255,0.2), inset -1px -1px 2px 2px rgba(0,0,0,0.2);
	font-size: 16px;
	margin: 4px;
}

div#no3 #step3Button1Add:hover,
div#no3 #step3Button2Add:hover {
	background-color: #0a95e0;
	color: #ffffff;
	border-radius: 6px;
	box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
}

/* 窓削除ボタン */
div#no3 #step3Button1Del,
div#no3 #step3Button2Del{
	background: #ffffff;
	color: #005eb7;
	border-radius: 4px;
	border-style: none;
	box-shadow: 2px 2px 2px rgba(255,255,255,0.2), inset -1px -1px 2px 2px rgba(0,0,0,0.2);
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 4px;
	margin-right: 4px;
}

div#no3 #step3Button1Del:hover,
div#no3 #step3Button2Del:hover {
	background-color: #0a95e0;
	color: #ffffff;
	border-radius: 6px;
	box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
}

/* 窓詳細設定エリア */
div#no3 div.step3WindowPropty1,
div#no3 div.step3WindowPropty2{
	font-size: 14px;
	background-color: #ffffff;
	padding: 5px;
}

/* 素材選択ボックス */
div#no3 select#mado1kind,
div#no3 select#mado2kind{
	/* 背景色のグラデーション設定 */
	filter:progid:DXImageTransform.Microsoft.Gradient(
		startColorstr='#f7f7f7',
		endColorstr='#dfdfdf',
		GradientType=0 
	);
	background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
	font-size: 14px;
	padding: 4px;
	margin-bottom: 5px;
}
div#no3 select#mado1kind:hover,
div#no3 select#mado2kind:hover {
	/* 背景色のグラデーション設定 */
	filter:progid:DXImageTransform.Microsoft.Gradient(
		startColorstr='#cbcccd',
		endColorstr='#afb0b1',
		GradientType=0 
	);
	background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

/* 窓型選択ボックス */
div#no3 select#katachi_1,
div#no3 select#katachi_2{
	/* 背景色のグラデーション設定 */
	filter:progid:DXImageTransform.Microsoft.Gradient(
		startColorstr='#f7f7f7',
		endColorstr='#dfdfdf',
		GradientType=0 
	);
	background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
	font-size: 14px;
	padding: 4px;
	margin-bottom: 5px;
}

div#no3 select#katachi_1:hover,
div#no3 select#katachi_2:hover {
	/* 背景色のグラデーション設定 */
	filter:progid:DXImageTransform.Microsoft.Gradient(
		startColorstr='#cbcccd',
		endColorstr='#afb0b1',
		GradientType=0 
	);
	background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

/* 窓型リストから選ぶボタン */
div#no3 div.step3WindowPropty1 input[type=button],
div#no3 div.step3WindowPropty2 input[type=button]{
	background: #005eb7;
	color: #ffffff;
	border-style: none;
	border-radius: 6px;
	box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
	font-size:12px;
	font-weight:normal;
	width:200px;
	height:25px;
	margin-top:4px;
	margin-left:4px;
	margin-bottom:10px;
}

/* マウスオーバー時ボタン色を変える */
div#no3 div.step3WindowPropty1 input[type=button]:hover,
div#no3 div.step3WindowPropty2 input[type=button]:hover {
	background-color: #0a95e0;
}

/* 数値入力欄は文字右寄せ */
div#no3 div.step3WindowPropty1 input[type=text],
div#no3 div.step3WindowPropty2 input[type=text]{
	text-align: right;
}

/* 数値入力欄は文字右寄せ */
div#no3 input[type=text]{
    width: 40px;
}

/* 窓サイズから選ぶモーダルの調整 */
/* モーダル幅表示位置の調整 */
#WindowSelectDialog {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 80%;
    margin-top: 55px;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
    border:2px solid #aaa;
    background:#fff;
    /*width: 50vw;*/
    /*height: 80vh;*/
    /*min-height: 720px;*/
    /*margin-left: -25vw;*/
    /*top: 15%;*/
    z-index: 1451;
}

#WindowSelectDialog .modal-body {
    /*max-height: 70vh;*/
    /*min-height: 640px;*/
}

/* 画面幅が1024pxを下回る時（タブレット・スマホ用） */
@media screen and (max-width: 1024px) {
    #WindowSelectDialog {
        /*width: 78vw;*/
        /*height: 80vh;*/
        /*min-height: 680px;*/
        /*margin-left: -39vw;*/
    }

    #WindowSelectDialog .modal-body {
        /*min-height: 610px;*/
    }
}

/* 各サイズ表示領域の設定 */
#windowSizeTable {
    width: 100%;
    /*margin-bottom: 16px;*/
}

/* 各サイズ表示領域の設定 */
#windowSizeTable th,
#windowSizeTable td {
    padding: 8px;
    line-height: 16px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}

/* スマホ版表示の詳細設定 */
@media screen and (max-width: 736px) {
    #WindowSelectDialog {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    #windowSizeTable th,
    #windowSizeTable td {
        font-size: 12px;
    }
}

/* ------ */
/* STEP.4 */
/* ------ */
div#no4 p{
    font-size: 90%;
    margin-left: 5px;
    width: 98%;
}

div#no4 div:nth-of-type(2) {
    margin: 0 auto;

}

/* 封筒種類画像の表示位置調整 */
div#no4 div.clearFix{
    /*margin-top: 45px;*/
    width: 320px;
    margin: 0 auto;
}

/* 口糊画像共通設定 */
div#no4 img {
    border: none;
    cursor: pointer;
    padding: 5px;
    background-color: #ffffff;
    box-shadow: -1.8px -1.8px rgba(0, 0, 0, 0.25) inset;
}

div#no4 img:hover{
	box-shadow: inset -3.3px -3.3px rgba(0, 0, 0, 0.15);
}

div#no4 img.active{
	background-color: #ffcb00;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
}

/* 口糊はつけない表示位置高さ設定 */
div#no4 #nori_0_img{
	height: 20px;
	/*margin-top: 15px;*/
	/*margin-left: 95px;*/
	/*margin-right: 95px;*/
	/*margin-bottom: 15px;*/
    margin: 15px 95px;
}

/* 両面テープ・アドヘヤ設定 */
div#no4 #nori_1_img,
div#no4 #nori_3_img {
	height:151px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}

/* グラシンテープ・アラビヤ設定 */
div#no4 #nori_2_img,
div#no4 #nori_4_img {
	height:151px;
	margin-right: 10px;
	margin-bottom: 10px;
}

/*@media screen and (max-width: 1090px) {*/
    /*!* 口糊はつけない表示位置高さ設定 *!*/
    /*div#no4 #nori_0_img {*/
        /*height: 20px;*/
        /*margin-top: 10px;*/
        /*margin-left: 0px;*/
        /*margin-right: 500px;*/
        /*margin-bottom: 10px;*/
        /*float: left;*/
    /*}*/

    /*!* 両面テープ・アドヘヤ設定 *!*/
    /*div#no4 #nori_1_img,*/
    /*div#no4 #nori_3_img {*/
        /*height: 151px;*/
        /*margin-top: 10px;*/
        /*margin-left: 0px;*/
        /*margin-right: 0px;*/
        /*margin-bottom: 10px;*/
        /*float: left;*/
    /*}*/

    /*!* グラシンテープ・アラビヤ設定 *!*/
    /*div#no4 #nori_2_img,*/
    /*div#no4 #nori_4_img {*/
        /*height: 151px;*/
        /*margin-top: 10px;*/
        /*margin-left: 0px;*/
        /*margin-right: 0px;*/
        /*margin-bottom: 10px;*/
        /*float: left;*/
    /*}*/
/*}*/

/* ------ */
/* STEP.5 */
/* ------ */
/* 紙の手配説明文字 */
div#no5 p{
    font-size: 90%;
    margin-left: 5px;
    width: 98%;
}

/* 紙の手配についての指定ラジオボタン */
div#no5 div:nth-of-type(3) {
    margin-left: 20px;
    font-size: 95%;
    font-weight: bold;
    line-height: 25px;
}

/* 色・紙などのセレクトボックス */
div#no5 div:nth-of-type(3) select {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#f7f7f7', endColorstr='#dfdfdf', GradientType=0 );
    background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
    font-size: 11px;
    width: 160px;
    height: 20px;
    margin-left: 15px;
    margin-bottom: 5px;
}

div#no5 div:nth-of-type(3) select:hover {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#cbcccd', endColorstr='#afb0b1', GradientType=0 );
    background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

/* その他入力欄 */
div#no5 div:nth-of-type(3) input[type="text"] {
    margin-left: 15px;
    font-size: 12px;
    width: 200px;
    height: 100%;
}

@media screen and (max-width:768px){
    /* 色・紙などのセレクトボックス */
    div#no5 div:nth-of-type(3) select {
        width: 160px;
        margin-left: 5px;
    }
    /* その他入力欄 */
    div#no5 div:nth-of-type(3) input[type="text"] {
        margin-left: 5px;
        width: 180px;
    }
}

/* 初めての方へ位置調整 */
div#no5 div#step5SelfArea p {
    text-align: left;
    font-size: 90%;
    margin-top: 20px;
    margin-left: 5px;
}

/* 原紙・刷本を用意の流れ */
div#no5 div#step5SelfArea a {
    font-size: 14px;
    color: #0000ff;
}

div#no5 div#step5SelfArea a:hover {
    color: #ff3300;
}

/* 割付指定のチェックボックス */
div#no5 div#step5SelfArea input[type=checkbox] {
    float: left;
    margin-top: 1.0em;
    margin-left: 20px;
}

/* 割付を指定する文字 */
div#no5 div#step5SelfArea input[type=checkbox] + span {
    float: left;
    font-size: 95%;
    margin-top: 1.0em;
    margin-bottom: 1.0em;
    margin-left: 5px;
    font-weight: bold;
}

/* 割付計算ツールボタン */
div#no5 div#step5SelfArea input#showToolsButton {
    background: #005eb7;
    color: #ffffff;
    border-style: none;
    border-radius: 6px;
    box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
    font-size: 20px;
    height: 45px;
}

/* マウスオーバー時ボタン色を変える */
div#no5 div#step5SelfArea input#showToolsButton:hover {
    background-color: #0a95e0;
}

/* 非活性時の処理 */
div#no5 div#step5SelfArea input#showToolsButton:disabled {
    background-color: #cccccc;
    color: #ffffff;
    border-style: none;
    box-shadow: inset 0px 0px 0px rgba(255,255,255,0), 0px 0px 0px 0px rgba(0,0,0,0);
}

/* 紙を選ぶボタン */
div#no5 div#step5IraiArea input[type=button] {
    background: #005eb7;
    color: #ffffff;
    border-style: none;
    border-radius: 6px;
    box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
    font-size: 20px;
    height: 45px;
    margin-bottom: 10px;
}

/* マウスオーバー時ボタン色を変える */
div#no5 div#step5IraiArea input[type=button]:hover {
    background-color: #0a95e0;
}

/* マウスオーバー時ボタン色を変える */
div#wariStep2Area input[type=button]:hover {
    background-color: #0a95e0;
}

/* モーダル内要素の調整 */
/* 割付計算ツール */
.warituke-modal {
    /*width: 80vw;*/
    /*height: 80vh;*/
    /*min-height: 740px;*/
    /*margin-left: -40vw;*/
    /*margin-top: 0%;*/
    /*background-color: #f1f3f8;*/
}

#AllocationToolDialog {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 90%;
    margin-top: 55px;
    margin-bottom: 10px;
    margin-left: 5%;
    margin-right: 5%;
    border:2px solid #aaa;
    background-color: #f1f3f8;
    /*background:#fff;*/
    /*width: 70vw;*/
    /*height: 70vh;*/
    /*min-height: 600px;*/
    /*margin-left: -35vw;*/
    /*top: 20%;*/
    z-index: 1450;
}

@media screen and (max-width: 1024px) {
    #c4 {
        width: 40vmin;
    }

    .warituke-modal {
        /*width: 96vw;*/
        /*height: 85vh;*/
        /*min-height: 685px;*/
        /*margin-left: -48vw;*/
        /*margin-top: -3%;*/
    }

    .warituke-modal .modal-body {
        /*min-height: 610px;*/
    }

    @media screen and (max-height: 768px){
        #AllocationToolDialog {
            /*top: 12%;*/
        }
        
        .warituke-modal .modal-body {
            /*max-height: 60vmax;*/
            /*min-height: unset;*/
        }
    }
}

@media screen and (max-width: 736px) {
    @media screen and (orientation: portrait) {
        #AllocationToolDialog {
            /*top: 10% !important;*/
        }

        .warituke-modal .modal-body {
            /*max-height: 150vw;*/
            /*min-height: unset;*/
        }
    }

    @media screen and (orientation: landscape) {
        #AllocationToolDialog {
            /*top: 20% !important;*/
        }

        .warituke-modal .modal-body {
            /*max-height: 80vh;*/
            /*min-height: unset;*/
        }
    }
}

.waritukeSettiengAreaSP, .modal-SP {
    /*left: 279px;*/
    /*width: 100% !important;*/
    /*height: 100% !important;*/
}

@media screen and (max-width: 736px){
    td#warituke_imageArea {
        /*position: absolute;*/
        display: none;
        top: 0;
        left: 0;
        width: 90%;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 5%;
        margin-right: 5%;
    }
}

div#AllocationToolDialog span.marginRihgt {
    margin-right: 5px;
}

div#AllocationToolDialog input[type=text] {
    width: 50px;
    text-align: right;
}

#wariMenu {
    margin: 0px;
}

#wariMenu li.active a {
    border-bottom: 1px solid #ffffff;
    color: #005eb7;
    background-color: #ffffff;
    z-index: 10;         /* タブの下部をつながるように見せるため1PX上にずらす*/
    position: relative;  /* タブの下部をつながるように見せるため1PX上にずらす*/
}

#wariMenu li a {
    border: 1px solid #0a95e0;
    color: #AAAAAA;
    background-color: #CCCCCC;
}

div#AllocationToolDialog .tab-content {
    border:1px solid #0a95e0;
    padding: 10px;
    background-color: #ffffff;
    margin-top: -1px;    /* タブの下部をつながるように見せるため1PX上にずらす*/
    z-index: 0;          /* タブの下部をつながるように見せるため1PX上にずらす*/
    position: relative;  /* タブの下部をつながるように見せるため1PX上にずらす*/
}

table#waritukeTable {
    margin-bottom: 10px;
}

div#AllocationToolDialog td {
    line-height: 20px;
}

/* 紙を選ぶボタン */
div#wariStep2Area input[type=button] {
    background: #005eb7;
    color: #ffffff;
    font-size: 14px;
    height: 30px;
    border-style: none;
    border-radius: 6px;
    box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
    margin-top: 5px;
    margin-bottom: 10px;
}

div#AllocationToolDialog input[type=radio] {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    margin-top: 0px;
    margin-right: 5px;
}

/* セレクトボックス */
div#AllocationToolDialog select {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#f7f7f7', endColorstr='#dfdfdf', GradientType=0 );
    background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
    height: 20px;
    font-size: 12px;
    vertical-align: baseline;
}

div#AllocationToolDialog select:hover {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#cbcccd', endColorstr='#afb0b1', GradientType=0 );
    background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

div#AllocationToolDialog div.infoArea {
    border: 1px solid #999;
    text-align: left;
    padding: 5px;
}

/* 紙を選ぶモーダルの調整 */
/* モーダル幅表示位置の調整 */
#PaperSelectDialog {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 80%;
    margin-top: 55px;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
    border:2px solid #aaa;
    background:#fff;
    /*width: 70vw;*/
    /*height: 70vh;*/
    /*min-height: 600px;*/
    /*margin-left: -35vw;*/
    /*top: 20%;*/
    z-index: 1451;
}

#PaperSelectDialog .modal-body {
    /*max-height: 60vh;*/
    /*min-height: 530px;*/
}

@media screen and (max-width: 1024px) {
    #PaperSelectDialog {
        /*width: 80vw;*/
        /*height: 80vh;*/
        /*margin-left: -40vw;*/
    }
}

/* 各サイズ表示領域の設定 */
#lineupTable {
    width: 100%;
    /*margin-bottom: 16px;*/
}

/* 各サイズ表示領域の設定 */
#lineupTable th,
#lineupTable td {
    padding: 8px;
    line-height: 16px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}

/* スマホ版表示の詳細設定 */
@media screen and (max-width: 736px) {
    #PaperSelectDialog {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    #lineupTable th,
    #lineupTable td {
        font-size: 12px;
    }

}

/* 紙目を選ぶモーダルの調整 */
/* モーダル幅表示位置の調整 */
#kamime {
    width: 60vw;
    height: 30vh;
    margin-left: -30vw;
    top: 15%;
    z-index: 1452;
    background-color: #ff0;
}

/* スマホ版表示の詳細設定 */
@media screen and (max-width: 4096px){
    #selectTY {
        margin-top: 20px;
        height: 150px;
        text-align:center;
    }
}

@media screen and (max-width: 736px) {
    #kamime {
        width: 100%;
        height: 100%;
        margin-left: -280px;
        left: 279px;
    }

    @media screen and (orientation: portrait) {
        #kamime {
            top: 12%;
        }
    }

    @media screen and (orientation: landscape) {
        #kamime {
            top: 20%;
        }
    }
}

#selectTY li {
    display: inline-block;
	margin-right: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    height: 45%;
}

#selectTY a {
    display: block;
    height: 50px;
    width: 200px;
    border: 1px solid #000;
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    background: #f1f3f8;
	color: #005eb7;
    box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
	text-decoration: none;
}

#selectTY a:hover {
    padding-top: 7px;
    padding-left: 9px;
    background: #005eb7;
	color: #f1f3f8;
}

/* ------ */
/* STEP.6 */
/* ------ */
/* ご希望の場合は、使用色にチェックしてください。 */
div#no6 p{
    font-size: 90%;
    margin-left: 5px;
    width: 98%;
}

/* 印刷指定ラジオボタン */
div#no6 div:nth-of-type(3) {
    margin-left: 20px;
    font-size: 95%;
    font-weight: bold;
    line-height: 25px;
}

/* 封筒屋に依頼する横のセレクトボックス */
div#no6 div:nth-of-type(3) select {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#f7f7f7', endColorstr='#dfdfdf', GradientType=0 );
    background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
    font-size: 11px;
    width: 140px;
    height: 20px;
    margin-left: 15px;
    margin-bottom: 5px;
}

div#no6 div:nth-of-type(3) select:hover {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#cbcccd', endColorstr='#afb0b1', GradientType=0 );
    background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

@media screen and (max-width:768px){
    div#no6 div:nth-of-type(3) select {
        margin-left: 5px;
    }
}

/* 封筒印刷の色設定ヘッダー */
div#no6 div#step6IraiArea p {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#f7f7f7', endColorstr='#dfdfdf', GradientType=0 );
    background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
    border: 1px solid #000000;
    font-size: 12px;
    text-align: left;
    padding: 5px;
    margin-top: -1px;
    margin-bottom: 0px;
    height: 20px;
}

div#no6 div#step6IraiArea p:hover {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#cbcccd', endColorstr='#afb0b1', GradientType=0 );
    background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

/* ヘッダータイトル */
div#no6 div#step6IraiArea p span.printPosition {
    line-height: 1.5;
}

/* 色数セレクトボックス */
div#no6 div#step6IraiArea #color1,
div#no6 div#step6IraiArea #color2,
div#no6 div#step6IraiArea #color3 {
    width: 55px;
    padding: 1px;
    margin-right: 5px;
    float: right;
}

/* 詳細設定チェックボックス */
div#no6 div#step6IraiArea p input[type=checkbox] {
    float: right;
}

/* 詳細設定文字 */
div#no6 div#step6IraiArea p span.detailSetting {
    padding-top: 4px;
    margin-left: 5px;
    float: right;
}

/* 詳細設定エリア設定 */
div#no6 div#step6IraiArea table {
    background-color: #ffffff;
    margin-left: 5px;
    font-size: 12px;
    text-align: left;
    line-height: 25px;
    width: 97%;
}

div#no6 div#step6IraiArea table td {
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 70px;
    height: 25px;
}

div#no6 div#step6IraiArea table select {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#f7f7f7', endColorstr='#dfdfdf', GradientType=0 );
    background: linear-gradient(to bottom, #f7f7f7 40%, #dfdfdf 60%);
    margin-left: 30px;
    width: 45%;
}

div#no6 div#step6IraiArea table select:hover {
    /* 背景色のグラデーション設定 */
    filter: progid:DXImageTransform.Microsoft.Gradient( startColorstr='#cbcccd', endColorstr='#afb0b1', GradientType=0 );
    background: linear-gradient(to bottom, #cbcccd 40%, #afb0b1 60%);
}

/* ------ */
/* STEP.7 */
/* ------ */
/* 見積り情報表示用テーブル */
div#no7 p{
    font-size: 90%;
    margin-left: 5px;
    width: 98%;
}

div#no7 table {
    border-collapse: separate;
    border-spacing: 5px;
}

div#no7 td div{
    font-size : 95%;
}

div#no7 a.nextEstimate{
    background: #e87900;
}

div#no7 a.nextEstimate::after{
    border-left: 8px solid #e87900;
}

div#no7 a.nextEstimate:hover {
    background-color: #ca5b00;
}

div#no7 a.nextEstimate:hover::after {
    border-left-color: #ca5b00;
}

/* 本見積り依頼ボタン */
.btnOrangeBig {
    background: #e87900;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    height: 45px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-style: none;
    border-radius: 6px;
    box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 2px 2px 2px 2px rgba(0,0,0,0.4);
}

/* マウスオーバー時ボタン色を変える */
.btnOrangeBig:hover {
    background-color: #ca5b00;
}




/* ------------------ */
/* webページ印刷用CSS */
/* ------------------ */
@media print{
    /* webページ起動時に背景色も印刷する設定にする */
    body {
        -webkit-print-color-adjust: exact;
        
    }

    /* bodyの背景色だけ消えてしまうのでdivにて対応 */
    div#bgColor {
        background-color: #f1f3f8;
        width: 100vw;
        height: 98vh;
        padding-top: 5px;
    }

    /* 右上メニュー（表裏・表・裏・展開図）を隠す */
    div#global-nav{
        display: none;
    }

    /* モーダル用の閉じるボタンを隠す */
    div.close-button {
        display: none;
    }

    /* 封筒イメージ描画部分のサイズ調整 */
    #c1 {
        width: 45% !important;
        height: 45% !important;
    }

    #c2 {
        width: 45% !important;
        height: 45% !important;
    }

    #c3 {
        width: 60% !important;
        height: 60% !important;
    }

    /* 封筒設定情報入力部分のサイズ調整 */
    .settingArea {
        float: left;
        padding: 0px 4px 2px 4px;
        width: 40%;
        max-width: 400px;
        min-height: 600px;
        border: none;
    }

    .settingAreaPC {
        float: left;
        padding: 0px 4px 2px 4px;
        width: 40%;
        min-height: 570px;
        border: none;
        margin-left: 10px;
    }
}