@charset "UTF-8";
/* 点滅 */
/* ローディングアニメ */
/* スクロールアニメ */
/* ページトップボタン */
/*リセット
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*メディアクエリー
---------------------------------------------*/
/*変数
---------------------------------------------*/
/* 全体設定
---------------------------------------------*/
html {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 62.5%;
}

body {
background-image: none;
width: 100%;
overflow-x: hidden;
width: 100%;
height: 100%;
font-family: "Noto sans JP", sans-serif;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
font-size:2.4rem;/* 24px*/
line-height: 1.8;
letter-spacing: 0.25rem;
font-weight: 500;
color: #333333;
}

@media screen and (max-width: 768px) {
body {
font-size:1.4rem;/* 14px*/
letter-spacing: 0.05rem;
line-height: 2.2rem;
}
}

img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 769px) {
.pcNone {
display: none;
  }
}
@media screen and (max-width: 768px) {
.pcNone {
display: block;
}
}

@media screen and (min-width: 769px) {
.spNone {
 display: block;
}
}
@media screen and (max-width: 768px) {
.spNone {
display: none;
}
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

/* link setting
--------------------------------------*/
a {
  color: #000;
	text-decoration: none;
}

/* マウスオーバーで画像拡大 */
.mouseover_zoom {
overflow: visible;
width: 100%;
height: 100%;
}
.mouseover_zoom img {
display: block;
transition-duration: 0.5s;
}
.mouseover_zoom img:hover {
transform: scale(1.1,1.1);
transition-duration: 0.5s;
}

.mouseover_zoom2 {
overflow: visible;
width: 100%;
height: 100%;
}
.mouseover_zoom2 img {
display: block;
transition-duration: 0.5s;
}
.mouseover_zoom2 img:hover {
transform: scale(1.2,1.2);
transition-duration: 0.5s;
}


/* return_btn
--------------------------------------*/
.page_top_btn {
  display: block;
  text-align: center;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.page_top_btn:hover {
  background: #adadad;
}
.page_top_btn p,
.page_top_btn p span {
display: inline-block;
-webkit-box-sizing: border-box;
 box-sizing: border-box;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.page_top_btn p {
position: fixed;
 z-index: 9999;
right: 20px;
 bottom: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
  width: 40px;
  height: 40px;
  font-size: 4rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media screen and (max-width: 768px) {
  .page_top_btn p {
    right: 10px;
    bottom: 10px;
    font-size: 3rem;
  }
}
.page_top_btn p:hover {
  opacity: 0.8;
}
.page_top_btn p:hover span {
  background: #adadad;
}
.page_top_btn p span {
  position: absolute;
  height: 1px;
  background: #fff;
}
.page_top_btn p span:nth-of-type(1) {
top: 50%;
-webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
  width: 19px;
  left: 3px;
}
.page_top_btn p span:nth-of-type(2) {
  top: 50%;
  -webkit-transform: rotate(45deg);
transform: rotate(45deg);
  width: 21px;
  right: 3px;
}


/* topArea
--------------------------------------*/
#topArea {
  background-image: url(../images/main.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 100%;
  padding-top: calc( 800/ 1280 * 100%);
  /* calc(画像高さ ÷ 画像横幅 × 100%) */
}

h1 {
display:none;
}

/* fontサイズ・color指定 */
#contents .c_r {
color: #ef3333;
}
#contents .c_b {
color: #000000;
}

@media screen and (max-width: 768px) {
#contents .fS {
font-size:1.4rem;/* 14px*/
line-height: 1.8;
margin:0 auto;
text-align: left;
}

#contents .fM {
font-size:1.6rem;/* 16px*/
letter-spacing: 0.15rem;
margin:0 auto;
font-weight:700;
}

#contents .fL {
font-size:2.3rem;/* 23px*/
letter-spacing: 0.15rem;
margin:0 auto;
font-weight:700;
}
}

@media screen and (min-width: 769px) {
#contents .fS {
font-size:1.8rem;/* 18px*/
}

#contents .fM {
font-size:3.0rem;/* 30px*/
}

#contents .fL {
font-size:4.5rem;/* 45px*/
line-height: 1.6;
}
}

