@charset "utf-8";

/* ======================================================
	common
====================================================== */
body {
	font-family:"游明朝","Yu Mincho","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E","メイリオ","Meiryo",serif;
	color: #1a1a1a;
	font-size: 18px;
	line-height: 1.7;
	text-align: left;
}
a{color: #f15a24;}
a:hover{text-decoration: none;}
#wrap{min-width: 1240px;}
/* ======================================================
	HEADER
====================================================== */
header{
	position: fixed;
	width: 100%;
	color: #fff;
	top: 0;
	left:0;
	z-index: 9999;
	background-color: #fff;
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
}
header>div{
	width: 1200px;
	margin: 0 auto;
}
header div h1{
	float: left;
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-size: 60px;
	text-decoration: none;
}
header>div>nav{
	float: right;
}
header div>nav ul li{
	margin-left: 2em;
	font-size: 20px;
	display: inline-block;
	height: 102px;
	line-height: 102px;
}
.headerTransform{background: rgba(255,255,255,0.8);color:#000 !important;}


header a,header a:link,header a:visited{
	color:#000;
	text-decoration: none;
}
.megaMenu {
	position: absolute;
	top: 102px;
	left: 0;
	display: block;
	visibility: hidden;
	opacity: 0;
	width: 100%;
	background-color: #fff;
	will-change: opacity,transform;
	overflow: hidden;
	pointer-events: all;
	color:#000;
	font-size: 82%;
	padding-top:20px;
	box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.3);
}
.megaMenu>nav{
	display:flex;
	flex-wrap: wrap;
	justify-content: left;
	width:1200px;
	margin:auto;
}
/*
header:hover{
	animation: bg-color 0.2s;
	animation-fill-mode:both;
}
@keyframes bg-color {
	0% { background-color: rgba(255,255,255,0); }
	100% { background-color: rgba(255,255,255,1); }
}
*/
.megaMenu figure{
	width: 190px;
	margin-right: 12px;
}
.megaMenu figure:nth-of-type(6n){
	margin-right: 0;
}
.megaMenu img{
	width:100%;
}
.megaMenu figure figcaption{
	line-height: 1.8;
	text-align: center;
	padding-bottom: 15px;
}

#mordalWindow {
	display: none;
	z-index:10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%!important;
	height: 100%;
	background: rgba(0,0,0,0.45);
}
#mordalWindow img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto !important;
	max-width: 90%;
	max-height: 90%;
	height: 90%;
}
.megaMenu a{
	display: block;
}
.imgWrap {
	overflow: hidden;
	width: 190px;
	height: 150px;
	display:block;
}
.imgWrap img {
	display: block;
	width: 190px;
	/*height: 180px;*/
	transition-duration: 0.3s;
}
.imgWrap img:hover {
	transform: scale(1.1);
	transition-duration: 0.3s;
}


#headerNavMenu>ul>li>a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
#headerNavMenu>ul>li>a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}
#headerNavMenu>ul>li>a:hover::after {
	transform: scale(1, 1);
}



/* ======================================================
	FIRST VIEW 
====================================================== */
#firstview{
	background-image: url(../image/goldFrame/head.png);
	background-size: auto 100%;
	width: 100%;
	height: 541px;
	margin-top: 102px;
	position: relative;
	z-index: -10;
	background-repeat: no-repeat;
}
#firstview div{
	width: 100%;
/*
	background: rgba(115, 99, 87, 0.5);
*/
	position: relative;
	z-index: -8;
	mix-blend-mode: multiply;
}

/* 各ページ ヘッダー画像 */
/*
#firstview.top{background-image: url(../image/top/head.jpg);}
#firstview.luxury{background-image: url(../image/luxury/head.png);}
#firstview.display{background-image: url(../image/display/head.png);}
*/
/* ======================================================
	DESCRIPTION
====================================================== */
#topDescriptionArea:after{
	content: "";
	display: block;
	width: 61.5%;
	min-height: 760px;
	background: #f3f0ee;
	position: absolute;
	top: 541px;
	right: 0;
	z-index: -100;
}
#topDescriptionArea div{
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

/* ===== ディプロマ名 ===== */
#topTitle{
	width: 800px;
	background: #fff;
	color: #42210b;
	padding: 20px 66px 40px;
	position: absolute;
	top: -50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	mix-blend-mode: normal;
}
#topTitle:after{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(188, 181, 170);
	filter: blur(30px);
	transform: translateY(0) scale(0.95);
	mix-blend-mode: multiply;
}
#topTitle h2{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-size: 60px;
}
#topTitle h3{
	font-size: 26px;
	line-height:0.8em;
}
/* ===== TOP ===== */
#topDescriptionArea.top{
	height: 600px;
}
#topDescriptionArea.top:after{
	display: none;
}
#topTitle.top{
	color: #1a1a1a;
	padding: 50px 40px 55px;
	right: 0;
	width: 920px;
}
#topTitle.top h2{
	font-size: 40px;
	margin-bottom: 30px;
}
#topTitle.top p{
	line-height: 2.4;
}
/* 説明文 */
#topDescription{
	width: 830px;
	padding: 150px 0 40px 110px;
	float: right;
	/*background: #f3f0ee;*/
	color: #42210b;
	position: relative;
	z-index: -10;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#topDescriptionArea:after{
	content: "";
}
#topDescription h3{
	font-size: 48px;
	font-weight: normal;
	margin-bottom: 30px;
}
#topDescription p{
	line-height: 2.4;
}

