@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------- 小山園のこと ---------------------------------------*/  


#company-info img {
	margin: 0 auto!important;}

#company-info table {
	margin-bottom: 30px;}

#company-info td {
	padding: 10px 0;
	border-bottom: 1px dashed #CCC;
	font-size: 1.2em;}

#company-info td a {
	font-weight: normal;
	color:#666;
	letter-spacing: normal;
	font-size: 0.8em;}

#company-info td.td-info {
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	color:#360;
	width: 8em;}

#company-info li {
  float: left;}

@media screen and (max-width: 480px) {
	#company-info li {
  		float: none;}
    
    #company-info p.caption {
        text-align: center;}
    
    .enkaku-text {
        padding: 30px 0;
        background: url("../img-2019/company/enkaku-back.jpg");
        margin-bottom: 2em;}
    
    .enkaku-text h2 {
        display: inline-block;
        font-family: ‘utsukushiregular’ , ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’ , ‘HiraMinProN-W3’ ,”メイリオ”, Meiryo, serif;
        font-size: 20px;
        border-bottom: 1px solid #000;
        padding: 0 0 8px 24px;
        margin-bottom: 10px;}
    
    .enkaku-text p {
        font-size: 15px;
        padding: 0 24px;}
    
    .enkaku-text p.hinshitsu {
        font-family: ‘utsukushiregular’ , ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’ , ‘HiraMinProN-W3’ ,”メイリオ”, Meiryo, serif;
        font-size: 24px;
        font-weight: bold;
        padding: 0 10px;
        text-align: center;}
}

/* 品質について　*/
.quality {
	padding: 10px 20px;
	border: 1px solid #EEE;
	margin-top: 10px;
	width: 500px;
	background-color: #F5F5F5;
	line-height: 1.5;}

@media screen and (max-width: 480px) {
	.quality {
		width: auto;
		padding: 13px 20px;
		margin: 20px auto 0;}
}

.layout-3 {
    width: 300px;
    margin-right: 20px;}

@media screen and (max-width: 480px) {
	.layout-3 {
		width: 100%;
		margin-right: 0;}
}

.layout-right {
    margin-right: 0;}

.quality h4 {
	margin: 0;
	padding: 0;
	font-size: 16px;
	margin-bottom: 5px;
	color: #360;}

.mark {
	width: 180px;
	text-align: center;
	float: left;
	margin-right: 20px;
	margin-top: 10px;}

.quality td {
	line-height: 1.5em;
	padding: 3px;}

td.td-quality {
	width: 5em;}

/* 受賞歴　*/
#awards-list {
	background-color: #FFF;
	padding: 40px;
	margin-top: 20px;}

@media screen and (max-width: 480px) {
    #awards-list {
        padding: 0 0 20px 0;}
}
#awards table {
	margin: 0 auto;}

#awards td {
	padding: 3px;
	border-bottom: 1px dashed #DDD;}

@media screen and (max-width: 480px) {
    #awards td {
        text-align: center;}
    
    #awards-list tr:last-child td {
        border-bottom: none;}
}

td.td-year { width: 8em;}
td.td-name { width: 15em;}
td.order { width: 8em;}
td.award { width: 10em;}

@media screen and (max-width: 480px) {
    td.td-year { width: 14%;}
    td.td-name { width: 16%;}
    td.order { width: 25%;}
    td.award { width: 10em;}
}


/* ----------------------------------------- もっと知りたい ---------------------------------------*/
h2#h2-know, h2#h2-fun {
    height: 40px;
    margin-bottom: 20px;}

.about-menu {
	margin-top: 40px;}

.about-menu ul {
	clear: both;
	margin-bottom: 20px;}

.about-menu li {
	float: left;
	height: 100px;}

