body
{
text-align: center;
font-family:�l�r �o�S�V�b�N;
margin-top:0;
margin-bottom:0;
background-color:#FFFFCC
}



#main
{
max-width: 720px;
width: 100%;
margin: 10px auto;
text-align: left;
border:1px solid #FF9933;
background-color:#FFFFFF;
box-sizing: border-box;
}

a{text-decoration: none; color:#0000FF}
a:hover, a:focus{text-decoration: underline; color: #0000FF}
a:visited{text-decoration: none;color: #6666FF}
a:visited:hover, a:visited:focus{text-decoration: underline;color: #0000FF}

#gra{
height:28px;
background-image: url('images/com/top_gaiyo/gra.jpg'); background-repeat: 
no-repeat; background-position: right; color:#0000FF; font-size:10pt; font-weight:bold; background-color:#FDCD07; line-height:150%}



.cle10{
font-size:10pt; line-height:150%; margin-top:0; margin-bottom:0
}

#title{
width:100%;
max-width:720px;
height:160px;
background-image:url('images/papanapi/title.jpg'); background-repeat:no-repeat; background-size:contain;
}

h1
{
font-size: 10pt;
line-height:100%;
margin-top:0; 
margin-bottom:0
}

.reset{
clear:both;
}

.redtext{color: #FF0000}

.notline{text-decoration: line-through}
.redred{font-size: 10pt; color: #990000; border: 1px solid #990000; padding: 3px}
.redred2{color: #990000; border: 1px solid #990000; padding: 3px}

#navi{
background-color: #CCFFCC;
font-size:16px;
font-weight:bold;
padding:8px;
text-align:center;
}

.sp33{
text-align:center;
float: left; width: 33%}

.sq20_l{float:left;width:20%}
.sq80_r{float:right;width:79%}


.ani_logo{
width:250px;
height:50px;
background-image: url('images/com/top_gaiyo/ani_logo.gif')}

.ban{
width:88px;
height:31px;
background-image: url('images/papanapi/banpapanapi.jpg')}

.shopga{
width:120px;
height:90px; background-image:url('images/com/top_gaiyo/shopga.jpg')
}

#contents_l{
width:70px;
height:100px;
float:left
}

#contents{
width:580px;
line-height: 150%;
text-align: left;
padding-left:70px

}



.whitetext{
color: #FFFFFF
}

.gold10{
font-size: 10pt;
border: 1px solid #808000;padding-top: 1px; padding-bottom: 1px}

.blu{
border:1px solid #0000FF; padding:10px; background-color: #CCFFFF;
line-height:150%
}

#pre1{
border:1px solid #800000;
padding:5px;
 color:#FFFFFF;
font-size:10pt;
font-weight:bold;
background-color:#800000
}

#pre2{
border:1px solid #800000;
padding:2px;
font-size:10pt
}

#news1{
text-align:left;
font-weight:bold;
color: #FFFFFF;
font-size: 12pt;
border: 1px solid #008000;
padding: 5px;
background-color: #008000
}

#news2{
text-align:center;
border: 1px solid #008000;
padding: 5px; line-height:150%
}


#news80{

text-align:left;
padding-right:10%;
padding-left:10%
}


#susukita{
width:242px;
height:315px;
background-image: url('images/papanapi/papayaatp1.JPG');
float:left;
margin:10px;
}
#susukita_r{height:315px}