/* ===== ラグジュアリー ===== */
#topDescriptionArea.luxury:after{
	background: linear-gradient(45deg, #2d1710, #663c10);
}
#topDescriptionArea.luxury #topDescription{
	color: #d6b287;
	text-shadow : 1px 1px 3px rgba(30, 19, 7, 0.85);
}
#topDescriptionArea.luxury #topDescription p{
	font-size: 105%;
	line-height: 2.2;
}

/* ===== ピンクサファイア ===== */
.pinkSapphire #topTitle h2,
.pinkSapphire #topTitle h3{
	color: #ff99b4;
}
.pinkSapphire #topDescription{
	width: 830px;
	padding: 150px 0 40px 100px;
}
.pinkSapphire #topDescription h3{
	letter-spacing: -0.05em;
}
#topDescriptionArea.pinkSapphire:after{
	width: 62.5%;
	background: url(../image/diploma/pinkSapphire/bgDescription.jpg) center center;
}
#topDescriptionArea.pinkSapphire #topDescription{
	/*color: #df0e70;*/
	text-shadow : 1px 1px 3px rgba(255, 255, 255, 1);
}
#topDescriptionArea.pinkSapphire #topDescription p{
	font-size: 105%;
	line-height: 2.2;
}
#topDescriptionArea.pinkSapphire #topDescription p span{
	background: linear-gradient(transparent 40%, rgba(255,255,255,0.7) 0%);
}

/* ===== ディスプレイ ===== */
#topDescriptionArea.display:after{
	top: 600px;
	height: 50%;
	min-height: 50%;
	z-index: 1;
}
#topDescriptionArea.display div{
	z-index: 2;
}
#topDescriptionArea.display #topDescription{
	padding: 0 0 40px 110px;
}
#topDescriptionArea.display #topDescription div{
	width: 700px;
	display: flex;
	justify-content: space-between;
	font-size: 27px;
	text-align: center;
}
#topDescriptionArea.display #topDescription div a{
	display: block;
	color: #42210b;
	text-decoration: none;
}
#topDescriptionArea.display #topDescription div figure{
	position: relative;
}
#topDescriptionArea.display #topDescription div figure:after{
	content: "";
	width: 36px;
	height: 36px;
	border-bottom: 2px #42210b solid;
	border-right: 2px #42210b solid;
	position: absolute;
	bottom: -30px;
	left: 45%;

	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);

}
#topDescriptionArea.display #topDescription div figure a img{
	box-shadow : 0px 0px 30px rgba(188, 181, 170, 0.65);
	mix-blend-mode: multiply;
	margin-bottom: 17px;
}
#topDescriptionArea.display #topDescription div figure a:hover img{
	box-shadow: none;
}

/* ======================================================
	ディプレイページ
====================================================== */
/* ===== メイン画像 ===== */
.displayMain{
	position: relative;
	margin-top: 165px;
}
.displayMain div{
	width: 100%;
	height: 600px;
	background-size: auto;
	background-repeat: no-repeat;
	position: relative;
	z-index: -2;
	background-position: center;
}
.displayMain.case div{background-image: url(../image/diploma/display/case/main.jpg);}
.displayMain.stand div{background-image: url(../image/diploma/display/stand/main.jpg);}

.displayMain section{
	width: 1200px;
	margin: 0 auto;
	margin-top: 0px;
	z-index: 0;
}
.displayMain section:after{
	content: "";
	background-color: #fff;
	width: 60%;
	height: 50%;
	position: absolute;
	top: 570px;
	left: 0;
	z-index: -1;
}
.displayMain h3{
	font-size: 48px;
	font-weight: normal;
}
.displayMain p{
	line-height: 2.4;
}

/* ===== ケースデザイン ===== */
#caseDesign{
	text-align: center;
}

