/* CSS Document */

/*****************************/
/* レスポンシブ処理          */
/*****************************/
/* 幅768px以上（タブレット縦サイズ） */
@media only screen and (min-width: 768px){
/*****************************/
/* 共通部品                  */
/*****************************/
	h1 {
		margin-left:0px;
	}
	/* ハンバーガーメニュー */
	div.mainNav .linkArea{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		
		flex-wrap: no-wrap;
		justify-content: space-around;
		margin-top:30vh;
		
		width:60%;
		margin:30vh auto 0;
		flex-wrap:wrap;
	}

	div.mainNav .linkArea a{
		/*background-color:blanchedalmond;*/
		width:calc(100% / 4 - 60px);
		max-width:120px;
		text-align: center;
		
		display: block;
		margin:0;
		padding:80px 30px 20px;
	
		text-decoration: none;
		font-size:18px;
		line-height: 130%;
	
		color: var(--txt-color);
		border-bottom:none;
	
		background-image:none;
		background-position: top 10px center;
	}
	
	div.mainNav .linkArea a.bgTop{
		background-image:url("../img/template/mainNavPcTop.png");
	}
	
	div.mainNav .linkArea a.bgOrderList{
		background-image:url("../img/template/mainNavPcOrderList.png");
	}
	
	div.mainNav .linkArea a.bgContact{
		background-image:url("../img/template/mainNavPcContact.png");
	}
	
	div.mainNav .linkArea a.bgUserRegist{
		background-image:url("../img/template/mainNavPcUserRegist.png");
	}
	
	div.mainNav .linkArea a.bgManualShop{
		background-image:url("../img/template/mainNavPcManualShop.png");
	}
	
	div.mainNav .linkArea a.bgOutline{
		background-image:url("../img/template/mainNavPcOutline.png");
	}
	
	div.mainNav .linkArea a.bgPrice{
		background-image:url("../img/template/mainNavPcPrice.png");
	}
	
	div.mainNav .linkArea a.bgKiyaku{
		background-image:url("../img/template/mainNavPcKiyaku.png");
	}
	
	div.mainNav .linkArea a.bgTokusyou{
		background-image:url("../img/template/mainNavPcTokusyou.png");
	}

	div.mainNav .linkArea a:first-child{
		border-top:none;
	}
	
	
	/* お知らせ */
	.eturanInfo{
		/*width:90%;*/
		text-align: center;
		margin:20px;
		padding:20px;
		background-image: none;
	}
	
	.sideChumon{
		/*width:90%;*/
		text-align: center;
		margin:20px;
		padding:20px;
		background-image: none;
	}
	
	.eturanInfo .button, .sideChumon .button{
		width:inherit;
	}
	
/*****************************/
/* ヘッダー                  */
/*****************************/
	header{
		height:calc(80px - 1.5em) ;
		padding-top:calc(80px / 2 - 1em);
	}
	
	header .logo{
		width:300px !important;
		/*background-color:#0000ff;*/
		margin-top:-20px;
	}
	
	header .logo img{
		max-height:80px;
		max-width: 300px;
		/*margin-top:calc(-100px / 2 + 0.8em );*/
		margin-top:calc(-80px / 2 + 1em );
		margin-bottom:-12px;
	}
	
	header .headerMenu{
		width:57%;
		/*background-color:#ff0000;*/
		margin-top:12px;
	}
	
	header .headerMenu ul.menu01{
		display: block;
		float:right;
		/*background-color: #00ff00;*/
		padding-left:0;
		margin-top:5px;
		margin-left: 0;
		margin-right:0;
	}

	header .headerMenu ul.menu01 li{
		list-style-type: none;
		float:left;
		margin:0;
		padding:0;
		margin-right:10px;
	}

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

	header .headerMenu ul.menu01 li a{
		color:var(--txt-color);
		text-decoration: none;
	}

	header .headerMenu ul.menu01 li a:hover{
		color:var(--txt-color-hover);
	}
	
	/*header .hamburger{
		display: none;
	}*/
	
	header .headerMenu ul.menu02{
		margin-bottom:0;
	}
	
	header .headerMenu ul.menu02 li a{
		width:80px;
		height:80px;
		margin-top:-49px;
	}
	
	header .headerMenu ul.menu02 li a.buttonLogout{
		background-size:45px;
	}

	header .headerMenu ul.menu02 li a.buttonCart{
		background-size:45px;
	}
	
	header .headerMenu ul.menu02 li a.buttonHamburger{
		background-size:45px;
	}
	
	header .headerMenu ul.menu02 li a p.txtMenu02{
		font-size: 14px;
	}
	
/*****************************/
/* フッター                  */
/*****************************/
	footer{
		width: 100%;

		margin:0 0 0 0 !important;
		padding:40px 0 20px 0;
		background-color: var(--color2);
		z-index: 100;
	}
	
	footer .inner{
		width: 100%;
		margin:0 auto ;
		padding:0;
	}

	footer div.footerCategory .buttonCategoryArea{
		width:80px;
	}
	
	footer div.footerCategory .txtArea{
		padding-top:3%;
		width:68%;
	}
	
	footer div.footerCategory .buttonCategoryArea a.buttonCategory{
		width:80px;
		height:80px;
		background-size:45px;
	}
	
	footer div.footerCategory .buttonCategoryArea a p.txtMenu02{
		font-size:12px;
	}
	
	
	footer div.footerCategory .txtArea .name{
		font-size:16px;
	}

	footer div.footerCategory .txtArea .maisu{
		font-size:16px;
	}
	
	footer div.bigicon{
		width:80px;
	}
	
	footer div.bigicon a.buttonBigicon{
		width:80px;
		height:80px;
		background-size:45px;
	}
	
	footer div.bigicon a.buttonBigicon p.txtMenu02{
		font-size: 12px;
	}
	
	footer div.thumbnail{
		width:80px;
	}
	
	footer div.thumbnail a.buttonThumbnail{
		width:80px;
		height:80px;
		background-size:45px;
	}
	
	footer div.thumbnail a.buttonThumbnail p.txtMenu02{
		font-size: 12px;
	}
	
	footer div.BackNext{
		width:165px;
	}
	footer div.BackNext a.buttonBackDir{
		width:80px;
		height:80px;
		background-size:45px;
	}
	
	footer div.BackNext a.buttonBackDir p.txtMenu02{
		font-size: 11px;
	}
	
	footer div.BackNext a.buttonNextDir{
		width:80px;
		height:80px;
		background-size:45px;
	}
	
	footer div.BackNext a.buttonNextDir p.txtMenu02{
		font-size: 11px;
	}
	
	footer div.pagetop{
		width:80px;
	}
	
	footer div.pagetop a.buttonPagetop{
		width:80px;
		height:80px;
		background-size:45px;
	}
	
	footer div.pagetop a.buttonPagetop p.txtMenu02{
		font-size: 12px;
	}

	footer ul.linkindex{
		display: block;
		width:calc(80% - 20px);
		max-width:1024px;
		/*min-width: 768px;*/
		/*margin: 0 auto 20px 0;*/
		margin:0 0 20px;
		display: flex;
		/*justify-content:center;
		align-items: center;*/
		flex-wrap:wrap;
		box-sizing: border-box;
	}

	footer ul.linkindex li{
		list-style-type: none;
		margin-right:26px;
		margin-bottom: 6px;
	}

	footer ul.linkindex li a{
		display: inline;
		width:inherit;
		margin:0;
		padding:0;
		text-decoration: none;
		color: var(--txt-color);
		border-bottom:none;
		cursor: pointer;
		cursor: hand;
		background-color:transparent;
		background-image: none;
	}
	
	

	
	
	
	
	/* 画面の構成（メインとサイドメニューを左右に配置） */
	div#contents{
		/*background-color: var(--color3);*/
		position:relative;
	}
	#mainArea{
		float:right;
		/*width:73%;*/
		width:calc(1024px - 290px - (1024px - 99.9%)); 
		/*max-width:768px;*/
		margin:0 ;
		padding-left:10px;
		/*background-color:var(--color5);*/
	}
	
	#sideArea{
		display: block;
		float:left;
		/*width:25%;
		min-width: 260px;*/
		width:25%;
		min-width: 280px;
		/*background-color: var(--color3);*/
		/*padding-bottom: 10000px;
		margin-bottom: -10000px;*/
	}
	
	#pagetopArea{
		display: block;
		clear: both;
		/*width:100%;*/
		/*margin:0 auto -6px;*/
		margin:0 0 -6px;
		padding:20px 0 0 0;
		text-align: right;
	}
	
	#pagetopArea a.pagetop{
		display: block;
		margin:0 10px 0 auto;
		padding:5px;
		width:90px;
		text-align: center;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		background-color: var(--color2);
		color:var(--txt-color);
		text-decoration: none;
	}
	
	#pagetopArea a.pagetopSp{
		display: none;
	}
	
	
	
