@charset "utf-8";
/* CSS Document */
.clear{clear:both}
h2 {
	position: relative;
	font-family:meiryo;
	font-weight:700;
	line-height:26px;
	padding: .10em 0 .25em .75em;
	border-left: 6px solid #ccc;
	margin:20px 0 16px 0;
}
h2::before {
	position: absolute;
	left: -6px;
	bottom: 0;
	content: '';
	width: 6px;
	height: 50%;
	background-color: #DC281E;
}
h2::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #999;
}
/* 〇 */
h3 {
	font-weight: bold;
	border-bottom:1px #777 dotted;
}

h3:before {
    font-family:"FontAwesome";
	content:"\f110";
    color:#DC281E;
    font-size:24px;
    margin-right:9px;
	 f096
}

/* □ */
h4{
	font-weight: bold;
	border-bottom:1px #777 dotted;
}
h4:before{
    font-family:"FontAwesome";
    content:"\f096";
    color:#DC281E;
    font-size:24px;
    margin-right:9px;

}h5{
	margin-top:20px;
	line-height:26px;
	position: relative;
	padding-bottom: .5em;
    }h5::before,
h5::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	height: 4px;
}
h5::before {
	z-index: 2;
	width: 15%;
	background-color: #444;
}
h5::after {
	width: 100%;
	background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}
.head_title{
    position: relative;
	width:90%;
	height:auto;
	float:left;
	text-align:left;
    color: #fff;
	font-size:20px;
    font-weight: bold;
    margin: 0 0 0 0;
    padding: 0.5em 0.5em 0.5em 1.7em;
}
 
