body {
background: url("../img/common/bg_pc.jpg") top left no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
img {
width: 100%;
height: auto;
}

/*maincontents*/
#maincontents {
	width: 88%;
	margin: 100px auto 60px;
	background-color: #FFF;
	max-width: 1920px;
	position: relative;
}
#maincontents .contents_inner {
width: 87.5%;
max-width:1050px;
margin: 0 auto;
padding-bottom: 80px;
}


/*philosophy*/
#maincontents .philosophy {
margin: 0 auto 0;
padding: 140px 0 30px;
text-align: center;
}
#maincontents .philosophy p {
font-size: 14px;
line-height: 2.14;
color: #333;
}


/*search*/
#maincontents .search_wrapper {
width: 100%;
margin-bottom: 50px;
}
#maincontents .search_wrapper h2 {
display: none;
}
#maincontents .search_wrapper h2 a {
width: 100%;
padding: 15px;
background: #D8D8D8;
display: block;
text-align: center;
position: relative;
}
#maincontents .search_wrapper h2 a img {
height: 20px !important;
width: auto !important;
}
#maincontents .search_wrapper h2 a::after {
content: "";
display: block;
width: 10px;
height: 10px;
background: url("../img/common/ico_minus.svg") center center no-repeat;
background-size: 10px 10px;
position: absolute;
top: 50%;
right: 15px;
transform: translate(0,-50%);
}
#maincontents .search_length {
background: #D8D8D8;
padding: 15px;
text-align: center;
margin: 4px auto;
}
#maincontents .search_length h3 {
font-size: 16px;
color: #333;
margin: 10px auto;
}
#maincontents .search_length ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
#maincontents .search_length ul li {
width: 20%;
}
#maincontents .search_length ul li label {
font-size: 14px;
color: #333;
display: block;
background: #FFF;
border-radius: 35px;
width: 95%;
margin: 10px auto;
padding: 10px;
transition: 0.5s cubic-bezier(0,.6,.6,1);
}
#maincontents .search_length ul li label:hover {
opacity: 0.7;
background: #80BABD;
color: #FFF !important;
}
#maincontents .search_length ul li.on label {
background: #80BABD;
color: #FFF !important;
}
#maincontents .search_product {
text-align: center;
margin: 4px auto;
border: 1px solid #D8D8D8;
}
#maincontents .search_product h3 {
font-size: 16px;
color: #333;
background: #D8D8D8;
padding: 15px;
}
#maincontents .search_product ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin: 15px;
}
#maincontents .search_product li {
margin: 0 4px;
}
#maincontents .search_product li label {
transition: 0.5s cubic-bezier(0,.6,.6,1);
display: block;
}
#maincontents .search_product li label:hover {
opacity: 0.7;
}
#maincontents .search_product li br.show_pc {
display: block !important;
}
#maincontents .search_product li .show_pc {
display: inline !important;
}
#maincontents .search_product li .img {
margin-bottom: 5px;
}
#maincontents .search_product li p {
font-size: 12px;
line-height: 1.2;
position: relative;
z-index: 10;
letter-spacing: -0.02em;
color: #333;
}
#maincontents .search_product li label span {
position: relative;
}
#maincontents .search_product li label span::after {
content: "";
display: inline;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 5px;
border-bottom: 4px solid #80BABD;
z-index: -1;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.5s cubic-bezier(0,.6,.6,1);
}
#maincontents .search_product li.on span::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


/*thumb_area*/
#maincontents .thumb_area ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
text-align: left;
width: 101%;
margin: 0 -0.5%
}
#maincontents .thumb_area ul li {
width: 24%;
margin: 0 0.5% 30px 0.5%;
position: relative;
}
#maincontents .thumb_area ul li.noitem {
display: none !important;
}
#maincontents .thumb_area ul li a {
transition: 0.5s cubic-bezier(0,.6,.6,1);
display: block;
}
#maincontents .thumb_area ul li a:hover {
opacity: 0.7;
}
#maincontents .thumb_area ul li:first-child ,
#maincontents .thumb_area ul li:nth-child(4n+1) {
}
#maincontents .thumb_area ul li:nth-child(4n) {
}
#maincontents .thumb_area h2 {
margin-top: -1em;
font-size: 16px;
line-height: 2.125;
color: #333;
}
#maincontents .thumb_area .style_bob h2 span {
background: url("../img/common/stylebg01bob.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 8px;
}
#maincontents .thumb_area .style_short h2 span {
background: url("../img/common/stylebg02short.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 8px;
}
#maincontents .thumb_area .style_long h2 span {
background: url("../img/common/stylebg03long.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 8px;
}
#maincontents .thumb_area .style_medium h2 span {
background: url("../img/common/stylebg04medium.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 8px;
}

#maincontents .is-active {
animation: 0.5s cubic-bezier(0.3,0.4,0.4,1.3) zoom-in;
}
#maincontents .is-hide {
}
@keyframes zoom-in {
  0% {
   transform: scale(0.5) translate(0,20px);
  } 
  100% {
    transform: scale(1) translate(0,0);
  }
}