@media screen and (max-width: 480px) {
    .about-menu {
        margin-top: 10px;
    }
    .abouttea {
        margin-top: 0!important;
        padding-top: 0!important
    }
    #wrap .about-menu:last-child {
        padding-top: 20px;
    }
    .about-menu ul {
        margin-bottom: 0;
    }
    .about-menu li {
        float: none;
        height: auto;
        margin-bottom: 10px;
    }
    .about-menu li img {
        width: 94%;
        height: auto;
    }
}

/* ----------------------------------------- 元庵 ---------------------------------------*/
.shop-info h2 {
  margin-bottom: 20px;
  }

#shop-info h3 {
  color: #336600;
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0;
  }

#shop-info p {
  font-size: 12px;
  }
  
#shop-info li {
  float: left;
  }  

#access-info {
  margin-left: 640px;
  }

#access-info dt {
  color: #336600;
  font-weight: bold;
  border-bottom: 1px dashed #999;
  margin-bottom: 5px;
  }
  
#access-info dd {
  margin-bottom: 5px;
  font-size: 12px;
  }

#shop-menu table {
  margin-bottom: 10px;
  }
  
#shop-menu td, 
#shop-class td {
  padding: 5px;
  border-bottom: 1px solid #DDD;
  }

#shop-menu td.no-td, 
#shop-class td.no-td {
  width: 40px;
  border: none;
  }  
  
#shop-menu td.menu-price {
  text-align: right;
  }    

#shop-class table {
  margin-top: 20px;
  }
  
#shop-class td.td-class-title {
  font-size: 14px;
  font-weight: bold;
  color: #336600;
  text-align: center;
  width: 6em;
  }   

#shop-class td.td-class-naiyo {
  width: 200px;
  }

@media screen and (max-width: 480px) {
    #shop-info img {
        width: 94%;
        height: auto;}
    
    #shop-info p {
        width: 94%;
        margin: 0 auto 30px;}
    
    #shop-access {
        margin-top: 20px;}
    
    #shop-access .photo-left {
        display: inherit;
        width: 94%;
        height: auto;}
    
    #access-info {
        width: 94%;
        margin: 0 auto 20px;}
    
    #access-info dt {
        font-size: 15px;
        padding-bottom: 5px;}
    
    #access-info dd {
        font-size: 14px;
        margin-bottom: 10px;}
    
    #access-info a {
        font-size: 14px;}
    
    #shop-menu,
    #shop-class {
        margin-top: 30px;}
    
    .margin-yoko {
        margin: 0;}
    
    .margin-yoko p {
        margin: 0 3%;}
    
    #shop-menu td.menu-price {
        width: 5em;}
    
    #shop-class td.td-class-naiyo {
        width: auto;}
    
    #shop-menu td:first-child,
    #shop-class td:first-child,
    #shop-menu td.menu-price,
    #shop-class td.td-class-naiyo {
        border-top: 1px solid #DDD;}
}
  
/* ----------------------------------------- 茶目録　商品のご案内 ---------------------------------------*/  
.products h2 {
    margin-bottom: 20px;
}
#catalog00 {
	margin-bottom: 30px;
}

#catalog li {
  float: left;
  }

#mokuji p {
  background: #1E4216;
  font-size: 14px;
  color: #FFF;
  padding: 2px 0 2px 10px;
  font-weight: bold;
  }

.mokuji-navi {
  float: left;
  }

.mokuji-navi ul {
  margin-top: 10px;
  }
    
.mokuji-navi li {
  list-style: disc outside;
  margin-left: 1.3em;
  margin-top: 3px;
  color: #1E4216;
  }
  
.mokuji-navi li a {
  color: #444;
  font-weight: normal;
  font-size: 90%;
  text-decoration: none;
  letter-spacing: 0;
  }

.mokuji-navi li a:hover { background-color: #9daee1; color: #FFFFFF; }

    @media screen and (max-width: 480px) {
        .mokuji-navi {
            float: none;
        }
        #mokuji p {
            padding: 2px 0;
            width: 94%;
            margin: 0 auto;
            text-align: center;
        }
        .mokuji-navi ul {
            margin-bottom: 10px;
        }
        .mokuji-navi li {
            font-size: 15px;
            list-style:none;
            margin-left: 0;
            margin-top: 0;
            padding: 5px 0;
        }
        .mokuji-navi li a {
            display: block;
        }
}




