/* ===== SP最適化（ここは1回だけ） ===== */
@media (max-width: 768px){
/* PC/SP切替 */
#diet .pc{ display:none !important; }
#diet .sp{ display:block !important; }
/* コンテナは全部これで統一:左右余白つき */
#diet .content,
#diet #kv #kv-wrapper,
#diet .kv .kv-message,
#diet .kv .kv-fukidashi,
#diet .product .feature,
#diet .product .product-introduction,
#diet .diet article,
#diet .recommend,
#diet .extra .content{
width:92% !important;
margin:0 auto !important;
}
/* CTAは横100% */
#diet .link-form > a{
display:block;
width:92%;
margin:0 auto;
}
#diet .link-form img{ width:100%; }
/* ===== kv2:横並びは維持、全部中央寄せ ===== */
#diet #kv2 .kv-message{
display:flex;
align-items:center;
justify-content:center;
gap:3vw;
margin-bottom:5vw;
}
#diet #kv2 .kv-message figure{
width:42%;
flex-shrink:0;
}
#diet #kv2 .kv-message .kv-message-fukidashi{
width:58%;
flex-shrink:0;
position:static;
}
#diet #kv2 .kv-message img{ width:100%; height:auto; }
/* ===== kv2:吹き出し3つは縦積み(SPのみ) ===== */
#diet #kv2 .kv-fukidashi{
margin-bottom:8vw;
}
#diet #kv2 .kv-fukidashi ul{
display:block;
width:100%;
}
#diet #kv2 .kv-fukidashi li{
width:70%;
margin:0 auto 3vw;
}
#diet #kv2 .kv-fukidashi li:last-child{
margin-bottom:0;
}
#diet #kv2 .kv-fukidashi li img{
width:100%;
height:auto;
display:block;
}
/* Voiceは縦積み（横はみ出し防止） */
.voice-wrapper{
width:92%;
margin:0 auto 60px;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.voice-wrapper .voice{
width:100%;
}
.voice-wrapper .voice:first-of-type{
flex:none;
padding-top:0;
}
.voice-wrapper .voice:nth-of-type(2){
flex:none;
margin-top:0;
width:100%;
}
.voice-wrapper .voice:nth-of-type(2) .voice-text{
width:100%;
margin-bottom:3vw;
}
.voice-wrapper .voice:nth-of-type(2) .voice-text img{
width:100%;
}
.voice-wrapper img{ width:100% !important; }
/* Product:縦積み */
#diet .product{
margin-bottom:10vw;
}
#diet .product h3{
margin-bottom:5vw;
}
#diet .product h3 img{
width:100%;
}
#diet .product .feature ul{
display:flex !important;
gap:3%;
}
#diet .product .feature ul li{
width:48.5%;
}
#diet .product .product-introduction{
display:block !important;
}
/* Dietのfeature-titleも縦積み */
#diet .diet{
padding-top:10vw;
}
#diet .diet article{
margin-bottom:10vw;
}
#diet .diet article .feature-title{
display:block !important;
position:relative;
margin-bottom:8vw;
}
#diet .diet article .feature-title .image_fukidashi{
margin-bottom:3vw;
}
#diet .diet article .feature-title .image_fukidashi figure{
width:100%;
text-align:left;
}
#diet .diet article .feature-title .image_fukidashi figure img{
width:70%;
}
#diet .diet article .feature-title .image_fukidashi .fukidashi{
width:25%;
left:auto;
right:5%;
top:0;
}
#diet .diet article .feature-title .feature-detail{
width:100%;
}
/* diet-pageのカード */
#diet .diet article.feature2 ul{
display:block !important;
}
#diet .diet article.feature2 ul li{
width:100%;
margin-bottom:5vw;
}
#diet .diet article.feature2 ul li button.diet-card p{
font-size:3.5vw;
top:15%;
}
/* Recommend */
#diet .recommend{
padding-top:8vw;
margin-bottom:10vw;
}
#diet .recommend h3{
margin-bottom:5vw;
}
#diet .recommend ul li{
margin-bottom:8vw;
}
#diet .recommend ul li p{
font-size:3.5vw;
width:90%;
left:5%;
top:60%;
}
/* Extra */
#diet .extra{
padding-top:10vw;
padding-bottom:10vw;
}
#diet .extra .content{
padding-top:0;
}
#diet .extra h3{
margin-bottom:5vw;
}
#diet .extra h3 figure{
position:static;
width:100%;
margin-bottom:3vw;
}
#diet .extra .extra-feature-index{
margin-bottom:8vw;
}
#diet .extra .extra-feature-index ul{
gap:3%;
}
#diet .extra .extra-feature-index ul li{
width:48.5%;
}
/* Extra article */
#diet .extra article{
margin-bottom:10vw;
}
#diet .extra article h4{
display:block !important;
margin-bottom:5vw;
}
#diet .extra article h4 .image_fukidashi{
position:relative;
margin-bottom:3vw;
}
#diet .extra article h4 .image_fukidashi figure{
width:100%;
}
#diet .extra article h4 .image_fukidashi figure img{
width:70%;
}
#diet .extra article h4 .image_fukidashi .fukidashi{
width:30%;
right:5%;
left:auto;
}
#diet .extra article h4 .extra-title-text{
width:100%;
}
/* Extra1 */
#diet .extra article.extra1 h4 .image_fukidashi .fukidashi{
top:0;
right:0;
left:auto;
}
#diet .extra article.extra1 ul{
display:block !important;
margin-bottom:5vw;
}
#diet .extra article.extra1 ul li{
width:100%;
margin-bottom:5vw;
}
#diet .extra article.extra1 .extra-link{
margin-bottom:8vw;
}
/* Extra2 */
#diet .extra article.extra2 h4 .image_fukidashi{
padding-top:0;
}
#diet .extra article.extra2 h4 .image_fukidashi .fukidashi{
top:0;
left:auto;
right:5%;
}
/* 文字サイズ:SPはまとめて小さく */
#diet .product p,
#diet .diet article .feature-title .feature-detail p,
#diet .extra article.extra2 h4 .extra-title-text p{
font-size:16px !important;
line-height:1.7 !important;
}
#diet .product p span strong{ font-size:19px !important; }
/* スペシャルコンテンツの詳細はこちら文字 */
#diet .extra article.extra2 .feature3-special-link a span{
font-size:16px !important;
}
/* 400項目の一覧はこちら画像ボタンを小さく */
#diet .extra .extra-link a{
height:auto !important;
padding:14px 16px !important;
}
#diet .extra .extra-link a img{
width:250px !important;
height:auto !important;
}
/* hover系はSPでは不要 */
#diet .link-form a:hover img,
#diet .extra article .extra-link a:hover img,
#diet .extra article.extra2 .feature3-special-link a:hover span{
transform:none !important;
}
/* 6枚カード:1列 */
#diet .extra article.extra2 .feature-original-page ul li{
width:100% !important;
max-width:340px;
margin-left:auto;
margin-right:auto;
}
/* recommended-reports見出し */
#diet .extra article.extra2 .recommended-reports{
font-size:1.3em;
padding:.5em 1em;
}
}