@charset "UTF-8";

/* sidebar ================*/

.searchbox {
width:100%;
position:relative;
margin:0 0 30px 0;}
.searchbox .ttl {
position:absolute;
top:0;
left:-0;
z-index:2;
text-align:center;
width:44px;
font-size:10px;
line-height:44px;
color:#fff;
white-space:nowrap;
background:#444;
border-radius:0%;}
.searchbox input[type="text"] {
font-size:14px;
line-height:44px;
height:44px;
padding:0 40px 0 50px;
width:100%;
background:#fff;
border:1px solid #d3d3d3;}
.searchbox input[type="text"]:focus {
background:#fff;}
.searchbox input[type="submit"] {
position:absolute;
right:8px;
top:50%;
transform:translate(0,-50%);
width:24px;
height:24px;
background:transparent;
background:#fff url("/images/icon_search.png");
background-size:24px;
border:none;
cursor:pointer;}

.sidebar_tab {
margin:30px 0;}
.sidebar_tab .tab_menu {
width:100%;
text-align:center;
font-size:0;}
.sidebar_tab .tab_menu li {
display:inline-block;
vertical-align:top;
width:50%;
font-size:16px;
line-height:50px;
white-space:nowrap;
overflor:hidden;}
.sidebar_tab .tab_menu li a {
display:block;
color:#000;
border-top:none;
border-right:none;
border-bottom:1px solid #d3d3d3;
border-left:none;}
.sidebar_tab .tab_menu li.active a {
background:#fff;
border-top:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
border-bottom:none;
border-left:1px solid #d3d3d3;}
.sidebar_tab .tab_menu li a:hover {
background:#f6f6f5;}
.sidebar_tab .tab_menu li.active a:hover {
background:none;}
.sidebar_tab .sidebar_tab_contents {
padding:15px;
border:1px solid #d3d3d3;
border-top:none;}

.sidebar-archive {
padding:0 5px;}
.sidebar-archive li {
font-size:80%;
line-height:1.1;
width:50%;
padding:6px 0 5px 15px;
background:url("/images/icon_arrow.png") no-repeat left center;
background-size:10px;}

.sidebar-topics {  
padding:0 5px;}
.sidebar-topics li {
padding:10px 0;
border-top:1px dotted #d3d3d3;}
.sidebar-topics li:first-child {
border-top:none;}
.sidebar-topics .ttl {
line-height:1.3;}
.sidebar-topics .date {
font-size:70%;
line-height:1.2;
margin:6px 0;}
.sidebar-topics .tag {}
.sidebar-topics .tag a {
display:inline-block;
font-size:10px;
line-height:1.2;
margin:0 5px 0 0;
padding:6px;
background:#333222;
color:#fff;
border-radius:5px;
transition:all 0.3s;}
.sidebar-topics .tag a:hover {
background:#ee8800;}

@media only screen and (max-width: 1023px) {

.sidebar-archive li {
width:33.33333%;}

}

@media only screen and (max-width:640px) {

.sidebar-archive li {
width:50%;}

}

.sidebar-book {
margin:35px 0 0 0;}
.sidebar-book li {
text-align:center;
font-size:10px;
line-height:1.3;
background:#fff;
box-shadow:0 0 0 1px #dfdfdf;
width:50%;
padding:10px;}
.sidebar-book li a {
display:block;}
.sidebar-book li img {
max-width:70%;
margin:0 0 10px 0;
box-shadow:0 0 0 1px #dfdfdf;}

@media only screen and (max-width: 1023px) {

.sidebar-book li {
width:25%;}

}

@media only screen and (max-width: 800px) {

.sidebar-book li {
width:33.333333%;}

}

@media only screen and (max-width: 640px) {

.sidebar-book li {
width:50%;}

}



/* chinoma ================*/

.chinoma-menu {
background:#e9e8e7;}
.chinoma-menu ul {
width:100%;
max-width:1150px;
margin:0 auto;}
.chinoma-menu ul li {
width:9.09%;
padding:4px;}
.chinoma-menu ul.col10 li {
width:10%;
padding:4px;}
.chinoma-menu ul li img {
margin-bottom:4px;}
.chinoma-menu ul li a {
display:block;}
.chinoma-menu ul li.current a {
border-bottom:2px solid #e00;}
.chinoma-menu ul li a:hover {
margin:-3px 0 3px 0;}

@media only screen and (max-width:800px) {

.chinoma-menu {
padding:2px;}
.chinoma-menu ul li {
width:16.666666%;
padding:2px;}
.chinoma-menu ul.col10 li {
width:20%;
padding:2px;}

}

.chinoma-intro {
font-family:Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
.chinoma-intro h1 {
font-size:110%;
line-height:2;}
.chinoma-intro h2 {
font-size:110%;
line-height:2;}

@media only screen and (max-width:640px) {

.chinoma-intro br {
display:none;}

}

.chinoma-list {
margin:50px 0 0 0;}
.chinoma-list ul {
text-align:left;
margin:7px 0 0 0;}
.chinoma-list li {
width:20%;
padding:5px;}
.chinoma-list li .chinoma-contents {
background:#f9f9f8;
height:100%;}
.chinoma-list a {
display:block;
color:#333;}
.chinoma-list .img {
position:relative;
overflow:hidden;
width:100%;
background:#000;}
.chinoma-list .img img {
opacity:0.93;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
-webkit-transform:scale(1);
transform:scale(1);}
.chinoma-list a:hover img {
-webkit-transform:scale(1.05);
transform:scale(1.05);}
.chinoma-list .txt {
position:relative;
padding:15px 12px 12px;}
.chinoma-list .ttl {
font-size:120%;
line-height:1.4;
font-weight:bold;
letter-spacing:-1px;}
.chinoma-list .date {
font-size:70%;
line-height:1.3;
margin:0 0 9px 0;}
.chinoma-list .txt .cat {
position:absolute;
bottom:100%;
left:0;
z-index:2;}
.chinoma-list .txt .cat a {
display:inline-block;
font-size:9px;
line-height:1.1;
padding:8px;
margin:3px 3px 0 0;
background:#333;
color:#fff;
white-space:nowrap;
transition:0.3s;}
.chinoma-list .txt .cat a:hover {
background:#ee8800;}

@media only screen and (max-width:1100px) {

.chinoma-list li {
width:25%;}

}

@media only screen and (max-width:960px) {

.chinoma-list li {
width:33.333333%;}

}

@media only screen and (max-width:640px) {

.chinoma-list li {
width:50%;}

}


.chinoma-intro02 {
margin:0 0 7% 0;}
.chinoma-intro02 h1 {
padding:0 0 5px 0;
margin:0 0 20px 0;
font-family: 'Cormorant Garamond', serif;
font-size:140%;
line-height:1.2;
border-bottom:1px solid #999;}

@media only screen and (max-width:480px) {

.chinoma-intro02 br {
display:none;;}

}


.chinoma-person {
margin:35px 0 0 0;
background:#FCF8F2;
padding:20px;
font-size:80%;
line-height:1.6;}
.chinoma-person .img {
width:100%;
text-align:center;}
.chinoma-person .txt {
margin:22px 0 0 0;}
.chinoma-person .name {
font-size:15px;
line-height:1.2;
font-weight:bold;
margin:0 0 8px 0;}
.chinoma-person .txt .ttl {
color:#555;
font-weight:bold;
line-height:1.2;
margin:16px 0 7px 0;
padding:0 0 3px 0;
border-bottom:1px dotted #CCC;}

@media only screen and (max-width:1023px) {

.chinoma-person .img {
float:left;
width:150px;}
.chinoma-person .txt {
margin:0 0 0 180px;}

}

@media only screen and (max-width:640px) {

.chinoma-person .img {
float:none;
width:100%;}
.chinoma-person .txt {
margin:22px 0 0 0;}

}



/* JAPANIST ================*/

#main-japanist {}
#main-japanist .img {
padding:10px;
line-height:1.3;
background:#EFEFED;
text-align:center;
margin:39px auto;}
#main-japanist h3 {
color:#770000;
font-size:130%;
line-height:1.2;
padding:4px 0;
border-bottom:1px dotted #CCAA55;
margin:32px 0 16px 0;}
#main-japanist .ttl {
padding:0 0 2px 0;
margin:30px 0;
font-family: 'Cormorant Garamond', serif;
font-size:200%;
line-height:1.2;
letter-spacing:1px;
border-bottom:1px solid #999;}
#japanist-list {
padding:0 0 33px 0;}
#japanist-list li {
padding:0 0 6px 0;
text-align:center;}
#japanist-list li a {
display:inline-block;
box-shadow:1px 1px 2px #bbb;}
#japanist-list li a img {
box-shadow:0 0 0 1px #bbb;}

#japanist-reco {
padding:0 0 30px 0;}
#japanist-reco ul {
font-size:0;
text-align:left;}
#japanist-reco li {
font-size:14px;
display:inline-block;
vertical-align:top;
text-align:left;
width:100%;
padding:5px 0;}
#japanist-reco li .japanist-reco-contents {
font-size:90%;
line-height:1.2;
padding:12px;
background-color:#F9F9F5;
border:1px solid #D9D9D5;
border-radius:4px;}
#japanist-reco li .japanist-reco-contents .img {
width:50px;
float:left;}
#japanist-reco li .japanist-reco-contents .txt {
margin:0 0 0 65px;}
#japanist-reco li .japanist-reco-contents .name {
font-weight:bold;
padding:7px 0 0 0;}
#japanist-reco li .japanist-reco-contents .ttl {
font-weight:bold;
padding:8px 0 0 0;
color:#333399;}
#japanist-reco li .japanist-reco-contents .greeting {
padding:11px 0 0 0;
font-size:90%;}

@media only screen and (max-width:1023px) {

#japanist-list li {
float:left;
width:25%;
padding:3px;}
#japanist-reco li {
width:33.3333333%;
padding:5px;}

}

@media only screen and (max-width: 800px) {

#japanist-list li {
width:33.3333333%;}
#japanist-reco li {
width:50%;}

}