/* ----------------------------------------- 工場見学のご案内 ---------------------------------------*/ 
#factory {
	margin-top: 0;
}
h2#h2-factory { 
    margin-bottom: 20px;
}
#f-contact {
	margin-top: 40px;
}

.left-600 {
	width: 600px;
	margin-right: 20px;
	float: left;}

.right-240 {
	width: 240px;
	float: right;}

#f-contact h3,
#f-enjoy h3,
#f-form h3,
#contact h3,
#privacy h3,
#order h3 {
	font-size: 16px;
	font-weight: bold;
	color: #360;
	margin-bottom: 10px;
	border-top: 1px solid #CCC;
	padding-top: 10px;
}

#f-enjoy td h3 {
	font-size: 16px;
	font-weight: bold;
	color: #360;
	border-top: none;
	padding-top: 0px;
}

#f-enjoy td {
	vertical-align: top;
	border-top: 1px solid #CCC;
	padding-top: 10px;
}

#f-contact table {
	background-color: #FFF;
	margin: 20px 0 0 0;
	width: 600px;
}

#f-contact td {
	padding: 10px 15px;
	border-bottom: 2px solid #F0EEE0;
	font-size: 110%;
}

#f-contact td.td-inq {
	font-weight: bold;
	text-align: center;
	color: #360;
	width: 4em;
}

.inq-number {
	font-size: 160%;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #333;
}

#f-enjoy p {
	margin-bottom: 20px;
}

#f-enjoy li {
	width: 280px;
	height: 240px;
	margin-right: 10px;
	float: left;
	margin-bottom: 10px;
}

.right-240 h4 {
	background: url(../img-2019/factory/bg-h4-240.jpg) repeat-y #360;
	font-size: 120%;
	color: #FFF;
	text-align: center;
	padding: 10px 5px;
	margin: 0 0 0 0;}

.right-240 p {
	padding: 10px;
	background-color: #FFF;
	margin-bottom: 20px;}

@media screen and (max-width: 480px) {
    #factory,
    #f-enjoy,
    #f-map {
        padding: 40px 3% 0;}
    #factory {
        margin-top: -2em!important;}
    #factory table {
        width: 100%;}
    
    #f-enjoy td {
        min-width: 7em;}
    #f-enjoy td:nth-child(even) p {
        margin: 0 auto 10px;}
    
    #f-enjoy li {
        width: 100%;
        height: auto;
        float: none;
        margin-right: 0;
        margin-bottom: 0;
        text-align: center;
        margin-top: 20px;}
    
    #f-enjoy p.caption {
        text-align: center;}
    
    .left-600 {
        width: 100%;
        margin-right: 0;
        float: none;}

    .right-240 {
        width: 100%;
        float: none;}

    #f-contact td {
        padding: 10px;}
 
    .inq-number {
        font-size: 140%;}
    
    #f-contact table {
        margin: 20px 0 0 0;
        width: 100%;}
    
    .right-240 h4 {
        background: url(../img-2019/factory/bg-h4-240.jpg) repeat #360;}
    
    #f-map .right-240 {
        margin-top: 20px;
    }
}

/* お申し込みフォーム　*/
#newsframe {
	background-color: #F5F5F5;
}

#f-form {
	background-color: #F5F5F5;
}

#f-form table {
	background-color: #FFF;
	/*margin-top: 40px;*/
}

#f-form td {
	padding: 10px;
	border: 1px solid #CCC;
}

td.f-td-01 {
	color: #360;
	width: 25%;
	font-size: 110%;
	font-weight: bold;
	background-color: #F0F2E6
}

#f-form td.f-td-02 table {
	margin: 0;
}

#f-form td.f-td-02 td {
	border: none;
	padding: 5px 0;
}

