@charset "utf-8";

/*
 *
 * Usage: ABOUT page layout
 *
 * Name: about.css
 *
 */


/*---------------------------------------------------------------------
about global layout
---------------------------------------------------------------------*/
#mainContainer.about_container  {padding-top:0; margin-top:-13px; position:relative; z-index:99;}
    #mainContainer.about_container h3  {border-bottom:1px solid #797979; padding-bottom:17px; margin-bottom:30px;}  



    #aboutNav  {background:url(../images/about/bg_lnav.gif) no-repeat 0 0; margin-bottom:25px; clear:both; padding:1px 0 0 0;}
        #aboutNav #anTop    {background:url(../images/about/btn_return-about_on.gif) no-repeat 50% 0;}
        #aboutNav #anTop a  {display:block; overflow:hidden; height:0; padding-top:39px; width:100%; background:url(../images/about/btn_return-about.gif) no-repeat 50% 0;}
        
        #aboutNav ul  {text-align:center; letter-spacing:-.40em; padding:12px 0;}
        #aboutNav li  {display:inline-block; *display:inline; *zoom:1; letter-spacing:normal;}
            #aboutNav li a  {display:block; overflow:hidden; height:0; padding-top:123px;}
            
            #aboutNav .an01  {background:url(../images/about/lnav_01_on.gif) no-repeat 0 0; width:66px;}
            #aboutNav .an02  {background:url(../images/about/lnav_02_on.gif) no-repeat 0 0; width:66px;}
            #aboutNav .an03  {background:url(../images/about/lnav_03_on.gif) no-repeat 0 0; width:66px;}
            #aboutNav .an04  {background:url(../images/about/lnav_04_on.gif) no-repeat 0 0; width:66px;}
            #aboutNav .an05  {background:url(../images/about/lnav_05_on.gif) no-repeat 0 0; width:66px;}
            #aboutNav .an06  {background:url(../images/about/lnav_06_on.gif) no-repeat 0 0; width:66px;}
            #aboutNav .an07  {background:url(../images/about/lnav_07_on.gif) no-repeat 0 0; width:61px;}
            
            #aboutNav .an01 a  {background:url(../images/about/lnav_01.gif) no-repeat 0 0;}
            #aboutNav .an02 a  {background:url(../images/about/lnav_02.gif) no-repeat 0 0;}
            #aboutNav .an03 a  {background:url(../images/about/lnav_03.gif) no-repeat 0 0;}
            #aboutNav .an04 a  {background:url(../images/about/lnav_04.gif) no-repeat 0 0;}
            #aboutNav .an05 a  {background:url(../images/about/lnav_05.gif) no-repeat 0 0;}
            #aboutNav .an06 a  {background:url(../images/about/lnav_06.gif) no-repeat 0 0;}
            #aboutNav .an07 a  {background:url(../images/about/lnav_07.gif) no-repeat 0 0;}
            
            #aboutNav .an01 a.active  {background:url(../images/about/lnav_01_active.gif) no-repeat 0 0;}
            #aboutNav .an02 a.active  {background:url(../images/about/lnav_02_active.gif) no-repeat 0 0;}
            #aboutNav .an03 a.active  {background:url(../images/about/lnav_03_active.gif) no-repeat 0 0;}
            #aboutNav .an04 a.active  {background:url(../images/about/lnav_04_active.gif) no-repeat 0 0;}
            #aboutNav .an05 a.active  {background:url(../images/about/lnav_05_active.gif) no-repeat 0 0;}
            #aboutNav .an06 a.active  {background:url(../images/about/lnav_06_active.gif) no-repeat 0 0;}
            #aboutNav .an07 a.active  {background:url(../images/about/lnav_07_active.gif) no-repeat 0 0;}
            


/*---------------------------------------------------------------------
top layout
---------------------------------------------------------------------*/
#mainHgroup.about_top  {margin-bottom:55px;}
.about_top #pankuzu    {top:480px;}