/* ===== 料金 ===== */
.displayPrice{
	background: #f3f0ee;
	margin: 100px auto 0 auto;
	padding: 45px 56px;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.displayPrice.case{width: 750px;}
.displayPrice.stand{width: 900px;}
.displayPrice h3{
	font-size: 48px;
	font-weight: normal;
	margin-bottom: 20px;
}
.displayPrice h4{
	font-size: 26px;
	font-weight: normal;
	margin-bottom: 13px;
}
.displayPrice h4 span{
	font-size: 70%;
}
.displayPrice.stand div{
	position: absolute;
	bottom: -120px;
	right: -170px;
}
.displayPrice.case div{
	position: absolute;
	top: 50px;
	right: -30px;
}
.displayPrice div img{
	filter: drop-shadow(3px 2px 3px rgba(132, 111, 99, 0.3));
}

/* ===== ご注文の流れ ===== */
#displayFlow{
	position: relative;
	margin-top: 175px;
	margin-bottom: 200px;
}
#displayFlow h3{
	font-size: 48px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 50px
}
#displayFlow div{
	width: 60%;
	height: 535px;
	background-image: url(../image/diploma/display/stand/flow.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center left;
	position: relative;
	z-index: -2;
}
#displayFlow section{
	padding: 45px 60px 60px;
	position: absolute;
	left: 50%;
	top: 220px;
	z-index: 1;
}
#displayFlow section:after{
	content: "";
	background: #fff;
	width: 102%;
	height: 98%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	box-shadow : 0px 0px 30px rgba(188, 181, 170, 0.65);
	mix-blend-mode: multiply;
}
#displayFlow section dl{
	border-bottom: 1px #a08770 solid;
	padding-bottom: 20px;
}
#displayFlow section dl:last-of-type{
	border-bottom: none;
}
#displayFlow section dl dt{
	font-size: 40px;
	padding-top: 15px;
}
#displayFlow section dl dd{
	font-size: 16px;
	line-height: 2;
	padding-left: 3em;
}

/* ======================================================
	フレームスライダー１
====================================================== */
#frameSlider{
	height: 600px;
}

/* ======================================================
	フレームデザイン
====================================================== */
#frameDesign{
	width: 1200px;
	margin: 0 auto;
	background: #f3f0ee;
}
/* ===== タイトル ===== */
#frameDesignTop{
	width: 800px;
	background: #fff;
	padding-bottom: 80px;
	display: inline-block;
}
#frameDesignTop h3{
	font-size: 40px;
	/*font-weight: normal;*/
	padding-top: 40px;
}
/* ===== フレーム一覧 ===== */
#frameDesignBottom{
	display: flex;
	flex-wrap: wrap;
	width: 1060px;
	margin: 0 auto;
	padding-top: 80px;
	padding-bottom: 32px;
}
#frameDesignBottom figure{
	margin-right: 16px;
	margin-bottom: 34px;
	
}
#frameDesignBottom figure:nth-of-type(4n){
	margin-right: 0;
}
#frameDesignBottom figure img{
	cursor: pointer;
	width: 253px;
	transition: all  0.3s ease;
}
#frameDesignBottom figure img:hover{
	box-shadow: rgb(210 201 187) 0px 0px 18px;
}
#frameDesignBottom figcaption{
	background: #a08770;
	font-size: 16px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	height: 40px;
}

/* ======================================================
	ラグジュアリー
====================================================== */
/* ========== common ========== */
#luxuryBg{
	/*background: #f3f0ee;*/
	/*background: linear-gradient(top, #ffffff 3000px, #f3f0ee 0);*/
	background: -moz-linear-gradient(top,  #f3f0ee 95%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f3f0ee 95%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f3f0ee 95%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	width: 100%;
	height: 6000px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: -120;
}
/* ========== フレームデザイン ========== */
#frameDesignLuxury{
	position: relative;
}
/* タイトル */
#frameDesignLuxuryTop{
	width: 1200px;
	margin: 0 auto;
	padding: 50px 0;
	color: #fff;
	z-index: 0;
}
#frameDesignLuxuryTop:after{
	content: "";
	background: linear-gradient(45deg, #2d1710, #663c10);
	position: absolute;
	width: 60%;
	height: 220px;
	top: 0;
	left: 0;
	z-index: -1;
}
#frameDesignLuxuryTop h3{
	font-size: 40px;
	font-weight: normal;
}
#frameDesignLuxuryTop p{}
/* フレーム一覧 */
#frameDesignLuxuryBottom{
	background: #2d1710;
	margin-top: -90px;
	position: relative;
	z-index: -3;
}
#frameDesignLuxuryBottom div{
	width: 1200px;
	margin: 0 auto;
	padding-top: 200px;
	padding-bottom: 135px;
	background-image:
		url("../image/diploma/luxury/corner_leftTop.png"),
		url("../image/diploma/luxury/corner_rightTop.png"),
		url("../image/diploma/luxury/corner_rightBottom.png"),
		url("../image/diploma/luxury/corner_leftBottom.png");
	background-position:
		left 0 top 65px,
		right 0 top 65px,
		right 0 bottom 65px,
		left 0 bottom 65px;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}
