@charset "utf-8";
/* CSS Document */
html {
font-size: 62.5%;
height:100%;
}
body{
font-size: 1.0rem;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック","MS PGothic","Verdana";
line-height:1;
color:#323232;
height:100%;
}
.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.text {
font-size:1.6rem;
line-height:1.6;
}
.mt5 {
margin-top:5px!important;
}
.mt10 {
margin-top:10px!important;
}
.mt15 {
margin-top:15px!important;
}
.mt20 {
margin-top:20px!important;
}
.mt25 {
margin-top:25px!important;
}
.mt30 {
margin-top:30px!important;
}
.mt35 {
margin-top:35px!important;
}
.mt40 {
margin-top:40px!important;
}
.mt45 {
margin-top:45px!important;
}
.mt50 {
margin-top:50px!important;
}
.mt60 {
margin-top:60px!important;
}
.mt70 {
margin-top:70px!important;
}

.mb5 {
margin-bottom:5px!important;
}
.mb7 {
margin-bottom:7px!important;
}
.mb10 {
margin-bottom:10px!important;
}
.mb15 {
margin-bottom:15px!important;
}
.mb20 {
margin-bottom:20px!important;
}
.mb25 {
margin-bottom:25px!important;
}
.mb30 {
margin-bottom:30px!important;
}
.mb35 {
margin-bottom:35px!important;
}

.mb40 {
margin-bottom:40px!important;
}
.mb45 {
margin-bottom:45px!important;
}
.mb50 {
margin-bottom:50px!important;
}
.mb55 {
margin-bottom:50px!important;
}
.mb60 {
margin-bottom:60px!important;
}
.mb70 {
margin-bottom:70px!important;
}

.ml5 {
margin-left:5px!important;
}
.ml10 {
margin-left:10px!important;
}
.ml15 {
margin-left:15px!important;
}
.ml20 {
margin-left:20px!important;
}
.ml25 {
margin-left:25px!important;
}
.ml30 {
margin-left:30px!important;
}
.ml35 {
margin-left:35px!important;
}
.ml40 {
margin-left:40px!important;
}
.ml45 {
margin-left:45px!important;
}
.ml50 {
margin-left:50px!important;
}
.ml60 {
margin-left:60px!important;
}
.ml70 {
margin-left:70px!important;
}

.mr5 {
margin-right:5px!important;
}

.mr10 {
margin-right:10px!important;
}
.mr15 {
margin-right:15px!important;
}
.mr20 {
margin-right:20px!important;
}
.mr25 {
margin-right:25px!important;
}
.mr30 {
margin-right:30px!important;
}
.mr35 {
margin-right:35px!important;
}
.mr40 {
margin-right:40px!important;
}
.mr45 {
margin-right:45px!important;
}
.mr50 {
margin-right:50px!important;
}
.mr60 {
margin-right:60px!important;
}
.mr70 {
margin-right:70px!important;
}



.pt5 {
padding-top:5px!important;
}
.pt10 {
padding-top:10px!important;
}
.pt15 {
padding-top:15px!important;
}
.pt20 {
padding-top:20px!important;
}
.pt25 {
padding-top:25px!important;
}
.pt30 {
padding-top:30px!important;
}
.pt35 {
padding-top:35px!important;
}
.pt40 {
padding-top:40px!important;
}
.pt45 {
padding-top:45px!important;
}
.pt50 {
padding-top:50px!important;
}
.pt60 {
padding-top:60px!important;
}
.pt70 {
padding-top:70px!important;
}

.pb5 {
padding-bottom:5px!important;
}
.pb10 {
padding-bottom:10px!important;
}
.pb15 {
padding-bottom:15px!important;
}
.pb20 {
padding-bottom:20px!important;
}
.pb25 {
padding-bottom:25px!important;
}
.pb30 {
padding-bottom:30px!important;
}
.pb35 {
padding-bottom:35px!important;
}
.pb40 {
padding-bottom:40px!important;
}
.pb45 {padding-bottom:45px!important;
}
.pb50 {padding-bottom:50px!important;
}
.pb60 {padding-bottom:60px!important;
}
.pb70 {padding-bottom:70px!important;
}

.pl5 {padding-left:5px!important;
}
.pl10 {padding-left:10px!important;
}
.pl15 {padding-left:15px!important;
}
.pl20 {padding-left:20px!important;
}
.pl25 {padding-left:25px!important;
}
.pl30 {padding-left:30px!important;
}
.pl35 {padding-left:35px!important;
}
.pl40 {padding-left:40px!important;
}
.pl45 {padding-left:45px!important;
}
.pl50 {padding-left:50px!important;
}
.pl60 {padding-left:60px!important;
}
.pl70 {padding-left:70px!important;
}