iflame {
	background-color: #F5F5F5;
}

/* ----------------------------------------- お問い合せ ---------------------------------------*/

h2#h2-contact { 
    margin-bottom: 20px;}

.close { 
    padding: 10px 20px;
    background-color: #600;
    color: #FFF; 
    margin-bottom: 20px;}

.form { 
    margin-top: 20px;}
p.moushikomi {
    margin: 20px 0 10px 0;
    padding: 10px;
    background: #FFF;
}

@media screen and (max-width: 480px) {
    #contact {
        margin-top: -1em!important;
        padding: 40px 3% 0;}
    
    #contact h3,
    #contact .right-240 p:first-of-type,
    p.moushikomi {
        text-align: center;}
    
    #contact .right-240 {
        margin-top: 20px;}
    
    .form {
        margin-bottom: 20px;
        text-align: center;}
    
    .form a img {
        margin-right: 0!important;}
}

/* ----------------------------------------- プライバシーポリシー ---------------------------------------*/
h1#h2-privacy { 
    margin-bottom: 20px;}

@media screen and (max-width: 480px) {
    #privacy h3 {
        text-align: center;}
}

/* ----------------------------------------- 特定商取引 ---------------------------------------*/
#order h1 {
	margin-bottom: 30px;
    color: #2F6436;
    font-family: ‘utsukushiregular’ , ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’ , ‘HiraMinProN-W3’ ,”メイリオ”, Meiryo, serif;
    font-size: 20px;
    font-weight: bold;
}
#order b {
	display: block;
}
@media screen and (max-width: 480px) {
    #order h3 {
        text-align: center;}
	.sp-center-text {
		display: block;
		text-align: center;
	}
/* ----------------------------------------- オンラインショップのバナー ---------------------------------------*/

#top-navi03 {
  clear: both;
  margin: 0 0 40px 0;
  height: 200px;
  }

#top-navi03 li a {
	height: 200px;
 }

#top-navi0205 a { background: url(../img-2019/top/navi0205_off.jpg) no-repeat; }
#top-navi0205 a:hover { background: url(../img-2019/top/navi0205_on.jpg) no-repeat; }

/* ----------------------------------------- リーフレット ---------------------------------------*/
#leaflet h1 {
	color: #360;
	font-size: 24px;
	font-weight: bold;
	padding-bottom: 8px;
	border-bottom: 2px solid #360;
	margin-top: 40px;
	margin-bottom: 20px;
}

#country-navi {
	font-size: 16px;
	text-align: center;
	padding: 10px 5px;
	background-color: #F5F5F5;
	margin: 30px 0;
	letter-spacing: normal;
}

#leaflet h2 {
	color: #360;
	font-size: 21px;
	padding-bottom: 8px;
	border-bottom: 2px solid #360;
	margin-bottom: 20px;
}

#leaflet table {
	margin-bottom: 60px;
}

#leaflet td {
	text-align: center;
	width: 25%;line-height: normal;
	letter-spacing: normal;
	padding-bottom: 10px;
}

#leaflet td img {
	/*margin-bottom: 10px;*/
	border: 1px solid #CCC;
}

#leaflet td a {}
#leaflet td a:hove {
	background-color: #FFF;
}


#leaflet td a:hover img {
	background-color: none;
	border: 2px solid #5757AD;
}

@media screen and (max-width: 480px) {
    #leaflet {
        width: 94%;
        margin: 0 auto;
    }
    #leaflet h1 {
        text-align: center;
        line-height: 1.25em;
    }
    #leaflet h2,
    #leaflet .leaf-pdf,
    #leaflet .leaf-pdf p {
        text-align: center;
    }
    #leaflet .leaf-pdf {
        margin-bottom: 3em;
    }
    #leaflet .leaf-pdf p {
        margin-bottom: 1.25em;
        line-height: 1.25em;
    }
    #leaflet img {
        width: 80%;
        height: auto;
    }
}