/* #contents
--------------------------------------*/
@media screen and (min-width: 769px) {
#contents {
width: 100%;
background-image: url(../images/pattern.jpg);
background-size: contain;
background-repeat: repeat-y;
background-position: top center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:100px 0 1px 0;
}

#contents_inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

@media screen and (max-width: 768px) {
#contents {
width: 100%;
background-image: url(../images/pattern.jpg);
background-size: contain;
background-repeat: repeat-y;
background-position: top center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:50px 0 1px 0;
}

#contents_inner {
width: 90%;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

@media screen and (min-width: 769px) {
#contents #read {
width:100%;
height:auto;
margin-bottom: 80px;
text-align: center;
}

#contents #read h2 {
width:815px;
height:auto;
margin:0 auto 50px auto;
}

#contents #read p {
width:870px;
height:auto;
margin:0 auto;
margin-bottom:100px;
}

#contents #read h3 {
margin-bottom:84px;
font-size:3.0rem;/* 30px*/
line-height: 1.6;
}
}

@media screen and (max-width: 768px) {
#contents #read {
width:100%;
height:auto;
margin-bottom: 60px;
text-align: center;
}

#contents #read h2 {
font-size:1.9rem;/* 19px*/
line-height: 1.6;
margin-bottom: 20px;
font-weight:700;
}

#contents #read h2 br {
display:none;
}

#contents #read p {
text-align:left;
font-size:1.5rem;/* 15px*/
font-weight: 500;
line-height: 2.0;
margin-bottom:40px;
}

#contents #read p br {
display:none;
}

#contents #read h3 {
font-size:1.6rem;/* 16px*/
line-height: 1.8;
letter-spacing: 0.15rem;
font-weight:700;
margin-bottom:40px;
}
}



/* prof
--------------------------------------*/
@media screen and (min-width: 769px) {
#contents #prof {
position:relative;
width: 100%;
height:auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:100px auto 130px;
padding:40px 50px;
border: 2px solid #333333;
border-radius:10px 10px 10px 10px;
display: -webkit-box; /* (※flexbox※) display:flex;*/
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;/* flex-flow:row wrap;*/
-webkit-box-direction:reverse;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

#contents #prof .prof_inner {
width:58%;
height:auto;
}

#contents #prof .prof_name {
width: 50%;
height: auto;
}

#contents #prof .prof_txt {
width: 100%;
height: auto;
text-align: left;
margin-top:40px;
font-size:1.5rem;/* 15px*/
line-height: 1.8;
}

#contents #prof .prof_img {
position:absolute;
bottom:-40px;
right:40px;
max-width: 30%;
height: auto;
}
}

@media screen and (max-width: 768px) {
#contents #prof {
width: 90%;
height:auto;
padding:10% 5%;
margin:0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid #333333;
border-radius:10px 10px 10px 10px;
display: -webkit-box; /* (※flexbox※) display:flex;*/
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

#contents #prof .prof_inner {
width:100%;
height:auto;
margin:0 auto;
order:2;
}

#contents #prof .prof_name {
width: 73%;
height: auto;
margin:2% auto 10%;
}

#contents #prof .prof_txt {
width: 100%;
height: auto;
text-align: left;
margin:0 auto;
font-size:1.4rem;/* 14px*/
line-height: 1.9;
letter-spacing: 0.2rem;
}

#contents #prof .prof_img {
width: 65%;
height: auto;
margin:0 auto;
order:1;
}
}


/* item_area
--------------------------------------*/
@media screen and (min-width: 769px) {
#contents #item_area {
width:100%;
height:auto;
margin:0 auto;
overflow:hidden;
}

#contents #item_area #ttl_item {
width: 100%;
height:150px;
margin:0 auto;
background: no-repeat center/30% url("../images/ttl_item.png");
display:table;
text-align:center;
}

#contents #item_area #ttl_item h4 {
width: 100%;
height:150px;
display:table-cell;
vertical-align:middle;
}
	
	
/*--- st_area (PC)---*/
#contents #item_area #st_area {
width: 100%;
height:auto;
display: -webkit-box; /* (※flexbox※) display:flex;*/
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;/* flex-flow:row wrap;*/
-webkit-box-direction:reverse;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-pack: justify;/* justify-content: space-between;*/
-ms-flex-pack: justify;
justify-content: space-between;
margin-top:100px;
}

