@charset "utf-8";


/* PC : 320 px - 767 px */
@media print, screen and (min-width: 320px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:767px;
	min-width:320px;
}

.sp{
display: block;
}

.tab{
display: none;
}

.pc{
display: none;
}

.wrap{
font-size: 1rem;
}

.sp-br{
display: block;
line-height: 0;
}

.w46p{
flex: 1 0 46%;
width: 46%;
margin: 0 2%;
}

.inline-block{
display: inline-block;
}

.nowrap{
flex-wrap: nowrap !important;
}

.line-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid #9f7b4b;
pointer-events: none;
box-sizing: border-box;
z-index: 5000; 
}
.line-box li {
width: 0;
height: 0;
border-style: solid;
position: absolute; 
}
.line-box li:nth-child(1) {
width: 5px;
height: 5px;
border: none;
background: #a8885d;
top: 0;
left: 0; 
}
.line-box li:nth-child(2) {
width: 5px;
height: 5px;
border: none;
background: #a8885d;
top: 0;
right: 0; 
}
.line-box li:nth-child(3) {
width: 5px;
height: 5px;
border: none;
background: #a8885d;
bottom: 0;
right: 0; 
}
.line-box li:nth-child(4) {
width: 5px;
height: 5px;
border: none;
background: #a8885d;
bottom: 0;
left: 0; 
}

.txt-indent{
padding-left:1em;
text-indent:-1em;
}

/*スクロールバーの幅*/
::-webkit-scrollbar {
    width: 4px;
}
/*スクロールバーのレール*/
::-webkit-scrollbar-track {
  border-radius: 30px;
  background: #cdcdcd;
}
/*スクロールバーのつまみ*/
::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: #FFB876;
}

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.tab-menu{
position: fixed;
z-index: 70000;
width: 100%;
height: 46px;
border-bottom: 1px solid #ddd;
background: #fff;
box-sizing: border-box;
}

.sp-logo{
width: 132px;
height: 44px;
margin: 1px 0 0 13px;
}

.sp-logo img{
width: 100%;
}

.gnav{
float: left;
width: 230px;
margin: 0;
padding: 14px 0 14px 0;
background: #dcbf99;
}

.bnr-menu-sp{
position: fixed;
bottom: 0px;
width: 100%;
height: 60px;
padding: 0;
background: #fff;
border-top: 1px solid #b3a591;
box-sizing: border-box;
z-index: 300;
}

.bnr-menu-sp ul{
display: flex;
width: 100%;
}

.bnr-menu-sp li{
position: relative;
display: flex;
width: 20%;
margin: 0 0;
}

.bnr-menu-sp .one{
background: #6388a9;
}

.bnr-menu-sp .two{
background: #60b092;
}

.bnr-menu-sp .three{
background: #6388a9;
}

.bnr-menu-sp li a{
width: 100%;
height: 60px;
margin: 0;
padding: 6px 0 0 0;
border: 1px solid #cac0b2;
border-bottom: none;
border-top: none;
box-sizing: border-box;
color: #fff;
font-weight: bold;
text-align: center;
}

.bnr-menu-sp li i{
font-size: 1.55rem;
color: #674b23;
}

.bnr-menu-sp .img{
width: 70%;
margin: 4px 15% 0 15%;
}

.bnr-menu-sp .txt{
position: absolute;
bottom: 5px;
width: 100%;
color: #674b23;
font-size: 0.7rem;
font-weight: bold;
text-align: center;
	line-height: 1.125;
}

.bnr-menu-sp li a:hover{
text-decoration: none;
}
 
/*----------ナビゲーション----------*/
/*　三本　*/
.navToggle {
display: block;
position: fixed;    /* bodyに対しての絶対位置指定 */
right: 0;
top: 0;
width: 64px;
height: 46px;
cursor: pointer;
z-index: 20;
background: #cd2653;
text-align: center;
}

.navToggle span {
display: block;
position: absolute;    /* .navToggleに対して */
width: 30px;
border-bottom: solid 3px #eee;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 17px;
}

.navToggle span:nth-child(1) {
top: 9px;
}

.navToggle span:nth-child(2) {
top: 18px;
}

.navToggle span:nth-child(3) {
top: 27px;
}

.navToggle span:nth-child(4) {
border: none;
color: #eee;
font-size: 11px;
font-weight: bold;
top: 29px;
}

/* 最初 span マイナス45度 */
.navToggle.active span:nth-child(1) {
top: 10px;
left: 17px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* 2番目 3番目 45度 */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 28px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 46px;
  left: 0;
  background-color: #fff;
  z-index: 50000;
}
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu{
float: left;
  width: 90%;
  height: auto;
  margin: 16px 5% 0 5%;
  padding: 15px 0;
  background: #fff;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a{
  display: block;
  position: relative;
  text-decoration: none;
  font-size: 2.4rem;
  color: #333;
  line-height: 40px;
  text-align: center;
}

.hamb-box{
width: 100%;
height: 100%;
background: #faebef;
overflow: scroll;
}

.menu-sp-title{
display: block;
margin: 16px 0 14px 0;
color: #901b3a;
font-size: 1.325rem;
font-weight: bold;
text-align: center;
}

.ul-sp-menu{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 5%;
}

.ul-sp-menu .one{
display: flex;
width: 80%;
margin: 0 10% 10px 10%;
}

.ul-sp-menu .one a{
width: 100%;
padding: 11px 0;
border: 1px solid #de728f;
border-radius: 4px;
background: #fff;
box-sizing: border-box;
color: #500f21;
font-size: 0.9rem;
font-weight: bold;
line-height: 1.2;
text-align: center;
}

.ul-sp-menu .two{
display: flex;
width: 49%;
margin: 0 0 12px 0;
}

.ul-sp-menu .two a{
width: 100%;
padding: 11px 0;
border: 1px solid #de728f;
border-radius: 4px;
background: #fff;
box-sizing: border-box;
color: #500f21;
font-size: 0.9rem;
font-weight: bold;
line-height: 1.2;
text-align: center;
}
.ul-sp-menu .one a:hover,
.ul-sp-menu .two a:hover{
text-decoration: none;
}

.sp-menu-box{
display: block;
margin: 0 0 15px 0;
}


/* アコーディオン */
#panel {
  width: 100%;
  margin: 0;
}
 
#panel > dt {
  border-bottom: dotted white;
  background-color: #dc5b7d;
  color: white;
  cursor: pointer;
  font-weight: bold;
}
 
#panel > dd {
  border: solid 1px Silver;
  margin: 0;
  padding: 0;
}

#panel ul{
width: 100%;
padding: 8px 20px;
background: #fff;
box-sizing: border-box;
}

#panel li {
width: 100%;
padding: 10px 0;
border-bottom: 1px dotted #999;
background: #fff;
}

#panel a{
display: block;
padding: 17px 15px;
color: #fff;
}

.rotate{
transform: rotate(90deg);
}

/* SEARCH */
.search-bb{
position: fixed;
top: 100px;
left: 300px;
z-index: 100000;
}

.check-check{
position: fixed;
display:none;
z-index: 500000;
bottom:0px;
width: 94%;
height:276px;
margin: 0 3%;
padding: 28px 0 0 0;
color:white;
border-radius:13px;
border-bottom-right-radius : 0;
border-bottom-left-radius : 0;
border: 5px solid #796451;
border-bottom: none;
background-size: auto auto;
/*
background-color: rgba(91, 70, 40, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(82, 62, 35, 1) 2px, rgba(82, 62, 35, 1) 4px );
*/
background-color: #f6f1f2;
/*
background-image: repeating-linear-gradient(-45deg, transparent,
transparent 2px,
rgba(10,10,10,1) 2px,
rgba(10,10,10,1) 4px );
*/
box-sizing: border-box;
}

.search-form{
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0;
text-align: center;
}

.search-form p{
width: 100%;
margin: 5px 0 21px 0;
padding: 8px 0;
color: #222;
font-size: 1.175rem;
font-weight: bold;
text-align: center;
}

.search-form p .keey{
color: #960e32;
font-size: 1.4rem;
font-weight: bold;
}

.search-form span{
float: none;
margin: 0 auto;
}

.search-form select{
display: inline-block;
width: 34%;
margin: 0 1% 0 5%;
padding: 11px 7px;
font-size: 1.0rem;
line-height: 1em;
border: 2px solid #d85b7d;
box-sizing: border-box;
background: #fff;
}

.search-form input[type="text"]{
display: inline-block;
width: 55%;
margin: 0 0 0 0;
padding: 6px 7px;
font-size: 1.1rem;
line-height: 1em;
border: 1px solid #888;
box-sizing: border-box;
}

.search-form input[type="submit"]{
display: block;
width: 40%;
height: auto !important;
margin: 20px 30% 0;
padding: 15px 0 12px 0;
font-size: 1.1rem;
line-height: 1.0em;
color: #fff;
box-shadow:none;
background: #cd2653;
box-sizing: border-box;
cursor: pointer;
text-align: center;
}

.submm{
display: block;
width: 40%;
height: auto !important;
margin: 20px 30% 0;
padding: 15px 0 12px 0;
font-size: 1.1rem;
line-height: 1.0em;
color: #fff;
border: none;
border-radius: 8px;
box-shadow:none;
background: #cd2653;
box-sizing: border-box;
cursor: pointer;
text-align: center;
}

.close-close-close{
position: absolute;
bottom: 16px;
width: 65%;
margin: 0 17.5%;
padding: 12px 0 10px 0;
font-size: 1.2rem;
color: #fff;
text-align: center;
border-radius:5px;
background: #3b2a1b;
box-sizing: border-box;
cursor: pointer;
}

.close-close-close a:link,.close-close-close a:hover,.close-close-close a:visited{
color: #fff;
text-decoration: none;
}

.icn_search {
    font-family: FontAwesome;
}

#ehon,
#omocha{
margin-top:-67px;
padding-top:67px;
}

/*radio01 css*/
.radio01-input{
  display: none;
}
.radio01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.radio01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio01-input:checked + .radio01-parts{
  color: #009a9a;
}
.radio01-input:checked + .radio01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #009a9a;
  border-radius: 50%;
}

#hide{
display: none;
}

#hide2{
display: none;
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.footer-box{
display: block;
width: 100%;
margin: 40px 0 0 0;
padding: 38px 0 33px 0;
background: #514029;
}

.ul-footer{
display: flex;
flex-wrap: wrap;
}

.ul-footer li{
display: inline-block;
width: 46%;
margin: 0 2% 12px 2%;
}

.ul-footer a{
display: inline-block;
width: 100%;
font-size: 0.86rem;
color: #fff;
}

