@charset "utf-8";

h2{
	/*margin-top:0;*/
}

img{
	vertical-align:bottom;
}

pre{
	font-size:1.5rem;
}

#wrapper1{
	width:900px;
	margin:0 auto;
	border-left:50px solid yellowgreen;
	border-right:50px solid yellowgreen;
}

#wrapper2{
	width:800px;
	margin:0 auto;
}

.box{
	display:flex;
	align-items:flex-start;
}

.box-text{
	width:500px;
	padding-left:30px;
	padding-right:30px;
}

.frame1{ /*普通の写真表示*/
	
}

.frame2{ /*影付きの効果*/
	box-shadow:3px 3px 20px 2px rgba(0,0,0,0.4);
}

.frame3{ /*めくれた感じの効果*/
	position:relative;
	z-index:1;
}

.frame3:after{
	position:absolute;
	content:"";
	box-shadow:0 15px 10px rgba(0,0,0,0.5);
	transform:rotate(3deg);
	right:4px;
	left:auto;
	top:auto;
	bottom:12px;
	z-index:-1;
	width:95%;
	height:20%;
}

.frame4{ /*写真に傾きの効果*/
	transform:rotate(5deg);
}

.frame5{ /*写真に傾きを付け、影を付ける効果*/
	transform:rotate(5deg);
	box-shadow:5px 5px 20px 2px rgba(0,0,0,0.4);
}

.frame6 img{ /*写真を角丸にする効果*/
	border-radius:10px;
}

.frame7 img{ /*角丸四角形の写真に影を付ける効果*/
	border-radius:10px;
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

.frame8 img{ /*写真を楕円で切り抜く効果*/
	border-radius:50%;
}

.frame9{
	width:200px;
}

.frame9 img{ /*楕円の写真に影を付ける効果*/
	border-radius:50%;
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

.frame10{
	width:200px;
}

.frame10 img{ /*写真を円で切り抜く効果*/
	border-radius:50%;
}

.frame11{
	width:200px;
}

.frame11 img{ /*円の写真に影を付ける効果*/
	border-radius:50%;
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

.frame12{ /*重ね置きの効果*/
	display:inline-block;
	position:relative;
	z-index:1;
}

.frame12:after{
	position:absolute;
	display:block;
	content:"";
	box-shadow:0 4px 10px rgba(0,0,0,0.3);
	transform:rotate(3deg);
	left:0;
	top:0;
	z-index:-1;
	width:100%;
	height:100%;
	background:#ffffff;
}

.frame13{ /*ぼかしの効果*/
	position:relative;
	width:200px;
	height:150px;
}

.frame13:after{
	position:absolute;
	display:block;
	content:"";
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	box-shadow:
		inset 0 0 40px 4px rgba(255,255,255,1),
		inset 0 0 40px 4px rgba(255,255,255,1),
		inset 0 0 40px 4px rgba(255,255,255,1),
		inset 0 0 40px 4px rgba(255,255,255,1);
}

.frame14{
	background-image:url(../img/cake_200.jpg);
	width:200px;
	height:150px;
}

.frame14 .moji1,.frame14 .moji2{
	font-size:2em;
	font-family:"HG明朝E","ＭＳ 明朝","ＭＳ Ｐ明朝",serif;
	font-style:italic;
	text-shadow:
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff;
}

.box-text{
	width:500px;
}

.moji1{
	margin-top:15px;
	margin-left:20px;
}

.moji2{
	margin-top:10px;
	margin-left:30px;
}

.frame15{
	background-image:url(../img/happa.jpg);
	width:200px;
	height:150px;
	border:1px solid #000000;
}

.frame15 .moji1,.moji2{
	font-size:1.5em;
	font-family:"HG明朝E","ＭＳ 明朝","ＭＳ Ｐ明朝",serif;
	font-style:italic;
	text-shadow:
		1px 1px 4px #777777;
}

.box-text{
	width:500px;
}

.moji1{
	margin-top:15px;
	margin-left:20px;
}

.moji2{
	margin-top:10px;
	margin-left:30px;
}

.frame16{
	background-image:url(../img/happa.jpg);
	width:200px;
	height:150px;
	border:1px solid #000000;
}

.frame16 .moji1,.moji2,.moji3,.moji4{
	font-size:1.5em;
	font-family:"HG明朝E","ＭＳ 明朝","ＭＳ Ｐ明朝",serif;
	font-style:italic;
}

.frame16 .moji1,.moji2{
	text-shadow:
		1px 1px 4px #777777;
}


.box-text{
	width:500px;
}

.moji1{
	margin-top:15px;
	margin-left:20px;
}

.moji2{
	margin-top:10px;
	margin-left:30px;
}

.moji3{
	margin-top:15px;
	margin-left:20px;
}

.moji4{
	margin-top:10px;
	margin-left:30px;
}