#aboutTopNav  {}
    #aboutTopNav li  {margin-bottom:30px; position:relative;}
    #aboutTopNav a   {display:block; overflow:hidden; height:0; width:730px; padding-top:167px;}
    
    #aboutTopNav .tnav01  {background:url(../images/about/btn_about01_on.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav02  {background:url(../images/about/btn_about02_on.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav03  {background:url(../images/about/btn_about03_on.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav04  {background:url(../images/about/btn_about04_on.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav05  {background:url(../images/about/btn_about05_on.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav06  {background:url(../images/about/btn_about06_on.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav07  {background:url(../images/about/btn_about07_on.jpg) no-repeat 0 0;}
    
    #aboutTopNav .tnav01 a  {background:url(../images/about/btn_about01.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav02 a  {background:url(../images/about/btn_about02.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav03 a  {background:url(../images/about/btn_about03.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav04 a  {background:url(../images/about/btn_about04.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav05 a  {background:url(../images/about/btn_about05.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav06 a  {background:url(../images/about/btn_about06.jpg) no-repeat 0 0;}
    #aboutTopNav .tnav07 a  {background:url(../images/about/btn_about07.jpg) no-repeat 0 0;}
    
    #aboutTopNav .ic_new  {position:absolute; top:0; left:0; display:block; overflow:hidden; height:0; width:62px; padding-top:62px; background:url(../images/about/ic_new.png) no-repeat 0 0;}



/*---------------------------------------------------------------------
kagawa layout
---------------------------------------------------------------------*/
#kagawa  {}
    #kagawa #gmap  {width:728px; height:548px; border:1px solid #dfdacd; margin-bottom:40px;}
    
    #kagawa #shopList  {padding-bottom:30px;}
        #kagawa #shopList .list  {margin-bottom:40px; clear:both;}
        
        #kagawa #shopList .capture    {float:left; width:195px;}        
            #kagawa #shopList .capture .shop_photo  {float:left; width:160px; height:120px; position:relative;}
                #kagawa #shopList .capture .shop_photo li  {position:absolute; top:0; left:0;}
            
            #kagawa #shopList .capture .shop_thumb  {float:right; width:24px;}
                #kagawa #shopList .capture .shop_thumb li        {margin-bottom:7px;}
                #kagawa #shopList .capture .shop_thumb a         {display:block; border:1px solid #dfdacd;}
                #kagawa #shopList .capture .shop_thumb a:hover,
                #kagawa #shopList .capture .shop_thumb a.active  {border-color:#423f3b;}
                #kagawa #shopList .capture .shop_thumb img       {width:100%; vertical-align:bottom;}


        #kagawa #shopList .shop_info  {float:right; width:495px;}
            #kagawa #shopList .shop_info .shop_hgroup  {border-bottom:1px solid #dfdacd; margin-bottom:15px; padding-bottom:14px;}
                #kagawa #shopList .shop_info .shop_hgroup .pin         {float:left; width:50px; background:url(../images/about/kagawa/pin_shadow.png) no-repeat 50% 50%;}
                #kagawa #shopList .shop_info .shop_hgroup .pin img     {margin-left:2px;}
                #kagawa #shopList .shop_info .shop_hgroup dl           {float:right; width:440px;}
                #kagawa #shopList .shop_info .shop_hgroup dl dt        {margin-bottom:10px; line-height:100%;}
                #kagawa #shopList .shop_info .shop_hgroup dl dd        {line-height:100%;}
                #kagawa #shopList .shop_info .shop_hgroup .ic_address  {background:url(../images/about/kagawa/ic_address.gif) no-repeat 0 0; display:inline-block; *display:inline; *zoom:1;
                                                                        overflow:hidden; height:0; padding-top:16px; vertical-align:middle; width:27px; margin-right:10px;}
                #kagawa #shopList .shop_info .shop_description         {padding-left:20px;}