.copy{
float: left;
width: 100%;
margin: 0 0 60px 0;
padding: 8px 0;
background: #211708;
color: #fff;
text-align: center;
}

.toppage{
position: fixed;
right: 5px;
bottom: 60px;
}

.insta{
position: fixed;
right: 5px;
bottom: 122px;
width: 50px;
height: 50px;
border-radius: 100px;
border: 1px solid #ccc;
background: #fff;
}
.insta img{
display: inline-block;
width: 36px;
height: 36px;
margin: 7px 0 0 7px;
}

.search{
position: absolute;
top: 4px;
right: 72px;
width: 63px;
height: 40px;
}

.search2{
display: none;
position: absolute;
top: 4px;
right: 70px;
width: 63px;
height: 40px;
}

.search-sp {
display: block;
position: relative;
float: right;
width: 40px;
height: 40px;
margin: 10px 60px 0 0;
cursor: pointer;
}

/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
.h1-txt{
float: left;
width: 100%;
margin-top: 46px;
padding: 3px 0;
text-align: center;
line-height: 1.35em;
background-size: auto auto;
background-color: rgba(82, 64, 37, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(70, 53, 30, 1) 2px, rgba(70, 53, 30, 1) 4px );
color: #fff;
font-size: 0.87rem;
font-weight: bold;
}

.h2-rec{
width: 100%;
padding: 10px 0;
text-align: center;
line-height: 1.5em;
background: #c24063;
color: #fff;
font-size: 0.76rem;
}

.h2-txt{
float: left;
width: 100%;
padding: 10px 0;
text-align: center;
line-height: 1.5em;
background: #806138;
color: #fff;
font-size: 0.9rem;
}

.h2-txt-c{
float: left;
width: 82%;
margin: 0 9% 19px 9%;
padding: 6px 0;
text-align: center;
line-height: 1.5em;
border-radius: 10px;
background-size: auto auto;
background-color: rgba(91, 70, 40, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(82, 62, 35, 1) 2px, rgba(82, 62, 35, 1) 4px );
color: #fff;
font-size: 0.9rem;
}

.h2-txt-c span{
font-size: 1.1rem;
}

.h-3bookclub{
display: inline-block;
float: none;
clear: both;
width:auto;
margin: 25px auto 5px auto;
padding: 10px 26px;
border-radius: 50px;
background: #59c180;
color: #fff;
font-size: 0.925rem;
font-weight: bold;
}

.h-3bookclub span{
display: block;
margin: 2px 0 6px 0;
padding-bottom: 6px;
border-bottom: 1px dotted #eee;
font-size: 0.831rem;
line-height: 1;
}

.h3-center{
display: inline-block;
width: 100%;
text-align: center;
}

.mc-wrap{
float: left;
width: 100%;
height: auto;
}

.mc-cont{
display: table;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background: #f5f1ed;
box-sizing: border-box;
}

.section-box{
float: left;
width: 92%;
margin: 0 4%;
padding: 30px 0 0 0;
box-sizing: border-box;
}

/* 検索 → 並べる */
.item-box-box{
float: left;
width: 50%;
}

.item-box{
float: left;
width: 97%;
margin: 0 1.5% 10px 1.5%;
border-radius: 0 0 8px 0;
border: 2px solid #ddd;
background: #fff;
box-sizing: border-box;
}

.item{
flex: 1 0 100%;
float: left;
width: 100%;
height: auto;
margin: 0;
}

.item img{
float: left;
width: 74%;
margin: 10px 13% 5px 13%;
}

.item .name1{
float: left;
width: 88%;
height: auto;
margin: 7px 6% 4px 6%;
padding: 0 0 4px 0;
border-bottom: 1px dotted #f78a57;
color: #333;
font-size: 0.95rem;
font-weight: bold;
line-height: 1.25em;
overflow: hidden;
}

.item .name2{
float: left;
width: 88%;
height: 37px;
margin: 3px 6% 0 6%;
color: #3b2911;
font-size: 0.95rem;
font-weight: bold;
line-height: 1.25em;
overflow: hidden;
}

.item .price{
float: left;
width: 64%;
height: auto;
margin: 5px 18% 10px 18%;
padding: 7px 0 5px 0;
border-radius: 30px;
background: #df4e75;
color: #fff;
font-size: 1.0rem;
font-weight: bold;
text-align: center;
}

/* ---
TOP
--- */

.free-shipping{
float: left;
width: 100%;
margin: 0 0 10px 0;
padding: 15px 10px;
border-top: 2px solid #7dce42;
border-bottom: 2px solid #7dce42;
box-sizing: border-box;
}

.free-shipping .img{
float: left;
width: 15%;
}

.free-shipping .txt{
float: left;
width: 85%;
}

.free-shipping .txt p{
float: left;
width: 100%;
margin: 5px 0 0 0;
padding: 0 0 0 20px;
box-sizing: border-box;
color: #473113;
font-size: 1rem;
font-weight: bold;
line-height: 1.75em;
}

.h2-free-shipping{
float: left;
width: 100%;
padding: 5px 0;
text-align: center;
line-height: 1.5em;
color: #d63c66;
font-size: 1.2rem;
}

.w100p-box{
float: left;
width: 100%;
margin: 0 0 0 0;
padding: 15px;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
}

.w50p-box{
width: 100%;
margin: 0 0 0 0;
padding: 0;
border-radius: 2px;
background: #fff;
box-sizing: border-box;
color: #333 !important;
}

.w50p-box:visited{
color: #333;
}

.top-w33p-box a{
display: block;
float: left;
width: 100%;
margin: 10px 0 0 0;
padding: 12px 0 9px;
border: 2px solid #fac5ac;
border-radius: 30px;
background: #fbf5ec;
box-sizing: border-box;
color: #222;
font-size: 0.72rem;
text-align: center;
line-height: 1.05rem;
}

.top-w20p-box,.top-w25p-box,.top-spw25p-box,.top-w33p-box{
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 10px 0 0 0;
}

.top-w33p-box li{
display: inline-block;
}

.top-w25p-box a{
display: inline-block;
width: 100%;
margin: 10px 0 0 0;
padding: 14px 0 11px;
border: 2px solid #fac5ac;
border-radius: 30px;
background: #fbf5ec;
box-sizing: border-box;
color: #222;
font-size: 0.9rem;
text-align: center;
line-height: 1.05em;
}

.top-spw25p-box a{
display: block;
float: left;
width: 23%;
margin: 10px 1% 0 1%;
padding: 14px 0 11px;
border: 2px solid #fac5ac;
border-radius: 30px;
background: #fbf5ec;
box-sizing: border-box;
color: #222;
font-size: 0.9rem;
text-align: center;
line-height: 1.05em;
}

.top-w20p-box a{
display: block;
float: left;
width: 18%;
margin: 10px 1% 0 1%;
padding: 14px 0 11px;
border: 2px solid #f79e75;
border-radius: 30px;
background: #fbf5ec;
box-sizing: border-box;
color: #222;
text-align: center;
line-height: 1;
}

.top-w33p-box a:hover,.top-w25p-box a:hover,.top-w20p-box a:hover{
background: #f78a57;
color: #fff;
text-decoration: none;
}

.top-rec-img{
float: left;
width: 10%;
}

.top-rec-btn{
float: left;
width: 90%;
}

.txt-recommend{
float: left;
width: 100%;
height: auto;
margin: 0 0 40px 0;
padding: 5px 15px 14px 15px;
border-top: none;
background: #fff;
line-height: 1.5em;
box-sizing: border-box;
overflow: hidden;
}

.button-recommend{
position: absolute;
display: inline-block;
bottom: 0;
width: 70%;
margin: 0 15% 5px 15% !important;
padding: 9px 0;
border-radius: 50px;
background: #fd8b68;
color: #fff;
font-size: 0.9rem;
text-align: center;
line-height: 1em !important;
}

.button-recommend2{
position: absolute;
display: inline-block;
left: 0;
bottom: 5px;
width: 60%;
margin: 0 20% !important;
padding: 9px 0;
border-radius: 50px;
background: #fd8b68;
color: #fff;
font-size: 0.9rem;
text-align: center;
line-height: 1em !important;
}

.button-recommend3{
position: absolute;
display: inline-block;
left: 0;
bottom: 5px;
width: 90%;
margin: 0 5% !important;
padding: 9px 0;
border-radius: 50px;
background: #fd8b68;
color: #fff;
font-size: 0.9rem !important;
text-align: center;
line-height: 1em !important;
}

.button-out-of-stock{
position: absolute;
display: inline-block;
left: 0;
bottom: 5px;
width: 60%;
margin: 0 20% !important;
padding: 9px 0;
border-radius: 50px;
background: #97b0c6;
color: #fff;
font-size: 0.83rem !important;
text-align: center;
line-height: 1em !important;
}

.img-recommend{
display: block;
width: 100%;
margin: 0 0 35px 0;
box-sizing: border-box;
}

.img-recommend img{
width: 70%;
max-width: 212px;
height: auto;
margin: 0 15%;
padding: 10px 0;
box-sizing: border-box;
}

.recommend-h2{
position: relative;
width: 100%;
height: 41px;
margin-top: 8px;
}

.recommend-h2 .img{
position: absolute;
left: 10px;
bottom: 0;
width: 40px;
}

.detail-box{
width: 100%;
margin: 0 0 15px 0;
padding: 20px 12px;
border: 2px solid #e9cca4;
border-radius: 4px;
background: #fff;
box-sizing: border-box;
}

.detail-box .title{
margin: 0 0 20px;
padding: 6px 0;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.325em;
border-top: 2px solid #f67f4a;
border-bottom: 2px solid #f67f4a;
text-align: center;
}

.detail-box .detail{
float: left;
width: 95%;
margin: 0 2.5% 20px 2.5%;
padding: 15px;
border: 3px solid #e9cca4;
border-radius: 3px;
box-sizing: border-box;
line-height: 1.5em;
}

.detail-box .img{
display: block;
width: 100%;
}

.detail-box .img img{
display: block;
width: 100%;
}

.detail-box2{
width: 100%;
}

.detail-box .txt-txt{
width: 90%;
margin: 0 5% 20px 5%;
font-size: 0.95rem;
line-height: 1.725em;
}

.detail-box .cart-box{
width: 90%;
margin: 15px 5% 20px 5%;
}

.detail-box .member{
width: 90%;
margin: 0 5%;
}

.d25{
float: left;
width: 75px;
font-weight: bold;
}

