@charset "utf-8";
/* Reset */
html{
scroll-behavior: smooth;
}
*{
padding: 0;
margin: 0;
/* box-sizing: border-box; */
}
body{
line-height: 1;
font-family: sans-serif;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
display: block;
}
img{
vertical-align: bottom;
max-width: 100%;
}
/* sns共通 */
.sns{
display: flex;
justify-content: space-between;
}

/* container */
.container{
max-width: 960px;
margin-inline:  auto;
padding-inline: 10px;
display: flex;
justify-content: space-between;
}

/* header */
.header{
height: 160px;
padding-top: 20px;
/* padding-block: 15px ; */
/* padding: 20px 0 0 0; */
}
.header h1{
height: 80px;
width: 300px;
background: url(../img/logo5.jpg)no-repeat center/cover;
   /* 隠し文字 */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.header p{
color: #2d3b55;
font-size: 1.2em;
font-weight: bold;
padding: 10px 0 10px 15px;
}
.header h1,p{
    margin-right: auto;
}
.header .pcnav{
   align-items: end;
}
.header .sns{
    scale: 1.2;
    margin-top: 20px;
    /* margin-bottom: 5px; */
    padding-right: 35px;
    justify-content: end;
}

/* Navigation */
.spnav,.sp-box{
display: none;
}
.pcnav ul{
display: flex;
justify-content: center;
/* justify-content: space-between; */
gap: 20px;
padding-top: 20px;
/* justify-content:  end; */
}
.pcnav li{
color: #2d3b55;
font-size: 1em;
font-weight: bold;
}
/* nav li + li{
    margin-left: 15px;
    } */
.pcnav a:hover{
scale: 1.2;  
color: #d6428c;
border-bottom: 5px solid;
}

/* KeyVis */
.keyVis{
    background: url(../img/main-img.jpg)no-repeat center/cover;
    height: 400px;
    margin-bottom: 50px;
    }
/* Top Butten */
.top{
font-size: 2em;
text-align: center;
width: 55px;
line-height: 48px;
padding-top: 3px;
color: #2d3b55;
background: #ddd;
border:1px solid #2d3b55;
border-radius: 5px;
position: fixed;
/* position: absolute; */
right: 5px;
bottom:5px;
}

/* Main */
/* 共通 */
.about,
.lineup,
.dessert,
.smoothie,
.ds,
.card,
.yoyaku,
.info,
.access
{
display: block;
margin-bottom: 100px;
}
.omise{
    display: inline;
    color: #d6428c;
    text-decoration: underline 2px
}

/* h2見出し共通 */
h2{
color: #d6428c;
font-size: 1.7em;
}

/* 疑似要素共通 */
h2::after{
display: block;
margin-block: 10px 40px;
font-size: 2em;
color:#2d3b55 ;
/* letter-spacing: 5px; */
border-bottom: #2d3b55 solid 3px;
}
.about h2::after{
content:"Chiffon cake";
}
.dessert h2::after{
content:"Dessert";
}
.smoothie h2::after{
content:"Green Smoothie";
}
.card h2::after{
content:"Point Card";
}
.yoyaku h2::after{
content:"Reservation";
}
.info h2::after{
content:"Information";
}
.access h2::after{
content:"Access Map";
}
/* h3 共通 */
h3{
font-weight: bold;
font-size: 1.3em;
color: #c57609d8;;
}
h3 i{
padding-right: 5px; 
}

/* シフォンケーキ */
.about h3{
    margin-bottom: 20px;
}

/* HTMLで画像指定　フロート */
.about p{
line-height: 1.5;
font-weight: bold;
overflow: hidden;
width:  48%;;
}

.about p:nth-of-type(1),
.about p:nth-of-type(2),
.about p:nth-of-type(3){
 margin-bottom: 0.8em;
}
/* .about{
    display: flex;
    justify-content: space-between;
}
#test{
    width: 500px;
} */
/* .about p+p{
padding: 10px;
} */
/* .slider .copy {
    flex-wrap: wrap;
} */

.about .hole{
float: right;
padding-left: 10px;
width: 48%;
}
.hole p{
    width: 100%;
    padding-top: 15px;
}
.about{
margin-bottom: 60px;
}
.about span{
color: #d6428c;
}

/* 4カラム　カットシフォン */
.chiffon{
    display: block;
}
.chiffon > ul {
display: grid;
grid-template-columns:repeat(4,1fr) ;
width: min(100%,960px);
gap: 20px;
}

.chiffon h4 i {
/* padding-right: 5px; */
padding: 0 5px;
}
.chiffon h4{
margin: 10px 0 10px 0;
}

/* h4 共通 */
h4 i {
padding-right: 5px;
/* padding: 0 5px; */
}

.chiffon h3{
margin: 50px 0 15px;
}
.chiffon p{
font-size: 0.8em;
font-weight: bold;
}
.cut img{
width: 220px;
height: 140px; ;
object-fit: cover;
}

/* ほかシフォンラインナップ */
.lineup{
font-weight: bold;
}
.lineup h3{
margin: 50px 0 15px;
}
.lineup dl{
text-align: left;
padding: 30px 10px 0 20px;
border: 1px solid #2d3b55;
background: #ddd;
margin-bottom: 20px ;
}
.lineup dt{
border-left: 15px solid #2d3b55;
padding-left: 5px;
margin-bottom: 6px;
}
.lineup dd{
line-height: 1.4;
padding-left: 20px;
padding-bottom: 10px;
border-bottom: #2d3b55 2px solid;
margin-bottom: 20px;
}
.lineup dd:last-child{
    border-bottom: none;
}

.lineup p{
font-weight: bold;
line-height: 1.6;
padding-left: 15px;
}


/* 最新情報　共通 */
.new{
    font-size: 1.2em;
    margin-top: 50px;
    /* padding-left: 30px; */
    color: #1877f2;  
}
/* SNS */
.sns ul{
    display: flex;
    padding-left: 20px;
    margin-top: 10px; 
    gap: 15px;
}
.sns{
    font-size: 2.5em;
}
.sns a{
    transition: 200ms;
}
.sns a:hover{
scale: 1.2;
}

.sns li:nth-child(2):hover i{
    color:#1877f2;
    background: #fff; 
}

/* デザート */
.dessert > ul {
display: grid;
grid-template-columns:repeat(4,1fr) ;
width: min(100%,960px);
gap: 20px;
margin: 50px auto;
}
.anko img{
width: 220px;
height: 140px; 
object-fit: cover;
}
.dessert h4{
margin: 15px 0 15px 2px;
font-size: 1em;
}
.dessert p{
line-height: 1.5;
/* width: 95%; */
max-width: 220px;
}
.kurumi{
    font-size: 0.9em; ;
}

/* グリーンスムージー */
.green > ul {
display: grid;
grid-template-columns:repeat(4,1fr) ;
width: min(100%,960px);
gap: 20px;
margin: 50px auto;
}
.green img{
width: 220px;
height: 280px; ;
object-fit: cover;
}
.green h4{
    margin: 15px 0 15px 2px;
    font-size: 0.9em;
    }
.green p{
    line-height: 1.3;
    max-width: 220px;
}
/* .green p+p{
    padding: 10px;
} */
.shun{
    margin-top: 10px;
    /* line-height: 1; */
}
.ds p{
padding-left: 15px;
line-height: 1.6;
font-weight: bold;
}
.ds h3{
    margin-bottom: 15px;
}

/* ポイントカード */
.card img{
    display: flex;
}
.card h3{
margin-bottom: 15px;
}
.card li p{
    line-height: 1.5;
    font-weight: bold;
}
.card p+p{
    padding: 7px;
}
.card img{
    margin-bottom: 30px;
}
.pointo{
    text-decoration: underline 2px;
    margin-top: 25px;
}
.pop img{
    padding-top: 37px;
    }
.card > ul{
display: grid;
grid-template-columns:repeat(2,1fr) ;
width: min(100%,960px);
gap: 20px;
margin: 50px auto;
}

/* 予約 */
.tel{
    /* color: #d6428c; */
    color: #2d3b55;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 5px;
}
.eigyou{
    /* color:#d6428c; */
    color: #2d3b55;
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.2em;
    line-height: 1.6;
}
.yoyaku p{
    /* font-size: 1.2em; */
    font-weight: bold;
    line-height: 1.6;
    padding-left: 15px;
}

/* インフォメーション　お店外観 */
.info dl{
text-align: left;
padding:11em 1em;
border: 1px solid #2d3b55;
/* background: #ddd; */
background:url(../img/logo6.jpg)#ddd 
no-repeat center top 2em/92% auto;
}
.info dt{
float: left;
font-weight: bold;
padding-left: 5px;
line-height: 1.6;
margin-bottom: 1.2em;
/* border-left: 15px solid #11a5d2; */
}
.info dd{
font-weight: bold;
margin-left: 6em;
margin-bottom: 1.2em;
line-height: 1.6;
}
.info dd:last-of-type{
margin-bottom: 0;
}
.info img{
    width:48%;
    object-fit: cover;
}


/* アクセスマップ  */

.access h2{
max-width: 960px;
margin: 0 auto;
padding-inline: 10px;
}

.map{
position: relative;
padding-bottom: 40%;
}
.map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

/* Footer */
footer{
padding-block: 20px;
background: #2d3b55;
color:#fff ;
text-align: center;
}
footer .sns{
width: fit-content;
margin-inline: auto;
margin-bottom: 20px;
}


@media  (max-width : 878px){
/* TOPへ戻るボタン */
    /* .top  {
        display: none;
    } */
.top{
font-size: 1.5em;
text-align: center;
width: 45px;
line-height: 40px;
}
.header p{
    /* font-size: 1.1em; */
}
.pcnav{
font-size: 0.9em;
scale: 1.1;
}
.chiffon h4{
font-size: 0.8em;
}
.chiffon p{
/* font-size: 0.65em; */
}
.kurumi{
    font-size: 0.6em; ;
}
.dessert h4{
    font-size: 0.9em;
}
.green h4{
    font-size: 0.8em;
}
}
@media  (max-width:830px){
.pcnav{
    font-size: 0.6m;
}

}
@media  (max-width:743px){
/* grid レイアウト */
.chiffon > ul{
grid-template-columns:repeat(2,1fr) ;
}
.dessert > ul{
grid-template-columns:repeat(2,1fr) ;
}
.green > ul{
grid-template-columns:repeat(2,1fr) ;
}
.card > ul{
grid-template-columns:repeat(1,1fr) ;
}

/* container  */
.container{
display: block;
padding-inline: 10px;
width: 100%;
}

/* header */
.header .sns{
    display: none;
}
.header{
    height: 140px;
}
.header h1{
    width: 300px;
/* width: fit-content; */
margin-inline: auto;
}
.header p{
    text-align: center;
}
.keyVis{
    height: 250px;
}
/* Main */
main p{
/* text-align: left; */
font-size: 0.9em;
}
.about .hole{
display: block;
float: none;
width: auto;
margin-inline: auto;
margin-bottom: 20px;
}
.copy p{
width: 100%;
padding-inline: 15px;
}

/*シフォンケーキ　 デザート　グリーンスムージー共通 */
.about,
.lineup,
.dessert,
.smoothie,
.ds,
.card,
.yoyaku,
.info,
{
margin-bottom: 70px;
}
.access
{
margin-bottom: 10px;
}
.about,
.chiffon,
.copy,
.lineup,
.dessert,
.smoothie
.green,
.ds,
.card,
.yoyaku,
.info
{
width: fit-content;
margin-inline: auto;
}
/* h2見出し共通 */
h2{
font-size: 1.2em;
margin-bottom: 20px;
/* margin-inline: auto; */
}
h2::after{      
margin-block: 10px 30px;
}

/* h3 共通 */
h3{
font-size: 0.9em;
}
.new{
font-size: 0.9em;
margin-top: 30px;
}
.about{
margin-bottom: 40px;
}
.chiffon h3{
    margin: 30px 0 15px;
    }

/* グリーンスムージー */
.green > ul {
    margin: 30px auto;
    }

.tel{
    font-size: 2em;
    margin-bottom: 20px;
    letter-spacing: normal;
}
.eigyou{
    margin-bottom: 30px;
    font-size: 1.1em;
}
/* インフォメーション　お店外観 */
.info .container{
    display: block;
}
.info dl{
padding:11em 1em 2em;
margin-bottom: 10px;
line-height: 1.4;
}
.info dt{
line-height: 1.4;
margin-bottom: 1em;
}
.info dd{
margin-bottom: 1em;
line-height: 1.4;
}
.info .container img{ 
   width:100%;
}

/* Footer */
footer{
padding-block: 30px;
}

/* Navigation */
.pcnav{
    display: none;
}
/* 前NAV */
.spnav,.sp-box{
display: block;
}

.map{
padding-bottom: 60%;
}
footer{
padding-block: 10px;
}

  /* Sp Nav用ボタン */ 
.spnav ul{
position: fixed;
top: 100px;
width: 100%;
left: 100%;
transition: 1s;
}
.spnav ul.open{
    left:0;
}

.spnav ul li{
font-size: 1.2em;
height: 50px;
padding: 35px 0 0 0;
text-align: center;
border-bottom:1px solid #fff;
color: #fff;
background:
#2d3b55;
}
.sp-box{
text-align: right; 
position: fixed;
/* position: absolute; */
top:15px;
right: 5px;
} 
.spnav a:hover{
color: #d6428c;
font-weight: bold;
scale: 1.2;  
   }
}