/*---------------------------------------------------------------------
sanchi layout
---------------------------------------------------------------------*/
#sanchi  {}
    #sanchi #sanchiMap  {background:url(../images/about/sanchi/img_map.gif) no-repeat 100% 0; position:relative; height:578px; width:730px; margin-bottom:55px;}
        #sanchi #sanchiMap p        {margin-left:18px;}
        #sanchi #sanchiMap li       {position:absolute; width:23px; height:23px;}
        #sanchi #sanchiMap a        {display:block;}
        #sanchi #sanchiMap .baloon  {position:absolute; top:-140px; left:-54px; width:130px; height:136px; display:none; z-index:999;}
        
        #sanchi #sanchiMap #point01  {top:214px; right:265px;}
        #sanchi #sanchiMap #point02  {top:212px; right:228px;}
        #sanchi #sanchiMap #point03  {top:256px; right:276px;}
        #sanchi #sanchiMap #point04  {top:262px; right:244px;}
        #sanchi #sanchiMap #point05  {top:322px; right:272px;}
        #sanchi #sanchiMap #point06  {top:318px; right:300px;}
        #sanchi #sanchiMap #point07  {top:338px; right:308px;}
        #sanchi #sanchiMap #point08  {top:338px; right:288px;}
        #sanchi #sanchiMap #point09  {top:351px; right:265px;}
        #sanchi #sanchiMap #point10  {top:371px; right:280px;}
        #sanchi #sanchiMap #point11  {top:362px; right:300px;}
        #sanchi #sanchiMap #point12  {top:379px; right:317px;}
        #sanchi #sanchiMap #point13  {top:354px; right:326px;}
        #sanchi #sanchiMap #point14  {top:336px; right:350px;}
        #sanchi #sanchiMap #point15  {top:398px; right:355px;}
        #sanchi #sanchiMap #point16  {top:372px; right:360px;}
        #sanchi #sanchiMap #point17  {top:415px; right:380px;}
        #sanchi #sanchiMap #point18  {top:448px; right:450px;}
        #sanchi #sanchiMap #point19  {top:458px; left:60px;}

    #sanchi #sanchiDescription  {}
        #sanchi #sanchiDescription dt  {margin-bottom:15px; clear:both;}
            #sanchi #sanchiDescription dt .num  {margin-right:5px;}
            #sanchi #sanchiDescription dt img   {vertical-align:middle;}
        
        #sanchi #sanchiDescription dd  {margin:0 0 25px 12px; clear:both;}




/*---------------------------------------------------------------------
nutrition layout
---------------------------------------------------------------------*/
#nutrition  {}
    #nutrition #nutritionPoint  {margin-bottom:30px;}
        #nutrition #nutritionPoint p  {line-height:200%;}

    #nutrition #point1  {margin-bottom:45px;}
        #nutrition #point1 .left  {width:370px; padding-left:20px;}
            #nutrition #point1 h4  {margin-bottom:30px;}
        #nutrition #point1 .right  {margin-top:-90px;}
    
    #nutrition #point2  {margin:0 0 30px 200px; width:390px;}
        #nutrition #point2 .left  {float:left; width:240px;}
        #nutrition #point2 h4     {margin-bottom:25px;}

    #nutrition #point3  {margin:0 0 35px 12px;}
        #nutrition #point3 .left   {float:left;}
        #nutrition #point3 .right  {float:right; width:465px; padding-top:30px;}
            #nutrition #point3 .right h4  {margin-bottom:30px;}

        #nutrition #dashi  {margin:0 0 0 53px;}
            #nutrition #dashi li  {float:left;}


    #nutrition #researcher  {background:#fff; border:1px dotted #c8c6be; padding:0 45px 35px 45px; margin-bottom:50px;}
        #nutrition #researcher h4  {margin:-26px 0 17px 0;}
        #nutrition #researcher p   {margin-bottom:27px;}
        #nutrition #btnResearcher    {background:url(../images/about/nutrition/btn_researcher_on.gif) no-repeat 0 0; margin-bottom:15px;}
        #nutrition #btnResearcher a  {display:block; overflow:hidden; height:0; padding-top:84px; width:639px; background:url(../images/about/nutrition/btn_researcher.gif) no-repeat 0 0;}
        #nutrition #update  {}
            #nutrition #update dt  {background:url(../images/about/nutrition/bg_update.gif) no-repeat 0 0; color:#fff; text-align:center; width:113px; float:left;}
            #nutrition #update dd  {width:510px; float:right;}



