/* CSS Document */
html{
	/* スクロールをスムーズにする */
	scroll-behavior: smooth;
}

body{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin:0;
	padding:0;
	
	font-size:14px;
	
/*	min-width:360px; */
	
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

body.bodySp2{
	position: relative;
}


header, div#mainVisual, div#contents, footer{
	width: 100%;
	margin:0;
	padding:0;
}


/*****************************/
/* 共通部品                  */
/*****************************/
/* アンカーリンク用の上部からのずらし */
.anchorPoint {
	padding-top: 110px;
	margin-top:-85px;
	z-index:0;
}
/* アンカーリンク用の上部からのずらし */

/* フォーム用のエラー表示 */
.GA_Form_Caution{
	color:#FF0000;
}

/* 表示用スイッチ */
.dispSW {
	
}

.dispSWblock {
	display: block !important;
}

.dispSWinline {
	display: inline !important;
}

.dispSWnone {
	display:none !important;
}



/* 中央揃え用インナー */
.inner{
	width:100%;
	margin:0 auto;
	padding:0;
}

/* ハンバーガーメニュー */
div.mainNav{
	display: none;
	position: fixed;
	width:100%;
	height:100%;
	min-height:100%;
	background-color: var(--color3);
	margin:0;
	padding:0;
	top:0;
	left:0;
	z-index: 1000;
}

div.mainNav .closeButtonArea{
	width:100%;
	height:60px;
}

div.mainNav .closeButtonArea button{
	position: absolute;
	background-image:url("../img/template/buttonBack.png");
	background-repeat: no-repeat;
	background-position: center;
	border:none;
	right: 0;
	left:inherit !important;
	background-color: var(--color1) !important;
	color:#fff !important;
	width: 50px !important;
	height: 50px !important;
}

div.mainNav .closeButtonArea button:active{
	border:none !important;
}

div.mainNav .closeButtonArea button p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 10px;
}

div.mainNav .linkArea{
	width:100%;
}

div.mainNav .linkArea a{
	display: block;
	margin:0;
	padding:20px 30px;
	
	text-decoration: none;
	background-color: var(--color3);
	color: var(--txt-color);
	border-bottom:1px solid var(--color1);
	
	cursor: pointer;
	cursor: hand;
	
	background-image:var(--footer-link-bg);
	background-repeat: no-repeat;
	background-position: 98% center;
}

div.mainNav .linkArea a:first-child{
	border-top:1px solid var(--color1);
}



/* 見出し */
h1 {
	color:#FFFFFF;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:10px;
	margin-left:-3%;
	margin-right:-3%;
	line-height:normal;
	background-color:var(--color1);
	font-weight: normal;
}


h2{
	color:var(--logo);
	background-color:var(--color8);
	border-left:5px solid var(--color1);
	padding:8px 5px;
}

/*h2 {
	margin-bottom:0;
	
	border-bottom: solid 3px var(--color2);
	position: relative;
	color:var(--txt-color);
	font-weight: normal;
	line-height: 120%;
	background-color:transparent;
	padding:0 0 5px;
}

h2:after{
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px var(--color1);
	bottom: -3px;
	width: 20%;
}*/

h3 {
	margin-bottom:-20px;
	padding-left: 10px;
	padding-top:10px;
	padding-bottom:10px;
	color:var(--txt-color);
	font-weight: normal;
}

h3:before{
	content:"● ";
	color:var(--color1);
}

/* 枠（縦並び） */
.flex-container-vertical{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	align-items: center;
}

.waku-vertical{
	display: block;
	text-decoration: none;
	color:var(--txt-color);
	border:1px solid #707070;
}

/* フォーム */
input{
	/*height:40px;*/ /* 2022.3.1 「STEP3:ご注文手続き」「決済方法確認」のラジオボタンがずれるのでコメントアウトにする */
	font-size:14px;
}

/* フォームの枠（縦並び・ログインフォームと同じ型） */
.formTate{
	margin:0 0 20px;
	padding:10px 20px 10px;
	/*width:90%;*/
	border:1px solid var(--color2);
	background-color:#ffffff !important;
	-webkit-box-shadow: 1px 2px 2px rgba(240,229,209,.4);
	-moz-box-shadow: 1px 2px 2px rgba(240,229,209,.4);
	box-shadow: 1px 2px 2px rgba(240,229,209,.4);
	z-index: 50 !important;
}

.formTate .waku{
	width:100%;
}

.formTate .waku input{
	width:98%;
	margin-bottom:10px;
}

.formTate .buttonArea{
	clear: both;
	width:100%;
}


/* ボタン */
.button{
	display: block;
	margin:0 auto;
	padding:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: var(--color1);
	color:#ffffff;
	text-decoration: none;
	text-align: center;
	border:none;
}

/* 次へ */
.buttonNext{
	display: block;
	margin:0 auto;
	padding:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: var(--button-next-color);
	color:#ffffff;
	text-decoration: none;
	text-align: center;
}

/* 戻る・閉じるなど */
.buttonBack{
	display: block;
	margin:0 auto;
	padding:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: var(--grey-out-color);
	color:#707070;
	text-decoration: none;
	text-align: center;
}

/* グレーアウト */
.buttonOut{
	display: block;
	margin:0 auto;
	padding:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: var(--grey-out-color);
	color:#707070;
	text-decoration: none;
	text-align: center;
}

/* 緑色 */
.buttonGreen{
	display: block;
	margin:0 auto;
	padding:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: var(--button-color-green);
	color:#000000;
	text-decoration: none;
	text-align: center;
}


.buttonLogin{
	display: block;
	margin:0 auto;
	padding:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #DDA0B6;
	color:#fff;
	text-decoration: none;
	text-align: center;
}

.buttonTabOn{
	display: block;
	margin:0 auto;
	padding:10px;
	background-color:var(--color2);
	color:var(--txt-color);
	text-decoration: none;
	text-align: center;
}

.buttonTabOff{
	display: block;
	margin:0 auto;
	padding:10px;
	background-color:var(--color3);
	color:var(--txt-color);
	text-decoration: none;
	text-align: center;
}

.naviBefore{
	display: block;
	margin:0 auto;
	padding:3px 10px;
	background-color:#fff;
	color:var(--txt-color);
	border:1px solid var(--txt-color);
	text-decoration: none;
	background-image: url("../img/imglist/listMenuBeforeBg.png");
	background-repeat: no-repeat;
	background-position: center left 10px;
	
}

.naviAfter{
	display: block;
	margin:0 auto;
	padding:3px 10px;
	background-color:#fff;
	color:var(--txt-color);
	border:1px solid var(--txt-color);
	text-decoration: none;
	background-image: url("../img/imglist/listMenuAfterBg.png");
	background-repeat: no-repeat;
	background-position: center right 10px;
}

.buttonSukashiOn{
	display: block;
	margin:0 auto;
	padding:3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:#EEEEEE;
	color:var(--txt-color);
	border:1px solid #EEEEEE;
	text-decoration: none;
	text-align: center;
}

.buttonKoukaiOn{
	display: block;
	margin:0 auto;
	padding:3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:var(--button-color-green);
	border:1px solid var(--button-color-green);
	color:var(--txt-color);
	text-decoration: none;
	text-align: center;
}

.buttonKoukaiOff{
	display: block;
	margin:0 auto;
	padding:3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:#fff;
	color:var(--txt-color);
	border:1px solid var(--txt-color);
	text-decoration: none;
	text-align: center;
}

.buttonSelect{
	display: block;
	margin:0 auto;
	padding:3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:#fff;
	color:var(--txt-color);
	border:1px solid var(--txt-color);
	text-decoration: none;
	text-align: center;
}