#frameDesignLuxuryBottom div figure{
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: row-reverse;
}
#frameDesignLuxuryBottom div figure:nth-of-type(1){
	width: 940px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(2){ 
	width: 960px; 
	margin-top: -165px;
	flex-direction: row;
}
#frameDesignLuxuryBottom div figure:nth-of-type(3){ 
	width: 940px; 
	margin-top: -130px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(4){ 
	width: 960px; 
	margin-top: -165px;
	flex-direction: row;
}
#frameDesignLuxuryBottom div figure img{
	display: block;
	box-shadow: 
		0 0 4px 0 #f2bc81,
		0 0 22px 0 #f2bc81, 
		0 0 0 0 #f2bc81;
}
#frameDesignLuxuryBottom div figure figcaption{
	color: #d6b287;
}
#frameDesignLuxuryBottom div figure:nth-of-type(1) figcaption{
	margin-right: 50px;
	margin-top: 90px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(2) figcaption{
	margin-left: 60px;
	margin-top: 240px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(3) figcaption{
	margin-right: 50px;
	margin-top: 240px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(4) figcaption{
	margin-left: 60px;
	margin-top: 240px;
}
#frameDesignLuxuryBottom div figure figcaption h4{
	font-size: 31px;
	font-weight: normal;
	position: relative;
}
#frameDesignLuxuryBottom div figure figcaption h4:after{
	content: "";
	height: 1px;
	background-color: #d6b287;
	position: absolute;
	bottom: 25px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(1) figcaption h4:after{
	right: -50px;
	width: 175px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(2) figcaption h4:after{
	left: -60px;
	width: 50px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(3) figcaption h4:after{
	right: -50px;
	width: 89px;
}
#frameDesignLuxuryBottom div figure:nth-of-type(4) figcaption h4:after{
	left: -60px;
	width: 50px;
}

/* ======================================================
	ピンクサファイア
====================================================== */
/* ========== common ========== */
#pinkSapphireBg{
	background: -moz-linear-gradient(top,  #f3f0ee 95%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #f3f0ee 95%,#ffffff 100%);
	background: linear-gradient(to bottom,  #f3f0ee 95%,#ffffff 100%);

	width: 100%;
	height: 6000px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: -120;
}
/* ========== フレームデザイン ========== */
#frameDesignPinkSapphire{
	position: relative;
}
/* タイトル */
#frameDesignPinkSapphireTop{
	width: 1200px;
	margin: 0 auto;
	padding: 50px 0;
	color: #fff;
	z-index: 0;
}
#frameDesignPinkSapphireTop:after{
	content: "";
	/*background: linear-gradient(45deg, #ad125b, #fa608c);*/
	background: linear-gradient(45deg, #e85c88, #ff99b4);
	position: absolute;
	width: 60%;
	height: 220px;
	top: 0;
	left: 0;
	z-index: -1;
}
#frameDesignPinkSapphireTop h3{
	font-size: 40px;
	font-weight: normal;
}
#frameDesignPinkSapphireTop p{}
/* フレーム一覧 */
#frameDesignPinkSapphireBottom{
	background: url(../image/diploma/pinkSapphire/bgFrame.jpg);
	width: 1200px;
	/*margin-top: -90px;*/
	margin: -90px auto 0 auto;
	position: relative;
	z-index: -3;
}
#frameDesignPinkSapphireBottom div{
	width: 1200px;
	margin: 0 auto;
	padding-top: 200px;
	padding-bottom: 135px;
	background-image:
		url("../image/diploma/pinkSapphire/corner_leftTop.png"),
		url("../image/diploma/pinkSapphire/corner_rightTop.png"),
		url("../image/diploma/pinkSapphire/corner_rightBottom.png"),
		url("../image/diploma/pinkSapphire/corner_leftBottom.png");
	background-position:
		left 65px top 65px,
		right 65px top 65px,
		right 65px bottom 65px,
		left 65px bottom 65px;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}