.pr5 {padding-right:5px!important;
}
.pr10 {padding-right:10px!important;
}
.pr15 {padding-right:15px!important;
}
.pr20 {padding-right:20px!important;
}
.pr25 {padding-right:25px!important;
}
.pr30 {padding-right:30px!important;
}
.pr35 {padding-right:35px!important;
}
.pr40 {padding-right:40px!important;
}
.pr45 {padding-right:45px!important;
}
.pr50 {padding-right:50px!important;
}
.pr60 {
padding-right:60px!important;
}
.pr70 {
padding-right:70px!important;
}

.fl_l {
float:left;
}

.fl_r {
float:right;
}
.cl {
clear:both;
}
.v_top {
vertical-align:top!important;
}

table {
font-size: 100%;
}


pre, code, samp, kbd, var {
font-family: Consolas, Monaco, monospace;
font-size:100%;
}

sub, sup {
font-size: 50%;
}




.mobile {
display:none;
}
.link_top {
background:url(../images/icon_totop.png) no-repeat left center;
font-size:1.2rem;
text-align:right;
line-height:1.5;
display:inline;
float:right;
margin-bottom:10px;
padding-left:15px;
clear:both;
}
.link_top a {
color:#056dcf;
}
.link_top a:hover {
text-decoration:underline;
}
.ul_sns {
float:right;
height: 38px;
margin-bottom: 6px;
}
.ul_sns li {
float:left;
margin-left:10px;
}
.ul_sns li:not(:last-child) {
width:38px;
height:38px;
}
.ul_sns li:last-child {
padding-top:20px;
}

#birthday_main {
width:100%;
max-width:950px;
margin:0 auto;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
h2#main_image img {
width:100%;
}
ul#gr_nav {
width:100%;
max-width:900px;
margin:0 auto 20px;
}
ul#gr_nav li {
float:left;
width:180px;
max-width:20%;
}
ul#gr_nav li img {
width:100%;
}
#birthdat_content {
padding:0 32px;
}
#flag {
width:auto;
height:100%;
background:url(../images/bg_ttl_flag.png) no-repeat    ;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
margin-bottom:20px;
}
/*#flag:after {
content:"";
position:absolute;
right:0;
bottom:0;
width:0;
height:0;
border-right:13px solid #fff;
border-top:39px solid transparent;
border-bottom:39px solid transparent;
}*/
#flag h3 {
padding:10px 20px 10px 80px;
font-size:2.8rem;
font-weight:500;
background:url(../images/icon_ttl01.png) no-repeat 5px center;
color:#404040;
line-height:2em;
text-transform:uppercase;
}