/*****************************/
/* index2.php                */
/*****************************/
	.index2TitleArea .eturanKigenArea{
		text-align: right;
		font-size:12px;
	}
	
	.spView{
		display:none;
	}
	
	.index2WakuA{
		position: relative;
		
		background-image:none;
		padding:16px 20px;
		/*-webkit-flex: 220px;
		flex: 220px;*/
		-webkit-flex: 110px;
		flex: 110px;
		
		background-repeat: no-repeat;
		background-position: calc(100% - 55px) bottom;
		background-size: contain;
	}
	
	.index2WakuA .index2HelpPc{
		display: block;
		position: absolute;
		top:50%;
		right:3%;
		-webkit-transform: translate(0,-50%);
		transform: translate(0,-50%);
	}
	
	.index2WakuPhoto{
		background-image:url("../img/index2/content_photo.png");
	}
	
	.index2WakuChoice{
		background-image:url("../img/index2/content_choice.png");
	}
	
	.index2WakuSyounin{
		background-image:url("../img/index2/content_syounin.png");
	}
	
	.index2WakuDownload2{
		background-image:url("../img/index2/content_download2.png");
	}
	
	.index2WakuPostcard{
		background-image:url("../img/index2/content_postcard.png");
	}
	
	.index2WakuTxt{
		margin:0 50% 0 0;
	}
	
	.index2WakuTxtTitle{
		font-size:22px;
	}
	
	.index2WakuTxtSetumei, .index2WakuTxt .button{
		display: block;
	}
	
	
	
	