#frameDesignPinkSapphireBottom div figure{
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: row-reverse;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(1){
	width: 940px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(2){ 
	width: 960px; 
	margin-top: -165px;
	flex-direction: row;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(3){ 
	width: 820px; 
	margin-top: -130px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(4){ 
	width: 960px; 
	margin-top: -165px;
	flex-direction: row;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(5){ 
	width: 940px; 
	margin-top: -130px;
}
#frameDesignPinkSapphireBottom div figure img{
	display: block;
	box-shadow:0 10px 25px 0 rgba(0, 0, 0, 0.2);
}
#frameDesignPinkSapphireBottom div figure figcaption{
	color: #df0e70;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(1) figcaption{
	margin-right: 50px;
	margin-top: 90px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(2) figcaption{
	margin-left: 60px;
	margin-top: 240px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(3) figcaption{
	margin-right: 50px;
	margin-top: 240px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(4) figcaption{
	margin-left: 60px;
	margin-top: 240px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(5) figcaption{
	margin-right: 50px;
	margin-top: 240px;
}
#frameDesignPinkSapphireBottom div figure figcaption h4{
	font-size: 31px;
	font-weight: normal;
	position: relative;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
#frameDesignPinkSapphireBottom div figure figcaption h4:after{
	content: "";
	height: 1px;
	background-color: #df0e70;
	position: absolute;
	bottom: 25px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(1) figcaption h4:after{
	right: -50px;
	width: 45px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(2) figcaption h4:after{
	left: -60px;
	width: 50px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(3) figcaption h4:after{
	right: -50px;
	width: 43px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(4) figcaption h4:after{
	left: -60px;
	width: 50px;
}
#frameDesignPinkSapphireBottom div figure:nth-of-type(5) figcaption h4:after{
	right: -50px;
	width: 43px;
}


/* ======================================================
	ディプロマ用紙
====================================================== */
#paper{
	background: #f3f0ee;
	padding-top: 70px;
	padding-bottom: 80px;
}
#paper h3{
	width: 1200px;
	margin: 0 auto;
	/*margin-bottom: 30px;*/
	font-size: 40px;
	font-weight: normal;
}
#paper div{
	width: 1200px;
	margin: 0 auto;
	/*padding-top: 70px;*/
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
}
#paperDescription{
	width: 46%;
}
#paperDescription h4{
	font-size: 22px;
	color: #fff;
	font-weight: normal;
	text-indent: 0.5em;
	background: #42210b;
	padding: 5px;
	margin-bottom: 20px;
}
#paperDescription p{
	line-height: 2;
}
#paperImage img{
	box-shadow : 0px 0px 20px rgba(188, 181, 170, 0.65);
}

/* ======================================================
	オリジナルディプロマ制作
====================================================== */
#original{
	position: relative;
	margin-top: 200px;
	margin-bottom: 120px;
}
#original:after{
	content: "";
	display: block;
	width: 100%;
	height: 80%;
	background: #f3f0ee;
	position: absolute;
	top: 190px;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -100;
}
#original div{
	display: flex;
	justify-content: space-between;
	width: 1200px;
	margin: 0 auto;
}
#original div section:nth-of-type(2){
	padding-top: 110px;
}
#original h3{
	font-size: 40px;
	font-weight: normal;
	margin-bottom: 30px;
}
#original p{
	line-height: 2.4;
	padding-right: 40px;
}
#original p small{
	font-size: 75%;
}
/* ボタン */
#original button{
	font-family:"游明朝","Yu Mincho","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E","メイリオ","Meiryo",serif;
	font-size: 22px;
	text-align: left;
	border: 2px #42210b solid;
	background: transparent;
	padding: 16px 90px 16px 52px;
	margin-top: 30px;
	position: relative;
	cursor: pointer;
}
#original button:after{
	content: "";
	width: 27px;
	height: 27px;
	border-top: 3px #42210b solid;
	border-right:  3px #42210b solid;
	position: absolute;
	top: 18px;
	right: 17px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#original button::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #a08770;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
#original button:hover::before{
	transform-origin: left top;
	transform: scale(1, 1);
}


#original img{
	box-shadow : 0px 0px 20px rgba(188, 181, 170, 0.65);
	/*mix-blend-mode: multiply;	*/
}

/* ======================================================
	NEWS
====================================================== */
#news{
	width: 1200px;
	margin: 0 auto 116px auto;
	position: relative;
}
#news h3{
	font-family: 'EB Garamond', serif;
	font-size: 98px;
	font-weight: 400;
	letter-spacing: 6px;
	color: #42210b;
	position: absolute;
	top: 0;
	left: 79px;
}
#news section{
	width: 900px;
	height: 370px;
	overflow-y: scroll;
	margin-left: 300px;
	padding: 50px 20px 40px 130px;
	background: #f3f0ee;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#news dl{
	display: flex;
	margin-bottom: 15px;
}
#news dl dt{
	font-family: 'EB Garamond', serif;
	font-size: 18px;
	width: 7em;
	line-height: 1.5;
}
#news dl dd{
	width: 100%;
	font-size: 16px;
	color: #4d4d4d;
	line-height: 1.9;
}
/* スクロールバー */
/*スクロールバーの横幅指定*/
#news section::-webkit-scrollbar {
    width: 10px;
}
/*スクロールバーの背景色・角丸指定*/
#news section::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #d8cac0;
}
/*スクロールバーの色・角丸指定*/
#news section::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background: #846d61;
}

/* ======================================================
	制作料金
====================================================== */
#price{
	width: 1200px;
	margin: 0 auto;
	padding-top: 73px;
}
#price h3{
	font-size: 48px;
	font-weight: normal;
	text-align: center;
}
#price h4{
	font-size: 28px;
	font-weight: normal;
	text-align: center;
}
/* 表 */
#price div{
	margin-top: 52px;
	display: flex;
	justify-content: space-between;
}
#price table{
	width: 570px;
}
#price table caption{
	color: #fff;
	background: #a08770;
	padding: 15px 0;
}
#price table caption h5{
	font-size: 34px;
	font-weight: normal;
}
#price table th, #price table td{
	padding: 10px 15px;
	background: #f3f0ee;
	border-top: #fff 5px solid;
}
#price table th{
	font-weight: normal;
	font-size: 28px;
	text-align: center;
	border-right: #fff 5px solid;
}
#price table th span{
	font-size: 70%;
}
#price table td{
	font-size: 32px;
	text-indent: 1em;
}
/* 補足 */
#price aside{
	text-align: right;
	font-size: 15px;
	padding-top: 5px;
}

