* {
margin: 0;
padding: 0;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
}
body {
background: #eeeeee;
font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size: 80%;
color: #424242;
-webkit-text-size-adjust: 100%;
}
h2,h3,h4,h5,h6 {
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}
p,li {
line-height: 160%;
}
p {
margin: 0 0 1em 0;
}
li {
list-style-type: none;
}
img {
border: 0;
}
/*
Link Color [
----------------------------------------------------------- */
/*
a {
text-decoration: none;
}*/
a:link {
color: #666633;
}
a:visited {
color: #666633;
}
a:hover {
color: #ff9900;
text-decoration: underline;
}
a:active {
color: #666633;
}
/*
container [
----------------------------------------------------------- */
#container {
width: 800px;
margin: 0 auto;
background: #FFF;
border-left: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
}
#container::after{
content:"";
display: block;
clear: both;
}
/*
header [
----------------------------------------------------------- */
#header {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-image: url(../../img/bg_head.gif);
background-position: left top;
background-repeat: repeat-x;
background-color: #ffffff;
width: 800px;
}
#header p {
margin: 0 0 0 20px;
padding: 0 0 0 0;
font-size: 0.75em;
color: #fff;
}
#header #headerLogo {
margin: 20px 0 0 20px;
padding: 0 0 0 0;
width: 205px;
height: 22px;
background-image: url(../../img/usami_logo.gif);
background-position: left top;
background-repeat: no-repeat;
}
#header #headerLogo a {
display: block;
width: 205px;
height: 22px;
}
#header #headerLogo span {
display: none;
}
#headNavi li {
margin: 27px 20px 0 0;
padding: 0 0 0 0;
float: right;
height: 16px;
text-transform: uppercase;
}
#headNavi li#link {
margin-right: 0;
}
#headNavi li a {
padding-left: 16px;
color: #8c8c8c;
}
#headNavi li#contact a {
background: url(../../img/icon_contact.gif) no-repeat left center;
}
#headNavi li#sitemap a {
background: url(../../img/icon_sitemap.gif) no-repeat left center;
padding-right: 2px;
}
/*
topicpath [
----------------------------------------------------------- */
#topicpath {
margin: 30px 20px 0 20px;
padding: 0 0 0 0;
background-image: url(../../img/bg_topicpath.gif);
background-position: left top;
background-repeat: repeat-x;
height: 16px;
width: 760px;
}
#topicPath_01 {
margin: 0 0;
}
#topicPath_01 li {
display: inline;
line-height: 110%;
list-style-type: none;
}
#topicPath_01 li a {
padding-right: 10px;
background: url(../../img/topicpath.gif) no-repeat right center;
}
#topicPath_01 span {
background: url(../../img/icon_topicpath.gif) no-repeat left center;
padding-left: 16px;
}
/*
wall_company [
----------------------------------------------------------- */
#wall_company {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../company/img/bg_photo_company.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_contact [
----------------------------------------------------------- */
#wall_contact {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../contact/img/bg_photo_contact.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_sitemap [
----------------------------------------------------------- */
#wall_sitemap {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../sitemap/img/bg_photo_sitemap.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_story [
----------------------------------------------------------- */
#wall_story {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../story/img/bg_photo_story.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_showroom [
----------------------------------------------------------- */
#wall_showroom {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../showroom/img/bg_photo_showroom.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_media [
----------------------------------------------------------- */
#wall_media {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../media/img/bg_photo_media.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_original [
----------------------------------------------------------- */
#wall_original {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../original/img/bg_photo_original.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_moyu [
----------------------------------------------------------- */
#wall_moyu {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../story/img/bg_photo_moyu.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_cotana [
----------------------------------------------------------- */
#wall_cotana {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../story/img/bg_photo_kotana.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_yamaken [
----------------------------------------------------------- */
#wall_yamaken {
margin: 20px 20px 30px 20px;
padding: 0 0 0 0;
background-image: url(../../story/img/bg_photo_yamaken.jpg);
background-position: left top;
width: 760px;
height: 90px;
}
/*
wall_company2 [
----------------------------------------------------------- */
#wall_company2 {
margin: 30px 0;
padding: 0 0 0 0;
background-image: url(../../company/img/bg_photo_company2.jpg);
background-position: left top;
width: 570px;
height: 90px;
}
/*
content [
----------------------------------------------------------- */
#content {
float: left;
width: 800px;
}
/*
menu [
----------------------------------------------------------- */
#menu {
width: 175px;
padding: 0 0 0 20px;
float: left;
height: 277px;
background: url(../../img/bg_menu2.gif) no-repeat;
background-position: right top;
margin: 0 0 0 0;
}
#menu span {
display: none;
}
#menu ul {
padding: 18px 0 0 0;
}
#menu li {
display: inline;
list-style-type: none;
line-height: inherit;
}
/*
main [
----------------------------------------------------------- */
#main {
margin: 0 0 0 0;
padding: 0 0 0 0;
float: right;
width: 590px;
}
/*
co_info [
----------------------------------------------------------- */
#co_info {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_info h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../company/img/title_company.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_info h2 span {
display: none;
}
#co_info .co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_info ul {
margin: 0;
padding: 0;
}
#co_info .info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
width: 420px;
float: left;
}
#co_info .co_list .info_list {
list-style-type: none;
width: 150px;
float: left;
/* padding-left: 17px; */
padding-left: 10px;
}
/*
history [
----------------------------------------------------------- */
#history {
/* margin: 0 20px 0 0; */
margin: 60px 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.0em;
}
#history h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../company/img/title_history.gif);
background-position: left top;
background-repeat: no-repeat;
}
#history h2 span {
display: none;
}
#history .co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
/* width: 570px; */
width: 575px;
}
#history ul {
margin: 0;
padding: 0;
}
#history .info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
/* width: 460px; */
float: left;
}
#history .co_list .info_list {
list-style-type: none;
width: 110px;
float: left;
/*
padding-left: 17px; */
padding-left: 10px;
}
#pagetopBtn,
.pagetopBtn{
margin: 0 0 0 0;
padding: 40px 20px 0 0;
text-align: right;
font-size: 0.85em;
}
.pagetopBtn{
padding: 0 20px 0 0;
}
/*
co_media [
----------------------------------------------------------- */
#co_media {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_media h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../media/img/title_media.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_media h2 span {
display: none;
}
#co_media #co_guca {
margin: 0 0 0 0;
padding: 40px 0 40px 17px;
}
#co_media p {
margin: 0 0 0 0;
padding: 0 0 0 17px;
}
#co_media #co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_media ul {
margin: 0;
padding: 0;
}
#co_media #info_list li {
display: inline;
list-style-type: none;
width: 376px;
float: left;
}
#co_media #co_list #info_list {
list-style-type: none;
width: 191px;
float: left;
padding-left: 17px;
}
/*
co_original [
----------------------------------------------------------- */
#co_original {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_original h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../original/img/title_original.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_original h2 span {
display: none;
}
#co_original p {
margin: 0 0 0 0;
padding: 40px 0 40px 17px;
}
#co_original #co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_original ul {
margin: 0;
padding: 0;
}
#co_original #info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
width: 440px;
float: left;
}
#co_original #co_list #info_list {
list-style-type: none;
width: 130px;
float: left;
padding-left: 17px;
}
/*
co_story [
----------------------------------------------------------- */
#co_story {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_story h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../story/img/title_story.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_story h2 span {
display: none;
}
#co_story h3.sub_title_01 {
margin: 40px 0 0 0;
padding: 0 0 0 0;
width: 280px;
height: 30px;
background-image: url(../../story/img/sub_title_01.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_story h3.sub_title_02 {
margin: 40px 0 0 0;
padding: 0 0 0 0;
width: 280px;
height: 30px;
background-image: url(../../story/img/sub_title_02.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_story h3.sub_title_03 {
margin: 40px 0 0 0;
padding: 0 0 0 0;
width: 280px;
height: 30px;
background-image: url(../../story/img/sub_title_03.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_story h3 span {
display: none;
}
#co_story p {
margin: 10px 0 10px 0;
padding: 0 0 0 17px;
}
#co_story p.main_text {
margin: 0 0 0 0;
padding: 30px 0 0 17px;
}
#co_story p.process_text {
margin: 0 0 0 0;
padding: 14px 0 0 17px;
font-size:0.8em;
line-height:160%;
}
#co_story p.process_text2 {
margin: 0 0 0 0;
padding: -10px 0 14px 17px;
font-size:0.75em;
line-height:160%;
color:#8C8C8C;
}
#co_story p.series {
margin: 0 17px 0 17px;
padding: 8px;
border:2px solid #BEB29A;
font-size:0.8em;
line-height:160%;
}
#co_story p.series span {
background: url(../../img/icon_topicpath.gif) no-repeat left center;
padding-left: 16px;
}
#co_story #co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_story ul {
margin: 0;
padding: 0;
}
#co_story #info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
width: 440px;
float: left;
}
#co_story #co_list #info_list {
list-style-type: none;
width: 130px;
float: left;
padding-left: 17px;
}
/*
co_moyu [
----------------------------------------------------------- */
#co_moyu {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_moyu h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 380px;
height: 30px;
background-image: url(../../story/img/title_story_01.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_moyu h2 span {
display: none;
}
#co_moyu h3 {
margin: 20px 0 10px 0;
padding: 0 0 0 17px;
font-size: 1em;
font-weight: bold;
}
#co_moyu h4 {
margin: 40px 10px 10px 10px;
padding: 10px 0 0 5px;
font-size: 1.2em;
background-color: #FAFFC1;
}
#co_moyu p {
margin: 10px 0 10px 0;
padding: 0 0 0 17px;
}
#co_moyu #co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_moyu ul {
margin: 0;
padding: 0;
}
#co_moyu #info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
width: 440px;
float: left;
}
#co_moyu #co_list #info_list {
list-style-type: none;
width: 130px;
float: left;
padding-left: 17px;
}
#co_moyu ul.memo {
margin: 30px;
}
blockquote {
margin: 10px 20px;
padding:10px;
border:1px solid #CCCCCC;
background-color: #F5F5F5;
font-size: 85%;
color: #333;
}
blockquote a {
font-size: 120%;
}
/*
co_cotana [
----------------------------------------------------------- */
#co_cotana {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_cotana h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 380px;
height: 30px;
background-image: url(../../story/img/title_story_01.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_cotana h2 span {
display: none;
}
#co_cotana h3 {
margin: 20px 0 10px 0;
padding: 0 0 0 17px;
font-size: 1em;
font-weight: bold;
}
#co_cotana h4 {
margin: 40px 10px 10px 10px;
padding: 10px 0 0 5px;
font-size: 1.2em;
background-color: #FAFFC1;
}
#co_cotana p {
margin: 10px 0 10px 0;
padding: 0 0 0 17px;
}
#co_cotana img {
border: 0;
margin: 0 5px;
}
/*
co_contact [
----------------------------------------------------------- */
#co_contact {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_contact h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../contact/img/title_contact.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_contact h2 span {
display: none;
}
#co_contact p {
margin: 0 0 0 0;
padding: 40px 0 40px 17px;
}
#co_contact #co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_contact ul {
margin: 0;
padding: 0;
}
#co_contact #info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
width: 440px;
float: left;
}
#co_contact #co_list #info_list {
list-style-type: none;
width: 130px;
float: left;
padding-left: 17px;
}
/*
co_sitemap [
----------------------------------------------------------- */
#co_sitemap {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_sitemap h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../sitemap/img/title_sitemap.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_sitemap h2 span {
display: none;
}
#co_sitemap p {
margin: 0 0 0 0;
padding: 40px 0 20px 17px;
}
#co_sitemap #co_list {
margin: 0;
padding: 0 20px;
}
#co_sitemap #co_list li {
margin: 10px 0 0 0;
padding: 10px 0 0 20px;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
}
#co_sitemap #co_list li ul {
margin: 10px 0 0 20px;
padding: 0 0 0 0;
}
#co_sitemap #co_list li ul li {
margin: 10px 0 0 0;
padding: 10px 0 0 10px;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
}
/*
co_showroom [
----------------------------------------------------------- */
#co_showroom {
margin: 0 20px 0 0;
padding: 0 0 0 0;
width: 570px;
font-size: 1.2em;
}
#co_showroom h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 175px;
height: 30px;
background-image: url(../../showroom/img/title_showroom.gif);
background-position: left top;
background-repeat: no-repeat;
}
#co_showroom h2 span {
display: none;
}
#co_showroom p {
margin: 0 0 0 0;
padding: 0 0 0 17px;
}
#co_showroom p.main_text {
margin: 0 0 0 0;
padding: 30px 0 20px 17px;
}
#co_showroom p.region {
margin:5px 0 0 0;
padding:5px 0 0 0;
font-size:0.9em;
line-height:160%;
color:#8C8C8C;
}
#co_showroom p.prefecture {
margin:0 0 10px 0;
font-size:0.8em;
line-height:160%;
}
#co_showroom #co_list {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
background-image: url(../../img/line_news.gif);
background-repeat: repeat-x;
width: 570px;
}
#co_showroom ul {
margin: 0;
padding: 0;
}
#co_showroom #info_list li {
display: inline;
line-height: 110%;
list-style-type: none;
width: 440px;
float: left;
}
#co_showroom #co_list #info_list {
display: inline;
line-height: 110%;
list-style-type: none;
width: 130px;
float: left;
padding-left: 17px;
}
/* お近くのショームについてのお問合せ */
#inquiry_showroom{
width:92%;
border:1px solid #E36626;
border-radius:4px;
margin:2em auto;
text-align:center;
}
#inquiry_showroom:after{
content:"";
display:block;
clear:both;
}
#inquiry_showroom h3{
color:#fff;
background:#E36626;
padding:0.25em;
font-weight:bold;
}
#inquiry_showroom p{
padding:0.5em;
font-size:0.85em;
}
#inquiry_showroom p.tel{
padding:0.25em;
font-size:1.6em;
font-weight:bold;
text-indent:0.05em;
letter-spacing:0.05em;
}
#inquiry_showroom p.tel{
padding:0.25em;
font-size:1.6em;
font-weight:bold;
text-indent:0.05em;
letter-spacing:0.05em;
}
#inquiry_showroom p.tel:before{
font-family:'FontAwesome';
/*content:"\f095";*/
content:"\f098";
margin-right:0.5em;
color:#E36626;
}
/*
table[
----------------------------------------------------------- */
table {
width: 530px;
margin: 10px 20px 0 20px;
border-collapse: collapse;
border: 1px solid #E0E0E0;
clear : both;
}
caption {
font: 0.8em/0.8em Arial, Helvetica, sans-serif;
text-align: left;
text-indent: 10px;
background: url(bg_caption.jpg) right top;
height: 30px;
color: #FFAA00;
}
thead tr {
background: url(../../showroom/img/bg_th2.jpg) repeat-x right;
height: 30px;
color: #FFFFFF;
font-size: 0.8em;
padding: 0px 5px;
margin: 10px 0px 0px;
text-align: left;
border-right: 1px solid #FCF1D4;
}
tbody tr {
background: url(../../showroom/img/bg_td1.jpg) repeat-x top;
}
tbody tr.odd {
background: #FFF8E8 url(../../showroom/img/bg_td2.jpg) repeat-x;
}
tbody th,td {
font-size: 0.8em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #424242;
padding: 10px 5px;
border-top: 1px solid #E0E0E0;
border-right: 1px solid #DDDDDD;
text-align: left;
}
tfoot th {
background: url(bg_total.jpg) repeat-x bottom;
color: #FFFFFF;
height: 30px;
}
tfoot td {
background: url(bg_total.jpg) repeat-x bottom;
color: #FFFFFF;
height: 30px;
}
/*
【サブページ共通】
work（作品例）
um UMネットバックナンバー）
catalog（カタログバックナンバー）
オーダーテーブル
求人
----------------------------------------------------------- */
div#work,
div#um,
div#catalog,
div#order-table{
margin:10px 15px
}
div#work h2,
div#um h2,
div#catalog h2,
div#order-table h2{
border-left: 7px solid #85a83e;
padding:5px 7px;
margin:20px 0;
background-image: url(../../img/bg_footer.gif);
background-repeat: repeat-x;
background-position: bottom;
font-weight:bold;
}
div#um p.year,
div#catalog p.year{
font-size:1.2em;
border-left: 4px solid #ccc;
padding:3px 5px;
margin-top:40px;
}
.imagebox {
border: 1px dotted #85a83e;
float: left;
margin: 0 3px 20px;
width:145px;
padding:0;
}
#catalog div.imagebox{
min-height:265px;
}
div.imagebox h3{
background:#85a83e;
color:white;
padding:2px 5px;
margin-bottom:2px;
font-weight:bold;
font-size:1.25em;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight:normal;
}
#catalog .imagebox h3{
font-size:1em;
}
p.image{
text-align: center;
}
p.pdf {
text-align: center;
}
p.pdf {
text-align: center;
}
p.comment {
font-size: 0.9em; /* 5.文字サイズ */
border-bottom:1px dotted #cccccc;
margin:-7px 5px 5px 5px;
height:5em;
}
div#work div.imagebox p.pdf,
div#um div.imagebox p.pdf,
div#catalog div.imagebox p.pdf{
margin:5px 1px;
text-align:center;
font-size:0.65em;
line-height:1.3;
background-color:#f9feef;
}
div#work div.imagebox .pdf a,
div#um div.imagebox .pdf a,
div#catalog div.imagebox .pdf a{
background-image: url("../../img/icon_pdf.gif");
background-repeat: no-repeat;
background-position: right center;
padding-right: 15px;
margin-right: 1px;
font-size: 1.6em;
font-weight:bold;
}
p.page-top{
clear:both;
text-align:right;
}
div#um div.yearlink,
div#catalog div.yearlink{
border:1px #ccc dotted;
background:#F0F5E7;
}
div#um div.yearlink{
padding:10px 0 0 10px;
}
div#catalog div.yearlink{
padding:10px 0 10px 10px;
}
div#catalog div.yearlink ul li{
display:inline;
margin-right:40px;
}
div#um div.yearlink ul li{
float:left;
width:14.2857%;
margin-bottom: 15px
}
#catalog img.catalogImage{
box-shadow: 1px 1px 3px #999999;
margin-bottom: 1em;
}
#catalog img.onepage{
border:1px solid #ccc;
display:block;
margin:5px auto 8px;
}
#catalog img.twopage{
display:block;
margin:5px auto 10px;
}
#kitanomori{
display: flex;
gap:30px;
}
#kitanomori img.catalogImage{
display: block;
margin: auto auto 1.5em;
width: 122px;
height: auto;
}
#kitanomori .catalogBotton li{
margin-top: .75em;
text-align: center;
}
#order-table{
padding-bottom:100px;
}
#order-table h4,
#order-table h5{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
letter-spacing: 0.05em;
}
#order-table h3{
border-left:5px solid #D9CAB3;
border-bottom:1px dotted #ccc;
font-size:18px;
font-weight: bold;
padding-left:0.5em;
line-height:1.8;
margin-bottom:0.5em
}
#order-table .more-topboard{
text-align: right;
margin:1.5em auto 2em;
}
#order-table .more-topboard a{
text-align: right;
padding:0.5em 1em;
background: #EEE7DD;
border-radius:5px;
border:1px solid #D9CAB3;
text-decoration: none;
width:40%;
letter-spacing: 0.1em;
}
#order-table .more-topboard a span{
font-size:0.75em;
margin-bottom:0.5em
}
#order-table .more-topboard a:after{
font-family: 'FontAwesome';
content: "\f105";
margin-left: 1em;
}
#roop1,
#roop2{
width: 100%;
height: 200px;
background-position: 0 0;
}
#roop1{
background:url(../../order-table/bookmatch/img/loop_table.jpg);
-webkit-animation: bgroop1 40s linear infinite;
animation: bgroop1 40s linear infinite;
}
#roop2{
background:url(../../order-table/topbord/img/loop_topbord.jpg);
-webkit-animation: bgroop2 40s linear infinite;
animation: bgroop2 40s linear infinite;
}
@-webkit-keyframes bgroop1 {
from {
background-position: 0 0;
}
to {
background-position: -1247px 0;
}
}
@keyframes bgroop1 {
from {
background-position: 0 0;
}
to {
background-position: -1247px 0;
}
}
@-webkit-keyframes bgroop2{
from {
background-position: 0 0;
}
to {
background-position: -1400px 0;
}
}
@keyframes bgroop2 {
from {
background-position: 0 0;
}
to {
background-position: -1400px 0;
}
}
#order-table .lead{
position: relative;
width:780px;
height:200px;
}
#order-table .lead p{
text-align: center;
position: absolute;
left: 100px;
top:125px;
}
#order-table #roop2 .lead p{
left: 250px;
top:150px;
width:270px;
}
#order-table .lead p span.lead-gre{
color:#6C8932;
font-size:0.85em;
}
#order-table .lead p span.lead-ore{
color:#E36626;
font-size:1.5em;
}
#order-table .lead p img{
float: left;
}
/*タブ切り替え全体のスタイル*/
.tabs {
background-color: #fff;
margin: 0 auto 20px;
/* border:1px solid #ccc;*/
}
/*タブのスタイル*/
.tab_item {
line-height: 35px;
height:35px;
color: #565656;
float: left;
transition: all 0.2s ease;
box-sizing: border-box;
border: 1px solid #85a83e;
border-bottom:none;
background-color: #F0F5E7;
text-indent: 0.35em;
position: relative;
font-size:16px;
}
.tabs.col3 .tab_item{
width:210px;
margin-right:70px;
}
.tabs.col4 .tab_item{
width:165.5px;
margin-right:36px;
}
.tabs.col5 .tab_item{
width:135px;
margin-right:23.75px;
}
.tabs.col6 .tab_item{
width:115px;
margin-right:16px;
}
.tabs .tab_item.end{
margin-right:0;
}
.tab_item:after{
font-family:'FontAwesome';
content:"\f0da";
color: #85a83e;
font-size:28px;
position: absolute;
top:0;
}
.tabs.col3 .tab_item:after{
right:-45px;
}
.tabs.col4 .tab_item:after{
right:-26px;
}
.tabs.col5 .tab_item:after{
right:-20px;
}
.tabs.col6 .tab_item:after{
right:-15px;
}
.tab_item.end:after{
content:"";
width:0;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
padding: 13px 10px 10px;
clear: both;
overflow: hidden;
display: none;
border:1px solid #85a83e;
border-top: 3px solid #85a83e;
}
.tab_content p.text1{
font-size:16px;
font-weight: bold;
letter-spacing: 0.01em;
}
.tab_content span.text2{
color:#E36626;
font-size:1.3em;
margin:0 0.15em;
}
/*選択されているタブのコンテンツのみを表示*/
#step1:checked ~ #step1_content,
#step2:checked ~ #step2_content,
#step3:checked ~ #step3_content,
#step4:checked ~ #step4_content,
#step5:checked ~ #step5_content,
#step6:checked ~ #step6_content{
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item,
.tab_item:hover {
cursor : pointer;
background-color: #85a83e;
color: #fff;
font-weight: bold;
}
#order-table .col-l{
width:49%;
float:left;
}
#order-table .col-r{
width:49%;
float:right;
}
#step1_content ul li{
float:left;
width:32.33333%;
margin:0 0.5%;
text-align: center
}
#step1_content ul li img{
border-radius: 5%
}
.tabs ul.use li{
float:left;
text-align: center;
border-radius:10px;
box-sizing: border-box;
background: #EEE7DD;
position: relative;
}
.tabs ul.use.col6 li{
width:15.666666%;
margin:0 0.5% 10px;
height:70px;
}
/*.tabs ul.use.col3 li{
width:32.33333%;
margin:0 0.5% 10px;
}*/
.tabs ul.use.col4 li{
width:24%;
margin:0 0.5% 10px;
height:85px;
}
.tabs ul.use.col6 span{
position: absolute;
width:100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tabs ul.use.col4 li span{
display: block;
position: absolute;
left:0;
top: 50%;
-webkit-transform: translate(5px, -50%);
transform: translate(5px, -50%);
width:90px;
text-align: center;
}
.tabs ul.use.col4 li img{
float: right;
border-radius: 10px;
margin:5px;
max-height:75px;
width:auto;
border:2px solid #fff;
box-sizing: border-box
}
.tabs img{
max-width:100%;
}
.tabs table {
width:85%!important
}
.tabs table th,
.tabs table td{
text-align: center;
}
#order-table p.ttl{
/*font-size:15px;*/
font-size:20px;
/*color:#6C8932;*/
letter-spacing: 0.05em;
margin:3em auto 0.5em;
font-weight: bold;
}
#order-table p.ttl i{
color:#6C8932;
}
#order-table #category p:before
/*#order-table h4:before*/{
font-family:'FontAwesome';
content:"\f1bb";
padding-right:0.25em;
color:#6C8932;
}
#order-table #category > ul{
margin-bottom:0;
}
#order-table #category > ul > li{
float: left;
position: relative;
margin-bottom:0.75em;
text-align: center;
}
#order-table #category > ul.col7 > li{
width:13.5%;
margin-right:0.78571%;
}
#order-table #category > ul.col3 > li{
width:32.33333%;
margin:0 0.5%;
}
#order-table #category > ul > li a{
color:#fff;
display: block;
text-decoration: none;
padding:0.5em 0;
margin:0 -1px 0 0;
background: #85a83e;
}
#order-table #category ul li:hover a,
#order-table #category ul li:hover ul{
background:#6C8932;
}
#order-table #category > ul > li:hover > a{
font-weight: bold
}
#order-table #category ul li ul{
position: absolute;
top: 100%;
width:100%;
left: 0;
margin: 0;
padding: 0;
z-index: 2;
overflow: hidden;
height: 0;
-moz-transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}
#order-table #category ul li:hover ul{
overflow: visible;
height: 35px;
float:none;
z-index: 2;
}
#order-table #category ul li:hover ul li a{
background:#6C8932;
}
#order-table #category ul li a:hover{
text-decoration:underline;
}
#order-table h4 {
float:left;
width:150px;
}
#order-table h4 img{
border-radius: 50%;
border:3px solid #D9CAB3;
box-sizing: border-box
}
/*#order-table h4{
margin:2em 0 0.25em 0.25em;
font-size:18px;
padding:0.15em 0.5em;
background:#F0F5E7;
border-bottom:2px solid #85a83e;
}*/
#order-table .w1,
#order-table .w2,
#order-table .w3,
#order-table .w4{
float:left;
}
.p-bookmatch #order-table .bookmatch-inner{
display: flex;
flex-wrap: wrap;
align-items:flex-start;
margin-top:50px;
}
.p-bookmatch #order-table .bookmatch-inner h4 {
width:154px;
}
.p-bookmatch #order-table .bookmatch-inner .itembox{
margin-top:41px;
}
.p-bookmatch #order-table .bookmatch-inner .w1>h5+.itembox{
margin-top:0;
}
#order-table .w1{
width:154px;
}
#order-table .w2{
width:308px;
}
#order-table .w3{
width:462px;
}
#order-table .w4{
width:616px;
}
#order-table .w5{
width:770px;
}
#order-table .mt-h4{
margin-top:50px;
}
#order-table .mt-h5{
margin-top:43px;
}
#order-table h5{
margin:0.5em 0 0.5em 0.5em;
border-left:3px solid #ccc;
font-size:14px;
padding:0.15em 0.25em;
}
#order-table h5 span{
font-size:0.75em;
}
#order-table .itembox{
width:144px;
margin:0 0 10px 10px;
float:left;
border:1px solid #ccc;
padding:0.5em;
box-sizing: border-box;
position: relative;
}
#order-table .itembox span.new/*,
#order-table .itembox span.soldout*/{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
position: absolute;
z-index:3;
}
#order-table .itembox span.new{
left:1px;
top:1px;
background:#E36626;
color:#fff;
padding:0.75em 0.5em;
border-radius: 50%;
font-size:12px;
box-shadow: 1px 1px 2px #333;
}
/*#order-table .itembox span.soldout{
font-size:18px;
left:15px;
top:70px;
color:#fff;
padding:0.25em 0;
width:110px;
text-align: center;
background-color: rgba(0,0,0,0.4);
letter-spacing: 0.1em;
text-indent: 0.1em;
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}*/
#order-table .itembox img{
width:100%;
height:auto;
box-sizing: border-box;
border:1px solid #fff;
display: block;/*下部の余白ずれ対策*/
}
#order-table .itembox a:hover img {
border:1px solid #333;
}
#order-table .itembox a:hover{
opacity: 0.75;
}
#order-table .itembox a.zoom{
position: relative;
display: block
}
#order-table .itembox a.zoom:before{
font-family:'FontAwesome';
content: "\f00e";
background: rgba(0,0,0,0.25);
color: #fff;
z-index: 100;
padding: 5px;
font-size: 14px;
position: absolute;
right:1px;
bottom:2px;
}
#order-table .itembox ul.more-img:before{
font-family:'FontAwesome';
content: "\f00e";
width:25%;
}
#order-table .itembox ul.more-img li{
display: inline-block;
text-align: center;
width:37.5%;
font-size:11px;
margin:0.2em auto 1em;
}
#order-table .itembox p{
font-size:11px;
margin-bottom:0;
}
#order-table table{
width:100%;
margin:0.25em auto;
}
#order-table .itembox h6{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-weight: bold;
color:#E36626;
height:20px;
text-align: center;
font-size:16px;
margin-top:0.25em;
}
#order-table .itembox h6:before{
content:"No.";
font-weight: normal;
font-size:12px;
margin-right:0.5em;
color:#666;
}
#order-table table caption{
color:#333;
height:14px;
font-size:12px;
text-align: center
}
#order-table table th,
#order-table table td{
padding:0.3em 0.25em;
}
#order-table table th{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
background:#f6f6f6;
font-weight: normal;
font-size:11px;
text-align: center;
white-space: nowrap
}
#order-table table td{
background: #fff;
font-size:12px;
}
#order-table .pdf{
text-align: center;
padding:0.25em 0.25em;
border-radius: 5px;
margin-bottom:0;
}
#order-table .pdf a{
background:url(../../img/icon_pdf.gif) no-repeat right center;
padding-right:18px;
}
#order-table .dl{
margin:2em auto;
width:90%;
padding:2em 0;
background: #F0F5E7;
}
.p-bookmatch #oder-table .bookmatch-inner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.p-bookmatch #oder-table .bookmatch-inner div{
width:19%;
}
/*
adobe reader DL [
----------------------------------------------------------- */
div#adobeReader{
border:1px solid #cccccc;
clear: both;
margin:50px auto 20px;
padding:5px;
}
/*
footer [
----------------------------------------------------------- */
#footer {
clear: both;
margin: 0 20px 0 20px;
padding: 20px 0 20px 0;
width: 760px;
}
#footer address {
text-align: right;
padding: 0 6px 0 0;
font-style: normal;
font-size: 75%;
border-right: 5px solid #e0e0e0;
}
#line {
margin: 20px 0;
padding: 0 0 0 0;
background-image: url(../../img/bg_footer.gif);
background-position: left top;
background-repeat: repeat-x;
height: 1px;
width: 760px;
}
/* ページトップ pagetop */
#pagetop {
display:none;
position: fixed;
bottom: 40px;
right: 30px;
}
#pagetop a {
background: #85a83e;
text-decoration: none;
color: #fff;
padding:1.25em 0.5em;
text-align: center;
display: block;
border-radius: 2px;
position:relative;
font-size:12px;
}
#pagetop a:before{
font-family:'FontAwesome';
content:"\f077";
display:block;
font-size:1.5em;
}
#pagetop a:hover {
text-decoration: none;
background: #9BBF51;
}
/* etc
------------------------------------------------------------*/
.bold{font-weight: bold}
.f15{font-size:15px!important}
.f16{font-size:16px!important}
.mt10{margin-top:10px}
.mb0{margin-bottom:0}
.pt25{padding-top:25px!important}
.center{text-align: center}
.ore{color:#E36626}
/* clearfix
------------------------------------------------------------*/
.cf:after,
.clearfix:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
.clear{
clear:both;
}
/* 上付き文字
------------------------------------------------------------*/
.sup-text {
font-size: 70%;
vertical-align: top;
position: relative;
top: -0.1em;
left:-0.35em;
letter-spacing:-0.05em;
}
@media print{
#pagetop{
display: none;
}
}
/* カウンタ */
.count{
display: none;
}