/*---------------------------------------------------------------------
history layout
---------------------------------------------------------------------*/
#history  {}
    #history #udonHistory  {background:url(../images/about/history/bg_history.jpg) no-repeat 0 160px;}
        #history #udonHistory .history  {margin-bottom:70px; clear:both;}
        #history #udonHistory .history h4  {margin-bottom:30px;}
        #history #udonHistory .history p   {line-height:200%; padding-left:26px;}

        #history #udonHistory #history1  {margin-bottom:570px;}
        #history #udonHistory #history2  {margin-bottom:30px;}
            #history #udonHistory #history2 .left  {width:545px;}




/*---------------------------------------------------------------------
odashi layout
---------------------------------------------------------------------*/
#odashi  {}
    #odashi #odashiStory  {margin-bottom:50px;}
    
    #odashi .dashi_box  {clear:both; padding:10px 0 0 5px;}
        #odashi .dashi_box h4            {margin-bottom:30px; position:relative; z-index:99;}
        #odashi .dashi_box p             {line-height:200%; margin-bottom:15px;}
        #odashi .dashi_box .dashi_inner  {padding-left:25px;}

    #odashi #dashi01  {margin-bottom:60px;}
    
    #odashi #dashi02  {margin-bottom:15px;}
        #odashi #dashi02 .dashi_inner  {padding-left:100px;}
        #odashi #dashi02 .img01  {margin:-50px 0 70px 0;}
        #odashi #dashi02 .box1   {margin-bottom:50px;}

    #odashi #dashi03  {}
        #odashi #dashi03 .map  {margin-left:110px;}



/*---------------------------------------------------------------------
extra layout
---------------------------------------------------------------------*/
#extra  {}
    #extraClip  {position:relative; height:1740px;}
        #extraClip .clip  {position:absolute;}
        #extraClip .clip_top_type1  {background:url(../images/about/extra/bg_type1_top.png) no-repeat 0 0; padding-top:68px; width:409px;}
        #extraClip .clip_top_type1 .clip_inner    {background:url(../images/about/extra/bg_type1_bottom.png) no-repeat 0 100%; padding-bottom:37px;}
        #extraClip .clip_top_type1 .clip_content  {background:url(../images/about/extra/bg_type1_middle.png) repeat-y 0 0;}
        
        #extraClip .clip_top_type2  {background:url(../images/about/extra/bg_type2_top.png) no-repeat 0 0; padding-top:68px; width:296px;}
        #extraClip .clip_top_type2 .clip_inner    {background:url(../images/about/extra/bg_type2_bottom.png) no-repeat 0 100%; padding-bottom:35px;}
        #extraClip .clip_top_type2 .clip_content  {background:url(../images/about/extra/bg_type2_middle.png) repeat-y 0 0;}
        
        #extraClip .clip_top_type3  {background:url(../images/about/extra/bg_type3_top.png) no-repeat 0 0; padding-top:68px; width:462px;}
        #extraClip .clip_top_type3 .clip_inner    {background:url(../images/about/extra/bg_type3_bottom.png) no-repeat 0 100%; padding-bottom:37px;}
        #extraClip .clip_top_type3 .clip_content  {background:url(../images/about/extra/bg_type3_middle.png) repeat-y 0 0;}

        
        #extraClip .clip_content  {padding:0 30px 0 35px;}
            #extraClip .clip_content h4  {margin-bottom:25px;}
            #extraClip .clip_content p   {line-height:180%;}

        #extra #clip01  {top:0; left:100px;}
        #extra #clip02  {top:270px; left:365px;}
        #extra #clip03  {top:340px; left:60px;}
        #extra #clip04  {top:625px; left:390px; z-index:99;}
        #extra #clip05  {top:960px; left:100px;}
        #extra #clip06  {top:1215px; left:390px;}
        #extra #clip07  {top:1275px; left:75px;}
        
        #extra #clip05 .left  {width:220px;}