@media only screen and (max-width: 1024px) {
/*search*/
#maincontents .search_wrapper {
width: 100%;
margin-bottom: 50px;
}
#maincontents .search_length ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: flex-start;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#maincontents .search_length ul li {
width: calc(100%/3);
}
#maincontents .search_length ul li label {
font-size: 12px;
width: 94%;
margin: 6px auto;
}
#maincontents .search_product ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
-webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
text-align: center;
margin: 10px;
}
#maincontents .search_product li {
width: 19%;
margin: 0 0.5% 5px;
}
#maincontents .search_product li p {
font-size: 11px;
letter-spacing:-0.02em;
}
#maincontents .search_product li .img {
max-width: 70px;
margin: 0 auto 3px;
}
#maincontents .thumb_area ul li {
width: 32%;
margin: 0 0.66% 20px 0.66%;
position: relative;
}
#maincontents .thumb_area h2 {
margin-top: -1em;
font-size: 14px;
line-height: 2;
}
#maincontents .thumb_area .style_bob h2 span {
padding: 6px;
}
#maincontents .thumb_area .style_short h2 span {
padding: 6px;
}
#maincontents .thumb_area .style_long h2 span {
padding: 6px;
}
#maincontents .thumb_area .style_medium h2 span {
padding: 6px;
}
}

@media only screen and (max-width: 768px) {
body {
background: url("../img/common/bg_sp.jpg") top left no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}


/*maincontents*/
#maincontents {
	width: 88%;
	margin: 50px auto 30px;
}
#maincontents .contents_inner {
width: 87.5%;
max-width:1050px;
margin: 0 auto;
padding-bottom: 30px;
}


/*philosophy*/
#maincontents .philosophy {
margin: 0 auto 0;
padding: 85px 0 30px;
text-align: left;
}
#maincontents .philosophy p {
font-size: 11px;
line-height: 1.8;
}


/*search*/
#maincontents .search_wrapper {
width: 100%;
margin-bottom: 25px;
}
#maincontents .search_wrapper h2 {
display: block;
}
#maincontents .search_wrapper h2 a {
width: 100%;
padding: 15px;
background: #D8D8D8;
display: block;
text-align: center;
position: relative;
}
#maincontents .search_wrapper h2 a img {
height: 20px !important;
width: auto !important;
}
#maincontents .search_wrapper h2 a::after {
content: "";
display: block;
width: 10px;
height: 10px;
background: url("../img/common/ico_plus.svg") center center no-repeat;
background-size: 10px 10px;
position: absolute;
top: 50%;
right: 15px;
transform: translate(0,-50%);
}
#maincontents .search_wrapper h2.on a::after {
background: url("../img/common/ico_minus.svg") !Important;
}

#maincontents .search_wrapper #search {
display: none;
}
#maincontents .search_wrapper.on #search {
}
#maincontents .search_length {
background: #D8D8D8;
padding: 5px 12px 12px;
text-align: center;
margin: 2px auto;
}
#maincontents .search_length h3 {
font-size: 12px;
color: #333;
margin: 10px auto;
}
#maincontents .search_length ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#maincontents .search_length ul li {
width: 48%;
}
#maincontents .search_length ul li label {
font-size: 11px;
border-radius: 35px;
width: 100%;
margin: 5px 0;
padding: 10px;
}
#maincontents .search_product {
text-align: center;
margin: 2px auto;
border: 1px solid #D8D8D8;
}
#maincontents .search_product h3 {
font-size: 12px;
color: #333;
background: #D8D8D8;
padding: 10px;
}
#maincontents .search_product ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
-webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
text-align: center;
margin: 10px;
}
#maincontents .search_product li {
width: 24%;
margin: 0 0.5% 5px;
}
#maincontents .search_product li .img {
max-width: 70px;
margin: 0 auto 3px;
}
#maincontents .search_product li p {
font-size: 10px;
letter-spacing: -0.05em;
line-height: 1.15;
position: relative;
z-index: 10;
transform: scale(0.9);
}
#maincontents .search_product li label span {
position: relative;
}
#maincontents .search_product li br.show_pc {
display: none !important;
}
#maincontents .search_product li .show_pc {
display: none !important;
}
#maincontents .search_product li br.show_sp {
display: block !important;
}
#maincontents .search_product li .show_sp {
display: inline !important;
}
#maincontents .search_product li label span::after {
content: "";
display: inline;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 5px;
border-bottom: 3px solid #80BABD;
z-index: -1;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.5s cubic-bezier(0,.6,.6,1);
}
#maincontents .search_product li.on span::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


/*thumb_area*/
#maincontents .thumb_area ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
text-align: left;
width: 101%;
margin: 0 -0.5%
}
#maincontents .thumb_area ul li {
width: 48%;
margin: 0 1% 10px 1%;
position: relative;
}
#maincontents .thumb_area h2 {
margin-top: -1.5em;
font-size: 11px;
line-height: 2.125;
letter-spacing: -0.02em;
}
#maincontents .thumb_area .style_bob h2 span {
background: url("../img/common/stylebg01bob.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 5px;
}
#maincontents .thumb_area .style_short h2 span {
background: url("../img/common/stylebg02short.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 5px;
}
#maincontents .thumb_area .style_long h2 span {
background: url("../img/common/stylebg03long.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 5px;
}
#maincontents .thumb_area .style_medium h2 span {
background: url("../img/common/stylebg04medium.jpg") 0 0 no-repeat;
background-size: 260px auto;
padding: 5px;
}
}