/*****************************/
/* imglist                   */
/*****************************/
/* ▼FacePic */
#FacePicAreaNew .buttonArea{
	position: absolute;
	top:12px;
	right:0;
	
	margin:inherit;
	
	font-size:12px;
}

#FacePicAreaNew .buttonArea a{
	width:98px;
}

/* ▲FacePic */
	
	
	.list_box_waku{
		width:calc(100% / 3 - 10px);
		/*min-width : 170px ;*/
		margin:0 5px 40px;
		/*margin:0 5px 20px;*/
	}
	
	/*.list_box_waku:not(:nth-child(2n)){
		margin-right:0;
	}*/
	
	.list_box_waku:nth-child(2n+0){
		/*margin-right:0 !important;*/
	}
	
	.list_box_waku:not(:nth-child(4n)){
		/*margin-right:10px;*/
	}
	
	/*.img_list_large .buttonArea a{
		width:calc(100% / 2 - 10px);
	}*/
	
	
	
	/*.img_list_large .pickup .imgArea a.pic{
		width:calc(100% / 5 - 10px);
	}*/
	
	
/*****************************/
/*	Pict Area	             */
/*****************************/
	#pictListArea .pictArea{
		width:calc(100% / 5 - 10px);
	}
	
	
/*****************************/
/*	Card UploadPict	         */
/*****************************/
.postcardUploadButton{
	width:500px !important;
}
	
	
/*****************************/
/*	index-login Area         */
/*****************************/
	.manualHead {
		display:block ;
	}
	
	.manualHead img{
		margin-top:-23px;
	}
	
	.manualArea{
		display:none;
	}