.h4_box {
background: rgb(236,200,75); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(236,200,75,1) 1%, rgba(230,187,57,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(236,200,75,1)), color-stop(100%,rgba(230,187,57,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecc84b', endColorstr='#e6bb39',GradientType=0 ); /* IE6-9 */
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
box-shadow:rgba(113, 135, 164, 0.65) 3px 3px 2px -1px;
-webkit-box-shadow:rgba(113, 135, 164, 0.65) 3px 3px 2px -1px;
-moz-box-shadow:rgba(113, 135, 164, 0.65) 3px 3px 2px -1px;
width:100%;
padding:5px 10px;
height:52px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin-bottom:10px;
clear:both;
}
.h4_birthday {
background:url(../images/icon_ttl.png) no-repeat left top;
color:#45260d;
font-size:2.6rem;
line-height:48px;
padding-left:50px;
font-weight:500;
}

.h4_box02{
	-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px;
background-size: 25px 25px;
background-color: #ece1c4;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #e6d9b2), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(left, #e6d9b2 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(left, #e6d9b2 50%, transparent 50%, transparent);
background-image: linear-gradient(left, #e6d9b2 50%, transparent 50%, transparent);
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
width:100%;
padding:5px 10px;
height:52px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin-bottom:10px;
clear:both;
	}
.h4_birthday02 {
color:#45260d;
font-size:2.6rem;
line-height:48px;
padding-left:20px;
font-weight:500;
	}

.content_box {
width:100%;
padding:20px 16px;
border:1px solid #a8851e;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin-bottom:10px;
background: #fff;
}

.content_box h5 {
color:#de1100;
font-size:2rem;
line-height:1.5;
margin-bottom:10px;
}
.content_box p {
font-size:1.4rem;
line-height:1.6;
margin-bottom:20px;
}
.h4_box02_txt p{
	font-size:2.4rem;
	line-height:1.6;
	}
.content_box dl {
background:#fbf3d9;
padding:15px;
display:block;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.dl_birth01 {
float:right;
width:494px;
}
.dl_birth02 {
float:left;
width:494px;
}

.content_box dl dt {
font-size:2rem;
line-height:1.5;
font-weight:bold;
margin-bottom:10px;
}
.content_box dl dd {
font-size:1.4rem;
line-height:1.6;
}
.img_birth03_01 {
float:left;
padding-right:20px;
padding-bottom:20px;
width:36%;
max-width:330px;
}
.img_birth03_01 img {
width:100%;
}
.img_birth03_02 {
float:right;
padding-left:20px;
padding-bottom:20px;
width:36%;
max-width:320px;
}
.img_birth03_02 img {
width:100%;
}
.box950 {
margin:0 auto;
overflow: hidden;
}

#search_button {
width: 121px;
}

@media only screen and (max-width: 970px){
#birthday_main {
padding:0 10px;
}
#flag {
width:auto;
height:100%;
color:#404040;
line-height:40px;
text-transform:uppercase;
margin-bottom:20px;
background:url(../images/bg_ttl_flag.png) no-repeat ;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#flag h3 {
padding:10px 20px 10px 40px;
font-size:2.0rem;
font-weight:500;
background: url(../images/icon_ttl01.png) no-repeat 5px center;
background-size:30px 30px;
}
.h4_birthday {
font-size:1.6rem;
}
.h4_birthday02 {
font-size:1.6rem;
line-height:46px;
padding-left: 15px;
}
.h4_box02_txt p{
	font-size:1.6rem;
	line-height:1.6;
	}
.content_box dl {
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.dl_birth01 {
float:none;
}
.dl_birth02 {
float:none;
}
.pc img{
width: 100%;
}

}

@media only screen and (max-width: 640px){
.pc {
display:none;
}

.mobile {
display:block;
}

.mobile img{
width:100%;
}

.ul_sns {
float:right;
height: 25px;
margin-bottom: 6px;
}
.ul_sns li:not(:last-child) {
width:25px;
height:25px;
}
.ul_sns li:last-child {
padding-top:0;
}

.ul_sns li img {
width:100%;
}

.text {
font-size:1.4rem;
line-height:1.6;
}
#birthday_main {
padding:0;
}


ul#gr_nav {
width:auto;
max-width:auto;
margin:0 auto 10px;
text-align:center;
}
ul#gr_nav li {
float:none;
display:inline-block;
width:30%;
max-width:100px;
}
#birthdat_content {
padding:0 5px;
}

#flag {
width:100%;
height:100%;
background:url(../images/bg_ttl_flag.png) no-repeat ;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
color:#404040;
line-height:2em;
margin-bottom:10px;
}
/*#flag:after {
border-right:13px solid #fff;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
}*/
#flag h3 {
padding:10px 20px 10px 40px;
font-size:1.4rem;
font-weight:500;
background: url(../images/icon_ttl01.png) no-repeat 5px center;
background-size:30px 30px;
}

.h4_box {
background: rgb(236,200,75); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(236,200,75,1) 1%, rgba(230,187,57,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(236,200,75,1)), color-stop(100%,rgba(230,187,57,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(236,200,75,1) 1%,rgba(230,187,57,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecc84b', endColorstr='#e6bb39',GradientType=0 ); /* IE6-9 */
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow:rgba(113, 135, 164, 0.65) 3px 3px 2px -1px;
-webkit-box-shadow:rgba(113, 135, 164, 0.65) 3px 3px 2px -1px;
-moz-box-shadow:rgba(113, 135, 164, 0.65) 3px 3px 2px -1px;
width:100%;
padding:5px;
height:auto;
}
.h4_birthday {
background:url(../images/icon_ttl.png) no-repeat left top;
background-size:20px 20px;
color:#45260d;
font-size:1.4rem;
line-height:25px;
padding-left:25px;

}
.sp_item01 {
width:100%;
max-width:232px;
}
.sp_item02 {
width:100%;
max-width:170px;
}
.sp_item03 {
width:100%;
max-width:130px;
}

}
