@charset "utf-8";
/* CSS Document */
.inner p {
	line-height:1.5em;
	padding-bottom:2%;
	text-align: justify;
	text-justify: inter-ideograph;
}
.parent {margin-bottom:5%; margin-top:80px;}
.inner{
	background:url(../images/pageBg.jpg) left top no-repeat;
	background-color:#fff;
    max-width: 880px;
	padding:0 4% 4%;
    margin: auto;
	box-shadow:0 0 1px 1px #ccc;
}
h1 img{ padding:15px 0; max-width:24%; min-width:200px; height:auto;} /* logo */

h1 {
	text-align:center;
	background-color:#fff;
}
h2 {
	font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	line-height:1.5em;
	padding:3% 0 0 0;
	color:#fff;
	font-size:28px;
	font-weight:bold;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
@media screen and (max-width: 960px) {
h1{
    position: fixed;/* ヘッダー固定 */
    top: 0px;
    left: 0px;
	width:100%;
	z-index:997;
	opacity:0.95;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
body { padding-top:70px;}
.parent {margin-top:50px;}

}
@media screen and (max-width: 680px) {
h2 { padding:6% 0;}
}
h3{
	margin:0 0 3% 0;
	padding:0 0 2% 0;
	color:#333;
	border-bottom:2px #888 solid;
	font-size: 22px;
}

/* ----------------------------------------
				yellow btn
   ---------------------------------------- */
.btnY {
    position: relative;
    width: 100%;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}
.btnY:hover {cursor: pointer;}
.roll ,
.roll2 {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}
.roll div {
    position: absolute;
    text-align: center;
    width: 100%;
	background-color:#ffca12;
    height: 50px;
    padding: 15px 0 0 0;
    border: #ffca12 solid 1px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.roll div:nth-child(1) ,
.roll2 div:nth-child(1) {
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}
.roll div:nth-child(2) {
    color: #000;
    background-color: #ffca12;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}
.roll:hover div:nth-child(1) {
    color: #fff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}
.roll2:hover div:nth-child(2) ,
.roll:hover div:nth-child(2) {
    background:#f93;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}
.roll2 div {
    position: absolute;
    text-align: center;
    width: 100%;
	background-color:#fff;
    height: 50px;
    padding: 15px 0 0 0;
    border: #ffca12 solid 2px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.roll2 div:nth-child(2) {
    color: #000;
    background-color: #fff;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}
.roll2:hover div:nth-child(1) {
    color: #ffca12;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}