@media only screen and (max-width: 567px) {

#japanist-list li {
width:50%;}
#japanist-reco li {
width:100%;}

}



/* cart ================*/

.cart-button {
margin:33px 0 0 0;
text-align:center;
font-size:15px;
line-height:60px;
font-weight:bold;
color:#fff;
white-space:normal;}
.cart-button a {
display:block;
background:#700;
border-radius:7px;
color:#fff;
box-shadow:2px 2px 2px 0 rgba(0,0,0,0.2);
transition:0.3s;}
.cart-button a:hover {
background:#ee8800;}

.cart-box {
margin:30px 0 0 0;
padding:22px 44px;
text-align:center;
background:#ece9df;
border-radius:4px;}
.cart-box .cartjs_box {
width:100%;
margin:0 auto !important;
padding:0 !important;}
.cart-box .cartjs_product_table table {
border:none;
width:100% !important;
margin:0 auto 15px !important;
text-align:left;
letter-spacing:1px;}
.cart-box .cartjs_product_table table th {
width:20% !important;
white-space:nowrap;
border:none !important;}
.cart-box .cartjs_product_table table td input {
font-size:16px;
width:100px !important;
padding:6px !important;}
.cart-box .cartjs_cart_in input {
-webkit-appearance: none;
margin-bottom:0 !important;
background-color:#AF2720 !important;
text-align:center;
border-radius:7px !important;
height:60px;
width:100% !important;
color:#fff;
font-size:16px;
border:0;
cursor:pointer;
transition: 0.3s;}
.cart-box .cartjs_cart_in:hover input {
background-color:#ee8800 !important;}



/* book ================*/

.book-col {
margin:0 0 66px 0;}
.book-col-right {
float:right;
width:60%;
text-align:left;}
.book-col-left {
float:left;
text-align:center;
width:33.33333%;
margin-top:5px;}
.book-col-right .number {
font-family: 'Cormorant Garamond', serif;
font-size:120%;
line-height:1.1;
margin:0 0 22px 0;}
.book-col-right .ttl-fooga {
font-size:160%;
line-height:1.3;
font-weight:bold;
padding:0 0 35px 0;}
.book-col-right .col-essence {
font-size:13px;}
.book-col-right .col-essence li {
width:25%;
margin:0 0 10px 0;}
.book-col-right .col-utsukushii {
font-size:13px;}
.book-col-right .col-utsukushii li {
width:33.33333%;
margin:0 0 10px 0;}
.book-col-right .col-chapel {
background-color:#3CA429;
text-align:center;
padding:15px;
color:#fff;}
.book-col-right .col-chapel ul {
padding:15px 0;}
.book-col-right .col-chapel li {
width:25%;
padding:10px;
font-size:11px;
line-height:1.3;}
.book-col-right .col-chapel li img {
margin:0 0 10px 0;}

@media only screen and (max-width:1023px) {

.book-col-right {
float:none;
width:100%;
margin:0 auto;
max-width:720px;}
.book-col-left {
text-align:center;
float:none;
width:100%;
margin:0 auto 40px;
max-width:720px;}

}

@media only screen and (max-width:800px) {

.book-col {
margin:0 0 8% 0;}

}

@media only screen and (max-width:640px) {

.book-col {
margin:0 0 12% 0;}
.book-col-right .col-essence li {
width:50%;}
.book-col-right .col-utsukushii li {
width:50%;}
.book-col-right .col-chapel li {
width:50%;}

}

#lineup-list {
text-align:center;
margin:0;}
#lineup-list ul {
font-size:0;
text-align:left;}
#lineup-list li {
display:inline-block;
vertical-align:top;
text-align:center;
width:16.666666%;
font-size:10px;
line-height:1.4;
padding:10px;
transition:all 0.3s;
background:#fff;}
#lineup-list li a {
display:block;
position:relative;}
#lineup-list li a .sold {
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
line-height:40px;
background:#666;
font-weight:bold;
color:#fff;
overflow:hidden;
border-radius:50%;}
#lineup-list li a .new {
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
line-height:40px;
background:#c00;
font-weight:bold;
color:#fff;
overflow:hidden;
border-radius:50%;}
#lineup-list li img {
border:1px solid #CCC;
margin:5px 0 11px 0;
max-width:75%;}
#lineup-list li p.ttl {
font-size:120%;
line-height:1.3;
padding:5px 0 5px 0;
letter-spacing:-0.1em;}