.buttonSizeSmall{
	display: block;
	margin:0 auto;
	padding:3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:var(--button-color-small);
	border:1px solid var(--txt-color);
	color:var(--txt-color);
	text-decoration: none;
	text-align: center;
}

.buttonSizeBig{
	display: block;
	margin:0 auto;
	padding:3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:var(--button-color-big);
	border:1px solid var(--txt-color);
	color:var(--txt-color);
	text-decoration: none;
	text-align: center;
}

/* ボタン自動的に横並び */
.buttonYokoArea{
	width:100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content: center;
}

.buttonYokoArea a, .buttonYokoArea span{
	margin:0;
}





/* 情報表示 */
.markInfo{
	background-color: #93B7DB;
	color:#fff;
}

/* 警告表示 */
.markAlert{
	background-color:#DDA0B6;
	color:#fff;
}

/* 案内表示 */
.Annai {
	margin:5px 20px;
	padding:5px;
	border:solid 3px var(--color9);
	/*background-color:var(--color3);*/
/*
	padding: 5px ;

	border:#BFBFBF solid 2px ;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	background-color:#FFCC66 ;

	background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.10, #FFFFFF), to(#FFCC66));
	background:-moz-linear-gradient(top, #FFFFFF 0%,#FFFFFF 10%, #FFCC66);
	background:-o-linear-gradient(top, #FFFFFF, #FFCC66);
*/
}

.Annai .title{
	font-size:22px;
}


/* リスト */
.listFrame{
	width:99%;
	/*height:250px;
	overflow: auto;*/
	margin: -3px 0 20px 0;
	padding: 5px;
}

.listFrame table {
	width: 100%;
}
.listFrame th {
	padding: 5px 3px;
	font-weight: normal;
	/*width: 20%;*/
	text-align: left;
	border-bottom: 1px dotted #7F7F7F;
}

.listFrame td {
	padding: 5px 3px;
	line-height: 120%;
	/*width: 78%;*/
	border-bottom: 1px dotted #7F7F7F;
}

.listFrame td a{
	color:var(--txt-color);
	text-decoration: none;
}

.listFrame td a:hover{
	color:var(--txt-color-hover);
	text-decoration: underline;
}

/* サイドメニュータイトル */
.sideTitle{
	margin:0 20px 10px;
	padding:20px 10px;
	background-color: var(--color2);
}

.sideTitle .titleEn{
	text-align:left;
	float:left;
	padding:0;
	margin:0;
}

.sideTitle .titleKana{
	text-align:right;
	padding:3px 0;
	margin:0;
}

/* サイドメニューカテゴリーボタン */
.sideCategory a{
	display: block;
	margin:0 20px 10px;
	padding:10px;
	border:1px solid var(--color1);
	background-color:var(--color3);
	color:var(--txt-color);
	text-decoration: none;
	background-image: url("../img/imglist/buttonCategoryBg.png");
	background-repeat: no-repeat;
	background-position:center right 10px;
}

/* サイドメニューセレクト枠 */
.sideSelectWaku{
	text-align: center;
	margin:0 20px 10px;
	padding:20px 0;
	background-color:#fff;
}

.sideSelectWaku .selecting_photo{
	margin:0 20px;
}

.selecting_photo .number{
	width:100%;
	text-align:right;
	float:left;
	padding:3px;
	margin:0;
	border:1px solid #707070;
	width:135px;
}

.selecting_photo .mai{
	text-align:right;
	padding:0;
	margin:0;
}


/* お知らせ */
a.eturanInfo, a.sideChumon{
	display: block;
	cursor: pointer;
	cursor: hand;
}

.eturanInfo{
	/*width:90%;*/
	margin:5px 14px;
	padding:20px;
	background-color:#CCDDEE;
	color:#707070;
	
	background-image:url("../img/index2/eturanInfoBg.png");
	background-repeat: no-repeat;
	background-position: 96% center;
}

.eturanInfo .button{
	background-color: #93B7DB;
	width:50%;
}

a.eturanInfo p, a.sideChumon p{
	margin:0;
}

/* 注文（サイドメニュー用） */
.sideChumon{
	/*width:90%;*/
	margin:5px 14px;
	padding:20px;
	background-color:#F1D8E1;
	color:#707070;
	
	background-image:url("../img/index2/sideChumonBg.png");
	background-repeat: no-repeat;
	background-position: 96% center;
}

.sideChumon .button{
	background-color: #DDA0B6;
	width:50%;
}

/* サイドバナー */
.sideBanner{
	/*width:100%;*/
	text-align: center;
	margin:0 20px;
}

.sideBanner a{
	text-decoration: none;
	color:var(--txt-color);
}

/* サイドメニューのコメント */
.msgAreaGa , div#msgArea{
	/*width:210px;*/
	background-color: #F9F7ED;
	border: 1px solid #333333;
	margin:20px 20px;
	padding-top: 10px;
	padding-right: 12px;
	padding-bottom: 10px;
	padding-left: 12px;
}

.msgAreaGa p , div#msgArea p{
	font-size:12px;
	line-height:205%;
	margin:0;
	padding:0;
/*	background-image: url(../../imgTemplate/gacommon/msgBg.png); */
	background-repeat: repeat;
	font-family: none;
}


/* サイドメニュー説明（写真公開） */
.sideKoukai{
	margin:5px 20px;
	padding:5px;
	border:solid 1px var(--color1);
	background-color:var(--color3);
}

/* サイドメニューお知らせ ここから */
.sideOshirase{
	margin:5px 15px;
	padding:5px;
}

.sideOshirase label{
	position: relative;
	display: block;
	padding:0;
	height:40px;
	background-color: var(--color2);
	font-size:16px;
	cursor: pointer;
	cursor: hand;
}