.d75{
float: left;
width: calc( 100% - 75px );
margin: 0 0 10px 0;
padding: 0 0 0 10px;
border-left: 2px solid #ccbda8;
box-sizing: border-box;
}

.h3-title{
margin: 0 0 20px 0;
font-size: 1.4rem;
text-align: center;
}

.h3-comment{
margin: 0 0 20px 0;
padding: 10px 0;
border-radius: 4px;
color: #fff;
font-size: 1.4rem;
text-align: center;
background: #4fa786;
}

.comment-box{
width: 100%;
margin: 20px 0 40px 0;
padding: 20px;
background: #fff;
box-sizing: border-box;
}

.comment-comment{
float: left;
width: 100%;
}

.name10{
font-size: 1.2rem;
font-weight: bold;
}

.comment-txt{
width: 100%;
margin: 0 0 15px 0;
padding: 15px 0 15px 15px;
border-bottom: 1px dotted #999;
}

.cart{
display: block;
width: 100%;
padding: 15px;
border: 2px solid #ff9e80;
background: #fc6e42;
border-radius: 4px;
box-sizing: border-box;
color: #fff;
font-weight: bold;
}

.w100p-w{
float: left;
width: 96%;
margin: 10px 2% 0 2%;
padding: 20px 10px;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
box-sizing: border-box;
}

.h3-form{
display: inline-block;
width: 100%;
margin-bottom: 12px;
padding: 0 0 4px 0;
font-size: 1.125rem;
border-bottom: 1px solid #bbb;
box-sizing: border-box;
line-height: 1.35em;
}

.cart-form-box1 p{
display: inline-block;
width: 100%;
margin: 10px 0 15px;
}

.select50{
display: inline-block;
width: 47%;
margin: 0 2% 0 0;
padding: 7px;
box-sizing: border-box;
}

.textarea100{
display: inline-block;
width: 100%;
height: 110px;
padding: 7px;
box-sizing: border-box;
line-height: 1.55em;
}

.error-box{
display: inline-block;
width: 100%;
padding: 15px;
border: 2px solid #fac4ad;
border-radius: 5px;
box-sizing: border-box;
background: #fff;
line-height: 1.75em;
}

.error-txt{
margin-bottom: 30px;
font-size: 0.9rem;
line-height: 2.0em;
}


.page-back a{
display: block;
width: 70%;
margin: 0 15% 30px 15%;
padding: 17px 0 14px 0;
border-radius: 30px;
background: #3177A1;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
line-height: 1em;
}

.page-back a:hover{
text-decoration: none;
}

.hit-box{
display: inline-block;
width: 100%;
margin: 10px 0 20px 0;
padding: 10px 15px;
border: 1px solid #ccc;
background: #fff;
box-sizing: border-box;
font-size: 0.9rem;
line-height: 1.55em;
}

.hit-box h2{
margin-bottom: 10px;
border-bottom: 1px solid #999;
font-size: 1.15rem;
}

.t-no{
position: absolute;
top: -6px;
left: -5px;
width: 50px;
height: 50px;
padding: 18px 0 0 0;
border-radius: 50%;
background: #2092f3;
box-sizing: border-box;
color: #fff;
font-size: 0.8rem;
text-align: center;
}

/* CART */

.cart-t{
display: inline-block;
width: 100%;
margin: 15px 0 0 0;
padding: 20px 15px;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
font-size: 0.95rem;
line-height: 1.725em;
}

.refresh{
display: inline-block;
width: 100%;
margin-bottom: 20px;
text-align: right;
}

.cart-name{
display: inline-block;
width: 100%;
margin-bottom: 15px;
padding: 10px 15px;
border: 1px solid #999;
background: #fdfaf6;
box-sizing: border-box;
font-weight: bold;
}

.cart-num{
display: inline-block;
float: right;
width: auto;
padding: 5px 15px 0 0;
margin-bottom: 20px;
box-sizing: border-box;
text-align: right;
}

.cart-num2{
display: inline-block;
float: right;
width: auto;
margin-bottom: 20px;
}

.num-bb{
float: right;
margin: 0 0 0 6px;
padding: 5px 10px;
background: #4fa786;
color: #fff;
border: none;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
}

.cart-100{
display: inline-block;
width: 100%;
margin-bottom: 15px;
line-height: 1.25em;
text-align: right;
}

.cart-40{
display: inline-block;
width: 100%;
margin-bottom: 15px;
line-height: 1.25em;
text-align: right;
}

.cart-20{
display: inline-block;
float: right;
width: 50%;
margin-bottom: 30px;
}

.goukei-box{
display: inline-block;
width: 100%;
border: 1px solid #bbb;
}

.border{
padding: 4px 20px;
border: 1px solid #ccc;
background: #fff;
}

.border-top{
display: inline-block;
width: 200px;
padding: 4px 20px;
border-top: 1px solid #999;
background: #fff;
}

.border-bottom{
display: inline-block;
width: 200px;
padding: 4px 20px;
border-bottom: 1px solid #999;
background: #fff;
}

.border-none{
padding: 4px 20px;
border: none;
background: #fff;
}

.cart-delete{
float: right;
width: 160px;
padding: 7px 0;
background: #527ba0;
border: none;
border-radius: 4px;
color: #fff;
}

.h2-cart{
display: block;
margin: 0 0 20px 0;
font-size: 1.4rem;
}

.cart-none{
display: block;
width: 100%;
margin: 0 0 50px 0;
padding: 25px 10px;
border: 3px solid #fac5ac;
box-sizing: border-box;
text-align: center;
line-height: 1.5em;
}

.cart-back{
display: block;
float: left;
width: 48%;
height: 44px;
margin: 15px 1%;
padding-top: 15px;
border-radius: 4px;
background: #f78a57;
box-sizing: border-box;
color: #fff;
font-size: 0.85rem;
font-weight: bold;
text-align: center;
line-height: 1em;
}

.cart-regi{
display: block;
float: left;
width: 48%;
height: 52px;
margin: 15px 1%;
padding: 10px 0;
border: none;
border-radius: 4px;
background: #df4e75;
color: #fff;
font-size: 0.85rem;
font-weight: bold;
text-align: center;
line-height: 1em;
cursor: pointer;
}

.h2-form{
display: inline-block;
width: 100%;
margin-bottom: 15px;
padding: 0 0 0 9px;
font-size: 1.25rem;
border-left: 8px solid #4fa786;
box-sizing: border-box;
line-height: 1.35em;
}

.form-wrap{
display: inline-block;
width: 100%;
padding: 20px 15px;
background: #fff;
box-sizing: border-box;
}

.cart-form-box1{
display: block;
width: 95%;
margin: 0 0 30px 5%;
font-size: 0.95rem;
}

.form-txt{
font-weight: bold;
margin: 0 0 5px 0;
}

.input75{
float: right;
width: 75%;
margin: 0 4% 0 0;
padding: 7px;
box-sizing: border-box;
}

.input100{
float: right;
width: 100%;
padding: 7px;
box-sizing: border-box;
}

.select80{
display: block;
width: 80%;
margin: 0 20% 0 0;
padding: 7px;
box-sizing: border-box;
}

.h2-c{
width: 98%;
margin: 0 1% 0px 1%;
padding: 15px 0 11px 0;
border-radius: 4px;
background: #df4e75;
box-sizing: border-box;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
text-align: center;
line-height: 1.25em;
}

.flex-box{
display: flex !important;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}

.flex-box-around{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
}

.pc-nowrap{
flex-wrap: wrap;
}

.col-32{
flex: 1 0 32%;
width: 32%;
max-width: 32%;
}

.col-31{
width: 31.3333%;
margin: 0 1%;
}

.justify-start{
justify-content: flex-start !important;
}

.col-24{
width: 24%;
}

.col-23{
width: 23%;
margin: 0 1%;
}

.col-19{
width: 19%;
}

.mr1p{
margin-right: 1%;
line-height: 1em !important;
}

.box1{
display: block;
width: 100%;
margin-bottom: 30px;
padding: 22px;
border: 4px solid #ece4f1;
border-radius: 4px;
box-sizing: border-box;
}

.box2{
display: block;
width: 100%;
margin-bottom: 30px;
padding: 20px 13px 11px 13px;
border: 3px solid #e8ddef;
border-radius: 4px;
box-sizing: border-box;
}

.txt5{
margin-bottom: 35px !important;
}

.txt6{
position: absolute;
bottom: 0;
width: 100%;
margin: 0 !important;
padding: 3px 0;
border: 1px solid #e2daeb;
border-radius: 3px;
background: #f6f2f8;
box-sizing: border-box;
color: #222;
font-size: 0.95rem !important;
text-align: center;
line-height: 1.3em !important;
}