@media only screen and (max-width: 1023px) {

#lineup-list li {
width:20%;}

}

@media only screen and (max-width: 800px) {

#lineup-list li {
width:33.333333%;}

}

@media only screen and (max-width: 480px) {

#lineup-list li {
width:50%;}

}



/* FOOGA ================*/

.fooga-intro01 {
padding:0 0 50px 0;}
.fooga-intro01 .img {
float:left;
width:210px;}
.fooga-intro01 .txt {
margin:0 0 0 230px;}
.fooga-intro02 {
padding:0 0 50px 0;}
.fooga-intro02 h1 {
float:left;
padding:18% 0 1% 0;
width:40%;
font-size:120%;
line-height:1.3;
font-weight:bold;
border-bottom:1px solid #ccc;}
.fooga-intro02 .txt {
float:right;
width:60%;
padding:0 0 0 20px;
border-left:1px solid #ccc;}
.fooga-intro03 {
padding:0 0 11px 0;}
.fooga-intro03 li {
float:left;
width:25%;
text-align:center;
font-size:13px;
line-height:1.5;
padding:10px;}
.fooga-intro03 img {
margin:0 0 10px 0;}

@media only screen and (max-width: 800px) {

.fooga-intro01 .img {
float:none;
width:100%;
text-align:center;}
.fooga-intro01 .txt {
padding:33px 0 0 0;
margin:0;}
.fooga-intro02 h1 {
float:none;
padding:0;
width:100%;}
.fooga-intro02 .txt {
float:none;
width:100%;
padding:33px 0 0 0;
border-left:none;}
.fooga-intro03 li {
width:50%;}

}

@media only screen and (max-width: 480px) {

.fooga-intro03 li {
float:none;
width:100%;}

}



/* EXPRESS PUBLISH ================*/

.gallery {
margin:30px 0;
width:100%;
font-size:0;
text-align:center;}
.gallery li {
padding:10px 0;
display:inline-block;
vertical-align:top;
width:33.33333%;
font-size:10px;
line-height:1.3;}
.gallery li img {
width:92%;
border:1px solid #ccc;}
.gallery li img:hover {
border:1px solid #ff7700;}

@media only screen and (max-width: 640px) {

.gallery li {
width:100%;}

}



/* AD ================*/

ul.ad-list {
width:100%;
font-size:0;
text-align:left;
margin:40px 0;}
ul.ad-list li {
font-size:12px;
line-height:1.4;
display:inline-block;
vertical-align:top;
width:25%;
text-align:center;
padding:15px 10px;}
ul.ad-list li img {
max-width:88%;
border:1px solid #fff;
box-shadow:1px 1px 2px rgba(0,0,0,0.3);
margin:0 0 10px 0;
transition:0.3s;}
ul.ad-list li a:hover img {
border:1px solid #ff8800;}
.ad-col20 {
width:20%;
float:left;
margin:15px 0;}
.ad-col25 {
width:25%;
float:left;
margin:15px 0;}
.ad-col33 {
width:33.3333333%;
float:left;
margin:15px 0;}
.ad-col40 {
width:40%;
float:left;
margin:15px 0;}
.ad-col50 {
width:50%;
float:left;
margin:15px 0;}
.ad-col60 {
width:60%;
float:left;
margin:15px 0;}

@media only screen and (max-width: 1023px) {

ul.ad-list li {
width:33.33333%;}
.ad-col33 {
width:50%;}

}

@media only screen and (max-width: 800px) {

.ad-col20 {
width:33.333333%;}
.ad-col25 {
width:33.333333%;}
.ad-col40 {
width:100%;}
.ad-col50 {
width:100%;}
.ad-col60 {
width:100%;}

}

@media only screen and (max-width: 640px) {

ul.ad-list li {
width:50%;}
.ad-col20 {
width:50%;}
.ad-col25 {
width:50%;}
.ad-col33 {
width:100%;}

}

.tab_ad ul.tab_menu {
width:100%;
max-width:880px;
margin:0 auto 5% auto;
font-size:0;
text-align:center;}
.tab_ad ul.tab_menu li {
display:inline-block;
vertical-align:top;
width:25%;
font-size:14px;
line-height:1.1;}
.tab_ad ul.tab_menu li a {
display:block;
margin:2%;
border:1px solid #000;
background:#fff;
color:#000;
padding:7% 0;
transition:all 0.2s;}
.tab_ad ul.tab_menu li a:hover {
background:#fff;
border:1px solid #f78d1d;
color:#f78d1d;}
.tab_ad ul.tab_menu li.active a {
color:#fff;
background:#f78d1d;
border:1px solid #f78d1d;}

@media only screen and (max-width:640px) {

.tab_ad ul.tab_menu {
margin:6% auto;}
.tab_ad ul.tab_menu li {
width:50%;}

}



/* ehon ================*/

.ehon {
text-align:center;
margin:20px 0 40px 0;
padding:22px 22px 33px 22px;
border:2px solid #CCCCBB;
border-radius:5px;}
.ehon h2 {
font-size:140%;
line-height:1.5;
color:#550000;
border:none;
padding:0;
margin:0 0 15px 0;
border-radius:0;}
.ehon h3 {
color:#000;
font-size:90%;
line-height:1.5;
padding:0;
border-bottom:none;
margin:0 0 25px 0;
font-weight:normal;}



/* taraku ================*/

.taraku01 {
margin:40px 0;
padding:40px 0 0 0;
border-top:1px solid #ccc;}
.taraku01 .txt {
float:left;
width:65%;
text-align:left;}
.taraku01 .img {
text-align:right;
font-size:12px;
line-height:1.3;
float:right;
width:30%;}
.taraku01 .img img {
margin:2px 0 10px 0;}

.taraku02 {
margin:40px 0;
 text-align:left;}
.taraku02 h2 {
font-size:120%;
line-height:1.1;
color:#770000;
border:2px solid #990000;
padding:11px 7px 9px 7px;
margin:0 0 40px 0;
border-radius:4px;}
.taraku02 .left {
float:left;
width:48%;
font-size:80%;}
.taraku02 .right {
float:right;
width:48%;
font-size:80%;}



/* profile ================*/

.profile01 {}
.profile01 .img {
text-align:center;
margin:0 0 25px 0;
float:left;
width:30%;}
.profile01 .img img {
margin:0 0 15px 0;}
.profile01 .txt {
float:right;
width:65%;}

.profile02 {}
.profile02 .img {
clear:both;
text-align:center;
margin:0 0 25px 0;
float:right;
width:30%;}
.profile02 .txt {
float:left;
width:65%;}
.profile02 th {
width:75px;
vertical-align: top;
font-size:13px;
line-height:1.5;
font-weight:bold;
padding:0 0 10px 0;}
.profile02 td {
vertical-align: top;
font-size:13px;
line-height:1.5;
padding:0 0 10px 0;}

.profile03 {
font-size:90%;}
.profile03 .left {
float:left;
width:47.5%;}
.profile03 .right {
float:right;
width:47.5%;}
.profile03 img {
margin:0 0 20px 0;}

@media only screen and (max-width: 800px) {

.profile01 .img {
float:none;
width:100%;
margin:0 0 25px 0;}
.profile01 .txt {
float:none;
width:100%;}

.profile02 .img {
float:none;
width:100%;
margin:0 0 25px 0;}
.profile02 .txt {
float:none;
width:100%;}
.profile02 .txt table {
margin:0 0 25px 0;}

.profile03 .left {
float:none;
width:100%;
margin:0 0 25px 0;}
.profile03 .right {
float:none;
width:100%;}

}