/*****************************/
/*	procedure                */
/*****************************/
	#ProcedureArea .step{
		display: block;
	}
	
	#ProcedureArea table .userInput th{
		display: table-cell;
		width:inherit;
	}
	
	#ProcedureArea table .userInput td{
		display: table-cell;
		width:inherit;
	}
	
	#ProcedureArea table.buttonArea td{
		display: table-cell;
		width:inherit;
	}


/*****************************/
/*	user                     */
/*****************************/
	#userLoginArea .step{
		display: block;
	}
	
	#userLoginArea table.buttonArea td{
		display: table-cell;
		width:inherit;
	}
	
	#usermailChkArea table.buttonArea td{
		display: table-cell;
		width:inherit;
	}
	
	#usermailChkArea .userInput th{
		display: table-cell;
		width:inherit;
	}

	#usermailChkArea .userInput td{
		display: table-cell;
		width:inherit;
	}
	
	#userRegistArea .userInput th{
		display: table-cell;
		width:inherit;
	}

	#userRegistArea .userInput td{
		display: table-cell;
		width:inherit;
	}
	
	#userRegistArea table.buttonArea td{
		display: table-cell;
		width:inherit;
		width:50%;
	}
	
	#userPassMailArea .userInput td{
		display: table-cell;
		width:inherit;
	}
	
	#userPassMailArea .userInput th{
		display: table-cell;
		width:inherit;
	}
	
	#userPassMailArea table.buttonArea td{
		display: table-cell;
		width:inherit;
		width:50%;
	}
	
	
	#forgetLoginArea{
		width:60%;
		max-width: 700px;
	}
	
	#forgetLoginArea .AreaWaku{
		width:50%;
	}

}


/* 幅1024px以上（PCサイズ） */
@media only screen and (min-width: 1024px){
	div#contents{
		width: 1024px;
		margin:0 auto !important;
	}
	
	/* 中央揃え用インナー */
	.inner{
		max-width:1024px;
		margin:0 auto;
	}
	
	/* メインビジュアル */
	#mainVisual img{
		width:1024px;
		margin:0 auto;
	}
	
	#pagetopArea{
		/*width: 1000px;*/
		margin:0 auto;
	}
	
	
	.list_box_waku{
		width:calc(100% / 4 - 10px);
		max-width : 170px ;
		min-width: inherit;
		margin-bottom:40px;
	}


}

/* 幅992px以下（タブレット用） */
@media only screen and (max-width: 992px){
	#OrderRirekiArea .leftside{
		padding-right:15px;
	}
	
	#OrderRirekiArea .leftside table{
		margin-bottom:0;
		border-bottom:1px solid var(--color1);
	}
	
	#OrderRirekiArea .rightside{
		padding-left:15px;
	}
	
	#OrderRirekiArea .rightside table{
		margin-top:0;
		border-top:none;
	}
	
	
	
	
	#OrderRirekiArea .OrderDtl2 .leftside{
		padding-right:15px;
	}
	
	#OrderRirekiArea .OrderDtl2 .rightside{
		padding-left:15px;
	}
	
	#OrderRirekiArea .OrderDtl2 .datafirst1{
		border-top:3px solid var(--color1);
	}
	
	#OrderRirekiArea .OrderDtl2 .datafirst2{
		border-top:none;
	}
	
	#OrderRirekiArea .OrderDtl2 .datalast1{
		border-bottom:none;
	}

	#OrderRirekiArea .OrderDtl2 .datalast1 .title{
		border-bottom:1px solid var(--color5);
	}
	
	#OrderRirekiArea .OrderDtl2 .datalast1 .data{
		border-bottom:1px solid var(--color1);
	}
	
	
	#OrderRirekiArea .goukei{
		width:70%;
	}
}