.txt7{
position: absolute;
bottom: 0;
width: 100%;
margin: 0 !important;
padding: 4px 5px;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: linear-gradient(to right, #fecffb 0%, #e677e0 50%, #fecffb 100%);
border-right: 0;
border-left: 0;
border-image-slice: 1;
box-sizing: border-box;
color: #222;
font-size: 0.92rem !important;
font-weight: bold;
text-align: center;
line-height: 1.4em !important;
}

.txt8{
width: 84%;
margin: -25px 8% 40px 8% !important;
padding: 9px 5px;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: linear-gradient(to right, #fecffb 0%, #e677e0 50%, #fecffb 100%);
border-right: 0;
border-left: 0;
border-image-slice: 1;
box-sizing: border-box;
font-size: 0.95rem !important;
font-weight: bold;
text-align: center;
line-height: 1.4em !important;
}

.txt8-2{
width: 90%;
margin: -25px 5% 0 5% !important;
padding: 9px 5px;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: linear-gradient(to right, #fecffb 0%, #e677e0 50%, #fecffb 100%);
border-right: 0;
border-left: 0;
border-image-slice: 1;
box-sizing: border-box;
font-size: 0.8rem !important;
font-weight: bold;
text-align: center;
line-height: 1.35em !important;
}

.txt9{
width: 86%;
margin: -25px 7% 35px 7% !important;
padding: 10px 17px;
border: 1px solid #e8d4f3;
background: #faf5fc;
border-radius: 3px;
box-sizing: border-box;
font-size: 0.95rem !important;
text-align: left;
line-height: 1.4em !important;
}

.txt10-1{
position: absolute;
top: -15px;
left: -15px;
padding: 25px 10px 7px 16px;
background-image: url("../img/rank1.png");
background-repeat: no-repeat;
background-size: 60px;
color: #fff;
font-weight: bold;
}

.txt10-2{
position: absolute;
top: -15px;
left: -15px;
padding: 25px 10px 7px 16px;
background-image: url("../img/rank2.png");
background-repeat: no-repeat;
background-size: 60px;
color: #fff;
font-weight: bold;
}

.txt10-3{
position: absolute;
top: -15px;
left: -15px;
padding: 25px 10px 7px 16px;
background-image: url("../img/rank3.png");
background-repeat: no-repeat;
background-size: 60px;
color: #fff;
font-weight: bold;
}

.txt11{
margin-bottom: 45px !important;
}

.relative{
position: relative;
}

.absolute{
position: absolute;
}

.v-center{
top: 50%;
transform: translateY(-50%);
}

.bottom0{
bottom: 0;
}

.col-48{
width: 48%;
max-width: 48%;
flex: 1 0 48%;
}

.col-48 p{
width: 100%;
max-width: 100%;
}

.border-gray{
border: 1px solid #ddd;
}

.a-book a,
.a-book a:hover,
.a-book a:visited{
display: block;
width: 100%;
margin: 0;
padding: 10px;
border: 2px solid #b2b2ff;
border-radius: 4px;
box-sizing: border-box;
color: #3333ff;
font-size: 0.96rem;
}

.mokuji{
width: 90%;
height: auto;
margin: 15px 5% 0 5%;
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #bbb;
background: #fff;
box-sizing: border-box;
font-size: 0.98rem !important;
line-height: 1.4em;
}

.mokuji2{
width: 90%;
height: auto;
margin: 15px 5% 30px 5%;
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #bbb;
background: #fff;
box-sizing: border-box;
font-size: 0.98rem !important;
line-height: 1.6em;
}

.m00{
margin: 0 !important;
}

.mokuji li{
margin-bottom: 11px;
}

.mokuji-txt{
margin-bottom: 8px;
padding-bottom: 10px;
border-bottom: 1px dotted #9749d9;
color: #8a31d5;
font-size: 1.2rem;
font-weight: bold;
}

.m-icon{
font-size: 0.9rem;
color: #b176e3;
}

.age-bb a{
display: inline-block;
width: 100%;
margin: 0 0 10px 0;
padding: 17px 10px;
border: 2px solid;
border-image: linear-gradient(90deg, #dc9dfd 0%, #eac5fe 20%, #f298fa 100%);
border-image-slice: 1;
border-radius: 3px;
box-sizing: border-box;
color: #7c2e5e !important;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
}

.age-bbb a{
display: inline-block;
width: 100%;
margin: 0 0 10px 0;
padding: 13px 5px 11px;
border: 2px solid #e2a1c9;
border-radius: 3px;
box-sizing: border-box;
color: #7c2e5e !important;
font-size: 0.86rem;
font-weight: bold;
text-align: center;
line-height: 1.1rem;
}

.age-bb a:hover,
.age-bbb a:hover{
border: 2px solid #ec73bd;
background: #ec73bd;
color: #fff !important;
text-decoration: none;
}

.img-center{
position: relative;
width: 100%;
text-align: center;
}

.img-center img{
width: 210px;
}

.img-center .img100p{
width: 100%;
}

.img-center .detail{
position: relative;
z-index: 100;
width: 70%;
margin: -55px 15% 0 15%;
padding: 7px 10px;
border-radius: 30px;
border: 2px solid #926be0;
background: #fff;
box-sizing: border-box;
color: #926be0;
font-size: 0.9rem;
font-weight: bold;
line-height: 1.25em;
}

.w100p-w{
float: left;
width: 96%;
margin: 10px 2% 0 2%;
padding: 20px 10px;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
box-sizing: border-box;
}

.w100p-w p{
margin-bottom: 30px;
font-size: 0.975rem;
line-height: 1.575em;
}

.table-age-list{
display: table;
width: 100%;
border-collapse: collapse;
}

.table-age-list th{
display: table-cell;
width: 33%;
padding: 14px;
border: 1px solid #8a8a8a;
box-sizing: border-box;
}

.table-age-list td{
display: table-cell;
width: 67%;
padding: 14px;
border: 1px solid #8a8a8a;
box-sizing: border-box;
}

.bg-a1{
background: #fff2ee;
}

.bg-a2{
background: #f6fbee;
}

.table-company{
width: 100%;
border-collapse: collapse;
line-height: 1.45em;
}

.table-company th{
width: 27%;
padding: 16px 0;
border: 1px solid #999;;
background: #f4eff9;
box-sizing: border-box;
text-align: center;
}

.table-company td{
width: 73%;
padding: 16px 15px;
border: 1px solid #999;;
box-sizing: border-box;
}

.ul-kiyaku{
width: 100%;
line-height: 1.75em;
}

.ul-kiyaku li{
display: inline-block;
width: 100%;
box-sizing: border-box;
}

.ul-kiyaku02{
width: 100%;
padding: 1em 0 15px 2em;
box-sizing: border-box;
line-height: 1.75em;
}

.spnav-sub{
display: inline-block;
width: 90%;
margin: 25px 5% 40px 5%;
border-radius: 6px;
}

.spnav-sub li{
width: 100%;
margin: 0 0 10px 0;
}

.spnav-sub li a{
display: block;
width: 100%;

padding: 13px 10px 13px 20px;
border: 1px solid #de728f;
box-sizing: border-box;
background: #fff;
color: #500f21;
line-height: 1;
}

.spnav-sub li a:hover{
text-decoration: none;
}

.box-red{
width: 80%;
margin: 20px 10% !important;
padding: 10px;
border: 1px solid #fdc8cc;
background: #fff6f6;
box-sizing: border-box;
color: #444;
font-weight: bold;
text-align: center;
line-height: 1.225em;
}

.lh-05{
line-height: 0.65em;
}

.indent-1{
padding-left: 1em !important;
text-indent: -1em !important;
}

.ul-set{
width: 100%;
padding: 10px 0 0 1em;
border: 1px solid #f0dfba;
background: #fffdfa;
box-sizing: border-box;
}

.ul-set li{
width: 100%;
margin-bottom: 10px;
padding: 10px;
}

.ul-set li p{
margin-bottom: 5px !important;
}

.ul-set li a{
color: blue;
text-decoration: underline;
}

.set-box{
display: inline-block;
margin-bottom: 10px;
padding: 7px 16px;
border: 2px solid #49d8b1;
color: #214a3f;
font-weight: bold;
}

.arrow-green{
color: #1bce9d;
}

.arrow-pink{
color: #fa5a66;
}

.arrow-orange{
color: #e78a16;
}

.rapping{
max-width: 80%;
margin: 0 10% 10px 10% !important;
}

.w100p-w50p{
flex: 1 0 48%;
width: 48%;
margin: 0 1%;
}

.top-bnr{
display: block;
flex: 1 0 88%;
width: 88%;
margin: 0 6% 0px 6%;
}

.top-bnr2{
display: block;
flex: 1 0 88%;
width: 88%;
margin: 0 6% 16px 6%;
}

.top-bnr img{
display: block;
width: 100%;
margin: 0 0 16px 0;
}

.top-bnr3{
display: block;
width: 77%;
margin: 15px 11.5% 20px 11.5%;
}

.top-bnr90{
width: 94%;
margin: 0 3%;
}

.top-reco{
position: relative;
width: 48%;
margin: 0 1% 10px 1%;
background: #fff;
}

.top-reco a{
color: #333;
}

.top-reco a:hover{
color: #333;
text-decoration: none;
}

.reco-flex{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
padding: 15px;
border: 3px solid #ddd;
box-sizing: border-box;
}

.reco-a:link,
.reco-a:hover,
.reco-a:visited{
color: #222;
text-decoration: none;
}

.reco-flex p{
margin: 0 0 40px 0;
font-size: 0.93rem;
line-height: 1.9em;
}

.reco-img{
display: inline-block;
width: 55%;
margin: 0 22.5% !important;
}

.reco-detail{
position: relative;
display: inline-block;
width: 100%;
margin: 0 0 10px 0;
padding: 20px 15px 20px 15px;
border: 2px solid #e996ad;
border-radius: 3px;
box-sizing: border-box;
}

.reco-title{
margin-bottom: 10px !important;
padding-bottom: 10px;
border-bottom: 1px dotted #555;
color: #222;
font-size: 1.0rem !important;
font-weight: bold;
line-height: 1.3em !important;
}

.reco-txt-txt{
margin: 10px 0 20px 0;
padding: 13px 15px;
border: 1px solid #dfcdb6;
background: #faf6f0;
box-sizing: border-box;
}

.reco-img-img{
width: 49%;
margin: 0 0.5%;
border: 1px solid #c7b69f;
box-sizing: border-box;
}

.reco-img-img img{
width: 100%;
}

.reco-title2{
margin-bottom: 7px !important;
color: #704f23;
font-size: 1.175rem !important;
font-weight: bold;
}

.deco{
width: 50%;
margin: 0 25% 0 25% !important;
}


.page-back a{
display: block;
width: 70%;
margin: 0 15% 30px 15%;
padding: 17px 0 14px 0;
border-radius: 30px;
background: #3177A1;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
line-height: 1em;
}

.page-back a:hover{
text-decoration: none;
}

.daitai{
display: block;
width: 80% !important;
margin: 0 10% !important;
padding: 10px 0 !important;
border: none !important;
border-radius: 50px;
background: #e27694;
box-sizing: border-box;
color: #fff !important;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
line-height: 1.5em;
}

.top-bnr-box{
display: block;
width: 100%;
}

.news-box{
width: 90%;
margin: 0 5% 20px 5%;
padding: 18px 27px;
border: 3px solid #f8ac8a;
background: #fff;
box-sizing: border-box;
}

.news-title{
font-size: 1.16rem;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 7px;
border-bottom: 1px solid #83c1aa;
}

.news-txt{
line-height: 1.6em;
}

.news-icon{
font-size: 1.2rem;
color: #4fa786;
}

.member-box{
display: flex;
flex-wrap: wrap;
margin: 20px 0 10px 0;
}
.member-box li{
width: 50%;
margin-bottom: 10px;
}
.member-box li a{
display: block;
width: 90%;
margin: 0 5%;
padding: 13px 0;
border: 2px solid #dc5b7d;
box-sizing: border-box;
color: #333 !important;
text-align: center;
}

.modal_wrap input {
  display: none;
}

.modal_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.modal_content {
  align-self: flex-start;
  width: 90%;
  padding: 30px 30px 15px;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transform: translateY(-100%);
  transition: 0.5s;
}

.close_button {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
  transform: translateY(50px);
}

.open_button {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  margin: auto;
  padding: 8px 16px;
  color: #444;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  cursor: pointer;
}

.modal-ul{
display: block;
width: 100%;
font-size: 1.0rem;
}
.modal-a{
display: inline-block;
width: 90%;
margin: 0 5% 15px 5%;
padding: 18px 15px 13px 15px;
border: 3px solid #95cab6;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}

.modal-a:hover{
text-decoration: none;
background: #fce6ed;
}

.modal-span1{
display: block;
padding: 0 10px 8px 10px;
color: #333;
font-weight: bold;
line-height: 1em;
}

.modal-span2{
display: block;
width: 85%;
margin: 7px 7.5% 0 7.5%;
padding: 10px;
border-radius: 50px;
border: 2px solid #a7d3c2;
background: #f9fcfb;
box-sizing: border-box;
color: #664c28;
font-weight: bold;
}

.modal-span3{
display: inline-block;
margin-top: 10px;
padding: 1px;
color: #da416a;
font-size: 1.325rem;
font-weight: bold;
}

.modal-p{
display: block;
width: 88%;
margin: 18px 6% 25px 6%;
padding: 9px 0;
border-top: 2px solid #eca6b9;
border-bottom: 2px solid #eca6b9;
box-sizing: border-box;
font-size: 0.975rem;
line-height: 1.4em;
text-align: center;
}

.modal-i{
color: #e06a8a;
}

.ag-off:hover,
.ag-on,.ag-on:hover{
float: left;
width: 100%;
padding: 10px 0 9px 0;
border-radius: 8px;
border: 2px solid #04aa62;
background: #04aa62;
box-sizing: border-box;
color: #fff !important;
cursor: pointer;
}

.ag-off{
float: left;
width: 100%;
padding: 10px 0 9px 0;
border-radius: 8px;
border: 2px solid #90e18d;
background: #fafffb;
box-sizing: border-box;
color: #222 !important;
cursor: pointer;
}

/* 続きを読むボタン */
.wrapper{
display: table;
width: 100%;
margin: 30px auto 0 auto;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.5;
}
.text_wrapper{
position: relative;
width: 92%;
margin: 0 4%;
padding: 15px 10px;
margin-bottom: 15px;
border: 3px solid #f0b7c6;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
font-size: 1.0rem;
}

.text_wrapper2{
position: relative;
width: 92%;
margin: 0 4%;
padding: 15px 10px;
margin-bottom: 15px;
border: 3px solid #f0b7c6;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
font-size: 1.0rem;
}

.text_wrapper2 a{
line-height: 1.25em;
}

.text{
height: 125px;
overflow: hidden;
line-height: 1.75em;
}
.text2{
height: 100px;
overflow: hidden;
}
.show_more{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
padding: 60px 0 12px 0;
text-align: center;
line-height: 30px;
background: linear-gradient(180deg, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);
cursor: pointer;
transition: bottom 0.2s;
font-weight: bold;
}
.show_more span{
width: auto;
padding: 10px 50px;
border-radius: 30px;
background: #c24063;
box-sizing: border-box;
color: #fff;
}

.box-archives{
display: inline-block;
width: 100%;
margin: 15px 0 0 0;
}

/*----------------------------------------------------
吹き出し
----------------------------------------------------*/
.f-name{
color: #424242;
font-weight: bold;
text-align: right;
}
.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 10px;
}
.oneArea .onebox1,
.oneArea .onebox2{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 32px;
}
.oneArea .onebox1 .imgArea{
  width: 16%;
  margin-right: 20px;
  position: relative;
}
.oneArea .onebox2 .imgArea{
  width: 16%;
  margin-left: 20px;
  position: relative;
}
.oneArea .onebox1 .imgArea img,
.oneArea .onebox2 .imgArea img{
  width: 100%;
  max-width: 118px;
  position: absolute;
  top: 0;
}
.oneArea .onebox1 .imgArea img {
  left: 0;
  padding-right: 30px;
}
.oneArea .onebox2 .imgArea img {
  right: 0;
  padding-left: 30px;
}
.oneArea .onebox1 .fukiArea,
.oneArea .onebox2 .fukiArea{
  width: 100%;
}
.oneArea .onebox1 .fukidasi,
.oneArea .onebox2 .fukidasi{
  width: 100%;
  position: relative;
  padding: 27px 32px;
  background-color: #eaf3fe;
  font-size: 1.025rem;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.75em;
}
.oneArea .onebox1 .fukidasi::before,
.oneArea .onebox2 .fukidasi::before{
  content: '';
  position: absolute;
  display: block;
  top: 28px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 30px 15px 0;
  border-color: transparent #eaf3fe transparent transparent;
}
.oneArea .onebox1 .fukidasi::before {
left: -20px;
}
.oneArea .onebox2 .fukidasi {
background-color: #fcf7ec;
border: 2px solid #d4bf98;
}

.oneArea .onebox2 .fukidasi::before {
right: -30px;
border-color: transparent #d4bf98 transparent transparent;
transform: rotate(180deg);
}

@media screen and (max-width: 1024px) {
.oneArea .onebox1 .imgArea img,
.oneArea .onebox2 .imgArea img{
max-width: 90%;
}
.oneArea .onebox1 .fukidasi,
.oneArea .onebox2 .fukidasi{
padding: 15px;
}
.oneArea .onebox1 .fukidasi::before,
.oneArea .onebox2 .fukidasi::before{
 top: 30px;
  }
}
@media screen and (max-width: 420px) {
.oneArea {
margin: 30px auto;
}
.oneArea .onebox1:nth-child(even) ,
.oneArea .onebox2:nth-child(even) {
margin-top: 0px;
}
.oneArea .onebox1 .imgArea,
.oneArea .onebox2 .imgArea{
width: 25%;
}
.oneArea .onebox1 .fukidasi,
.oneArea .onebox2 .fukidasi{
padding: 22px 16px;
}

}

.faq-a{
display: inline-block;
float: none !important;
width: 35px;
height: 35px;
margin: 0 10px 6px 0;
padding: 5px 0;
border-radius: 100px;
background: #555;
box-sizing: border-box;
font-weight: bold;
text-align: center;
font-size: 1.1rem;
}
.oneArea  a{
width: 100%;
margin-top: 15px;
padding: 0 10px;
box-sizing: border-box;
color: blue;
text-decoration: underline;
}


/* アコーディオン */
.cp_actab {
	position: relative;
	overflow: hidden;
	width: 90%;
	margin: 0 5% 0 5%;
	color: #ffffff;
	  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.cp_actab::after{
position: absolute;
right: 10px;
bottom: 1em;
color: #337E9A;
content: "\f0d7";
}

.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	position: relative;
	display: block;
	padding: 0 0 20px 0;
	cursor: pointer;
	background: #fff;
	border-bottom: 2px solid #f2b8c8;
	color: #333;
}

.cp_actab span{
display: inline-block;
width: 87%;
margin: 10px 0 0 13%;
padding: 0 10px 0 0;
box-sizing: border-box;
color: #515151;
line-height: 1.4em;
}

.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #333333;
	background: #f6fafb;
}
.cp_actab .cp_actab-content p {
margin: 1em;
color: #164354;
font-size: 0.926rem;
line-height: 1.85em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
}


.faq-q {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translate(-50%, -50%);
	display: block;
	width: auto;
	height: auto;
	margin-top: 2px;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
color: #f76548;
font-size: 1.4rem;
}

.h2-faq{
width: 100%;
margin-top: 45px;
color: #177092;
font-weight: bold;
text-align: center;
}

.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-trigger {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: -30px;
  left: 0;
  width: 220px;
  margin: auto;
  padding: 8px 0;
  border: 3px solid #47B7AB;
  border-radius: 2px;
  background: #009e8f;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.978rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.grad-trigger:hover {
  background: #fff;
  color: #009e8f;
}
.grad-trigger .fa {
  margin-right: .5em;
}
.grad-item {
  position: relative;
  overflow: hidden;
}
.grad-item.is-hide {
  height: 2100px;
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger.is-show + .grad-item::before {
  display: none;
}

/* 今月のおすすめ */
.kongetu{
width: 90%;
margin: 0 5%;
padding: 0 0 10px 0;
border: 3px solid #a18a6b;
border-radius: 7px;
background: #fff;
box-sizing: border-box;
}

.kongetu h1{
width: 100%;
margin: 0;
padding: 7px 0;
background: #8f7551;
color: #fff;
font-size: 1.07rem;
text-align: center;
}

.kongetu h2{
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 1px dotted #888;
font-size: 1.075rem;
text-align: center;
}

.kongetu ul{
display: inline-block;
width: 44%;
margin: 9px 2.5% 16px 2.5%;
}

.kongetu ul img{
position: relative;
width: 97%;
height: 125px;
margin: 0 1.5%;
border: 1px solid #999;
background: #eee;
box-sizing: border-box;
}

.kongetu i{
width: 30px;
height: 30px;
margin: 0 6px 0 0;
padding: 8px 0 0 0;
border-radius: 28px;
background: #D3008E;
box-sizing: border-box;
color: #fff;
font-size: 0.96rem;
text-align: center;
}

.kongetu .more{
position: relative;
z-index: 10;
width: 75%;
margin: -13px 12.5% 0 12.5%;
padding: 6px 0;
border: 1px solid #eee;
border-radius: 100px;
background: #474747;
box-sizing: border-box;
color: #fff;
font-size: 0.84rem;
text-align: center;
}

.kongetu .reco-more a{
display: inline-block;
width: 70%;
margin: 0 15% 0 15%;
padding: 6px 20px;
border: 1px solid #aaa;
border-radius: 100px;
background: #efefef;
box-sizing: border-box;
text-align: center;
color: #222;
font-size: 0.915rem;
line-height: 1;
}

.kongetu .reco-more-i{
width: 24px;
height: 24px;
margin: 0 6px 0 0;
padding: 5px 0 0 0;
border-radius: 24px;
background: #0082a2;
box-sizing: border-box;
color: #fff;
font-size: 0.96rem;
text-align: center;
}

/* 年齢別ボタン */
.top-button{
display: flex;
flex-wrap: wrap;
width: 100%;

}

.line{
position: relative;
margin: 0 0 6px 0;
padding-bottom: 3px;
}

.line::after{
position: absolute;
bottom: 0;
content:"";
width: 80%;
margin: 0 10%;
border-bottom: 1px dotted #ccc;
}

.top-button .one{
display: inline-flex;
width: 22%;
margin: 0 1.5% 4px 1.5%;
box-sizing: border-box;
line-height: 1em;
}

.top-button .one a{
position: relative;
display: inline-block;
width: 92%;
margin: 0 4%;
padding-top: 83.35%;
border-radius: 50%;
background: #fff; 
box-sizing: border-box;
font-weight: bold;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.155);
}

.top-button .one a:hover{
background: #fae9ed;
}

.red{
border: 2px solid #e695ab;
color: #cd2653 !important;
}

.green{
border: 2px solid #7bc4a3;
color: #1c9960 !important;
}

.orange{
border: 2px solid #7baec4;
color: #1c7499 !important;
}

/*
.top-button .one a{
position: relative;
display: inline-block;
width: 92%;
margin: 0 4%;
padding-top: 87.5%;
border: 2px solid #bde0db;
border-radius: 50%;
background-color: #259f9b;
background: linear-gradient(#47a895,#1f967e);
background:-ms-linear-gradient(#47a895,#1f967e); 
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.225);
}
*/









.top-button .one a .span01{
  position: absolute;
  top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  width: 100%;
  content: '';
  
  font-size: 0.815rem;
  text-align: center;
  line-height: 1.4;
}

.top-button .one a .span02{
  position: absolute;
  top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  width: 100%;
  content: '';
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.25;
}


/*
.top-button .one a span{
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7em;
  height: 1em;
  margin-top: -.5em;
  margin-left: -3.5em;
  content: '';
  color: #222;
  font-size: 0.91rem;
  text-align: center;
  line-height: 1.5;
}
*/

/* CONTACT */
.input90{
 width: 90%;
 margin: 0 5% 0 5%;
 padding: 7px 10px 6px 10px;
 border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
}

.input80{
 width: 90%;
 margin: 0 5% 0 5% !important;
 padding: 8px 10px 7px 10px;
  border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
 /*　transform: scale(0.8);　*/
}

.input50{
 width: 90%;
 margin: 0 5% 0 5%;
 padding: 8px 10px 7px 10px;
  border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
}

.input30{
 width: 30%;
 margin: 0 45% 0 5%;
 padding: 7px 10px 6px 10px;
  border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
}

.caution{
float: left;
width: 84%;
margin: 10px 12% 0 4% !important;
color: #a42701;
font-size: 0.9rem !important;
line-height: 1.4em !important;
font-weight: bold;
}

.table-txt{
float: left;
width: 84%;
margin: 10px 12% 0 4% !important;
color: #444;
font-size: 0.9rem !important;
line-height: 1.4em !important;
font-weight: bold;
}

.table-txt-10{
float: left;
width: 84%;
margin: -10px 12% 0 4% !important;
color: #444;
font-size: 0.9rem !important;
line-height: 1.4em !important;
font-weight: bold;
}

.back-bb{
width: 80%;
height: 50px;
margin: 15px 10% 13px 10%;
background: #3177A1;
border-radius: 50px;
color: #fff;
box-shadow: none;
border: none;
cursor: pointer;
font-size: 1.05rem;
font-weight: bold;
}

input[type=submit]{
width: 80%;
height: 50px;
margin: 0 10% 10px 10%;
background: #f57a54;
border-radius: 30px;
box-shadow: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 0.92rem;
font-weight: bold;
}

.card-txt{
float: left;
width: 90%;
margin: 0 5% 10px 5% !important;
font-weight: bold;
}

.card-txt2{
float: left;
width: 90%;
margin: 0 5% 30px 5%;
}

.txt-b15{
float: left;
width: 100%;
margin: 0 0 15px 0;
}

.txt-b20{
float: left;
width: 100%;
margin: 0 0 20px 0;
}

.txt-b30{
float: left;
width: 100%;
margin: 0 0 30px 0;
}

.txt-b110{
float: left;
width: 100%;
margin: 0 0 110px 0;
}

.form-txt{
display: inline-block;
width: 100%;
font-weight: bold;
margin: -20px 0 0 2% !important;
font-size: 1.05rem !important;
line-height: 1.5em !important;
}

.form-txt-t{
margin: 0 0 5px 10%;
font-size: 1.5rem;
}

.form-box{
margin: 0 0 30px 0;
}

.back2{
width: 100%;
margin: 10px 0;
text-align: center;
}

.submit1{
width: 100%;
margin: 10px 0;
text-align: center;
}

.submit2{
width: 100%;
margin: 10px 0;
text-align: center;
}


.table-inquiry{
width: 100%;
margin: 0;
border-bottom: 1px solid #999;
}

.table-inquiry th{
display: table-cell;
float: left;
width: 100%;
padding: 10px 0;
border: 1px solid #888;
background: #f6f4f0;
box-sizing: border-box;
text-align: center;
}

.span1{
float: left;
margin: 7px 0 0 10%;
font-size: 0.9rem;
}

.span2{
float: right;
width: auto;
margin: 6px 10% 0 0;
padding: 5px 10px 3px 10px;
border-radius: 6px;
background: #f46185;
color: #fff;
font-size: 0.85rem;
line-height: 1em;
}

.table-inquiry td{
display: table-cell;
float: left;
width: 100%;
padding: 13px 0;
border: 1px solid #888;
border-top: none;
border-bottom: none;
background: #fff;
box-sizing: border-box;
}


.table-p{
width: 80%;
margin: 0 10%;
}

.radio-box{
width: 90%;
margin: 0 5%;
line-height: 1.25em;
}

#Box1,#Box3{
display: none;
}

.check-txt{
width: 100%;
padding: 0 15px;
font-size: 0.92rem !important;
box-sizing: border-box;
}

.formError .formErrorContent {
right: 150px;
left: 0;
}

.formError .formErrorArrow {
float: left;
	width: 15px;
	margin: -2px 0 0 -60px;
	position:relative;
}

.txt-b30-b40{
margin: 0 0 30px 0;
}

.contact-contact,
.contact-contact2{
float: left;
width: 100%;
margin: 0 0 20px 0;
padding: 13px;
border: 3px solid #dfdfdf;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.95rem;
line-height: 1.7em;
text-align: center;
}

.contact-contact dt{
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom: 2px solid #d3835d;
color: #222;
font-size: 0.93rem;
font-weight: bold;
text-align: center;
}

.contact-contact2 dt{
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom: 2px solid #d3835d;
color: #222;
font-size: 0.93rem;
font-weight: bold;
text-align: center;
}

.tel-tel{
font-size: 1.28rem;
font-weight: bold;
}

.privacy-privacy{
float: left;
width: 100%;
margin: 0 0 20px 0;
padding: 20px;
border: 4px solid #dfdfdf;
border-radius: 4px;
box-sizing: border-box;
}

.privacy-privacy dt{
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom: 2px solid #d3835d;
color: #222;
font-weight: bold;
text-align: center;
}

.contact-box{
position: relative;
margin: 0 0 60px 0;
}

.contact-mail{
position: absolute;
left: 0;
right: 0;
bottom: -350px;
width: 220px;
margin: 0 auto 10px auto;
padding: 7px;
border: 2px solid #ff9e80;
border-radius: 10px;
background: #fc6e42;
box-sizing: border-box;
color: #fff;
font-size: 1.5rem;
text-align: center;
}

.contact-tel{
position: absolute;
left: 0;
right: 0;
bottom: -82px;
width: 220px;
margin: 0 auto;
padding: 7px;
border: 2px solid #4F90B6;
border-radius: 10px;
background: #136799;
box-sizing: border-box;
color: #fff;
font-size: 1.5rem;
text-align: center;
}

.contact-tel-contact{
width: 220px;
margin: 10px auto 0 auto;
padding: 7px;
border: 2px solid #4F90B6;
border-radius: 10px;
background: #136799;
box-sizing: border-box;
color: #fff;
font-size: 1.5rem;
text-align: center;
}

.share-txt{
float: left;
width: 90%;
margin: 8px 5% 0 5%;
padding: 15px 0 0 0;
border-top: 1px dotted #ffadaf;
}

.apply-box{
display: block;
width: 98%;
margin: 35px 1% 0 1%;
text-align: center;
}

.apply-box p{
width: auto;
padding: 16px 0 12px 0;
border: 3px solid #ff9e80;
border-radius: 7px;
background: #fc6e42;
color: #fff;
font-size: 1.2rem;
}

.apply-box a{
text-decoration: none;
}

.fa-table-box{
float: left;
width: 100%;
margin: 25px 0 0 0;
}

.favorite-table{
width: 100%;
border-collapse: collapse;
font-size:1.3rem;
line-height: 1.35em;
}

.favorite-table th{
padding: 11px;
border: 1px solid #999;
box-sizing: border-box;
background: #ddd;
text-align: center;
}

.favorite-table td{
padding: 13px;
border: 1px solid #999;
box-sizing: border-box;
text-align: left;
}

.favorite-table td:nth-child(1){
width: 48%;
}

.favorite-table td:nth-child(2){
width: 38%;
}

.favorite-table td:nth-child(3){
width: 14%;
}

.favorite-table tr:nth-child(odd){
background: #f2f2f2;
}

.z-1000{
	position:relative;
	z-index:1000;
}


.back-box{
float: left;
width: 100%;
margin: -30px 0 10px 0;
}

.back a:link {
float: right;
width: auto;
padding: 5px 15px 2px 15px;
border-radius: 5px;
background: #248E69;
font-size: 1.3rem;
color: #fff;
}

.w100p-w{
display: flex;
flex-wrap: wrap;
float: none;
width: 95%;
max-width: 560px;
margin: 10px auto 0 auto;
padding: 20px 10px;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
box-sizing: border-box;
}

.wrap-cont{
width: 88%;
margin: 0 6%;
}

.sp-mt20{
display: inline-block;
margin-top: 20px;
}

.spnav-sub{
float: left;
display: inline-block;
width: 100%;
margin: 15px 0 60px 0;
}

.spnav-sub li{
width: 100%;
padding: 9px 10px 9px 20px;
border-bottom: 1px dotted #999;
box-sizing: border-box;
}

.mokuji{
width: 90%;
height: auto;
margin: 15px 5% 20px 5%;
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #bbb;
background: #fff;
box-sizing: border-box;
font-size: 0.98rem !important;
line-height: 1.55em;
}

.sp-pc-box{
display: block;
width: 90%;
margin: 35px 5% 0 5%;
line-height: 1.6em !important;
}

.sp-pc-table{
display: block;
width: 100%;
font-size: 0.95rem !important;
line-height: 1.6em !important;
}

.sp-pc-table-table{
display: block;
width: 100%;
font-size: 0.95rem !important;
line-height: 1.6em !important;
}

.sp-pc-h1{
margin-bottom: 25px;
padding-bottom: 15px;
font-size: 1.0rem;
border-bottom: 3px solid #26a576;
line-height: 1.6em;
}

.sp-pc-input{
width: 100%;
padding: 7px;
box-sizing: border-box;
}

.sp-pc-input2{
width: 80%;
padding: 7px;
box-sizing: border-box;
}

.sp-pc-bb-box{
width: 100%;
margin: 25px 0 35px 0;
}

.sp-pc-bbb-box{
width: 100%;
margin: 25px 0 0 0;
}

.sp-pc-bbcc-box{
width: 100%;
margin: 13px 0;
}

.copy-box{
display: block;
width: 100%;
padding-bottom: 12px;
font-size: 0.72rem;
text-align: center;
}

.back-bbb{
display: block;
width: 70%;
margin: 0 15% 30px 15%;
padding: 17px 0 14px 0;
border-radius: 30px;
border: none;
background: #3177A1;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
line-height: 1em;
}

.card-edit-table { 
width: 100%;
border-top: 1px solid #999;
border-collapse: collapse;
}
.card-edit-table td{ 
display: block;
width: 100%;
padding: 5px 10px;
box-sizing: border-box;
}
.card-edit-table th.cmn_ttl { 
display: block;
width: 100%;
padding:10px 18px; border: 1px solid #999; background-color:#fdfaf6; font-size: 15px;  
border-top: none;
box-sizing: border-box;
}
.card-edit-table th.data_ttl { 
display: block;
padding:10px 18px; border: 1px solid #999; background-color:#fdfaf6; font-size: 15px;
}
.card-edit-table td { 
display: block;
padding:16px 18px 3px 18px; border: 1px solid #999;
border-top: none;
}

.next-bbb{
width: 80%;
height: 50px;
margin: 0 10% 10px 10%;
background: #f57a54;
border-radius: 30px;
box-shadow: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.05rem;
font-weight: bold;
}

.table01{
width: 100%;
}

.member-box{
display: flex;
flex-wrap: wrap;
margin: 20px 0 10px 0;
}
.member-box li{
width: 50%;
margin-bottom: 10px;
}
.member-box li a{
display: block;
width: 90%;
margin: 0 5%;
padding: 13px 0;
border: 2px solid #dc5b7d;
box-sizing: border-box;
color: #333 !important;
text-align: center;
}

.h4-cont{
float: left;
width: 100%;
margin: 20px 0 28px 0;
padding: 0 0 0 20px;
font-size: 1.4rem;
border-left: 6px solid #14a872;
box-sizing: border-box;
color: #444;
font-weight: bold;
line-height: 1.4em;
}

.contact-mail{
position: absolute;
left: 0;
right: 0;
bottom: -50px;
width: 220px;
margin: 0 auto 10px auto;
padding: 7px;
border: 2px solid #ff9e80;
border-radius: 10px;
background: #fc6e42;
box-sizing: border-box;
color: #fff;
font-size: 1.5rem;
text-align: center;
}


}
/* ********************************************************************************************************************** TAB-768-899 */

/* PC : 768 px -  */
@media print, screen and (min-width: 768px) {

.gridContainer {
width:100%;
height:100%;
max-width:899px;
min-width:768px;
}

.section-box{
float: left;
width: 70%;
margin: 0 15%;
padding: 30px 0 0 0;
box-sizing: border-box;
}

.text_wrapper2{
padding: 20px 25px;
}

.kongetu ul img{
height: 205px;
}


}

/*----------ハンバーガーアイコン----------*/
.hamburger {
  position: absolute;
  display: block;
  width: 32px;
  height: 20px;
  top: 50%;
  right: 16px;
  margin-top: -10px;
  z-index: 2000;
  transition: all .4s;
  box-sizing: border-box;
}
.hamburger  span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  margin: 0 auto;
}
.hamburger  span:nth-of-type(1) {
  top: 0;
}
.hamburger  span:nth-of-type(2) {
  top: 9px;
}
.hamburger  span:nth-of-type(3) {
  bottom: 0;
}