.sideOshirase label .txt{
	position: absolute;
	left:20px;
	top:50%;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.sideOshirase label .icon{
	position: absolute;
	right:0;
	top:0;
	background-color:var(--color1);
	height:40px;
	width:40px;
	background-image:url("../img/template/oshiraseIconClose.png");
	background-repeat: no-repeat;
	background-position: center;
}

.sideOshirase input {
    display: none;
}

.sideOshirase .txtArea {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.sideOshirase .cssacc:checked + label + .txtArea {
    height: auto;
    padding: 5px;
    opacity: 1;
	padding:20px 0;
}

/*アイコンを入れ替える*/
.sideOshirase .cssacc:checked + label .icon{
    background-image:url("../img/template/oshiraseIconOpen.png");
}

/* aタグの設定 */
.sideOshirase a{
	position: relative;
	display:block;
	padding:10px;
	text-decoration: none;
	color:var(--txt-color);
	background-color:var(--color2);
}

.sideOshirase a:last-child{
}

.sideOshirase a:hover {
	background-color:var(--color4);
}

.sideOshiraseBlue a {
	text-align: left;
	padding-left:20px;
	background-color:var(--button-color-blue);
}
.sideOshiraseBlue a:hover {
	background-color:var(--button-color-blue2);
}

.sideOshirasePink a {
	text-align: left;
	padding-left:20px;
	background-color:var(--button-color-pink);
}
.sideOshirasePink a:hover {
	background-color:var(--button-color-pink2);
}

.sideOshiraseBlue a p, .sideOshirasePink a p{
	margin:0;
}

.sideOshirase a .accordionArrow{
	position:absolute;
	right:10px;
	top:15%;
	-webkit-transform: translate(0,-15%);
	transform: translate(0,-15%);
	font-size:20px;
	font-weight: bold;
	transform: scale(1, 1.5);
	color:var(--color1);
}

.sideOshiraseBlue a .accordionArrow, .sideOshirasePink a .accordionArrow{
	position:absolute;
	right:10px;
	top:30%;
	-webkit-transform: translate(0,-30%);
	transform: translate(0,-30%);
	font-size:20px;
	font-weight: bold;
	transform: scale(1, 1.5);
}

.sideOshiraseBlue a .accordionArrow{
	color:var(--color7);
}

.sideOshirasePink a .accordionArrow{
	color:var(--color6);
}

/* サイドメニューお知らせ ここまで */


/* 標準のアコーディオン ここから */
.accordionArea{
	background-color:var(--color3);
}

.accordionArea label{
	position: relative;
	display: block;
	padding:0;
	height:40px;
/*	background-color: var(--color2); */
	font-size:16px;
	cursor: pointer;
	cursor: hand;
	border-top:1px solid var(--color1);
	border-left:1px solid var(--color1);
	border-right:1px solid var(--color1);
	border-bottom:1px solid var(--color1);
}

.accordionArea label:hover{
	background-color:var(--color4);
}

.accordionArea label .txt{
	position: absolute;
	left:10px;
	top:50%;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.accordionArea label .icon{
	position: absolute;
	right:0;
	top:0;
	background-color:var(--color1);
	height:40px;
	width:40px;
	background-image:url("../img/template/oshiraseIconClose.png");
	background-repeat: no-repeat;
	background-position: center;
}

.accordionArea input {
    display: none;
}

.accordionArea .txtArea {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.accordionArea .cssacc:checked + label + .txtArea {
    height: auto;
    padding: 5px;
    opacity: 1;
	padding:0;
}

/*アイコンを入れ替える*/
.accordionArea .cssacc:checked + label .icon{
    background-image:url("../img/template/oshiraseIconAccordionOpen.png");
	background-color:var(--color5);
}
/* aタグの設定 */
.accordionArea a{
	position: relative;
	display:block;
	padding:10px;
	text-decoration: none;
	color:var(--txt-color);
	border-top:1px solid var(--color1);
	border-left:1px solid var(--color1);
	border-right:1px solid var(--color1);
}

.accordionArea a:last-child{
	border-bottom:1px solid var(--color1);
}

.accordionArea a:hover , .accordionArea .txtArea a:hover{
	background-color:var(--color4);
}
.accordionArea .txtArea a{
	position: relative;
	padding-left:20px;
	background-color:var(--color2);
}

.accordionArea .txtArea a .accordionArrow, .accordionArea a .accordionArrow{
	position:absolute;
	right:10px;
	top:15%;
	-webkit-transform: translate(0,-15%);
	transform: translate(0,-15%);
	font-size:20px;
	font-weight: bold;
	transform: scale(1, 1.5);
	color:var(--color1);
}
/* 標準のアコーディオン ここまで */


/* ユーザー登録のアコーディオン ここから */
.accordionUserReg{
	background-color:#fff;
	margin-bottom:20px;
}


.accordionUserReg label{
	position: relative;
	display: block;
	padding:0;
	height:40px;
	font-size:16px;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
	
	color:var(--logo);
	background-color:var(--color8) !important;
	border-left:5px solid var(--color1);
	padding:8px 5px;
}

.accordionUserReg label:hover{
	background-color:var(--color4);
}

.accordionUserReg label .txt{
	position: absolute;
	left:10px;
	top:50%;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.accordionUserReg label .icon{
	position: absolute;
	right:0;
	top:0;
	background-color:var(--color1);
	height:56px;
	width:56px;
	background-image:url("../img/template/oshiraseIconClose.png");
	background-repeat: no-repeat;
	background-position: center;
}

.accordionUserReg input.cssacc {
    display: none;
}

.accordionUserReg .txtArea {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.accordionUserReg .cssacc:checked + label + .txtArea {
    height: auto;
    padding: 5px;
    opacity: 1;
	padding:0;
}

/*アイコンを入れ替える*/
.accordionUserReg .cssacc:checked + label .icon{
    background-image:url("../img/template/oshiraseIconOpen.png");
}
/* aタグの設定 */
/*.accordionUserReg a{
	position: relative;
	display:block;
	padding:10px;
	text-decoration: none;
	color:var(--txt-color);
	border-top:1px solid var(--color1);
	border-left:1px solid var(--color1);
	border-right:1px solid var(--color1);
}

.accordionUserReg a:last-child{
	border-bottom:1px solid var(--color1);
}

.accordionUserReg a:hover , .accordionUserReg .txtArea a:hover{
	background-color:var(--color4);
}
.accordionUserReg .txtArea a{
	position: relative;
	padding-left:20px;
	background-color:var(--color2);
}

.accordionUserReg .txtArea a .accordionArrow, .accordionUserReg a .accordionArrow{
	position:absolute;
	right:10px;
	top:15%;
	-webkit-transform: translate(0,-15%);
	transform: translate(0,-15%);
	font-size:20px;
	font-weight: bold;
	transform: scale(1, 1.5);
	color:var(--color1);
}*/



.accordionUserReg .passwordLink a{
	display: inline;
	padding:0;
	background-color:transparent;
	border:none;
}

.accordionUserReg .passwordLink a:hover{
	background-color:transparent;
}


.accordionUserReg label.labelKiyaku{
	position:static;
	display: inline;
	padding:0;
	height:0;
	font-size:14px;
	cursor: pointer;
	cursor: hand;
	border:none;
	background-color:transparent !important;
}

.accordionUserReg label.labelKiyaku:hover{
	background-color:transparent;
}


/* ユーザー登録のアコーディオン ここまで */




/* 利用規約のスクロール */
.kiyaku {
	overflow-y: scroll; 
	/*width: 718px;*/
	height: 140px;
	border:solid 1px #cccccc;
	margin-top:30px;
}

.kiyaku .txt {
	padding:10px;
	line-height:1.5em;
}


/* メンテナンス表示 */
.maintenance{
	color:#FF0000;
	font-size:18px;
	font-weight:bold;
	border:#FF0000 double 3px;
	padding:5px;
	margin-bottom:10px;
}


/* 写真一覧のH2見出しのボタン（大アイコン・サムネイル） */
h2.img_list_titleH2{
	position: relative;
}

h2.img_list_titleH2 span{
	display: inline-block;
	width:calc(100% - 92px);
}

h2.img_list_titleH2 a{
	position: absolute;
	display: inline-block;
	right:8px;
	top:50%;
	transform: translateY(-43%);
	-webkit-transform: translateY(-43%);
	-ms-transform: translateY(-43%);
}


/* / 写真一覧のH2見出しのボタン（大アイコン・サムネイル） */

/*****************************/
/* ヘッダー                  */
/*****************************/
header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
	/*height:60px;*/
	height:50px;
	/*padding-top:calc(60px / 2 - 1.2em);*/
	background-color: #fff;
}



header .logo{
	float:left;
	/*width:35%;*/
	/*min-width:225px;*/
	min-width:188px;
	/*margin-top:calc(100px / 2 - 0.5em);*/
	margin:0 0 0 10px;
	padding:0;
}

header .logo a{
	color: var(--logo);
	line-height:140%;
	text-decoration: none;
}

header .logo img{
	/*max-height:60px;
	max-width :225px;*/
	max-height:50px;
	max-width :188px;
	margin-bottom:-12px;
}

/*header .hamburger{
	float:right;
	width:20%;
	text-align: right;
	margin:0;
	padding: 0;
}*/


header .headerMenu{
	float:right;
	text-align: right;
	/*width:60%;*/
	width:45%;
}

header .headerMenu ul.menu01{
	display: none;
}


header .headerMenu ul.menu02{
	display: block;
	float:right;
	padding:0;
}

header .headerMenu ul.menu02:after{
	content: "";
	display: block;
	clear: left;
}

header .headerMenu ul.menu02 li{
	list-style-type: none;
	float:left;
}

header .headerMenu ul.menu02 li:not(:last-child){
	margin-right:2px;
}

header .headerMenu ul.menu02 li a{
	position: relative;
	display: block;
	background-color: var(--color1);
	color:#fff;
	text-decoration: none;
	text-align: center;
	/*width:60px;
	height:60px;*/
	width:50px;
	height:50px;
	margin-top:-14px;
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

header .headerMenu ul.menu02 li a.buttonLogout{
	background-image:url("../img/template/buttonLogout.png");
}

header .headerMenu ul.menu02 li a.buttonCart{
	background-image:url("../img/template/buttonCart.png");
}

header .headerMenu ul.menu02 li a.buttonHamburger{
	background-image:url("../img/template/buttonHamburger.png");
}

header .headerMenu ul.menu02 li a p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 10px;
}


/*****************************/
/* フッター                  */
/*****************************/
footer{
	/*position: sticky;
    position: -webkit-sticky;*/
	/*position: absolute;
    position: -webkit-absolute;*/
	position: fixed;
	position: -webkit-fixed;
    bottom: 0;
	/*position: fixed;
	bottom: 0;*/
	
	width: 100%;
	
	/*padding:20px 0 100px;
	margin-bottom:-100px;*/
	padding:0 !important;
	background-color: var(--color2);
	z-index: 100;
}

footer.footerlogin{
	position:static !important;
	position: -webkit-static;
}


footer div.footerCategory{
	float:left;
	/*width:64%;*/
	width:38%;
	/*min-width:38%;*/
}

footer div.bigicon{
	display: none;
	float:right;
	text-align: right !important;
	width:55px;
	margin-right:3px;
}

footer div.thumbnail{
	display: none;
	float:right;
	text-align: right !important;
	width:55px;
	margin-right:3px;
}

footer div.pagetop{
	float:right;
	text-align: right !important;
	width:55px;
}

footer div.BackNext{
	float:right;
	text-align: right !important;
	width:115px;
	margin-right:3px;
}


footer:after{
	content:"";
	clear: both;
	display: block;
}

footer div.footerCategory .buttonCategoryArea{
	float:left;
	text-align:left;
	width:55px;
}

footer div.footerCategory .txtArea{
	float:left;
	text-align:left;
	/*width:72%;*/
	width:calc(100% - 55px);
	/*width:50%;*/
	/*margin-left:20px;*/
	margin-left:10px;
	margin-right:-10px;
	padding-top:4%;
}

footer div.footerCategory .txtArea a{
	text-decoration: none;
	color:var(--txt-color);
}

footer div.footerCategory:after{
	content:"";
	clear: both;
	display: block;
}

footer div.footerCategory .buttonCategoryArea a.buttonCategory{
	position: relative;
	display: block;
	background-color: var(--color1);
	background-image:url("../img/template/buttonCategory.png");
	color:#fff;
	text-decoration: none;
	text-align: center;
	width:55px;
	height:55px;
	/*margin-top:-14px;*/
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

footer div.footerCategory .buttonCategoryArea a p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 7px;
}

footer div.footerCategory .txtArea .name{
/*	font-size:12px; */
	line-height:120%;
}

footer div.footerCategory .txtArea .maisu{
/*	font-size:12px; */
	line-height:120%;
}

footer div.bigicon a.buttonBigicon{
	position: relative;
	display: block;
	background-color: var(--color1);
	background-image:url("../img/template/buttonBigicon.png");
	color:#fff;
	text-decoration: none;
	text-align: center;
	width:55px;
	height:55px;
	/*margin-top:-14px;*/
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

footer div.bigicon a p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 7px;
}

footer div.thumbnail a.buttonThumbnail{
	position: relative;
	display: block;
	background-color: var(--color1);
	background-image:url("../img/template/buttonThumbnail.png");
	color:#fff;
	text-decoration: none;
	text-align: center;
	width:55px;
	height:55px;
	/*margin-top:-14px;*/
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

footer div.thumbnail a p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 7px;
}

footer div.BackNext a.buttonBackDir{
	position: relative;
	display: inline-block;
	background-color: var(--color1);
	background-image:url("../img/imglist/buttonBackDir.png");
	color:#fff;
	text-decoration: none;
	text-align: center;
	width:55px;
	height:55px;
	/*margin-top:-14px;*/
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

footer div.BackNext a.buttonNextDir{
	position: relative;
	display: inline-block;
	background-color: var(--color1);
	background-image:url("../img/imglist/buttonNextDir.png");
	color:#fff;
	text-decoration: none;
	text-align: center;
	width:55px;
	height:55px;
	/*margin-top:-14px;*/
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

footer div.BackNext a p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 7px;
}

footer div.pagetop a.buttonPagetop{
	position: relative;
	display: inline-block;
	background-color: var(--color1);
	background-image:url("../img/template/buttonPagetop.png");
	color:#fff;
	text-decoration: none;
	text-align: center;
	width:55px;
	height:55px;
	/*margin-top:-14px;*/
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
}

footer div.pagetop a p.txtMenu02{
	position: absolute;
	bottom:1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin:0;
	padding: 0;
	font-size: 7px;
}

footer ul.linkindex{
	display: block;
	/*width:100%;*/
	margin: 0 10px 20px -40px;
}

footer ul.linkindex li{
	list-style-type: none;
	text-align: left;
}


footer ul.linkindex li a{
	display: block;
	width: calc(100% - 50px);
	margin:0;
	padding:20px 30px;
	
	text-decoration: none;
	background-color: var(--color3);
	color: var(--txt-color);
	border-bottom:1px solid var(--color1);
	
	cursor: pointer;
	cursor: hand;
	
	background-image:var(--footer-link-bg);
	background-repeat: no-repeat;
	background-position: 98% center;
}

footer ul.linkindex li a:hover{
	text-decoration: underline;
	color: var(--txt-color-hover);
}

footer ul.linkindex:after{
	content: "";
	display: block;
	clear: left;
}





/*****************************/
/* モーダルウインドウ        */
/*****************************/
.modalListArea{
	overflow:auto;
/*
	height:300px;
	width:300px;
	padding:5px;
	border:1px solid #000;
	background-color:#F9F9F9;
	color:#000;
	font-size:12px;
*/
}
.remodal{
	/*background-color:var(--color3) !important;*/
	padding:35px 18px !important;
}

.remodal .logo{
	float:left;
	text-align: left;
	left:0;
	/*height:60px !important;
	max-width :225px !important;*/
	height:50px !important;
/*	max-width :188px !important; */
	
	margin:-35px 10px 0 0;
	padding:0;
	color: var(--logo);
	line-height:140%;
}

.remodal .logo img{
	/*max-height:60px;
	max-width :225px;*/
	max-height:50px;
	max-width :188px;
}

iframe#footerFrame{
	border:none;
	margin-top:0px;
}

.remodal-close {
	right: 0;
	left:inherit !important;
	background: var(--color1) !important;
	color:#fff !important;
	width: 50px !important;
	height: 50px !important;
}

.remodal-close:before {
	/*font-size: 50px !important;
	line-height: 35px !important;*/
	font-size: 55px !important;
	line-height: 50px !important;
	width: 50px !important;
	font-weight:normal !important;
}

.remodal-cancel {
  color: #fff;
  background: var(--color1) !important;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: var(--color1) !important;
}

.remodal .buttonKao{
	background-color:var(--button-color-pink2) !important;
	/*border:none;*/
}


.popup_bkg{
	/*background-color:var(--color3);*/
}

#popup_container{
	text-align: left;
	
}

#popup_container h1{
	/*width:98%;
	margin-left:3px;*/
	width:calc(98% - 3px);
	margin-left:3px;
}


#popup_container .popup_txtbox {
	padding-left:5px;
	padding-top:5px;
	padding-right:5px;
	line-height:1.4em;
	color:#666666;
}

#popup_container p.answer {
	background: #F2F2F2;
	margin-left: 1em;
	padding: 10px;
}

#popup_container .popup_table{
	width:100%;
	border-top:1px solid var(--color1);
	border-right:3px solid var(--color1);
}