#contents #st_area .st_main	{
width:48%;
height:auto;
}

#contents #st_area .st_sub {
width:52%;
height:auto;
}

#contents #st_area .st_sub ul li {
width:44%;
height:auto;
margin-left:6%;
margin-bottom:6%;
float:left;
}

#contents #st_area .st_credit {
font-size:2.8rem;/* 30px*/
line-height: 1.8;
margin: 50px 0 30px;
	}
	
	#contents #st_area .st_credit span.price {
font-weight:700;
	}

#contents #st_area .st_txt {
margin: 0px auto;
font-size:1.8rem;/* 18px*/
line-height: 1.8;
}

/*--- itemlist (PC)---*/
#contents #item_area ul.itemlist {
width: 100%;
height:auto;
margin:100px auto 0;
display: -webkit-box; /* (※flexbox※) display:flex;*/
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;/* flex-flow:row wrap;*/
-webkit-box-direction:reverse;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-pack: justify;/* justify-content: space-between;*/
-ms-flex-pack: justify;
justify-content: space-between;
}

#contents #item_area ul.itemlist li {
width: 30.6%;
height:auto;
}

#contents #item_area ul.itemlist li .item_img {
width: 100%;
height:auto;
margin:0 auto;
}

#contents #item_area ul.itemlist li .item_name {
width: 100%;
min-height:70px;
text-align:center;
margin:30px auto 0;
font-size:1.8rem;/* 18px*/
}

#contents #item_area ul.itemlist li .price {
width: 100%;
height:auto;
text-align:center;
margin-top:-10px;
font-weight:700;
}

#contents #item_area ul.itemlist li .buy_btn {
width: 47%;
height:auto;
margin:20px auto 100px;
}
}


@media screen and (max-width: 768px) {
#contents #item_area {
width:100%;
height:auto;
margin:0 auto;
overflow:hidden;
}

#contents #item_area #ttl_item {
width: 100%;
height:150px;
margin:40px auto 0;
background: no-repeat center/45% url("../images/ttl_item.png");
display:table;
text-align:center;
}

#contents #item_area #ttl_item h4 {
width: 100%;
height:150px;
display:table-cell;
vertical-align:middle;
	}
	
#contents #item_area #ttl_item h4 br {
display:none;
}		
	
	
/*--- st_area(SP) ---*/
#contents #item_area #st_area {
width: 100%;
height:auto;
margin:0 auto;
}

#contents #st_area .st_sub ul {
width:100%;
height:auto;
display: -webkit-box; /* (※flexbox※) display:flex;*/
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;/* flex-flow:row wrap;*/
-webkit-box-direction:reverse;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-pack: justify;/* justify-content: space-between;*/
-ms-flex-pack: justify;
justify-content: space-between;
}


#contents #st_area .st_sub ul li {
width:47.5%;
height:auto;
margin-top:4%;
}

#contents #st_area .st_credit {
font-size:1.6rem;/* 16px*/
line-height: 1.8;
letter-spacing: 0.15rem;
font-weight:700;
margin-top: 30px;
}
	
#contents #st_area .st_credit span.price {
font-size:1.6rem;/* 16px*/
line-height: 1.6;
letter-spacing: 0.15rem;
font-weight:700;
}
	
#contents #st_area .st_txt {
margin: 20px auto 0;
font-size:1.4rem;/* 14px*/
line-height: 2.1;
}
	
/*--- itemlist (SP)---*/
#contents #item_area ul.itemlist {
width: 100%;
height:auto;
margin:70px auto 0px;
display: -webkit-box; /* (※flexbox※) display:flex;*/
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;/* flex-flow:row wrap;*/
-webkit-box-direction:reverse;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-pack: justify;/* justify-content: space-between;*/
-ms-flex-pack: justify;
justify-content: space-between;
}

#contents #item_area ul.itemlist li {
width: 47.5%;
height:auto;
}

#contents #item_area ul.itemlist li .item_img {
width: 100%;
height:auto;
margin:0 auto;
}