.hamburger  span:nth-of-type(1) {
  -webkit-animation: menu-ber01 .75s forwards;
  animation: menu-ber01 .75s forwards;
}
.hamburger  span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
.hamburger  span:nth-of-type(3) {
  -webkit-animation: menu-ber02 .75s forwards;
  animation: menu-ber02 .75s forwards;
}

.active span:nth-of-type(1) {
  -webkit-animation: active-menu-ber01 .75s forwards;
  animation: active-menu-ber01 .75s forwards;
}
.active span:nth-of-type(2) {
  opacity: 0;
}
.active span:nth-of-type(3) {
  -webkit-animation: active-menu-ber03 .75s forwards;
  animation: active-menu-ber03 .75s forwards;
}


@-webkit-keyframes menu-ber01 {
  0% {
    -webkit-transform: translateY(8px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}


@-webkit-keyframes menu-ber02 {
  0% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber02 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}


@-webkit-keyframes active-menu-ber01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(10px) rotate(45deg);
  }
}


@keyframes active-menu-ber01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}


@-webkit-keyframes active-menu-ber03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
}


@keyframes active-menu-ber03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ********************************************************************************************************************** TAB-900-1023 */

/* PC : 900 px -  */
@media print, screen and (min-width: 900px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:1023px;
	min-width:900px;
}