#popup_container .popup_table th, #popup_container .popup_table td{
	padding:20px 10px;
}

#popup_container .popup_table th{
	/*width:25%;*/
	/*text-align: right;*/
	color:#fff;
	background-color:var(--color1);
	border-top:none;
	border-bottom: 1px solid #fff;
}

#popup_container .popup_table td{
	text-align: left;
	/*background-color:#fff;*/
	
	border-bottom:1px solid var(--color1);
}




/*****************************/
/* 大まかな画面構成          */
/*****************************/
#mainVisual{
	clear: both;
	margin:0;
	background-color:var(--main-bgcolor);
	font-size:0;
}

#mainVisual .inner img{
	/*max-height: 450px;*/
	height: auto;
	width:100%;
	z-index: 10;
}


div#contents{
	overflow:hidden;
	margin-bottom:25px;
	padding-bottom:80px;
}

#mainArea{
	/*width:100%;*/
	width:94%;
	margin:0 auto;
}

#sideArea{
	display: none;
}

#pagetopArea{
	clear: both;
}

#pagetopArea .pagetop{
	display: none;
}

#pagetopArea .pagetopSp{
	display: block;
	margin:0 10px 140px auto;
	background-color: var(--color1);
	color:#fff;
	width:50px;
	height:50px;
	margin-top:-14px;
	background-image:url("../img/template/pagetopBg.png");
	background-repeat: no-repeat;
	background-position: center;
	border:1px solid #fff;
	
	position:fixed;
	right:0;
	bottom:-130px;
}