#contents #item_area ul.itemlist li .item_name {
width: 100%;
min-height:45px;
text-align:center;
margin:15px auto 10px;
font-size:1.6rem;/* 16px*/
		line-height: 1.6;

}

#contents #item_area ul.itemlist li .price {
width: 100%;
height:auto;
text-align:center;
margin-top:-10px;
font-weight:700;
}

#contents #item_area ul.itemlist li .buy_btn {
width: 68%;
height:auto;
margin:15px auto 60px;
}
}


/* novrlty
--------------------------------------*/
@media screen and (min-width: 769px) {
#contents #nov_ttl {
width: 100%;
height:150px;
margin:60px auto 0;
background: no-repeat center/60% url("../images/ttl_nov.png");
display:table;
text-align:center;
}

#contents #nov_ttl h4 {
width: 100%;
height:150px;
display:table-cell;
vertical-align:middle;
}

#contents .novelty_img {
margin:100px auto 30px;
}
	
#contents p.novelty_txt {
width:100%;
height:auto;
margin:50px auto 80px;
font-size:1.4rem;/* 14px*/
line-height: 1.8;
text-align: left;
}
}

@media screen and (max-width: 768px) {
#contents #nov_ttl {
width: 100%;
height:150px;
margin:0 auto;
background: no-repeat center/70% url("../images/ttl_nov.png");
display:table;
text-align:center;
}

#contents #nov_ttl h4 {
width: 100%;
height:150px;
display:table-cell;
vertical-align:middle;
}

#contents #nov_ttl h4 br {
display:none;
} 


#contents p.novelty_txt {
width:100%;
height:auto;
margin:20px auto 0;
font-size:1.4rem;/* 14px*/
line-height: 2.1;
text-align: left;
}
}

/* footer 
--------------------------------------*/
@media screen and (min-width: 769px) {
footer {
text-align: center;
margin: 0 auto;
padding:0;
}
footer #copyright img {
width: 200px;
height: auto;
margin: 90px auto 100px;
}
}

@media screen and (max-width: 768px) {
footer {
text-align: center;
margin: 60px auto 0;
}
footer #copyright img {
width: 40%;
height: auto;
margin: 60px auto 60px;
}
}

/*-- f_link ボタン動作 --*/
@media screen and (min-width: 769px) {
.f_link  {
width: 100%;
height: auto;
padding: 0;
margin:0 auto 30px;
}

.f_link  a {
display: block;
text-decoration: none;
}

.f_link .Btn {
position: relative;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
width: 800px;
height: auto;
line-height: 80px;
letter-spacing:1.6;
display: flex;
text-align: center;
background: #fff;
font-size: 18px;
 font-weight:400;
}

.f_link .Btn-Text {
width: 100%;
height: 100%;
color: #000000;
z-index: 10;
}

.f_link .Btn-Text:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0;
display: block;
background: #ffff00;
z-index: -1;
transition: .3s;
}

.f_link .Btn-Text:hover {
color: #000;
}

.f_link .Btn-Text:hover:before {
width: 100%;
}
}

@media screen and (max-width: 768px) {
.f_link {
width: 100%;
height: auto;
padding: 0;
margin:30px auto;
}

.f_link a {
display: block;
text-decoration: none;
}

.f_link .Btn {
position: relative;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
width: 80%;
height: auto;
line-height: 65px;
letter-spacing:1.6;
display: flex;
text-align: center;
background: #fff;
font-size: 15px;
font-weight:400;
}

.f_link .Btn-Text {
width: 100%;
height: 100%;
color: #000000;
z-index: 10;
}

.f_link .Btn-Text:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0;
display: block;
background: #ffff00;
z-index: -1;
transition: .3s;
}

.f_link .Btn-Text:hover {
color: #000;
}

.f_link .Btn-Text:hover:before {
width: 100%;
}
}

/*-- page-top ボタン動作 --*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 13px;
}

#page-top a {
  background: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  color: #fff;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 0px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

#page-top a:hover {
  text-decoration: none;
  background: black;
}

.st_credit a{
  text-decoration: underline;
  margin-left: 15px;
}