/* ======================================================
	オプションサービス
====================================================== */
#option{
	width: 1200px;
	margin: 0 auto;
	padding-top: 120px;
}
#option h3{
	font-size: 48px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 53px;
}
#option div{
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}
#option div section{
	width: 570px;
}
#option section{
	background: #f3f0ee;
	padding: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#option section img{
	float: left;
	margin-right: 30px;
	margin-bottom: 10px;
}
#option section#option_3 img{
	padding-top: 30px;
}
#option section h4{
	font-size: 31px;
	border-bottom: #1a1a1a 2px solid;
	margin-bottom: 22px;
	padding-top: 21px;
	display: inline-block;
	width: 64%;
}
#option section#option_3 h4{
	width: 84%;
}
#option section p span{
	font-size: 120%;
}

/* ======================================================
	TOPのLINEUP
====================================================== */
#topLineup{
	position: relative;
}
/* タイトル */
#topLineup #topLineupTop{
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 45px;
	color: #42210b;
}
#topLineup #topLineupTop:after{
	content: "";
	display: block;
	width: 61.5%;
	height: 20%;
	background: #f3f0ee;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -100;
}
#topLineup h3{
	font-family: 'EB Garamond', serif;
	font-size: 60px;
	font-weight: 400;
	line-height: 1;
	padding-top: 70px;
	padding-bottom: 10px;
}
#topLineup h4{
	font-size: 26px;
	font-weight: normal;
}
/* 画像一覧 */
#topLineupBottom{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
#topLineupBottom div{
	margin-right: 15px;
	margin-bottom: 30px;
	position: relative;
}
#topLineupBottom div:nth-of-type(4),
#topLineupBottom div:nth-of-type(7),
#topLineupBottom div:nth-of-type(11){
	margin-right: 0;
}
#topLineupBottom div:after{
	content: "";
	background-image: url(../image/top/shadow_1.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 400px;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
}
#topLineupBottom div:nth-of-type(5):after{
	background-image: url(../image/top/shadow_2.png);
}
/* ===== キャプション ===== */
#topLineupBottom>div>a>figure{
	height: 400px;
	/*width: 288px;*/
	position: relative;
}
#topLineupBottom>div>a>figure>figcaption{
	height: 400px;
	width: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
}
#topLineupBottom>div>a>figure>figcaption>p{
	background-color:rgba(0,0,0);
	color:#fff;
	text-align:center;
	font-size: 85%;
	position:absolute;
	bottom:0;
	height:30%;
	width:100%;
	padding: 10px 20px 0;
	box-sizing: border-box;
}
#topLineupBottom>div>a>figure>figcaption>p>strong{
	font-size: 130%;
	line-height: 2.2;
}
#topLineupBottom>div>a>figure>figcaption:hover{
	animation: anim .5s ease-out forwards;
}
@keyframes anim {
	0% {opacity: 0;}
	100% {opacity: 0.7;}
}

/* ======================================================
	LINEUP
====================================================== */
#lineup{
	padding-top: 120px;
	padding-bottom: 120px;
}
#lineup h3{
	font-size: 48px;
	font-weight: normal;
	text-align: center;
	font-family: 'EB Garamond', serif;
}

/* ======================================================
	オーダーフォーム
====================================================== */
#orderForm{
	background: #f3f0ee;
	padding-top: 70px;
	padding-bottom: 40px;
}
#orderForm h3{
	font-size: 48px;
	font-weight: normal;
	margin-bottom: 30px;
	text-align: center;
}
#orderForm p{
	text-align: center;
}
#orderForm span{
	color: #ed1c24;
}
#orderForm small{font-size: 13px;}
#orderForm small a{color: #1a1a1a; text-decoration: underline;}
#orderForm small a:hover{text-decoration: none;}

#orderForm div{
	width: 1200px;
	margin: 60px auto 0 auto;
}
/* 名入れサービス */
#orderForm div.naireDiv{
	width: auto;
	margin: 5px 0;
	display: block;
}
/* ご注文の前にボタン */
#orderForm a#infoLink{
	position: relative;
	width: 576px;
	margin: 0 auto;
	display: block;
	z-index: 1;
}
#orderForm a#infoLink::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #fddbc3;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
#orderForm a#infoLink:hover::before{
	transform-origin: left top;
	transform: scale(1, 1);
}

/* ===== 注文フォームとサンプル出力エリア ===== */
#orderForm div{
	display: flex;
	justify-content: space-between;
}