/*****************************/
/* index2.php                */
/*****************************/
.index2TitleArea{
	/*margin-bottom:20px;*/
	width:96%;
	margin:0 auto 20px;
}

.index2TitleArea:after{
	content: "";
	display: block;
	clear: left;
}

.index2TitleArea .eturanKigenArea{
	text-align: left;
	font-size:11px;
}

.index2TitleArea .mainTitleArea{
	width:100%;
	text-align: left;
}





.index2WakuA{
	padding:40px 20px;
/*	background-image:url("../img/index2/contentLinkBg.png"); */
	background-repeat: no-repeat;
	background-position: 96% center;
	
	background-color:var(--color1);
}

.index2WakuA .index2HelpPc{
	display: none;
}

.index2WakuTxt{
	margin:0;
}

.index2WakuTxtTitle{
	font-size:18px;
	color:#fff;
}

.index2WakuTxtSetumei, .index2WakuTxt .button{
	display: none;
}

.index2WakuTxtSetumei{
	color: #fff;
}

/* グレーアウト */
.flex-container-vertical .out{
	background-color:#ccc;
}

.flex-container-vertical .out .index2WakuTxt .button{
	background-color: #eee !important;
}


.buttonTop{
	background-color:var(--button-color-top) !important;
	color:var(--txt-color) !important;
}


/*****************************/
/* imglist                   */
/*****************************/
/* ▼FacePic */
#FacePicAreaNew{
	position: relative;
}

#FacePicAreaNew .FacePicAreaNew-logo{
	display: inline-block;
}

#FacePicAreaNew p.FacePicAreaNew-title{
	position: absolute;
	display: inline-block;
	top:8px;
	left:197px;
	font-size: 14px;
}

#FacePicAreaNew .buttonArea{
	display: flex;
	margin:10px auto;
	justify-content: center;
}

/*#FacePicAreaNew .buttonArea:after{
	content:"";
	clear: left;
	display: block;
}*/

#FacePicAreaNew .buttonArea a{
	/*float:left;*/
	width:calc(100% / 3 );
	padding:10px 5px !important;
	letter-spacing: -0.1em;
}

#FacePicAreaNew .buttonArea a:not(:last-child){
	margin-right:12px;
}

#FacePicAreaNew a.buttonStart{
	background-color:var(--button-color-pink2) !important;
}

#FacePicAreaNew a.buttonHelp{
	background-color:#EEEEEE;
	color:#000;
}

#FacePicAreaNew a.buttonKekka{
	background-color:var(--button-color-green) !important;
	color:#000;
}

.imgList-step{
	text-align: center;
}


/* ▲FacePic */


.listTabArea{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content: center;
	margin-bottom:20px;
}

.listMenu{
	position: relative;
	margin-bottom:20px;
}

.listMenu .listNavi{
	width:100%;
	overflow: hidden;
}

.listMenu .listPage{
	position: absolute;
	right:10px;
	bottom:0;
	width:20%;
}




.list_box{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	/*justify-content: center;*/
	width:100%;
}

.list_box_waku{
	width:calc(100% / 2 - 10px);
	/*margin-bottom: 20px;*/
	margin:0px 5px 40px;
	/*border-bottom:1px #999999 dotted; */
	/*border-right:1px #666666 solid; 
	border-bottom:1px #666666 solid;*/
	box-shadow: 3px 3px 3px #ccc;
	border-radius: 0 0 4px 0;
	/*padding-bottom:15px;*/
	padding-bottom:25px;
}

.list_box_waku:not(:nth-child(2n+0)){
/*	margin-right:10px; */
/*	margin-left:10px; */
}


.list_box_waku .list_box_img{
	position: relative;
	text-align: center;
}

.list_box_waku .list_box_img img.pic{
	/*width:100%;*/
	border:1px solid #707070;
}

.list_box_waku .list_box_img img.info{
	position: absolute;
	right:60px;
	bottom:-30px;
}

.list_box_waku .list_box_img img.cart, .list_box_waku .list_box_img img.up{
	position: absolute;
	right:5px;
/*	bottom:-30px; */
}


.list_box_waku .list_box_select{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	/*justify-content: center;*/
	width:100%;
}

.list_box_waku .list_box_select a{
	width:calc(100% / 2 - 12px) !important;
	margin-bottom:5px;
}

.list_box_waku .list_box_select a:not(:nth-child(2n)){
	margin-right:5px;
}

.list_box_waku .list_box_size{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	/*justify-content: center;*/
	width:100%;
}

.list_box_waku .list_box_size a{
	width:calc(100% / 2 - 12px) !important;
}

.list_box_waku .list_box_size a:not(:last-child){
	margin-right:5px;
}


.img_list_large .viewArea{
	position: relative;
	widht:94%;
	padding:0 3%;
	margin-top:50px;
}

.img_list_large .viewArea img{
	border:1px solid #707070;
}

.img_list_large .viewArea a.buttonBefore, .img_list_large .pickup a.buttonBefore{
	position: absolute;
	left:0;
	top:50%;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	display: block;
	width:40px;
	height:40px;
	border-radius: 50%;
	background-color: var(--color1);
	background-image:url("../img/imglist/buttonLeft.png");
	background-repeat: no-repeat;
	background-position: center;
}

.img_list_large .viewArea a.buttonAfter, .img_list_large .pickup a.buttonAfter{
	position: absolute;
	right:0;
	top:50%;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	display: block;
	width:40px;
	height:40px;
	border-radius: 50%;
	background-color: var(--color1);
	background-image:url("../img/imglist/buttonRight.png");
	background-repeat: no-repeat;
	background-position: center;
}

.img_list_large .title{
	width:94%;
	margin: 0 auto;
	font-size:24px;
}

.img_list_large .buttonArea{
	width:65%;
	margin:30px auto;
	/*display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content: center;*/
}