.sp{
display: none;
}

.tab{
display: block;
}

.pc{
display: none;
}

.sp-br{
display: none;
}

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.w100p-w50p{
width: 48%;
margin: 0 1%;
}


/*----------------------------------------------------
	フッター
----------------------------------------------------*/

.search {
display: block;
position: fixed;
z-index: 200000;
top: auto;
bottom: 73px;
right: 105px;
width: 56px;
height: 56px;
cursor: pointer;
}

.search2{
display: block;
position: fixed;
border: 0;
top: auto;
bottom: 134px;
right: 105px;
width: 56px;
height: 56px;
cursor: pointer;
}

/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
.h1-txt{
margin: 0;
padding: 10px 0;
}

.h2-rec{
font-size: 0.9rem;
}

.h2-txt{
float: left;
width: 100%;
padding: 10px 0;
text-align: center;
line-height: 1.5em;
background: #806138;
color: #fff;
font-size: 0.9rem;
}

.h2-txt-c{


padding: 10px 0;
border-radius: 20px;
}

.mc-wrap{
float: left;
width: 100%;
height: auto;
background: #eee;
}

.section-box{
float: left;
width: 62%;
margin: 0 19%;
padding: 30px 0 0 0;
box-sizing: border-box;
}

/* ---
TOP
--- */

