@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; }



/* clearfix */
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
  zoom: 1;
}


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

body {
  width: 100%;
  overflow-x: hidden;
  background: #fff;
  color: #000;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;/*12pxと同等*/
  line-height: 2.2rem;
	letter-spacing: 0.05rem; 
}


@media screen and (min-width: 769px) {
body {
line-height: 2.5rem; } }

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

@media screen and (min-width: 769px) {
  .pcNone {
    display: none !important; } }

@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 !important; } }


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

a:hover {
transition: all 0.4s;
color: #777; }

#wrap {
width: 100%; }

.ff_fp {
font-family: futura-pt, sans-serif; }


/* topArea 
--------------------------------------*/
@media screen and (min-width: 769px) {
#topArea {
width: 100%;
height: 100vh;
background-color:#B7AC97;
position: relative;
padding: 2% 0;
}

#topArea .inner_wrap {
width:75%;
margin:0 auto;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#top_visual {
width: 70%;
margin:0 auto;
}

h1 {
width: 60%;
height: auto;
margin:0 auto;
}

#main_Img {
max-width: 40%;
height: auto;
margin:5% auto;
}

#season_ttl {
position:absolute;
bottom: 50%;
right:27%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
width: 2%;
height: auto;
}


p#maintxt {
width: 55%;
margin: 0 auto;
font-size: clamp(10px, 1.5vw, 16px);
line-height: 2.5rem;
letter-spacing: 0.1rem;
text-align: center;
font-weight:500;
color:#ffffff;
}
}

@media screen and (max-width: 768px) {
#topArea {
width: 100%;
height: 100vh;
background-color:#B7AC97;
position: relative;
}

#topArea .inner_wrap {
width:100%;
height: auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#top_visual {
width: 95%;
margin:0 auto;
}


h1 {
width: 80%;
height: auto;
margin:0 auto 50px auto;

}

#main_Img {
width: 62%;
height: auto;
margin:0 auto;
}

#season_ttl {
position:absolute;
width: 3%;
height: auto;
bottom:50%;
right:12%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}


p#maintxt {
width: 70%;
margin: 30px auto 0 auto;
font-size: clamp(12px, 1.5vw, 14px);
line-height: 2.2rem;
letter-spacing: 0.10rem;
text-align: center;
font-weight:600;
color:#ffffff;
}
}


/* 1文字ずつ出現させるためのCSS */
.fadeTxt {
display: block;
opacity:0;
}

.fadeTxt span {
opacity: 0;
-webkit-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}


/* contents
--------------------------------------*/
@media screen and (max-width: 768px) {
#contents {
width: 100%;
height: auto;
margin: 0px auto;
background-color: #ffffff;
} }

@media screen and (min-width: 769px) {
#contents {
width: 100%;
margin: 0 auto;
background-color: #ffffff;
} }


/*--  #contents #read  --*/
#contents h2#read {
width: 94%;
height: auto;
margin: 50px auto -50px auto;
font-size: 1.3rem;
line-height: 3.2rem;
text-align: center;
letter-spacing: 0.1rem;
}

@media screen and (min-width: 769px) {
#contents h2#read {
width: 100%;
margin: 120px auto -150px auto;
font-size: 1.5rem;
line-height: 5.0rem;
text-align: center;
letter-spacing: 0.1rem;
}
}



@media screen and (min-width: 769px) {
#contents #st_area {
width: 60%;
height:auto;
margin: 0 auto;
padding:0;
}
	
#contents #st_area #st07 #img07_2 {
width: 57%;
height:auto;
margin: 30px auto 0 auto;
padding:0;
}

#contents #st_area .color_ttl {
position:relative;
width: 100%;
height:auto;
margin-top:300px;
}



#contents #st_area .color_ttl h3 {
width: 100%;
height:auto;
position:absolute;
top:-2%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
text-align: center;
font-size:7.0rem;
letter-spacing: 0.25rem;
font-weight: bold;
}

#contents #st_area .color_img {
width: 100%;
height:auto;
margin: 0 auto;
padding:0;
}

.credit {
font-family: futura-pt, sans-serif;
font-size: 1.6rem;
font-weight: 300;
font-style: normal;
line-height: 3.0rem;
letter-spacing: 0.1rem;
}
}


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

#contents #st_area .color_ttl {
position:relative;
width: 100%;
height:auto;
margin: 0 auto;
margin-top:140px;
}

#contents #st_area .color_ttl h3 {
width: 100%;
height:auto;
position:absolute;
top:-3%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
text-align: center;
font-size:4.5rem;
letter-spacing: 0.15rem;
font-weight: bold;
}

#contents #st_area .color_img {
width: 100%;
height:auto;
margin: 0 auto;
padding:0;
}
}


/*section .st_box
--------------------------------------*/
section .st_box {
margin:150px auto 0 auto;
}

section .st-wrap {
position: relative;
width: 57%;
height: auto;
margin: 0 auto;
}

/*ボタン部分（＋）--*/
section .st_box span.plus {
display: inline-block;
position: relative;
font-size:5rem;
font-weight: lighter;
}

/*section#4 ボタン部分（＋）--*/
#st04 .st_box span.plus {
color:#fff;
}

/*ボタン部分（ー）--*/
section .st_box span.minus {
display: inline-block;
position: relative;
font-size: 5rem;
color:#fff;
font-weight: lighter;
}


/*ボタン（開くと閉じる両指定）--*/
section .txt-other, section .txt-close {
position: absolute;
right:-10px;
bottom:60px;
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
cursor: pointer;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:10;
}


section .btn-credit .txt-close {
  opacity: 0;
}

section .btn-credit.open .txt-other {
  opacity: 0;
}

section .btn-credit.open .txt-close {
  opacity: 1;
}