.img_list_large .buttonArea a{
	display:block;
	width:42%;
	float: left;
	padding:10px;
	margin:0 5px 0 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color:#000000;
	text-decoration: none;
	text-align: center;
}

.img_list_large .buttonArea a.buttonSukashi{
	background-color:var(--grey-out-color);
	margin:0 5px 0 0;
}

.img_list_large .buttonArea a.buttonCart{
	background-color:var(--button-color-green);
	margin:0;
}

.img_list_large .buttonArea:after{
	content:"";
	clear: both;
	display: block;
}


.img_list_large .pickup {
	position: relative;
	width:94%;
	padding:0;
	margin-bottom:50px;
}

.img_list_large .pickup .imgArea {
	width:100%;
	white-space:nowrap;
	overflow: auto;
	overflow-y: hidden;
	/*display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content: center;*/
}

.img_list_large .pickup .imgArea a.pic {
/*	width:calc(100% / 5 - 5px); */
	margin-right:5px;
/*	float:left; */
}

.img_list_large .pickup .imgArea a.pic:last-child {
	margin-right:0;
}

.img_list_large .pickup .imgArea a.pic img {
/*	width:100%; */
/*	max-height:150px; */
	height:120px;
}

.img_list_large .pickup .imgArea:after {
	content:"";
	clear: both;
	display: block;
}



.img_list_category .listArea a{
	display:block;
	padding:10px;
	text-decoration: none;
	background-color:var(--color2);
	color:var(--txt-color);
	border-top:1px solid #707070;
	border-left:1px solid #707070;
	border-right:1px solid #707070;
}

.img_list_category .listArea a:last-child{
	border-bottom:1px solid #707070;
}

.img_list_category .listArea a:hover{
	background-color:var(--color1);
}


/*****************************/
/*	Pict Area	             */
/*****************************/

#pictListArea{
	margin: 15px 0px 120px 0px;
	padding:15px 5px 5px 5px;
	width:97%;
	border-top: 1px solid #573425;
/*	background-color: #39F; */
}

#pictListArea .pictArea{
	float: left;
	/*width: 46% ;*/
	width:calc(100% / 3 - 10px);
	min-width: 150px ;
/*	max-width: 207px ; */
	text-align: center;
	line-height:100%;
	padding: 5px 0 5px 0;
	margin: 10px 2px 0px 0px;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid var(--color1);
}

#pictListArea .selecting{
	background-color:#A0E1F1 ;

}
#pictListArea .pictNoArea{
	padding-top:3px;
	background-color: #EEEEEE;
	color:#000000;
}

#pictListArea .pictArea a{
	text-decoration:none;
}

#pictPageNavi ,#pictPageNaviFtr {
	background-color: #F4F4F4;
	margin:15px 5px 0px 5px;
	padding:5px;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #999999;
}

#pictPageNavi select ,#pictPageNaviFtr select{
	font-size:100%;
}

#pictPageNavi a.btnKadoMaru ,#pictPageNaviFtr a.btnKadoMaru{
	font-size:95%;
	text-decoration:none;

/*	background: #EEE; */

	background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));

	color: #111;
	-moz-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
	-webkit-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
	border-top: 1px solid #BBB;
	border-left: 1px solid #BBB;
	border-right: 1px solid #FFF;
	border-bottom: 1px solid #FFF;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

	width: 100px;
	padding: 5px 10px;
}

/*****************************/
/*	Card UploadPict	         */
/*****************************/
.postcardUploadButton{
	width:90%;
}


/*****************************/
/*	Card Procedure	         */
/*****************************/
.postcardInfo{
	line-height: 2em;
}

.postcardInfo input{
	height:10px;
	margin:0;
}




/*****************************/
/*	outline Area	         */
/*****************************/
#OutlineArea{
	margin:0 0 20px;
}

#OutlineArea:after{
	content: "";
	display: block;
	clear: both;
}

#OutlineArea .imgArea{
	float: left;
	text-align: left !important;
	width:200px;
}

#OutlineArea .imgArea img{
	border: 1px solid var(--color1);
	padding: 20px;
}

#OutlineArea .txtArea{
	float: right;
	text-align: left;
	width:calc(1024px - 220px - (1024px - 99.9%));
}

#OutlineArea .txtArea .maisuu{
	padding:20px;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
}

#OutlineArea .txtArea .maisuu span{
	color:var(--color1);
}

/*****************************/
/*	index-login Area         */
/*****************************/
.manualHead {
	display:none ;
}

.manualArea{
	padding:0 1%;
}

.manualArea img{
	width:32%;
}


.ev_popup_table{
	width:100%;
}

.ev_popup_table th, .ev_popup_table td{
	padding:20px 10px !important;
}

.ev_popup_table th{
	/*width:25%;*/
	/*text-align: right;*/
	color:var(--color1);
	/*background-color:var(--color1);*/
	border-bottom: 3px solid var(--color1);
}

.ev_popup_table td{
	text-align: left;
	/*background-color:#fff;*/
	border-bottom:1px solid var(--color1);
}

.ev_popup_table td.status{
	color:var(--color1);
}


/*****************************/
/*	procedure                */
/*****************************/
#ProcedureArea .step{
	display: none;
}

#ProcedureArea .txt_exlarge{
	text-align: center;
}

#ProcedureArea .txt_exlarge strong.col_red{
	color:#ff0000 !important;
}
#ProcedureArea .totalPrice{
	width:100%;
	margin-bottom: 10px;
	border:3px solid var(--color1);
}

#ProcedureArea .totalPrice th{
	padding:20px;
	text-align: left;
	background-color: var(--color1);
	color:var(--color5);
}

#ProcedureArea .totalPrice td{
	padding:20px;
	text-align: right;
	color:#707070;
}

#ProcedureArea .pictList{
	border-collapse: collapse;
	width:100%;
	border-right:2px solid var(--color1);
	border-left:3px solid var(--color1);
	border-bottom:2px solid var(--color1);
}

#ProcedureArea .pictList th{
	border: 0px none;
	background-color: var(--color1);
	color:var(--color5);
	padding:20px 0;
	line-height: 110%;
}

#ProcedureArea .pictList th:not(:last-child){
	border-right:1px solid var(--color5);
}

#ProcedureArea .pictList td{
	border: 0px none;
	padding:20px 5px;
	border-right:1px solid var(--color1);
	border-bottom:1px solid var(--color1);
}

#ProcedureArea .pictList tr.pc{
	display: none;
}

#ProcedureArea table.buttonArea{
	width:65%;
	text-align:center;
	margin:0 auto;
}

#ProcedureArea table.buttonArea td{
	display: block;
	width:100%;
}


#ProcedureArea .thanks01{
	text-align: center;
	margin:20px 0;
}

#ProcedureArea .thanks01 p{
	font-size:18px;
}

#ProcedureArea .ordernumber{
	text-align: center;
	background-color:var(--color3);
	border:1px solid #707070;
	padding:10px;
}

#ProcedureArea .ordernumber p{
	font-size:18px;
}

#ProcedureArea .cardpayment{
	text-align: center;
	margin:30px 0;
}

#ProcedureArea .cardpayment p{
	font-size:18px;
}

#ProcedureArea .cvspayment{
	text-align: center;
	margin:30px 0;
}

#ProcedureArea .cvspayment p{
	font-size:18px;
}

#ProcedureArea .userInput{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
}

#ProcedureArea .userInput th{
	border: 0px none;
	border-bottom:1px solid var(--color1);
	color:var(--color1);
	padding:20px 20px;
	line-height: 110%;
	text-align: left;
}

#ProcedureArea .userInput td{
	border: 0px none;
	padding:20px 0;
	border-bottom:1px solid var(--color1);
}