/* ===== 注文フォーム ===== */
#formInputArea{
	font-family:"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	width: 710px;
}
#formInputArea section{
	margin-bottom: 40px;
}
#formInputArea table{
	width: 100%;
	table-layout: fixed;
}
#formInputArea table caption{
	background: #d6cbc2;
	color: #42210b;
	font-weight: bold;
	font-size: 23px;
	text-align: left;
	padding: 5px 20px;
}
#formInputArea table th{
	font-weight: normal;
	width: 13em;
	vertical-align: top;
}
#formInputArea table th, #formInputArea table td{
	border-bottom: 1px #d6cbc2 solid;
	padding: 10px;
}
#formInputArea label,
#formInputArea select{
	cursor: pointer;
}
/* ラジオボタン */
#formInputArea input[type="radio"]{
	display: none;
}
#formInputArea input[type="radio"] + label{
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
}
#formInputArea input[type="radio"] + label::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #ccbeb2;
	border-radius: 50%;
	background: #e1d9d1;
}
#formInputArea input[type="radio"]:checked + label{
	/*color: #d01137;*/
}
#formInputArea input[type="radio"]:checked + label::after{
	content: "";
	display: block;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 11px;
	height: 11px;
	background: #ed1c24;
	border-radius: 50%;
}
/* 入力ボックス */
#formInputArea select,
#formInputArea input[type="number"],
#formInputArea input[type="text"],
#formInputArea input[type="email"],
#formInputArea textarea{
	background: #e1d9d1;
	border: #ccbeb2 1px solid;
	border-radius: 3px;
	padding: 5px;
}
/* プライバシー */
#formInputArea .privacyCell{
	border-bottom: none;
	font-size: 15px;
}
/* ボタン */
#formBtnArea{
	text-align: center;
}
.formBtn{
	font-family:'Crimson Text',"游明朝","Yu Mincho","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E","メイリオ","Meiryo",serif;
	background: #603813;
	color: #fff;
	font-size: 24px;
	padding: 10px 100px;
	border: none;
	display: inline-block;
	cursor: pointer;
	box-shadow : 0px 0px 30px rgba(146, 116, 65, 0.65);
}
.formBtn:hover{
	background: #bc7204;
	-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;	
}

/* ===== サンプル出力エリア ===== */
#formSampleArea{
	width: 400px;
	height:737px;
	margin-bottom: 0;
	z-index: 1;
	position: -webkit-sticky;
	position: sticky;
	top:102px;
}
#formSampleArea section{
	background: #fff;
	border-radius: 5px;
	box-shadow : 3px 2px 7px rgba(132, 111, 99, 0.3);
}
#formSampleArea section figure{
	/*outline: 1px solid #ccc;*/
}
/* 見積もり金額 */
#formSamplePrice{
	display: flex;
	justify-content: space-between;
	height: 90px;
	padding: 0 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#formSamplePrice p:first-of-type{
	font-size: 20px;
	line-height: 90px;
}
#formSamplePrice p:last-of-type{
	font-size: 34px;
	line-height: 90px;
}
#formSamplePrice p>span{
	font-size: 70%;
	color: #1a1a1a;
}
/* 注釈 */
#formSampleArea aside{
	text-align: right;
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 22px;
}
/* ディプロマサンプル */
#formSampleImage{
	padding: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#formSampleImage p{
	font-size: 20px;
	text-align: left;
	/*margin-bottom: 10px;*/
}
#formSampleImage img{
	width: 100%;
}

#formFramePattern,#formFontPattern{
	position:absolute;
	top:0;
	left: 0;
}
#formFramePattern1,
#formFramePattern2,
#formFramePattern3,
#formFramePattern4,
#formFramePattern5,
#formFramePattern6,
#formFramePattern7,
#formFramePattern8,
#formFramePattern9,
#formFramePattern10,
#formFramePattern11,
#formFramePattern12,
#formFramePattern13,
#formFramePattern14,
#formFramePattern15,
#formFramePattern16,
#formFontPattern1,
#formFontPattern2,
#formFontPattern3,
#formFontPattern4{
	position: absolute;
	top: 0;
	left: 0;
	width:360px;
	text-align: center;
}
#formFramePattern1 img,
#formFramePattern2 img,
#formFramePattern3 img,
#formFramePattern4 img,
#formFramePattern5 img,
#formFramePattern6 img,
#formFramePattern7 img,
#formFramePattern8 img,
#formFramePattern9 img,
#formFramePattern10 img,
#formFramePattern11 img,
#formFramePattern12 img,
#formFramePattern13 img,
#formFramePattern14 img,
#formFramePattern15 img,
#formFramePattern16 img{
	width:360px;
}

#formFontPattern1,
#formFontPattern2,
#formFontPattern3,
#formFontPattern4{
	margin-top: 60px;
}

#formFontPattern1 img,
#formFontPattern2 img,
#formFontPattern3 img,
#formFontPattern4 img{
	width:260px;
}