/*---------------------------------------------------------------------
tsukurikata layout
---------------------------------------------------------------------*/
#tsukurikata  {}
    #prepare  {margin-bottom:48px;}
        #prepare #completion  {float:left; text-align:center; width:360px; padding-top:70px;}
        #prepare #btnPrint    {text-align:right; margin-bottom:23px;}

    #howToMake  {margin-bottom:75px;}
        #howToMake h4  {border-bottom:1px solid #797979; padding-bottom:15px; margin-bottom:35px;}
        
        #howToMake .make_section  {margin-bottom:40px; clear:both;}
            #howToMake .make_section h5  {margin-bottom:30px;}
            #howToMake .make_section ul  {padding-left:93px;}
            #howToMake .make_section li  {padding-left:73px; min-height:50px; margin-bottom:25px; position:relative;}
            #howToMake .make_section li p  {padding:5px 0 0 0; line-height:180%;}
            
            #howToMake .make_section .no01  {background:url(../images/about/tukurikata/ic_flow01.gif) no-repeat 0 0;}
            #howToMake .make_section .no02  {background:url(../images/about/tukurikata/ic_flow02.gif) no-repeat 0 0;}
            #howToMake .make_section .no03  {background:url(../images/about/tukurikata/ic_flow03.gif) no-repeat 0 0;}
            #howToMake .make_section .no04  {background:url(../images/about/tukurikata/ic_flow04.gif) no-repeat 0 0;}
            
            #howToMake .make_section .capture  {display:table-cell; vertical-align:middle;}
            #howToMake .make_section .cap_txt  {display:table-cell; vertical-align:middle; width:275px; padding-left:50px}
            *+html #howToMake .make_section .capture  {display:inline; zoom:1;}
            *+html #howToMake .make_section .cap_txt  {display:inline; zoom:1;}
            
            #howToMake .make_section .slide_cap    {position:relative; width:185px; display:table-cell; vertical-align:middle; background:url(../images/top/img_loader.gif) no-repeat 50% 50%;}
            *+html #howToMake .make_section .slide_cap  {display:inline; zoom:1;}
            
            #howToMake .make_section .slide_nav    {position:relative; height:135px;}
            #howToMake .make_section .btn_prev,
            #howToMake .make_section .btn_next      {position:absolute; top:50%; margin-top:-11px; width:24px;}
            #howToMake .make_section .btn_prev      {left:-32px; background:url(../images/about/tukurikata/btn_prev_on.gif) no-repeat 0 0;}
            #howToMake .make_section .btn_next      {left:188px; background:url(../images/about/tukurikata/btn_next_on.gif) no-repeat 0 0;}
            #howToMake .make_section .btn_prev a,
            #howToMake .make_section .btn_next a    {display:block; overflow:hidden; height:0; padding-top:23px;}
            #howToMake .make_section .btn_prev a    {background:url(../images/about/tukurikata/btn_prev.gif) no-repeat 0 0;}
            #howToMake .make_section .btn_next a    {background:url(../images/about/tukurikata/btn_next.gif) no-repeat 0 0;}
            
            #howToMake .make_section .slide_cap ul  {position:absolute; top:0; padding-left:0; height:135px;}
            #howToMake .make_section .slide_cap li  {padding-left:0; min-height:0; margin-bottom:0; position:absolute; top:0; left:0;}
            
            #howToMake .make_section .kama  {background:url(../images/about/tukurikata/bg_kama.jpg) no-repeat 0 0; width:602px; height:197px; margin-top:30px; position:relative;}
                #howToMake .make_section .kama p  {position:absolute; top:47px; left:280px; width:270px;}