@charset "utf-8";

/* Background image (small size picture will be automatically repeated)*/
.backgr {
background-image: url("./pur2b.gif")
/* background-color: #8C87F2 <- when replacing image by a color simply */
}


/* Title image (switching: top page only); beginning from the shorter */
.title1{margin-top:21px; margin-left:auto; margin-right:auto; display:none;}
.title2{display: none;}
.title3{margin-top:10px; display: block;
        width: 100%;}
@media screen and (min-width:350px) and ( max-width:550px) {
.title1{display: none;}
.title2{margin-top:10px; display: block;
        width: 100%;}
.title3{display: none;}
}
@media screen and (min-width:550px) {
.title1{display: block;
        width: 95%;
	max-width: 900px;}
.title2{display: none;}
.title3{display: none;}
}

/* Title image in general */
.title1gen{margin-top:21px; margin-left:auto; margin-right:auto; display:block;
        width: 95%;
	max-width: 900px;}
@media only screen and (max-width: 550px) {
.title1gen{display: none;}
} 


/* Navigation menu box & gradation version*/
.navtop {
    list-style: none;
    text-align: center;
    margin-left:-37px;
    font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
 
.navtop li {
    margin-top:4px; margin-bottom:12px;
    height: 37px;
    display: inline-block;
    border-right: 2px solid transparent;
}
 
.navtop li a {
    display: block;
    padding: 10px 4px;
    text-decoration: none;
    font-size: 13px;
    color: #333;
    font-weight:bold;
    background:transparent url(buttonbackgra.png) repeat-x left bottom;
}

.navtop li a:hover {
    background:transparent url(buttonbackgrahv.png) repeat-x left bottom;
}


/* Old foot button menu version (left as it is; has no influence now) */
/* Line-height determines vertical clearance of buttons, and was 4 or 3 previously.  */
.navmenu{text-align:center; line-height:3.4;}


/* Main body character size, margin&padding for sp (upper part) and pc */
/* Something like branch commands cannot be used in css-format files */
.mainbody{font-size:large; padding-top:25px; padding-left:17px;
 padding-right:4px; padding-bottom:17px;
 margin-top:-14px; margin-left:0px; margin-right:0px; margin-bottom:0px;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 line-height:2.3; background-color:#e3ffff; text-indent:0em;}
@media only screen and (min-width: 530px) {
.mainbody{font-size:medium; padding-top:30px; padding-left:30px;
 padding-right:30px; padding-bottom:30px; width:80%; max-width: 800px;
 margin-top:-14px; margin-left:auto; margin-right:auto; margin-bottom:0px;}
}

/* Same as the general one but background is white(#ffffff) */
/* Attention when change! The following has two "mainbodyw" sections! */
.mainbodyw{font-size:large; padding-top:25px; padding-left:17px;
 padding-right:4px; padding-bottom:17px;
 margin-top:-14px; margin-left:0px; margin-right:0px; margin-bottom:0px;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 line-height:2.3; background-color:#ffffff; text-indent:0em;}
@media only screen and (min-width: 530px) {
.mainbodyw{font-size:medium; padding-top:30px; padding-left:30px;
 padding-right:30px; padding-bottom:30px; width:80%; max-width: 800px;
 margin-top:-14px; margin-left:auto; margin-right:auto; margin-bottom:0px;}
}

/* Same as the general one but line height is 3.6, not 2.3 */
/* Attention when change! The following has two "mainbodyh1" sections! */
.mainbodyh1{font-size:large; padding-top:25px; padding-left:17px;
 padding-right:4px; padding-bottom:17px;
 margin-top:-14px; margin-left:0px; margin-right:0px; margin-bottom:0px;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 line-height:3.6; background-color:#e3ffff; text-indent:0em;}
@media only screen and (min-width: 530px) {
.mainbodyh1{font-size:medium; padding-top:30px; padding-left:30px;
 padding-right:30px; padding-bottom:30px; width:80%; max-width: 800px;
 margin-top:-14px; margin-left:auto; margin-right:auto; margin-bottom:0px;}
}

/* Same as the general one but line height is 1.8, not 2.3 */
/* In the 2nd mainbodyh2, padding-top:30px->20px to make the margin smaller*/
/* Attention when change! The following has two "mainbodyh2" sections! */
.mainbodyh2{font-size:large; padding-top:25px; padding-left:17px;
 padding-right:4px; padding-bottom:17px;
 margin-top:-14px; margin-left:0px; margin-right:0px; margin-bottom:0px;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 line-height:1.8; background-color:#e3ffff; text-indent:0em;}
@media only screen and (min-width: 530px) {
.mainbodyh2{font-size:medium; padding-top:20px; padding-left:30px;
 padding-right:30px; padding-bottom:30px; width:80%; max-width: 800px;
 margin-top:-14px; margin-left:auto; margin-right:auto; margin-bottom:0px;}
}

/* Picture size in general */
.picwidth1{width: 45%;}
@media only screen and (max-width: 530px) {
.picwidth1{width: 85%;}
}

/* 14-1,14-2(x3),14-3(x6),14-4(x3),14-7,14-8(first pic only),14-9(x2),14-10(x2),14-11,
14-12(x5),14-13(x2),14-14,14-15(x2),14-16 */
.picwidth2{width: 65%;}
@media only screen and (max-width: 530px) {
.picwidth2{width: 95%;}
}

/* 14-8(last two pics) */
.picwidth3{width: 75%;}
@media only screen and (max-width: 530px) {
.picwidth3{width: 95%;}
}

/* 14-17(x2),14-18,14-19 */
.picwidth4{width: 100%;}
@media only screen and (max-width: 530px) {
.picwidth4{width: 95%;}
}

/* 30-11 */
.picwidth5{width: 40%;}
@media only screen and (max-width: 530px) {
.picwidth5{width: 90%;}
}