/* ======================================================
	フロートカートボタン
====================================================== */
#btnCart{
	position: fixed;
	bottom: 50px;
	right: 1%;
	z-index: 99;
	filter: drop-shadow(0px 0px 20px rgba(165, 132, 79, 0.9));
	transition: all  0.5s ease;
}
#btnCart:hover{
	filter: brightness(200%) drop-shadow(0px 0px 10px rgba(191, 113, 16, 0.9));	
}
#btnCart img{
	width: 90%;
}

/* ======================================================
	ご注文の前にページ
====================================================== */
.infomation h3{
	font-size: 36px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 50px;
}
.infomation{
	width: 900px;
	margin: 120px auto 0 auto;
}

/* ===== ご注文から納品までの流れ ===== */
#infoFlow{}
#infoFlow section{}
#infoFlow section dl{
	border-bottom: 2px #e8e8e8 solid;
	padding-bottom: 20px;
}
#infoFlow section dl:last-of-type{}
#infoFlow section dl dt{
	font-size: 30px;
	padding-top: 15px;
}
#infoFlow section dl dd{
	/*font-size: 16px;*/
	line-height: 2;
	padding-left: 2em;
}
#infoFlow aside{
	font-size: 90%;
	color: #797979;
	padding-top: 20px;
}

/* ===== 本文変更箇所 ===== */
#infoDirections section p{
	text-align: center;
}
#infoDirections section div{
	/*display: flex;*/
}
#infoDirections figure{
	margin-top:100px;
}
#infoDirections figure img{
	float: left;
	width: 370px;
	margin-right: 30px;
}
#infoDirections figure figcaption{
	height: 520px;
	font-size: 0.8em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#infoDirections figcaption p{
	text-align: left;
}

/* ===== 注意事項 ===== */
#infoAttention:after{
	content: "";
}
#infoAttention ul{
	text-indent: 1em;
	padding-left: 1em
}
#infoAttention ul li{
	list-style-type: disc;
	margin-bottom: 5px;
}

/* ===== よくある質問 ===== */
#infoFaq{
	margin-bottom: 120px;
}
#infoFaq dl{
	margin-bottom: 15px;
	margin-left: 1.5em;
}
#infoFaq dl:after{
	content: "";
	height: 2px;
	width: 103%;
	background: #e8e8e8;
	display: block;
	margin-left: -1.5em;
	margin-top: 21px;
}
#infoFaq dl dt{
	text-indent: -1.5em;
	font-size: 115%;
	font-weight: bold;
}
#infoFaq dl dd{
	text-indent: -1.5em;
}
#infoFaq dl span{
	font-size: 120%;
}

/* ======================================================
	お問い合わせページ
====================================================== */
#contactText{
	width: 1200px;
	margin: 0 auto;
	padding-top: 50px;
	text-align: center;
}
#contactText h2{
	font-size: 48px;
	font-weight: normal;
	margin-bottom: 30px;
}
/* フォーム */
#formInputArea.contact{
	width: 1200px;
	margin: 50px auto 100px auto;
	padding: 50px 100px 20px;
	background: #f3f0ee;
	border-radius: 10px;
	box-sizing: border-box;
}
#formInputArea.contact small{
	font-size: 80%;
}
#contactText span, #formInputArea.contact span{color: #ed1c24;}
#formInputArea a{color: #1a1a1a; text-decoration: underline;}
#formInputArea a:hover{text-decoration: none;}

/* ======================================================
	FOOTER
====================================================== */
footer{
	background: #2d1710;
	color: #FFF;
	padding: 50px 0;
}
footer article{
	width: 1200px;
	margin: 0 auto;
}
footer article div{
	display: flex;
}
footer article div section{
	width: 50%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
footer address{
	font-style: normal;
}
/* ひだり */
footer #footerLeft h2{
	margin-bottom: 10px;
}
footer address.home{
	margin-top: 25px;
	font-size: 14px;
}

/* みぎ */
footer #footerRight{
	border-left: 1px solid #a1a8af;
	padding-left: 55px;
}
footer address.tel{
	font-family: 'EB Garamond', serif;
	font-size: 43px;
	line-height: 1;
	margin-bottom: 5px;
}
footer address.tel:before{
	font-family: "fontAwesome";
	content: "\f095";
	color: #B6876C;
	margin-right: 10px;
	font-size: 33px;
}
footer #footerRight h6{
	font-size: 18px;
}
footer #footerRight p{
	font-size: 14px;
	margin-top: 15px;
}
footer address.mail{
	margin-top: 20px;
	font-size: 18px;
	font-family: 'EB Garamond', serif;
}
footer address.mail a{
	color: #FFF;
	text-decoration: none;
}
footer address.mail:before{
	font-family: "fontAwesome";
	content: "\f0e0";
	color: #B6876C;
	margin-right: 10px;
}

/* 下段 */
footer aside{
	font-size: 12px;
}
#copy{
	padding-top: 30px;	
	font-size: 12px;
}