@charset "UTF-8";

/*蜜干し芋ページ*/
/*テンプレートcssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("aos.css");
@import url("../webfonts/css/all.css");


/*共通
---------------------------------------------------------------------------*/
:root {
--themecolor: #7c533f;
--maincolor: #111111;
}

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
height: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
}
html {
overflow-x: hidden;
overflow-y: auto;
}
body {
color: var(--maincolor);
font-size: 100%;
font-family: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 500;
font-style: normal;
line-height: 2;
letter-spacing: 0.05em; 
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
}
/* 全体ボックスサイズ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/*リセット*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
ul {list-style: none;}
input {font-size: 1rem;}
/* clearfix */
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
overflow: hidden;
}

/*タップ時の青枠削除
---------------------------------------------------------------------------*/
/* タップ時の青ハイライトを消す（Safari / iOS用） */
a, button, input, textarea {
-webkit-tap-highlight-color: transparent;
outline: none;
}

/*container（サイト全般を囲むブロック）
---------------------------------------------------------------------------*/
.container {
padding: 0 6%;
box-sizing:border-box;
width:100%;
}
@media screen and (min-width: 1200px) {
.container {
padding: 0 10%;
}}


/*img*/
img {
vertical-align: middle;
border-style:none;
border: none;
max-width: 100%;
height: auto;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha( opacity=80 )";}
/*img Chromeのみ*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
img {image-rendering: -webkit-optimize-contrast;}
}

/*p*/
p {text-align: justify;}

/*回りこみ解除*/
.clear {
clear:both;
}
a img,
ol li img,
li img,
ul li img {/*上揃え*/
vertical-align: top;
text-align:center;
border-style:none;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
color:var(--maincolor);
text-decoration:none;
transition: 0.5s;
}
a:hover {
color:#848484;
text-decoration:none;
transition: 0.5s;
}
/* a TEL */
a[href^="tel:"] {text-decoration:none;color:var(--maincolor);}
@media screen and (min-width: 1024px) {
a[href^="tel:"] {pointer-events: none;}
}

/*PC･スマホ 表示・非表示
---------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) {.sp{display: none !important;}}
@media screen and (max-width: 1023px) {.pc{display: none !important;}}


/*header（ロゴが入ったサイト上部のブロック）
---------------------------------------------------------------------------*/
/*上からふわっと表示（ロード時）*/
.logo{
opacity: 0;
transform: translateY(-20px);
animation: fadeTop 0.8s ease forwards;
position: absolute;
right: 20px;
top: 15px
}
@keyframes fadeTop {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/*ロゴ画像*/
h1 a {
background: url(../img/logo.svg) no-repeat;
background-size: 160px 24px;
display: block;
width: 160px;
height: 24px;
}
h1 a span {
display: none;
}
@media screen and (min-width: 768px) {
.logo{
top: 20px
}
h1 a {
background-size: 250px 38px;
width: 250px;
height: 38px;
}}
@media screen and (min-width: 1024px) {
.logo{
top: 30px
}
h1 a {
background: url(../img/logo_w.svg) no-repeat;
background-size: 354px 54px;
width: 354px;
height: 54px;
}}


/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden;
}
.main_box{
position:relative;
width:100%;
}

.main_bg img{
width:100%;
height:auto;
display:block;
}
.main_merchandise img{
position: absolute;
right: 10%;
bottom: -100px;
width: 300px;
height: auto;
}
@media screen and (max-width: 1023px) {
.main_merchandise img{
right: 6%;
bottom: -60px;
width: 160px;
}
}


/*メッセージ
---------------------------------------------------------------------------*/
.sweetpotato{
background:url(../img/bg_me_pc.jpg)center / cover no-repeat;
padding:80px 0;
}

/* コンテンツ幅 */
.sp_inner{
max-width:1000px;
width:100%;
margin:auto;
display:flex;
align-items:center;
gap:60px;
padding:0 20px;
}

/* テキスト */
.sp_text{
flex:1;
}
.sp_text h2{
font-size:30px;
line-height:1.8;
color:var(--themecolor);
margin-bottom:25px;
font-weight:600;
letter-spacing:0.05em;
}
.sp_text p{
line-height:2.3;
font-size:18px;
}

/* 画像 */
.sp_images{
flex:1;
position:relative;
display:flex;
justify-content:center;
}
/* 画像共通 */
.sp_images img{
max-width:100%;
height:auto;
display:block;
}
.img_main{
width:350px;
flex-shrink:0;
}
.img_sub{
width:230px;
position:absolute;
left:-70px;
bottom:-60px;
}
/* スマホ改行制御 */
.br-sp{
display:inline;
}

@media (max-width:1024px){
.sp_inner{
width:100%;
padding:0 10%;
}
.br-sp{
display:none;
}
}

@media (max-width:767px){
.sweetpotato{
background:url(../img/bg_me_sp.jpg) center / cover no-repeat;
padding:60px 0;
}
.sp_inner{
flex-direction:column;
gap:40px;
}

/* テキスト */
.sp_text{
text-align:left;
}
.sp_text h2{
font-size:24px;
letter-spacing:0;
}
.sp_text p{
font-size:16px;
}

/* 画像 */
.sp_images{
width:100%;
max-width:320px;
margin:auto;
padding:0 20px; /* ←これ追加 */
box-sizing:border-box;
}
.img_main{
width:100%;
transform: translateX(30px);
}
.img_sub{
width:200px;
left:-30px;
}
}

/*商品のご紹介
---------------------------------------------------------------------------*/
.box-gosyokai {
width: 100%;
margin: 50px auto;
border: 2px solid var(--themecolor);
border-radius: 5px;
padding: 6%
}
/* タイトル画像 */
.gosyokai-img img{
width: 300px;
height: auto;
margin: 0 auto;
display: block;
}
.box_content2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.box2 img{
margin-bottom: 10px;
width: 100%;
height: auto;
display: block;
}
/* 購入する */
.box_content2 p{
text-align: center;
margin-bottom: 10px;
color:var(--themecolor);
font-size: 120%
}
@media screen and (min-width: 641px) {
.box-gosyokai {
padding: 5% 10%
}
.gosyokai-img img{
margin: 0 auto 40px;
}
.box_content2{
gap:60px;
box-sizing:border-box;
}
}



/*パララックス
---------------------------------------------------------------------------*/
.parallax{
width:100%;
height:330px;
background:url("../img/parallax.jpg") center / cover no-repeat;
background-attachment:fixed;
}

@media (max-width:767px){
.parallax{
height:200px;
background:url("../img/parallax_sp.jpg") center / cover no-repeat;
background-attachment:fixed;
}
}


/*こだわり・生産者
---------------------------------------------------------------------------*/
.column-wrapper {
width: 100%;
display: flex;
}
:nth-of-type(even) {
flex-direction: row-reverse;
}
.column1, .column2 {
width: 50%;
display: flex;
align-items: center;
}
.column1 {
padding: 5%;
box-sizing: border-box;
}
.point-label{
font-weight:bold;
color:#b60000;
border-bottom:3px solid #b60000;
padding-bottom:2px;
}
.column1title {
font-size:28px;
line-height:1.8;
margin: 20px 0;
color:var(--themecolor);
}
.column1title span{
font-size: 70%;
}
.column1txt {
font-size: 1em;
}
.column2 img {
height: 100%;
width: 100%;
object-fit: cover;
}
.products_p {
width: 20%;
float: left;
 }
.products_p img {
width:100%;
}
@media screen and ( max-width:768px ){
.column-wrapper {
flex-direction: column-reverse;
}
.column1, .column2 {
width: 100%;
}
.column1 {
padding: 10%;
}
.column1title {
font-size:1.5em;
line-height:1.6;
}
}

/*美味しい食べ方
---------------------------------------------------------------------------*/
.tabekata-bg{
background: linear-gradient(135deg, #ffd200 0%, #f6b86c 100%);
padding: 60px 0;
}
/* タイトル画像 */
.tabekata-img img{
width: 300px;
height: auto;
margin: 0 auto 20px;
display: block;
}
/* コンテンツ幅 */
.sp_inner2{
width: 100%;
margin:auto;
}
.box_content{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.box3 img{
margin-bottom: 10px;
width: 100%;
height: auto;
display: block;
}
.box3 p{
text-align: left
}
@media screen and (min-width: 641px) {
.tabekata-bg{
padding: 80px 0;
}
.sp_inner2{
max-width: 980px;
}
.tabekata-img img{
margin: 0 auto 40px;
}
}
@media screen and (max-width: 640px) {
.box3 p{
font-size:80%;
line-height:1.8;
}

.box_content{
grid-template-columns:repeat(2,1fr);
padding:0 20px;
box-sizing:border-box;
}

/* 3つ目を中央 */
.box3:nth-child(3){
grid-column:1 / -1;
justify-self:center;
width:50%;
}

}

/*商品情報
---------------------------------------------------------------------------*/
.box_item {
padding: 30px;
margin: 50px 10% 0 10%;
background: #ffefcd;
}
.boxA {
display: flex;
flex-direction: column;
gap: 10px;
}
.box2 {
flex: 0 0 48%;
box-sizing: border-box;
}
.syohin-table{
width: 100%;
border: none;
margin-top: 20px;
}
.syohin-table td:first-child{
width:100px; 
color:var(--themecolor);
font-weight: 700;
padding: 3px 0
}
@media screen and (min-width: 641px) {
.box_item {
padding: 50px;
max-width: 980px;
margin: 50px auto 0 auto;
}
.boxA {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 4%;
}
.box2 {
flex: 0 0 48%; /* 幅48% */
}
}


/*ご購入はこちらから
---------------------------------------------------------------------------*/
.kounyu-bg{
background:#e3ba22;
padding:80px 0;
}
.button-stores2{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 auto;
padding:.9em 2em;
border:1px solid var(--themecolor);
color:var(--themecolor);
}
.button-stores2 img{
width:250px;
height:auto;
padding:10px 0;
}
@media screen and (max-width:767px){
.kounyu-bg{
padding:60px 10%;
}
.button-stores2 img{
width:180px;
height:auto;
padding:10px 0;
}
}


/*フッター
---------------------------------------------------------------------------*/
#footer {
width: 100%;
padding: 90px 0;
}
#footer h5 img{
width: 328px;
height: 50px
}
@media screen and (max-width: 767px) {
#footer {
padding: 60px 0 100px 0;
}
#footer h5 img{
width: 230px;
height: auto
}
}
/* コピー */
.copy {
font-size: 80%;
padding-top: 30px;
text-align: center;
}
.copy span{
font-family: Verdana, "Droid Sans";
}


/*pop
---------------------------------------------------------------------------*/
.floating-banner{
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
max-width: 180px;
}
.floating-banner img{
width: 100%;
height: auto;
display: block;
border-radius: 8px;
transition: 0.3s;
}
.floating-banner img:hover{
transform: scale(1.05);
}
@media screen and (max-width:768px){
.floating-banner{
bottom: 10px;
right: 10px;
max-width: 100px;
}
}