.bla10{font-size: 10pt; border: 1px solid #000000; padding: 2px}

.pink3{
border: 1px solid #FF00FF; 
padding: 5px; 
background-color: #FFFFCC;
line-height:100%;
width:600px;
}

.gre { border-bottom-style: solid; font-size: 10pt; border-right-style: solid; border-top-style: solid; border-left-width: 1px; border-left-color: #008080; border-bottom-width: 1px; border-bottom-color: #008080; border-left-style: solid; font-family: �l�r �o�S�V�b�N; border-right-width: 1px; border-top-width: 1px; border-right-color: #008080; border-top-color: #008080;  } 

.gregre{
height:20px;
padding:5px;
color: #FFFFFF; font-size: 10pt; font-weight: bold; border: 1px solid #008000; 
               background-color: #008000}
.gre2{
line-height: 150%; 
border: 1px solid #008000; 
padding: 10px; 
background-color: #FFFFCC}

.gre1{
text-align:left;
line-height: 150%; 
border: 1px solid #008000; 
padding: 10px
}

.tya{border: 1px solid #800000; padding: 3px;}

.whitetext{color: #FFFFFF; font-size: 10pt; font-weight: bold}
.browntext{color: #800000}

.vedanew{
height:289px; background-image:url('images/papanapi/vedanew.JPG'); background-repeat:no-repeat; background-position:center 
}

#501mk{
height:234px; background-image:url('images/papanapi/501mk.JPG'); background-repeat:no-repeat; background-position:center 
}

.vedas{
height:380px;
background-image: url('images/papanapi/vedas.JPG'); background-repeat:no-repeat; background-position:center 
}

.gb66{
height:300px;
background-image: url('images/papanapi/gb66.jpg');background-repeat:no-repeat; background-position:center 
}

.wp{
height:361px;
background-image: url('images/papanapi/wanwan/wp.JPG');background-repeat:no-repeat; background-position: center 50%;  

}

.atp2{
width:347px;
height:239px;
background-image: url('images/papanapi/papayaatp2.JPG')}
.greentext{
color: #008080; font-size: 10pt}

.napi1{
width:155px;
height:127px;
background-image: url('images/papanapi/napi1.jpg')}
.ora
{
border-right-color: #FF9900;
border-bottom-color: #FF9900;
border-left-color: #FF9900;
border-top-color: #FF9900;
}

.oraora
{
padding:5px;
border-bottom-style: solid;
border-left-width: 1px;
border-left-color: #FF9900;
background-color: #FFCC66;
border-right-width: 1px;
border-left-style: solid;
border-right-color: #FF9900;
border-top-width: 1px;
border-top-color: #FF9900;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FF9900;
border-top-style: solid;
}

#info_{
border:3px ridge #0000FF; width:90%; color:#FFFFFF; font-size:10pt; font-weight:bold; background-color:#0000FF; padding:2px 

}

.info{
text-align:center;
border:2px ridge #800000; width:250px;
height:20px; font-size:10pt; color:#FFFFFF; font-weight:bold; padding:2px; background-color:#800000
}

.poptext{
font-family: HGS�n�p�p�߯�ߑ�; font-weight: bold}

#copyright{
width:100%;
max-width:720px;
height:50px;
background-image: url('images/papanapi/copyright.jpg'); background-size:contain; background-repeat:no-repeat;}


#next{
width:250px;
height:50px;
background-image:url('images/com/navi/ar_next_blue.gif');
background-repeat:no-repeat;
float:right;
}


#next a{
width:250px;
height:50px;
background-image:url('images/com/navi/ar_next_black.gif');
background-repeat:no-repeat;
text-indent:-9999px;
text-decoration: none;
float:right;
}

#next a:hover, #next a:focus {
width:250px;
height:50px;
background-image:url('images/com/navi/ar_next_blue.gif');
background-repeat:no-repeat;
text-indent:-9999px;
text-decoration: none;
float:right;
}


/* �p�\�R���E�X�}�z���ʂ�CSS */
#PageTopBtn {
    position: fixed; /*�{�^���̔z�u�ꏊ���Œ�*/
    bottom: -10px; /*������̃{�^���̔z�u�ꏊ���w��*/
    right: 10px; /*�E����̃{�^���̔z�u�ꏊ���w��*/
}
#PageTopBtn a {
    display: block; /*�z�u�̒���*/
    text-decoration: none; /*�����̉���������*/
    color: #0033ff; /*�����̐F*/
    text-align: center; /*�����𒆉��ɔz�u*/
    border-radius: 10%; /*�{�^���̊p�������ۂ�����*/
    outline: none; /*�N���b�N�����Ƃ��̍����g������*/
}
#PageTopBtn a:hover {
    text-decoration: none; 
    background: #87cefa; /*�}�E�X�I�[�o�[���̔w�i�F*/
}

/* �p�\�R���ŕ\������ꍇ��CSS */
@media (min-width: 768px) {
#PageTopBtn {
    font-size: 13px; /*�����̃T�C�Y*/
}
#PageTopBtn a {
    width: 100px; /*�{�^���̕�*/
    height: 50px; /*�{�^���̍���*/
    padding: 24px 0; /*�����̔z�u�ꏊ�̒���*/
    background-color: rgba(0,225,225,0.5);    
}
}

/* �X�}�z�ŕ\������ꍇ��CSS */
@media (max-width: 767px) {
#PageTopBtn {
    font-size: 10px;
}
#PageTopBtn a {
    width: 70px;
    height: 50px;
    padding: 10px 0;
    background-color: rgba(0,225,225,0.5);
}
}

/* ===== Global responsive fixes ===== */
img { max-width: 100%; height: auto; }
table { max-width: 100% !important; word-break: break-word; }

@media (max-width: 767px) {
    /* html も指定しないと body の overflow-x:hidden がビューポートに伝播せず効かない */
    html { overflow-x: hidden; }
    body { margin: 0; padding: 0; overflow-x: hidden; }
    #main { padding: 0; margin: 0; width: 100%; border-left: none; border-right: none; }

    /* Force tables to fill container width and reset fixed-width td/th attributes */
    table { width: 100% !important; }
    td, th { width: auto !important; min-width: 0 !important; }

    /* 3-column product boxes: stack vertically */
    .sp33 { float: none; width: 100%; }

    /* Left spacer + right content: collapse spacer */
    .sq20_l { display: none; }
    .sq80_r { float: none; width: 100%; }

    /* Main content area: remove fixed width and left indent */
    #contents { width: 100%; padding-left: 0; box-sizing: border-box; }
    #contents_l { display: none; }

    /* Fixed-width info box */
    .pink3 { width: 100% !important; box-sizing: border-box; }

    /* Header title image: shrink to fit */
    #title { height: auto; min-height: 80px; background-size: contain; background-position: center; }

    /* susukita product image: let it be inline */
    #susukita { float: none; width: 100%; background-size: contain; height: 200px; margin: 6px 0; }
    #susukita_r { height: auto; }

    /* atp2 / vedas / gb66 / wp: all background-image containers, reset height */
    .atp2, .vedas, .gb66, .wp, .vedanew, #501mk { width: 100%; height: 200px; background-size: contain; background-position: center; }

    /* Spec sheet table (.gre class, 585px): stack label above content */
    .gre tr { display: block; border-bottom: 1px solid #008080; margin-bottom: 2px; }
    .gre td { display: block; width: 100% !important; box-sizing: border-box; padding: 3px 5px; }

    /* Price tables (.bla10, .tya class): make horizontally scrollable */
    .bla10, .tya {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ASP.NET buttons (global papanapi): ensure they don't break layout */
    input[type="submit"], input[type="button"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}