#ProcedureArea .goukei{
	width:50%;
	margin:0 0 0 auto;
}


#ProcedureArea .userInput .col_caution{
	color:#ff0000;
}

#ProcedureArea .userInput #var_PAYMENT_TYPE1, #ProcedureArea .userInput #var_PAYMENT_TYPE2, #ProcedureArea .userInput #var_PAYMENT_TYPE3{
	height:12px !important;
}

#ProcedureArea .userInput #var_DELIVERY_TYPE1, #ProcedureArea .userInput #var_DELIVERY_TYPE2, #ProcedureArea .userInput #var_DELIVERY_TYPE3{
	height:12px !important;
}

#ProcedureArea .userInput td #var_USER_ADDRESS1, #ProcedureArea .userInput td #var_DELI_ADDRESS1{
	height:32px;
}

#ProcedureArea #agreeBox{
	height:12px !important;
}

#ProcedureArea #var_SEITO_SAME{
	height:12px !important;
}


/*****************************/
/*	user                     */
/*****************************/
#userLoginArea .NewUser{
	margin-bottom:30px;
}

#userLoginArea .NewUser a{
	display: block;
	background-color: var(--color8);
	border-left:5px solid var(--color1);
	padding:14px 10px;
	background-image:var(--new-user-bg);
	/*background-image:url("../img/userLogin/newUserBg-brown.png");*/
	background-repeat: no-repeat;
	background-position: 98% center;
	
	color:#000000;
	text-decoration: none;
}

#userLoginArea .NewUser a .title{
	font-size:16px;
	font-weight: bold;
	color:var(--logo);
	margin:0;
	padding:0;
}


#userLoginArea .NewUser a .setumei{
	font-size:12px;
	margin:0;
	padding:0;
}

#userLoginArea .NewUser p{
	font-size:12px;
}

#userLoginArea .userInput{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
}

#userLoginArea .userInput th{
	border: 0px none;
	border-bottom:1px solid #fff;
	background-color:var(--color1);
	color:#fff;
	padding:20px 20px;
	line-height: 110%;
	text-align: left;
	width:30%;
	max-width:200px;
	white-space:normal;
}

#userLoginArea .userInput td{
	border: 0px none;
	padding:20px 10px;
	border-right:3px solid var(--color1);
	border-bottom:1px solid var(--color1);
}

#userLoginArea .userInput td input{
	width:96%;
}

#userLoginArea .userInput td .passwordLink{
	width:100%;
	text-align: right;
	font-size:12px;
	color:#000 !important;
	text-decoration: none !important;
}

#userLoginArea table.buttonArea{
	width:60%;
	text-align:center;
	margin:0 auto;
}

#userLoginArea table.buttonArea td{
	display: block;
	width:100%;
}

#userLoginArea .AreaWaku h3{
	font-size:19px !important;
}


#usermailChkArea .reg_step2{
	text-align: center;
	font-size:18px;
	margin:20px 0 30px;
}

#usermailChkArea .reg_step2 img{
	margin-bottom:20px;
}

#usermailChkArea .reg_step2 span{
	color:#ff0000;
}

#usermailChkArea .AreaWaku{
	background-color:var(--color3);
	border:1px solid #707070;
	padding:10px;
}

#usermailChkArea .AreaWaku p.touroku{
	color:var(--color1) !important;
}

#usermailChkArea .userInput{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
}

#usermailChkArea .userInput th{
	display:block;
	width:100%;
	
	border: 0px none;
	border-bottom:1px solid var(--color1);
	color:var(--color1);
	padding:20px 20px;
	line-height: 110%;
	text-align: left;
}

#usermailChkArea .userInput td{
	display:block;
	width:100%;
	
	border: 0px none;
	padding:20px 0;
	border-bottom:1px solid var(--color1);
}

#usermailChkArea table.buttonArea{
	width:60%;
	text-align:center;
	margin:0 auto;
}

#usermailChkArea table.buttonArea td{
	display: block;
	width:100%;
}

#usermailChkArea .AreaWaku h3{
	font-size:19px !important;
}


#userRegistArea .userInput{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
}

#userRegistArea .userInput th{
	display:block;
	width:100%;
	
	border: 0px none;
	border-bottom:1px solid var(--color1);
	color:var(--color1);
	padding:20px 20px;
	line-height: 110%;
	text-align: left;
}

#userRegistArea .userInput td{
	display:block;
	width:100%;
	
	border: 0px none;
	padding:20px 0;
	border-bottom:1px solid var(--color1);
}

#userRegistArea .userInput td #var_USER_ADDRESS1{
	height:32px;
}

#userRegistArea .userInput .col_caution{
	color:#ff0000;
}

#userRegistArea table.buttonArea{
	width:60%;
	text-align:center;
	margin:0 auto;
}

#userRegistArea table.buttonArea td{
	display: block;
	width:100%;
}



#userPassMailArea .UnderComment{
	font-size:12px;
}

#userPassMailArea .UnderComment span{
	color:#ff0000;
}

#userPassMailArea .userInput{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
}

#userPassMailArea .userInput th{
	display:block;
	width:100%;
	
	border: 0px none;
	border-bottom:1px solid var(--color1);
	color:var(--color1);
	padding:20px 20px;
	line-height: 110%;
	text-align: left;
}

#userPassMailArea .userInput td{
	display:block;
	width:100%;
	
	border: 0px none;
	padding:20px 0;
	border-bottom:1px solid var(--color1);
}

#userPassMailArea table.buttonArea{
	width:60%;
	text-align:center;
	margin:0 auto;
}

#userPassMailArea table.buttonArea td{
	display: block;
	width:100%;
}

#userPassMailArea .AreaWaku{
	margin-bottom:20px;
}

#userPassMailArea .AreaWaku h3{
	font-size:19px;
	margin-bottom:0;
}

#userPassMailArea .AreaWaku .Tyui{
	font-size:12px;
}

#forgetContents{
	position: relative;
}

#forgetLoginArea{
	position: absolute;
	top: 150px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	border:1px solid var(--color2);
	width:94%;
	margin:0 auto;
	padding:20px 10px;
	max-width: none;
	/*height:500px;*/
}

#forgetLoginArea .Title1{
	text-align: center;
	font-size:24px;
	margin-bottom:10px;
}

#forgetLoginArea .AreaWaku{
	margin:0 auto;
	width:60%;
}

#forgetLoginArea .AreaWaku input#var_SHOP_ID, #forgetLoginArea .AreaWaku input#var_EVENT_ID, #forgetLoginArea .AreaWaku input#pw, #forgetLoginArea .AreaWaku input#simplePw, #forgetLoginArea .AreaWaku input#OTpw, #forgetLoginArea .AreaWaku input#var_USER_MAIL, #forgetLoginArea .AreaWaku input#var_USER_PW, #forgetLoginArea .AreaWaku input#var_ORDER_CD_CHK{
	width:100%;
	margin-bottom: 10px;
}


/*****************************/
/*	order                    */
/*****************************/
#OrderRirekiArea .OrderList{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	/*border-top:3px solid var(--color1);*/
	border-bottom:3px solid var(--color1);
}

#OrderRirekiArea .OrderList th{
	border: 0px none;
	border-right:1px solid var(--color5);
	background-color:var(--color1);
	color:var(--color5);
	padding:20px 20px;
	line-height: 110%;
	text-align: center;
	white-space: nowrap;
}

#OrderRirekiArea .OrderList th:last-child{
	border-right:1px solid var(--color1);
}

#OrderRirekiArea .OrderList td{
	border: 0px none;
	padding:20px 0;
	border-right:1px solid var(--color1);
	border-bottom:1px solid var(--color1);
	text-align: center;
}