.head_title:before{
    content: "";
    position: absolute;
    background: #FC6;
    top:6px;
    left: 0.4em;
    height: 15px;
    width: 15px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -o-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
 
.head_title:after{
    content: "";
    position: absolute;
    background: #fff;
    top: 24px;
    left: 0;
    height: 10px;
    width: 10px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -o-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.title_box{
	float:right;
	 position: relative;
	width:36.0%;
	background-color:#333;
	margin:-10px -20px 16px 0px;
	padding: 10px 10px 12px 20px;
	font-family:meiryo;
	font-size:11px;
	color:#ccc;
	text-align:right;
	line-height: 12px;
	height: 8px;
}
 .title_box:after {
    content: '';
    position: absolute;
    border-top: 15px solid #ccc;
    border-right: 10px solid transparent;
    border-left: 0px solid transparent;
    bottom: -15px;
    right: 0px;
 }
 
 .title_box:before {
    content: '';
    position: absolute;
    border-top: 30px solid #333;
    border-right:0px solid transparent;
    border-left: 30px solid transparent;
    bottom: 0px;
    left: -29px;
 }
 /*ChromeとOperaのみだけに適用されるCSS*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .title_box:before {
    content: '';
    position: absolute;
    border-top: 30px solid #333;
    border-right:0px solid transparent;
    border-left: 30px solid transparent;
    bottom: 0px;
    left: -29px;
 }
}
 .cat_text{
	position: relative;
	background-color:#ccc;
	text-align:right;
	font-size:14px;
	height:auto;
	width:75%;
	float:right;
	clear:both;
	padding:0 3px 0 0;
	margin:0 0 20px 0;
	}

.drop-shadow {
    position:relative;
    width:90%;
    padding:1em;
    margin:12px 20px 12px 0px;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
}
 
.drop-shadow:after{
    right:10px;
    left:auto;
}
.round {
    -moz-border-radius:4px;
    border-radius:4px;
}
 
.round:before,
.round:after {
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
 
.round:after {
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

.raised:before {
    width:auto;
    right:10px;
    left:10px;
    bottom:0;
    -webkit-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
    box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
}
.rotated {
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
 
.rotated *:first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.title-box-4 {
    background-color: #fbeefc;
    border-left: 8px solid #c92ad2;
    color: #c92ad2;
    margin: 0 0 40px 0;
    padding: 1em;
}
.title-box-5 {
    background-color: #cafbce;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #cafbce;
    color: #0a8915;
    margin: 0 0 40px 0;
    padding: 1em;
}
.title-box-6 {
    background-color: #8d1e47;
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #8d1e47;
    color: #fff;
    margin: 0 0 40px 0;
    padding: 16px;
}
.title-box-7 {
    background-color: #c85d05;
    color: #fff;
    margin: 0 0 40px 0;
    padding:16px;
    position: relative;
}
.title-box-7::after {
    content: "";
    border-color: #853e04 #fff #fff #853e04;
    border-style: solid;
    border-width: 0 0 24px 24px;
    bottom: 0;
    position: absolute;
    right: 0;
}
.title-box-8 {
    background-color: #190b56;
    border: 1px solid #210e75;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset,
                0 0 4px rgba(0, 0, 0, .8) inset,
                2px 2px 2px rgba(0, 0, 0, .4);
    color: #fff;
    margin: 0 0 40px 0;
    padding:16px;
}
.title-box-9 {
    background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
    border: 1px solid #ccc;
    border-top: 4px solid  #F38B8E;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
    margin: 0 0 40px 0;
    padding:16px;
}
.title-box-9 a{ text-decoration:none}
.stripe-box-10 {
    background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    color: #4a1086;
    margin: 0 0 40px 0;
    padding:16px;
	border-bottom:#F9C 3px solid;
}
.title-box-11 {
    background-color: #fff;
    margin: 0 0 40px 0;
    padding:16px;
    position: relative;
    z-index: 1;
}
.title-box-11::before,
.title-box-11::after {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.title-box-11::before {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    z-index: -1;
}
.title-box-11::after {
    background-color: #a4f5c8;
    top: 5px;
    left: 5px;
    z-index: -2;
}
.title-box-12 {
    border: 4px solid #82636b;
    border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
    margin: 0 0 40px 0;
    padding:16px;
}
.title-box-13 {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 0 0 40px 0;
    padding:16px;
    position: relative;
}
.title-box-13::before {
    background-color: #fff;
    color: #da4033;
    content: "POINT";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect-04
{
  position: relative;
}
.effect-04::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px;
	right: 15px;
	z-index: -1;
	content: '';
	box-shadow: 0 10px 10px rgba(0,0,0,.3);
	border-radius: 100px / 15px;
}

.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
.effect6
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
.effect8
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
.heading01 {
    font-weight:bold;
    position: relative;
    padding: 10px;
    background: #b8b8b8;
}
.heading01:before{
    content: " ";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent;
    border-right-color: #a6a6a6;
}
.heading01:after{
    content: " ";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent;
    border-top-color: #a6a6a6;
}
.heading02 {
    font-weight:bold;
    position: relative;
    padding: 10px;
    background: #b8b8b8;
    margin-right:20px;
}
.heading02:before {
    content: " ";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent;
    border-right-color: #a6a6a6;
}
.heading02:after {
    content: " ";
    position: absolute;
    top: 0px;
    left: 100%;
    width: 0;
    height: 0;
    border-width: 22px 10px;
    border-style: solid;
    border-color: #b8b8b8;
    border-right-color: transparent;
}
.heading04 {
    font-weight:bold;
    position: relative;
    padding: 10px;
    background: #b8b8b8;
}
.heading04:before {
    content: " ";
    position: absolute;
    top: -20px;
    left: 0;
    width: 632px;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #ccc;
}


    .box {
     background: -moz-linear-gradient(center top , rgba(253, 253, 253, 0.9) 0%, #FDFDFD 80%, #F1F1F1 100%) repeat scroll 0 0 transparent;
     border-radius: 5px 5px 5px 5px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.1) inset;
     padding:  20px;
     position: relative;
    }
     
    .box:before {
     content: "";
     position: absolute;
     z-index: -1;
     left: 20%;
     right: 20%;
     top: 50%;
     bottom: 0;
     border-radius: 700px 700px 700px 700px / 70px 70px 70px 70px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    }
		/* #title01 */
		#title01 div {
			box-shadow: 0 0 15px rgba(0,0,0,.3);
		}

		/* #title02 */
		#title02 div {
			box-shadow: inset 0 0 15px rgba(0,0,0,.3);
		}

		/* #title03 */
		#title03 div {
			box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
		}

		/* #title04 */
		#title04 div {
			position: relative;
		}
		#title04 div::after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 15px;
			right: 15px;
			z-index: -1;
			content: '';
			box-shadow: 0 10px 10px rgba(0,0,0,.3);
			border-radius: 100px / 15px;
		}

		/* #title05 */
		#title05 div {
			position: relative;
		}
		#title05 div::after {
			position: absolute;
			bottom: 10px;
			left: 25px;
			z-index: -1;
			content: '';
			width: 450px;
			height: 10px;
			box-shadow: 0 40px 25px rgba(0,0,0,.5);
			border-radius: 200px / 5px;
		}

		/* #title06 */
		#title06 div {
			position: relative;
		}
		#title06 div::after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 10px;
			right: 10px;
			z-index: -1;
			content: '';
			box-shadow: 0 0 20px rgba(0,0,0,.5);
			border-radius: 100px / 20px;
		}

		/* #title07 */
		#title07 div {
			position: relative;
		}
		#title07 div::after {
			position: absolute;
			top: 10px;
			bottom: 10px;
			left: 0;
			right: 0;
			z-index: -1;
			content: '';
			box-shadow: 0 0 20px rgba(0,0,0,.5);
			border-radius: 30px;
		}

		/* #title08 */
		#title08 div {
			position: relative;
		}
		#title08 div::before,
		#title08 div::after {
			position: absolute;
			bottom: 10px;
			z-index: -1;
			content: '';
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 15px rgba(0,0,0,.5);
		}
		#title08 div::before {
			left: 10px;
			-webkit-transform: rotate(-4deg);
			transform: rotate(-4deg);
		}
		#title08 div::after {
			right: 10px;
			-webkit-transform: rotate(4deg);
			transform: rotate(4deg);
		}