.free-shipping{
float: left;
width: 100%;
margin: 0 0 10px 0;
padding: 15px 10px;
border-top: 2px solid #7dce42;
border-bottom: 2px solid #7dce42;
box-sizing: border-box;
}

.free-shipping .img{
float: left;
width: 15%;
}

.free-shipping .txt{
float: left;
width: 85%;
}

.free-shipping .txt p{
float: left;
width: 100%;
margin: 5px 0 0 0;
padding: 0 0 0 20px;
box-sizing: border-box;
color: #473113;
font-size: 1rem;
font-weight: bold;
line-height: 1.75em;
}

.h2-free-shipping{
float: left;
width: 100%;
padding: 5px 0;
text-align: center;
line-height: 1.5em;
color: #d63c66;
font-size: 1.2rem;
}

.w100p-box{
float: left;
width: 100%;
margin: 0 0 0 0;
padding: 15px;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
}

.w50p-box{
width: 48%;
margin: 0 1% 0 1%;
}

.top-w33p-box a{
display: inline-block;
width: 100%;
margin: 10px 0 0 0;
padding: 14px 0 11px;
border: 2px solid #f79e75;
border-radius: 30px;
background: #fbf5ec;
box-sizing: border-box;
color: #222;
text-align: center;
}

.top-w20p-box,.top-w25p-box,.top-w33p-box{
width: 100%;
margin: 10px 0 0 0;
}

.top-w25p-box a{
display: inline-block;
float: left;
width: 100%;
margin: 10px 0 0 0;
padding: 14px 0 11px;
border: 2px solid #f79e75;
border-radius: 30px;
background: #fbf5ec;
box-sizing: border-box;
color: #222;
text-align: center;
line-height: 1;
}

.top-w33p-box a:hover,.top-w25p-box a:hover,.top-w20p-box a:hover{
background: #f78a57;
color: #fff;
text-decoration: none;
}

.top-rec-img{
float: left;
width: 10%;
}

.top-rec-btn{
float: left;
width: 90%;
}

.img-recommend img{
width: 60%;
height: auto;
margin: 0 20%;
}

.recommend-h2{
position: relative;
width: 100%;
height: 41px;
}

.recommend-h2 .img{
position: absolute;
left: 21px;
bottom: 0;
width: 48px;
}

.top-reco{
display: inline-block;
width: 46.5%;
margin: 0 1.5% 10px 1.5%;
background: #fff;
}

.txt8{
width: 65%;
margin: -25px 17.5% 40px 17.5% !important;
}

.txt8-2{
width: 80%;
margin: -25px 10% 0 10% !important;
}

.modal_content {
  align-self: flex-start;
  width: 38%;
  padding: 30px 30px 15px;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transform: translateY(-100%);
  transition: 0.5s;
}

.box-archives{
width: 74%;
margin: 15px 13% 0 13%;
}

.copy{
margin: 0 0 0 0;
}

}
/* ********************************************************************************************************************** PC-1025-1239 */

@media print, screen and (min-width: 1024px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:1239px;
	min-width:1024px;
}

.sp{
display: none;
}

.tab{
display: none;
}

.pc{
display: block;
}

.wrap{
font-size: 1rem;
}

.pc-nowrap{
flex-wrap: nowrap;
}

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.tab-menu{
display: none;
}

.main-menu{
position: fixed;
width: 230px;
height: 100vh;
background: #e6d7c3;
overflow: scroll;
overflow-x: hidden;
}

.logo{
float: left;
width: 230px;
height: 170px;
background: #bbb;
}

.gnav{
float: left;
width: 230px;
margin: 0;
padding: 10px 0 10px 0;
background: #dcbf99;
}

.gnav li a{
float: left;
width: 100%;
padding: 19px 15px;
border-bottom: 1px solid #7a5d35;
background: #a8885d;
box-sizing: border-box;
color: #fff;
font-size: 1.0rem;
}

.gnav li:first-child{
border-top: 1px solid #7a5d35;
}

.gnav li a:hover{
background: #d34f73;
text-decoration: none;
}

.gnav-sub{
float: left;
width: 100%;
margin: 20px 0 0 0;
}

.gnav-sub-a{
float: left;
width: 90%;
margin: 5px 5%;
padding: 15px 10px 12px 10px;
border: 1px solid #8f7755;
background: #a58a65;
box-sizing: border-box;
color: #fff !important;
font-size: 1.0rem;
text-align: center;
}