section .btn-credit.open + .hidden-credit {
  opacity: 1;
  pointer-events: auto;
}


@media screen and (max-width: 768px) {
section .st_box {
margin:80px 0;
padding:0;
}

section .st-wrap {
width: calc(100% - 50px);
margin: 0 auto;
}
	
	
section#st07 .st_box {
margin:80px 0 0 0;
padding:0;
}

#contents #st_area #st07 #img07_2 {
width: calc(100% - 50px);
height:auto;
margin: 30px auto 0 auto;
padding:0;
}
/*ボタン部分（＋）--*/
section .st_box span.plus {
display: inline-block;
position: relative;
font-size:3rem;
font-weight: lighter;
}

/*section#4 ボタン部分（＋）--*/
#st04 .st_box span.plus {
color:#fff;
}

/*ボタン部分（ー）--*/
section .st_box span.minus {
display: inline-block;
position: relative;
font-size:3.6rem;
color:#fff;
font-weight: lighter;
}


/*ボタン（開くと閉じる両指定）--*/
section .txt-other {
position: absolute;
right:-2%;
bottom:9%;
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
cursor: pointer;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:10;
}

section .txt-close {
position: absolute;
right:0%;
bottom:9.5%;
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
cursor: pointer;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:10;
}
}

@media screen and (min-width: 751px) {
section .btn-credit:hover {
color: #777;
}
}


/*クレジットエリア*/
section .hidden-credit {
width: 100%;
height: 100%;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
pointer-events: none;
opacity: 0;
z-index:1;
}

section .credit {
width: 100%;
height:100%;
position: absolute;
top: 50%;
left: 50%;
background: rgba(0, 0, 0, 0.5);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #ffffff;
z-index:1;
}

section .credit ul {
width: 90%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

@media screen and (min-width: 751px) {
section .credit ul li {
width: 100%;
height:100%;
margin-bottom:3%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: futura-pt, sans-serif;
font-size:1.5rem;
line-height: 1.0rem;
text-align: left;
letter-spacing: 0.1rem;
}

section .credit ul li .item_img {
width: 30%;
width: 30%;
margin-right: 4%;
}

section .credit ul li .credit_link a {
display:block;
border-bottom:1px solid #ffffff;
padding-top: 15px;
padding-bottom: 5px;
color: #ffffff;
 transition: 0.8s
}


section .credit ul li .credit_link a:hover {
   opacity:0.5;
}

section .credit ul li .credit_link a span {
padding-left: 25px;
}
}

@media screen and (max-width: 750px) {
section .credit ul li {
width: 100%;
height:auto;
margin-bottom:3%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: futura-pt, sans-serif;
font-size:1.2rem;
line-height: 1.0rem;
text-align: left;
letter-spacing: 0.1rem;
}

section .credit ul li .item_img {
width: 30%;
width: 30%;
margin-right: 4%;
}

section .credit ul li .credit_link a {
display:block;
border-bottom:1px solid #ffffff;
padding-top: 15px;
padding-bottom: 5px;
color: #ffffff;
 transition: 0.8s
}


section .credit ul li .credit_link a:hover {
   opacity:0.5;
}

section .credit ul li .credit_link a span {
padding-left: 15px;
}
}



/*#st05(商品リンク６点)*/
@media screen and (min-width: 751px) {
section#st05 .credit ul {
width: 65%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
}

@media screen and (max-width: 750px) {
section#st05 .credit ul {
width: 80%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

section#st05.credit ul li {
width: 100%;
height:auto;
margin-bottom:3%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: futura-pt, sans-serif;
font-size:1.6rem;
line-height: 1.5rem;
text-align: left;
letter-spacing: 0.1rem;
}

section#st05 .credit ul li .item_img {
width: 24%;
width: 24%;
margin-right: 4%;
}
}
		
		
/*#st02(商品リンク5点)*/
@media screen and (min-width: 751px) {
section#st02 .credit ul {
max-width: 75%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

section#st02 .credit ul li .item_img {
max-width: 28%;
max-width: 28%;
margin-right: 4%;
}
}

@media screen and (max-width: 750px) {
section#st02 .credit ul {
width: 86%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

section#st02.credit ul li {
width: 100%;
height:auto;
margin-bottom:3%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: futura-pt, sans-serif;
font-size:1.6rem;
line-height: 1.5rem;
text-align: left;
letter-spacing: 0.1rem;
}

section#st02 .credit ul li .item_img {
width: 28%;
width: 28%;
margin-right: 4%;
}
}
		
		
		
		
		
		
		
/*この指定確認する*/
section .credit a[href=""] {
  pointer-events: none;
  display: block;
}


/* endArea 
--------------------------------------*/
footer {
transition: all .4s; 
}

footer a:hover {
opacity: .6; }

footer #sns {
display: flex;
justify-content: space-between;
margin: 50px auto;
width: 55%;
}

footer #sns img {
width: 30px;
}

footer #logo {
width: 120px;
margin: 50px auto 30px;
}

footer #logo:hover {
filter: alpha(opacity=60);
/* IE 6と7*/
-ms-filter: "alpha(opacity=60)";
/* IE 8と9 */
-moz-opacity: 0.6;
/* Firefox , Netscape */
-khtml-opacity: 0.6;
/* Safari 1系 */
opacity: 0.6;
zoom: 1;
/*IE*/
transition: all 0.4s;
}

footer #copyright {
padding-bottom: 40px;
text-align: center;
font-size: 1.4rem;
}
		
@media screen and (min-width: 769px) {
footer #logo {
width: 150px; }

footer #copyright {
padding-bottom: 100px;
text-align: center;
font-size: 1.4rem; }

footer #sns {
margin: 300px auto 100px auto;
width: 20%; }

footer #sns img {
width: 40px;
}
}