/*reset*/
* {
margin: 0;
padding: 0;
}
body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,img,
table,th,td,embed,object {
margin: 0;
padding: 0;
vertical-align: baseline;
}



/* 基本のレイアウト */

body{color:#333;
font-family:'ヒラギノ角ゴ Pro W3′,'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS P Gothic’, sans-serif;
}


header {
	background: rgba(255,255,255,0.8);
    padding: 8px 0 2px;
	overflow:hidden;
}
.headerImg{	width: 25%; margin-bottom:5px;}
h1{font-size:20px;text-align:center;}
h2{font-size:150px;text-align:center;font-family: 'Limelight', cursive;font-weight:normal;margin-top:-20px;}
h3{font-size:25px;text-align:center;margin-top:-20px;margin-top:-45px;}


#head{margin:0 auto; float:none; text-align:center;}
#main{}
.mainBg{background-color:#fff; background: url(../image/bg-maincolumn.jpg) 50% 50%/contain;padding:10px 0;  }
.mainBorder{border: 12px solid #00679A;}
.mainColor{color:#00679A;}

.navi{list-style-type:none;}
.navi li:first-of-type,.navi li:last-of-type{
	margin: 0;
}

.linkImg{
transition:all 0.25s ease-out 0s; 
}.linkImg:hover{transform:translate(0px,5px);}

.navi li{
	float: left;
	margin:0 0.4%;
	background: rgba(255,255,255,0.8);
	transition:all 0.25s ease-out 0s; 
	width: 33%;
	}.navi li:hover{background:rgba(235,235,235,0.95);
	transform:translate(3px,3px);}
.navi li a{
	text-decoration:none;
	display:block;
	font-size:150%;
	color:#D06161;
	padding: 5px 0;
	width: 100%;
	}.navi li a:hover{color:#D8231E;}

/* ボタン設定 */
.mainBtn{
height:130px;width:600px;margin-bottom:10px;
padding:10px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition:all 0.5s ease;
}

.mainBtn:hover {
background-color: #fc3;
-webkit-transform: scale( 1.05 );
-moz-transform: scale( 1.05);
}

.onemore{
 font-size: 25px;
font-family: 'Limelight', cursive;
width: 170px;
text-align: center;
background-color: #fff;
border: 8px solid #00679A;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition:all 0.5s ease;
}.onemore:hover{background-color: #fc3;
-webkit-transform: scale( 1.05 );
-moz-transform: scale( 1.05);}


/* 画像のサイズ指定 */
#whichImg{padding:0.5% 0%;background-color:white;}
.title{width:75%;}
.image{width:49%; max-width:480px; overflow:hidden; padding:0% 0.5%;}
.gazou{width:100%; vertical-align: text-top;}

#result .re_round img{width: 100%; border-radius: 90%;}
#resultbox2 img{width: 100%;}


/* advance */
.ff_Muli{font-family: 'Muli', cursive;}
.ff_Vollkorn{font-family: 'Vollkorn', serif; font-weight:bold;}
.band{
	background: #0A0404;
	font-size: 125%;
	padding: 5px 10px;
	margin: 0 -10px 10px;
	color: #fff;
	}
.textbox{line-height:2em; font-size:110%; margin:0 1em;}
.center{margin:0 auto;}
.tr-c{text-align:center;}
.round{width:100%; border-radius:16px; background-color:#D83535; color:white; padding:30px;margin-bottom:10px;}
.r_round{
	font-size:150%;
	width: 90%;
	max-width: 370px;
	border-radius: 75px;
	background-color: #FFFFFF;
	color: black;
	padding: 30px 5%;
	margin-bottom: 10px;
	}
.re_round{    font-size: 115%;
	width: 90%;
	max-width: 500px;
	border-radius: 2rem;
	background-color: #FFFFFF;
	color: black;
	padding: 30px 5%;
	margin-bottom: 10px;
}
.w960px{width:100%; max-width:960px;}

.m10-b{margin-bottom:10px;}
.m20-t{margin-top:20px;}
.m30-tb{margin:30px 0;}

.fl{float:left;}
.fr{float:right}
.clear{clear:both;}

#first,#first_m{
    background: #414449;
    color:#fff;
    border-radius: 16px;
    padding:8px;
    margin: 0px 8px 8px 8px;
    font-weight: bold;
}

/* topのデザイン */
.rel{position:relative; z-index:0;}
.ab{position:absolute;}

.start{width:55%;transition:all 0.25s ease 0s;}.start:hover{ -webkit-transform:scale(1.15); transform: scale(1.15);}

@media screen and (max-width: 800px){

.navi li a{font-size:110%;}
    .round{width: 100px; padding: 6px;font-size:50%;}

    .headerImg{	width: 45%; margin-bottom:5px;}
    
}