@charset "UTF-8";

/* ヘッダー - client, categoryページ共通、下線の設定 */

header {
border-bottom: 1px solid lightgrey;
}

/* コンテナ：clientページ用 */

main {
max-width: 1000px;
}

.wrap-2 {
padding: 0 30px;
}


/* クロスフェードのスライド用 ★★画像３枚★★（スライド設置2つまで） */

.slide, .slide-2 {
position: relative;
margin: 0 auto;
}
.slide img, .slide-2 img {
opacity: 0
}
.slide img, .slide-2 img {
position: absolute;
top: 0;
left: 0
}

.slide img, .slide-2 img {
-webkit-animation: anime 21s infinite;
animation: anime 21s infinite;
}

.slide img:nth-of-type(2) {
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.slide img:nth-of-type(3) {
-webkit-animation-delay: 14s;
animation-delay: 14s;
}


.slide-2 img:nth-of-type(2) {
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.slide-2 img:nth-of-type(3) {
-webkit-animation-delay: 14s;
animation-delay: 14s;
}

@keyframes anime {
0%{opacity: 0;}
16.7%{opacity: 1;}
33.3%{opacity: 1;}
50%{opacity: 0;}
100% {opacity: 0}
}



/* head 1 - clientページ用 */

.h1-sec {
padding: 0px;
text-align: center;
margin: 13px auto 30px;
}
.h1-sec h1 {
display: inline-block;
margin-bottom: 13px;
padding: 0 30px;
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 0.09em;
line-height: 1.45;
}

.h1-jp-place,
.h1-jp-place a {
font-weight: 300;
line-height: 1.7;
font-size: 13px;
font-size: 1.3rem;
padding: 6px 5px;
margin: 0 45px;
border-top: dotted 1px silver;
border-bottom: dotted 1px silver;
display: inline-block;
}
.it-luogo {
color: silver;
font-size: 14px;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.06em;
}


/* head 2 - clientページ用 */

.top-sec {
margin-bottom: 75px;
}

.h2-wrap {
margin: auto;
padding: 39px 30px 45px;
text-align: center
}
.top-sec h2 {
font-weight: 300;
font-size: 17px;
font-size: 1.7rem;
letter-spacing: 0.07em;
font-family: 'Noto Serif JP', serif;
line-height: 1.9;
}
.h2-it {
margin-top: 32px;
font-size: 14px;
font-size: 1.4rem;
font-weight: 200;
color: silver;
line-height: 1.7;
letter-spacing: 0.06em;
text-shadow: 0 0 1px silver;
}


/* head 3 - clientページ用 */

.main-text h3 {
text-shadow: 0 0 1px silver;
padding: 2px 16px 10px 2px;
margin-bottom: 20px;
margin-right: 15px;
border-bottom: dotted 1px silver;
letter-spacing: 0.11em;
font-size: 17px;
font-size: 1.7rem;
line-height: 1.7;
font-weight: 400;
display: inline-block;
}
.h3-it {
font-size: 19px;
font-size: 1.9rem;
font-weight: 100;
letter-spacing: 0.14em;
}


/* main-textとtext-group - clientページ用 */

.main-text {
margin-bottom: 45px;
}

.text-group {
margin-top: 20px;
}


/* imaAndPara（main-textの写真と文のboxにつけたclass） */

.imgAndPara {
word-break: break-word;
padding-bottom: 40px
}

.text-with-img {
font-size: 13px;
font-size: 1.3rem;
}


/* prof-box */

.prof-box {
padding: 0 20px;
margin: 0 auto;
font-size: 13px;
font-size: 1.3rem;
}
.prof-box img {
width: 160px;
height: auto;
margin-bottom: 21px;
}
.mostra, .prof-text {
margin-top: 15px;
}
.prof-occu-jp, .prof-name, .prof-name-jp {
font-weight: 500;
text-align: center;
line-height: 1.6;
}
.prof-occu-jp {
font-size: 12px;
font-size: 1.2rem;
font-weight: 400;
}
.prof-name {
font-size: 16px;
font-size: 1.6rem;
}
.prof-name-jp {
font-size: 1.2rem;
font-weight: 300;
color: dimgrey;
}
.prof-text p {
line-height: 1.8;
letter-spacing: 0.06em;
}


/* galleria section */

.galleria-sec {
margin-bottom: 40px;
}

.galleria-sec h2 {
text-align: center; 
color: #491a00; 
font-weight: 400; 
font-size: 25px;
font-size: 2.5rem; 
margin: 0 0 30px;
text-shadow: 0 0 1px rgb(73,26,0, 0.67);
letter-spacing: 0.06em;
}


/* shop-logo-box */

.shop-logo-box {
padding: 0px 45px 0px;
margin: 0 auto 30px;
}
.logo-name {
font-weight: 400;
font-size: 13px;
font-size: 1.3rem;
color: darkgray;
text-align: center;
margin-top: 10px;
}

.shop-logo-img {
width: 100px; 
padding: 0px; 
margin: 0px auto; 
font-size: 16px; 
font-weight: 600;
color: #333; 
text-align: center;
}


/* note */

.note {
margin: 0 auto;
margin-bottom: 30px
}
.note p {
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
}


/* info-box */

.info-box { 
background-color: #f3ecd8;
padding: 40px 15px;
text-align: center;
word-break: break-word;
margin-bottom: 30px;
}
.info-box a {
color: inherit;
}
.info-box a:hover {
text-decoration: underline;
}
.info-div:not(:last-child) {
margin-bottom: 30px
}
.info-p-jp, .info-p-it {
margin-bottom: 0px;
font-size: 14px;
font-size: 1.4rem;
font-weight: 500;
color: gray;
line-height: 1.8;
}
.info-p-it {
font-weight: 300;
font-size: 13px;
font-size: 1.3rem;
color: darkgrey;
}
.info-p-bold {
color: firebrick;
font-weight: 600;
padding: 0 7px 0;
margin-top: 5px;
line-height: 1.8;
}
.info-langAndSns {
font-size: 14px;
font-size: 1.4rem;
}


/* plofilo-box　隠しテキストの設定 */

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: "（続きを読む）";
  }
.grad-btn {
color: darkgray;
font-weight: 400;
display: block;
padding: 10px 0;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 50px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,240,0) 0%, rgba(255,255,240,0.9) 50%, rgba(255,255,240,0.9) 50%, #fffff0 100%);
  background: linear-gradient(top, rgba(255,255,240,0) 0%, rgba(255,255,240,0.9) 50%, rgba(255,255,240,0.9) 50%, #fffff0 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "（閉じる）" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


/* =========== width 700 以上 =========== */

@media (min-width: 700px) {

.h1-sec {
margin: 15px auto 34px;
}

.wrap-2 {
padding: 0 45px;
}

.h2-wrap {
text-align: center;
}

.main-text {
margin-top: 30px
}

.prof-box {
padding: 0;
width: 450px;
}

.mostra, .note {
text-align: center;
}

.imgAndPara {
padding-bottom: 60px
}

}


/* =========== width 1100 以上 =========== */

@media (min-width: 1100px) {

.h1-sec h1 {
font-size: 25px;
font-size: 2.5rem;
}
.h1-jp-place,
.h1-jp-place a {
line-height: 1.6;
font-size: 14px;
font-size: 1.4rem;
}
.it-luogo {
font-size: 15px;
font-size: 1.5rem;
}

.wrap-2, .galleria-sec {
padding: 0px;
}

.top-sec h2 {
font-size: 1.9px;
font-size: 1.9rem;
line-height: 2.2;
}
.h2-it {
margin-top: 50px;
font-size: 17px;
font-size: 1.7rem;
line-height: 1.8;
}

.main-text {
margin-top: 120px;
}

.main-text h3 {
font-size: 18px;
font-size: 1.8rem;
}
.h3-it {
font-size: 20px;
font-size: 2rem;
}

.prof-box {
padding: 0;
width: 600px;
}

}


/* =========== width 359 以下 =========== */

@media (max-width: 359px) {

.h1-jp-place,
.h1-jp-place a {
font-size: 12px;
font-size: 1.2rem;
}
.it-luogo {
font-size: 13px;
font-size: 1.3rem;
}


}