#OrderRirekiArea .OrderList td:first-child{
	border-left:1px solid var(--color1);
}

#OrderRirekiArea .OrderList td a{
	text-decoration: none;
	color:var(--txt-color);
}

#OrderRirekiArea .OrderList td a:hover{
	color:var(--txt-color-hover);
}


#OrderRirekiArea .OrderDtl{
	margin:20px 0 30px;
	border-collapse: collapse;
	width:100%;
	border-top:3px solid var(--color1);
	border-bottom:3px solid var(--color1);
	border-left:1px solid var(--color1);
}

#OrderRirekiArea .OrderDtl th, #OrderRirekiArea .OrderDtl td{
	height:65px;
	min-height:65px;
}

#OrderRirekiArea .OrderDtl th{
	border: 0px none;
	border-top:1px solid var(--color5);
	border-right:1px solid var(--color5);
	background-color:var(--color1);
	color:var(--color5);
	padding:20px 20px;
	line-height: 110%;
	white-space: nowrap;
	text-align: left;
	width:130px;
	font-size:14px !important;
}

/*#OrderRirekiArea .OrderDtl th:last-child{
	border-right:1px solid var(--color1);
}*/

#OrderRirekiArea .OrderDtl td{
	border: 0px none;
	padding:20px 20px;
	border-right:1px solid var(--color1);
	border-bottom:1px solid var(--color1);
	font-size:14px !important;
	/*line-height: 120%;*/
}

/*#OrderRirekiArea .OrderDtl td:first-child{
	border-left:1px solid var(--color1);
}*/

#OrderRirekiArea .container{
	width:100%;
	max-width:none !important;
}

#OrderRirekiArea .leftside{
	padding-right:0;
}

#OrderRirekiArea .rightside{
	padding-left:0;
}



#OrderRirekiArea .OrderDtl2{
	margin-bottom:40px;
}

#OrderRirekiArea .OrderDtl2 .leftside{
	padding-right:0;
}

#OrderRirekiArea .OrderDtl2 .rightside{
	padding-left:0;
}


#OrderRirekiArea .OrderDtl2 .datafirst1, #OrderRirekiArea .OrderDtl2 .datafirst2{
	border-top:3px solid var(--color1);
}

#OrderRirekiArea .OrderDtl2 .form-group{
	width:100%;
}

#OrderRirekiArea .OrderDtl2 .form-group .title{
	/*display: flex;*/
	align-items: center;
	/*float:left;*/
	width:140px;
	background-color:var(--color1);
	color:var(--color5);
	border-bottom:1px solid var(--color5);
	padding:25px 20px;
	/*height:65px;*/
	/*min-height:65px;*/
	font-weight:bold;
	/*line-height: 120%;*/
}

#OrderRirekiArea .OrderDtl2 .form-group .data{
	/*display: flex;*/
	align-items: center;
	/*float:left;*/
	width:calc(100% - 140px);
	padding:25px 20px;
	border-right:1px solid var(--color1);
	border-bottom:1px solid var(--color1);
	/*height:65px;*/
	/*min-height:65px;*/
	/*line-height: 120%;*/
}

#OrderRirekiArea .OrderDtl2 .form-group:after{
	content:"";
	clear: both;
	display: block;
}

/*#OrderRirekiArea .OrderDtl2 .datalast1, #OrderRirekiArea .OrderDtl2 .datalast2{
	border-bottom:2px solid var(--color1);
}*/

#OrderRirekiArea .OrderDtl2 .datalast1 .title, #OrderRirekiArea .OrderDtl2 .datalast2 .title, #OrderRirekiArea .OrderDtl2 .datalast1 .data, #OrderRirekiArea .OrderDtl2 .datalast2 .data{
	border-bottom:3px solid var(--color1);
}

#OrderRirekiArea .goukei{
	width:50%;
	margin:0 0 40px auto;
}

#OrderRirekiArea .goukei th, #OrderRirekiArea .goukei td{
	border-bottom:1px solid var(--color1);
	padding:10px;
}

#OrderRirekiArea .goukei th{
	width:50%;
	font-weight: normal;
	text-align: left;
	padding-left:30px;
}

#OrderRirekiArea .goukei:after{
	content:"";
	clear: both;
	display: block;
}


/*****************************/
/*	oneTimeLogin             */
/*****************************/
#onetimeLoginArea{
	position:relative;
	/*left: calc(50% - 35%);*/
	margin:10% auto;
	padding:20px 10%;
	max-width:340px;
	width:75%;
	border:1px solid var(--color2);
	background-color:#ffffff !important;
	-webkit-box-shadow: 1px 2px 2px rgba(240,229,209,.4);
	-moz-box-shadow: 1px 2px 2px rgba(240,229,209,.4);
	box-shadow: 1px 2px 2px rgba(240,229,209,.4);
	z-index: 50 !important;
}

#onetimeLoginArea .Title1{
	text-align: center;
	font-size: 24px;
}

#onetimeLoginArea .Title2{
	font-size: 14px;
	margin-top:10px;
}

#onetimeLoginArea input{
	width:98%;
}

#onetimeLoginArea .ExecButton{
	margin:10px 0 0;
	padding:0;
	width:100%;
}

#onetimeLoginArea .ExecButton a{
	font-size:24px;
}

#onetimeLoginArea .defStr{
	text-align: center;
	margin-top:10px;
}



/*画像をマスクして左から文字がスライド */
/*
.list_box_img {
	width:			100;
	height:			100;
	overflow:		hidden;
	margin:			0px 0px 0px 0px;
	position:		relative;
}
*/
.list_box_img .MaskCaption {
	font-size:		100%;
	color:			#fff;
	padding-top:		0px;
	padding-left:		0px;
}
.list_box_img .MaskArea {
	width:			100%;
	height:			20px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.list_box_img:hover .MaskArea {
	opacity:		1;	/* マスクを表示する */
	padding-top:		10px;
	padding-left:		0px;	/* 右にずらす */
	z-index:900;
}
.list_box_img .MaskCaptionL {
	font-size:		200%;
	color:			#fff;
	padding-top:		0px;
	padding-left:		0px;
}
.list_box_img .MaskAreaL {
	width:			100%;
	height:			25px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.list_box_img:hover .MaskAreaL {
	opacity:		1;	/* マスクを表示する */
	padding-top:		20px;
	padding-left:		0px;	/* 右にずらす */
}
.list_box_img .MaskAreaP {
	width:			100%;
	height:			18px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.list_box_img:hover .MaskAreaP {
	opacity:		1;	/* マスクを表示する */
	padding-top:		5px;
	padding-left:		0px;	/* 右にずらす */
}
.list_box_img .MaskCaptionPL {
	font-size:		200%;
	color:			#fff;
	padding-top:		0px;
	padding-left:		0px;
}
.list_box_img .MaskAreaPL {
	width:			100%;
	height:			40px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.list_box_img:hover .MaskAreaPL {
	opacity:		1;	/* マスクを表示する */
	padding-top:		10px;
	padding-left:		0px;	/* 右にずらす */
}
/*画像をマスクして左から文字がスライド */




/* 幅480px以下（スマホサイズ・モーダル用） */
@media only screen and (max-width: 480px){
	#popup_container h1{
	width:calc(98% - 7px);
	margin-left:3px;
}
	
	
	.img_list_large .buttonArea{
		width:60%;
	}
	
	.img_list_large .buttonArea a{
		width:100% !important;
		margin:0 0 5px;
	}
	
	.img_list_large .buttonArea a.buttonSukashi{
		margin:0 0 5px;
	}
	
	.img_list_large .pickup .imgArea a.pic{
		width:48% !important;
	}
	
	
	
}