.gnav-sub-b{
float: left;
width: 42.5%;
margin: 5px 2.5% 0 5%;
padding: 15px 10px 12px 10px;
border: 1px solid #8f7755;
background: #a58a65;
box-sizing: border-box;
color: #fff !important;
text-align: center;
}

.gnav-sub-c{
float: left;
width: 42.5%;
margin: 5px 5% 0 2.5%;
padding: 15px 10px 12px 10px;
border: 1px solid #8f7755;
background: #a58a65;
box-sizing: border-box;
color: #fff !important;
text-align: center;
}

.gnav-sub-a:hover,
.gnav-sub-b:hover,
.gnav-sub-c:hover{
background: #d34f73;
text-decoration: none;
}


.bnr-menu-pc{
position: fixed;
right: 0;
width: 100px;
height: 100vh;
background: #e6d7c3;
overflow: scroll;
overflow-x: hidden;
}

.bnr-menu-pc li,.bnr-menu-pc li a{
float: left;
width: 100px;
height: auto;
}

.bnr-menu-sp{
display: none;
}

.a-book a,
.a-book a:hover,
.a-book a:visited{
width: 100%;
margin: 0;
padding: 10px 15px;
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.ul-footer a{
width: 45%;
margin: 0 2.5% 10px 2.5%;
font-size: 0.925rem;
}

.insta{
right: 105px;
bottom: 208px;
}

/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
.mc-cont{
margin: 0 auto;
}

.mc-wrap{
float: left;
width: calc(100% - 330px);
height: auto;
margin-left: 230px;
background: #eee;
}

.mc-fix{
position: fixed;
float: left;
width: calc(45% - 148px);
height: 100%;
margin: 0;
padding: 0;
background: #999;
}

.mc-fix img{
width: 100%;
height: 100%;
}

.mc-cont{
position: relative;
float: right;
width: 55%;
}

.section-box{
width: 82%;
margin: 0 9%;
}

.h2-free-shipping{
font-size: 1.41rem;
}

.check-check{
right: 110px;
width: 464px;
height:328px;
margin: 0 0;
padding: 50px 0 0 0;
}

.close-close-close{
width: 60%;
margin: 36px 20% 0 20%;
border-radius:5px;
}

.toppage{
right: 105px;
bottom: 10px;
}



.reco-img{
float: left;
width: 44%;
margin: 0 !important;
}

.reco-detail{
float: right;
width: 52%;
margin: 0 0 10px 2%;
}

.button-recommend3{
width: 90%;
margin: 0 5% !important;
}

.txt5{
width: 100%;
max-width: 100%;
}

/* 今月のおすすめ */
.kongetu{
width: 84%;
margin: 0 8%;
}


.kongetu ul img{
height: 125px;
}

.kongetu .reco-more a{
width: 68%;
margin: 0 16% 0 16%;
}

.news-box{
width: 70%;
margin: 0 15% 20px 15%;
}


/*----------------------------------------------------
吹き出し
----------------------------------------------------*/
.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 660px;
  margin: 50px auto;
  padding: 0 10px;
}

.cp_actab span{
width: 91%;
margin: 10px 0 0 9%;
}

/* Contact */
.table-inquiry{
width: 100%;
margin: 0;
}

.table-inquiry th{
float: none;
width: 42%;
padding: 16px 0;
}

.span1{
margin: 0 0 0 15px;
font-size: 0.95rem
}

.span2{
margin: 0 15px 0 0;
padding: 5px 5px 3px 5px;
border-radius: 6px;
background: #f46185;
color: #fff;
font-size: 0.8rem;
line-height: 1em;
}

.table-inquiry td{
display: table-cell;
float: none;
width: 58%;
padding: 18px 0;
border: 1px solid #888;
box-sizing: border-box;
}

.radio-box{
margin: 0 0 0 10%;
line-height: 1.25em;
}

.input90{
 width: 90%;
 margin: 0 5% 0 5%;
}

.input30{
 width: 30%;
 margin: 0 45% 0 5%;
}

.back2{

width: 48%;
margin: 40px 1% 40px 1%;
text-align: center;
}

.submit1{
float: left;
width: 100%;
margin: 40px 0 40px 0;
text-align: center;
}

.submit2{
display: table;
width: 48%;
margin: 40px 1% 40px 1%;
text-align: center;
}

.back-bb{
width: 98%;
height: 50px;
margin: 0 1%;
}

input[type=submit]{
width: 98%;
height: 44px;
margin: 0 1%;
}

.h3-accordion{
width: 562px;
padding: 12px 0 0 5px;
}

.txt-b30-b40{
margin: 0 0 40px 0;
}

.contact-contact{
width: 90%;
margin: 0 5% 30px 5%;
text-align: left;
}

.contact-contact2{
width: 90%;
margin: 0 5% 30px 5%;
}

.sp-mt20{
margin-top: 0;
}

.sp-pc-box{
display: block;
width: 620px;
margin: 35px auto;
line-height: 1.6em !important;
}

.sp-pc-table{
font-size: 1.0rem !important;
}

.sp-pc-table-table{
font-size: 1.0rem !important;
}

.sp-pc-h1{
margin-bottom: 25px;
padding-bottom: 15px;
font-size: 1.4rem;
}

.sp-pc-input{
width: 100%;
padding: 7px;
box-sizing: border-box;
}

.sp-pc-input2{
width: 80%;
padding: 7px;
box-sizing: border-box;
}

.sp-pc-bb-box{
width: 50%;
margin: 35px 25% 45px 25%;
}

.sp-pc-bbb-box{
width: 50%;
margin: 15px 25% 0 25%;
}

.sp-pc-bbcc-box{
width: 50%;
margin: 13px 25%;
}

.copy-box{
font-size: 0.88rem;
text-align: center;
}

.table01{
width: 50%;
margin: 0 25%;
}

.card-edit-table { 
width: 100%;
border-top: 1px solid #999;
border-collapse: collapse;
}
.card-edit-table td{ 
display: table-cell;
width: 55%;
padding: 5px 10px;
box-sizing: border-box;
}
.card-edit-table th.cmn_ttl { 
display: table-cell;
width: 45%;
padding:10px 18px; border: 1px solid #999; background-color:#fdfaf6; font-size: 15px;  
border-top: none;
box-sizing: border-box;
}
.card-edit-table th.data_ttl { 
display: table-cell;
padding:10px 18px; border: 1px solid #999; background-color:#fdfaf6; font-size: 15px;
}
.card-edit-table td { 
display: table-cell;
padding:16px 18px 3px 18px; border: 1px solid #999;
border-top: none;
}


}
/* ******************************************************************************************************* PC-1250-1299 */

@media print, screen and (min-width: 1250px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:1299px;
	min-width:1150px;
}

.section-box-top{
background-size: 60%;
background-position: 50% 10px;
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.ul-footer a{
width: 100%;
}

.footer-box{
padding: 40px 20px 0 20px;
box-sizing: border-box;
}

.top-w20p-box a{
border-radius: 20px;
}

.kongetu ul img{
height: 160px;
}

}
/* ********************************************************************************************************************** 1300-1399 */

/* PC : 1300 px -  */
@media print, screen and (min-width: 1300px) {
.gridContainer {
	width:100%;
	height:100%;
	max-width:1399px;
	min-width:1300px;
}
.sp{
display: none;
}

.pc{
display: block;
}

.section-box{
width: 76%;
margin: 0 12%;
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.footer-box{
padding: 40px 20px 0 20px;
box-sizing: border-box;
}

.top-bnr{
flex: 1 0 84%;
width: 84%;
margin: 0 8%;
}

.top-bnr2{
flex: 1 0 78%;
width: 90%;
margin: 0 5% 17px 5%;
}

.top-bnr img{
flex: 100%;
-ms-flex:0 1 auto;
align-self: flex-start;

}

.kongetu ul img{
height: 178px;
}

}

/* ********************************************************************************************************************** 1400-1520 */

/* PC : 1400 px -  */
@media print, screen and (min-width: 1400px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:100%;
	min-width:1400px;
}

.sp{
display: none;
}

.pc{
display: block;
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.footer-box{
padding: 40px 70px 0 70px;
box-sizing: border-box;
}


/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
.section-box{
width: 70%;
margin: 0 15%;
}

.w100p-box{
float: left;
width: 100%;
margin: 0 0 0 0;
padding: 15px;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
}

.w50p-box{
width: 48%;
margin: 0 1% 0 1%;
padding: 0;
background: #fff;
box-sizing: border-box;
}


.top-rec-img{
float: left;
width: 10%;
}

.top-rec-btn{
float: left;
width: 90%;
}

.top-w20p-box a{
border-radius: 30px;
}

.top-bnr{
flex: 1 0 78%;
width: 78%;
margin: 0 11%;
}

.top-bnr2{
flex: 1 0 72%;
width: 72%;
margin: 0 14% 17px 14%;
}

/* 今月のおすすめ */
.kongetu{
width: 70%;
margin: 0 15%;
}

.kongetu ul img{
height: 160px;
}

}
/* ********************************************************************************************************************** 1700- */

/* PC : 1500 px -  */
@media print, screen and (min-width: 1500px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:100%;
	min-width:1500px;
}

.sp{
display: none;
}

.pc{
display: block;
}

.top-bnr{
flex: 1 0 65%;
width: 74%;
margin: 0 13%;
}

.top-bnr2{
flex: 1 0 72%;
width: 72%;
margin: 0 14% 17px 14%;
}

.kongetu ul img{
height: 180px;
}

}
/* ********************************************************************************************************************** 1700- */

/* PC : 1700 px -  */
@media print, screen and (min-width: 1700px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:100%;
	min-width:1700px;
}

.sp{
display: none;
}

.pc{
display: block;
}

.top-bnr{
flex: 1 0 60%;
width: 60%;
margin: 0 20%;
}

.top-bnr2{
flex: 1 0 58%;
width: 58%;
margin: 0 21% 17px 21%;
}

.kongetu ul img{
height: 210px;
}

}
/* ********************************************************************************************************************** 1740- */

/* PC : 1740 px -  */
@media print, screen and (min-width: 1740px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:100%;
	min-width:1740px;
}

.sp{
display: none;
}

.pc{
display: block;
}

.top-bnr{
flex: 1 0 40%;
width: 40%;
margin: 0 1%;
}

.top-bnr2{
flex: 1 0 60%;
width: 60%;
margin: 0 20% 17px 20%;
}

.bnr-h{
width: 70% !important;
margin: 0 15% 16px 15% !important;
}

}