@charset "UTF-8";
/*****
■CSSのルール
1. 必ず{}で囲うこと
2. プロパティ（color,font-sizeなど）は必ず: ;で囲うこと
3. HTMLでidを指定した場合は#、classを指定した.で適用すること
4. id名・class名の書き方に縛りがないが
　「hri-macaron」のように-でわかりやすい言葉をつなげるか
　「hriMacaron」のように2単語目の始めを大文字にしてあげるパターンが主流です。
*****/



/*****
■共通パーツ
HTMLの要素単体であったり、よく使い回すレイアウトを簡単に反映できるよう
共通のスタイル設定をしてパーツ化します。
*****/
html{
  font-size: 16px;  /* font-size:文字サイズ */
}
 
body{
  color: #624649;  /* color:文字色 */
  font-size: 1rem;
  font-family: "YuGothic",  Yu Gothic,  sans-serif;  /* font-family:文字のスタイル */
}

ul,li,ol{
  list-style-type: none;  /* list-style-type:リスト要素の際に出てくる「・」など */
}

a{
  text-decoration: none;  /* text-decoration:テキストのデコレーション（下線とか） */
  transition: 0.6s;  /* transition:cssが反映される時間（ゆっくり色を変えるなどに使用）; */
}

a:hover{
  transition: 0.6s;
}

h1{
  font-family: 'Great Vibes', cursive;
  font-size: 4rem;
  letter-spacing: 10px;  /* letter-spacing:文字間 */
  color: #955E64;
  font-weight: normal;  /* font-weight:文字の太さ */
  text-shadow: 0px 0px 4px #fff;  /* text-shadow:文字の影 */
  filter: drop-shadow(4px 2px 4px #fff);  /* filter:ぼかしや色変化など */
}

.container{
  width: 90%;  /* width:横幅 */
  max-width: 1024px;  /* max-width:最大横幅 */
  margin: 0 auto;
}

/*
section{
  padding-top: 80px;
  padding-bottom: 80px;
}
※この部分を削除して↓に書き換える
*/

#concept, #feature, #thought, #macaronlife, #lineup, #package, #store, #contact{
  padding:80px 0;
}

h2{
  font-size: 3rem;
  margin-bottom: -5px;
  font-family: 'Great Vibes', cursive;
  font-weight: normal;
  letter-spacing: 4px;
  color:#dd918e;
}

.ja-title{
  font-size: 1rem;
  color:#dd918e;
}

.title{
  text-align: center;
  margin-bottom: 40px;
}

.about-text{
  font-size: 1rem;
  letter-spacing: 0.8px;
}

.box-design{
  background-color: #fff;
}

.feature-wrapper, .life-wrapper, .lineup-wrapper, .package-wrapper, .store-wrapper{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

select {
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
  border-style: solid;
  height: 28px;
}

select::-ms-expand {
    display: block;
}



/*****
■ヘッダー
ページ上部をヘッダーと呼び、主にサイトメニュー（グローバルナビゲーション）や
重要なリンクを配置します。
*****/

/*** グローバルナビゲーション ***/
.g-navi{
  position: absolute;  /* position:要素の配置方法 */
  background-color: #e2bfcb;  /* background-color:背景色 */
  width: 100%;
}

.g-navi ul{
  display: flex;  /* display:要素の表示方法 */
  flex-wrap: nowrap;  /* flex-wrap:flex要素の折り返し */
  justify-content: space-around;  /* justify-content:flex要素の横位置設定 */
  align-items: center;  /* align-items:flex要素の縦位置設定 */
}

.g-navi ul li{
  flex-basis: 16.6%;  /* flex-basis:flex子要素の横幅 */
  text-align: center;
}

.g-navi ul li a{
  display: block;
  color: #fff;
  padding: 20px 0;  /* padding:内側の余白設定 */
}

.g-navi ul li a:hover{
  color: #ccc;
  background-color: #eb3c55;
  opacity: 0.5;  /* opacity:透過度 */
}



/*****
■メインビジュアル
ページを開いた際に見えるページのスタート部分。
「ファーストビュー」「メインキャッチ」などとも呼ばれ、
主にどのようなサイトなのか？を視覚的に伝えます。
*****/
#main-visual{
  background-image:url(../image/mv.png);  /* background-image:背景画像 */
  background-repeat:no-repeat;  /* background-repeat:背景の繰り返し */
  background-size: cover;  /* background-size:背景のサイズ */
  height: 100vh;
  max-height: 633px;  /* max-height:最大縦幅 */
}

.mv-wrapper{
  position: relative;
}

.mv-right{
  position: absolute;
  top: 240px;  /* top:上部からの配置位置 */
  right: 0;  /* right:右側からの配置位置 */
  max-width: 100%;
}

.text{
  font-family: 'Great Vibes', cursive;
  font-size: 1.625rem;
  letter-spacing: 4px;
  color: #955e64;
  text-align: center;  /* text-align:テキストの位置設定 */
  filter: drop-shadow(4px 2px 4px #fff);
  text-shadow: 0px 0px 4px #fff;
  margin-bottom: 80px;  /* margin:外側の余白設定 */
}

.purchase-button{
  text-align: center;
}

.purchase-button a{
  display: inline-block;
  background-color: #955e64;
  color: #fff;
  padding: 15px 50px;
  font-size: 1.375rem;
}

.purchase-button a:hover{
  background-color: #fff;
  color: #955e64;
}



/*****
■コンセプトエリア
ファーストビューエリアに続く、お店が伝えたい
メッセージを載せるエリアになります。
*****/
#concept{
  background-color: #f7e8e8;
  background-image: url(../image/back1.png),url(../image/back2.png);
  background-size: 22%,22%;
  background-repeat: no-repeat;
  background-position: 0 0,100% 100%;  /* background-position:背景の位置設定 */
  text-align: center;
}

.concept-copy{
  text-align: center;
}

.main-copy{
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 50px;
}

.concept-text{
  margin-bottom: 20px;
  line-height: 1.8;  /* line-height:行間の高さ */
}



/*****
■こだわりエリア
お店や商品がどのようなものなのかを使える
訴求エリアになります。
*****/
#feature{
  background-color: #e4ecef;
}

/* Lineupエリアの学習中に共通パーツ化を行う
feature-wrapper{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
*/

.feature-box{
  max-width: 320px;
}

.feature-box:nth-of-type(2){
  background-color: #fffde8;
}

.feature-text{
  padding: 20px 15px;
}

.feature-number{
  font-size: 1.5rem;
  letter-spacing: 2px;
  font-family: 'Great Vibes', cursive;
  color:#dd918e;
}

.feature-title{
  font-size: 1.375rem;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}

.feature-about{
  font-size: 1rem;
}

.feature-image{
  max-width: 100%;
}



/*****
■想いのエリア
どのような想いで商品を作っているか
想いを伝えるエリアです。
*****/
#thought{
  background-color: #fff;
}

.thought-container{
  position: relative;
}

.staff-box{
  display: none;
}
 
.staff-box.active{
  display: flex;
  flex-wrap: nowrap;
  justify-content:space-between;
  background:#f7e8e8;
  padding: 2rem;
}

.staff-image{
  width: 48%;
}

.staff-text{
  width: 48%;
}

.staff-title{
  font-size: 1.375rem;
  text-align: center;
  margin-bottom: 30px;
  font-weight: normal;
}

.staff-about{ 
  margin-bottom: 20px;
  padding: 20px;
  background:#fff;
}

.staff-name{
  text-align: right;
}

.slide-button{
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 48px;
  height: 48px;
  border-top: 2px solid #c0c0c0;
  margin: auto;
  cursor: pointer; /* マウスオン時に表示されるカーソルの形 */
  z-index: 1; /* コンテンツの重ね順 1が後ろで9999が前 */
}

.prev {
  left: 10px;
  border-left: 2px solid #c0c0c0;
  transform: rotate(-45deg); /* コンテンツを回転させる */
}

.next {
  right: 10px;
  border-right: 2px solid #c0c0c0;
  transform: rotate(45deg);
}



/*****
■マカロンライフのエリア
どのような想いで商品を作っているか
想いを伝えるエリアです。
*****/
#macaronlife{
  background: linear-gradient(#f7e8e8,#e4ecef);
}

/* Lineupエリアの学習中に共通パーツ化を行う
.life-wrapper{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
*/

.life-type{
  text-align: center;
}

.life-img{
  width: 100%;
  margin-bottom: 5px;/
}

.life-type a{
  display: block;
  padding: 10px;
  color: #333;
}

.life-type a:hover{
  color: #955E64;
  box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1); /* コンテンツに影をつける */
}


/* モーダル設定 */
.modal-main{
  display: none;
}

.modal-inner {
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  color: #666666;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.inner-content{
  text-align: center;
  margin: 0;
  padding: 0;
  max-width: 1024px;
}

.modal-inner img{
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.inner-title{
  margin-top: 40px;
  margin-bottom: 32px;
  font-size: 2.8rem;
  font-weight: bold;
}

.inner-text{
  font-size: 1.6rem;
  width: 70%;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.modalClose{
  cursor: pointer;
}



/*****
■ラインナップエリア
商品紹介のエリアです。
商品の情報が一目で伝わるような構成にします。
*****/
.lineup-menu{
  margin-bottom: 3rem;
}

.lineup-menu ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 2px solid #d29490;
}

.lineup-menu ul li{
  width: 100%;
  text-align: center;
}

.lineup-menu ul li a{
  display: block;
  color: #333;
  background-color: #f4e8e8;
  border-radius: 30px 30px 0 0;
  padding: 0.5rem 0;
}

.lineup-menu ul li a:hover{
  color: #fff;
  background-color: #d29490;
}

.lineup-menu ul li.active a{
  color: #fff;
  background-color: #d29490;
}

/* Lineupエリアの学習中に共通パーツ化を行う
.lineup-wrapper{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
*/
.lineup-product{
  flex-basis: 31%;
}

.lineup-image{
  border-radius: 30px;
  border: 1px dashed #d29490;
  padding: 4rem 0;
  margin-bottom: 20px;
  text-align: center;
}

.lineup-name{
  margin-bottom: 10px;
}

.name-en{
  font-size: 1.5rem;
  font-weight: bold;
}

.lineup-text{
  line-height: 1.8;
}

.more-lineup{
  text-align: center;
  margin-top: 60px;
}

.btn-more{
  display: inline-block;
  background-color: #d29490;
  color: #fff;
  padding: 10px 100px;
  font-size: 1.375rem;
  letter-spacing: 3px;
}

.btn-more:hover{
  background-color: #955e64;
  color: #fff;
}



/*****
■パッケージエリア
商品を選ぶエリアになります。
個数の選択やカートに入れるなど、ECサイトに必須な機能を要します。
*****/
.package-lineup{
  flex-basis: 31%;
}

.package-image{
  width: 100%;
  border-radius: 30px;
  margin-bottom: 20px;
}

.package-title{
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.package-value{
  color: #dd918e;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.package-select{
  width: 100%;
  margin-bottom: 10px;
}

.purchase-number{
  margin-bottom: 20px;
}

.number{
  width: 50px;
}

.select-cart{
  margin-bottom: 30px;
  height: 54px;
}

.select-cart a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #586fc8;
  filter: drop-shadow(0px 4px 0px #243f81);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 4px;
  transition: 0s;
}

.select-cart a:hover{
  filter: none;
  height: 54px;
  margin-bottom: 0;
  transition: 0s;
}



/*****
■ストアエリア
店舗情報やGoogleマップなど
お客さんにお店のことを伝えるエリアです。
*****/
#store{
  background:#e4ecef;
}

.map-image, .cafe-text{
  flex-basis: 48%;
}

.store-name{
  font-size: 1.25rem;
  letter-spacing: 2px;
  font-weight: bold;
  margin-bottom: 30px;
}

address{
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.8;
}

.store-address{
  color: #624649;
}



/*****
■お問い合わせエリア
お客さまからのお問い合わせを受け付ける
お問い合わせフォームになります。
*****/
#contact{
background:#f7e8e8;
}

form{
  margin: 0 auto;
  max-width: 500px;
}

.ct-block{
  margin-bottom: 32px;
}

.contact-text{
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

.form-name, .form-mail, .cp-howto select{
  border: 1px solid #b1b1b1;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  background: #fff;
}

textarea{
  border: 1px solid #b1b1b1;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
}

.cp-howto {
  position: relative;
  border: 1px solid #b1b1b1;
  background: #fff;
}

.cp-howto::before {
  position: absolute;
  top: 14px;
  right: 10px;
  content: '';
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 13px solid #666;
}

.cp-howto select {
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 10px 40px 10px 10px;
}

.cp-howto select::-ms-expand {
  display: none;
}

.send-button{
  display: block;
  background-color: #dd918e;
  font-size: 1.375rem;
  padding: 10px 120px;
  margin: 0 auto;
  color: #fff;
  transition: 0.6s;
}

.send-button:hover{
  background-color: #fff;
  color: #dd918e;
  transition: 0.6s;
}



/*****
■フッターエリア
ページの最下部となるエリアです。
基本的にはロゴやサイトメニューなどの情報を表示します。
*****/
footer{
  background: #e2bfcb;
  color:#fff;
}

.footer-content{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin: 0 auto;
  padding: 40px 0;
}

.footer-content a{
  color:#fff;
}

.footer-content a:hover{
  color: #624649;
}

.logo-wrapper{
  flex-grow: 2;
}

.menu{
  flex-grow: 1;
}

.menu ul li{
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.logo{
  display: block;
  font-size:3rem;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 6px;
  margin-bottom: 10px;
}

.sns-block{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mark{
  margin-right: 1rem;
}

footer small{
  padding-bottom: 20px;
  display: block;
  text-align: center;
}



@media screen and (max-width:768px){
/*****
画面サイズが769pxまでは上の行までスタイルが反映され、
768px以下は上の行までのスタイルに追加で下記の内容が反映されます。
*****/

/*****
■共通パーツ
HTMLの要素単体であったり、よく使い回すレイアウトを簡単に反映できるよう
共通のスタイル設定をしてパーツ化します。
*****/
  body{
    overflow-x: hidden;
  }

  h1{
    font-size: 2.5rem;
    letter-spacing: 3px;
    text-align: center;
  }

  #concept, #feature, #thought, #macaronlife, #lineup, #package, #store, #contact{
    padding:60px 0;
  }


/*****
■ヘッダー
ページ上部をヘッダーと呼び、主にサイトメニュー（グローバルナビゲーション）や
重要なリンクを配置します。
*****/
  /*.g-navi{
    display: none;
  }*/

  .g-navi-sp{
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e2bfcb;
    width: 100%;
    height: 60px;
    padding: 4%;
    z-index: 3;
  }

  .sp-logo{
    font-size: 1.5rem;
    color: #fff;
    letter-spacing: 3px;
    font-family: 'Great Vibes', cursive;
  }

  .menu-trigger {
    position: relative;
    width: 30px;
    height: 42px;
    cursor: pointer;
  }

  .menu-trigger span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #fff; /* 横線を表す */
    border-radius: 3px;
    transition: .35s ease-in-out; /*変化の速度を指定*/
  }

  .menu-trigger span:nth-child(1) {
    top: 6px;
  }
  .menu-trigger span:nth-child(2) {
    top: 18px;
  }
  .menu-trigger span:nth-child(3) {
    top: 30px;
  }

  .menu-trigger.active span:nth-child(1) {
    top: 18px;
    transform: rotate(-45deg);
  }

  .menu-trigger.active span:nth-child(2),
  .menu-trigger.active span:nth-child(3) {
    top: 18px;
    transform: rotate(45deg);
  }

  .g-navi {
    display: block;
    position: fixed;
    z-index: 2;
    padding-top: 60px;
    transform: translateY(-100%);
    transition: .5s ease-in-out;
    height: 100vh;
  }

  .g-navi ul{
    display: block;
  }

  .g-navi.active{
    transform: translateY(0%);
    transition: .5s ease-in-out;
  }



/*****
■メインビジュアル
ページを開いた際に見えるページのスタート部分。
「ファーストビュー」「メインキャッチ」などとも呼ばれ、
主にどのようなサイトなのか？を視覚的に伝えます。
*****/
  #main-visual{
    background-image:url(../image/sp/mv.png);
    height: 500px;
    padding-top: 60px;
  }

  .mv-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .mv-right {
    position: relative;
    top: 0;
    right: 0;
  }

  .text{
    font-size: 1rem;
    margin-bottom: 30px;
    letter-spacing: 2px;
  }



/*****
■コンセプトエリア
ファーストビューエリアに続く、お店が伝えたい
メッセージを載せるエリアになります。
*****/
  #concept{
    background-size: 45%;
  }



/*****
■こだわりエリア
お店や商品がどのようなものなのかを使える
訴求エリアになります。
*****/
  .feature-wrapper{
    flex-wrap: wrap;
  }

  .feature-box{
    margin-bottom: 20px;
    max-width: inherit;
  }

  .feature-image{
    width: 100%;
  }



/*****
■想いのエリア
どのような想いで商品を作っているか
想いを伝えるエリアです。
*****/
  .staff-box{
    display: none;
  }

  .staff-box.active{
    display: block;
    background: none;
    padding: 0 2rem 2rem 2rem;
  }

  .staff-image{
    width: 100%;
    margin-bottom: 15px;
  }

  .staff-text{
    width: 100%;
    background: #f7e8e8;
    padding: 15px 10px 10px;
  }

  .staff-title{
    text-align: left;
    margin-bottom: 15px;
    line-height: 1.8;
  }

  .staff-about{
    margin-bottom: 10px;
    padding: 10px;
  }

  .slide-button{
    width: 30px;
    height: 30px;
  }



/*****
■マカロンライフのエリア
どのような想いで商品を作っているか
想いを伝えるエリアです。
*****/
  .life-wrapper{
    flex-wrap: wrap;
  }

  .life-type{
    flex-basis: 47%;
    margin-bottom: 20px;
  }

  .life-type a{
    padding: 0;
  }



/*****
■ラインナップエリア
商品紹介のエリアです。
商品の情報が一目で伝わるような構成にします。
*****/
  .lineup-menu{
    margin-bottom: 0;
  }

  .lineup-menu ul{
    flex-wrap: wrap;
    border-bottom: none;
  }

  .lineup-menu ul li{
    flex-basis: 50%;
    border-bottom: 2px solid #d29490;
    margin-bottom: 20px;
  }

  .lineup-menu ul li a{
    border-radius: 20px 20px 0 0;
    padding: 6px 0;
  }

  .lineup-wrapper{
    flex-wrap: wrap;
  }

  .lineup-product{
    flex-basis: 100%;
    margin-bottom: 40px;
  }

  .lineup-image{
    padding: 3rem 0;
  }

  .more-lineup{
    margin-top: 0;
  }



/*****
■パッケージエリア
商品を選ぶエリアになります。
個数の選択やカートに入れるなど、ECサイトに必須な機能を要します。
*****/
  .package-wrapper{
    flex-wrap: wrap;
  }

  .package-lineup{
    flex-basis: 100%;
    margin-bottom: 60px;
  }

  .package-lineup:last-child{
    margin-bottom: 0;
  }



/*****
■ストアエリア
店舗情報やGoogleマップなど
お客さんにお店のことを伝えるエリアです。
*****/
  .store-wrapper{
    flex-wrap: wrap;
  }

  .map-image, .cafe-text{
    flex-basis: 100%;
  }

  .map-image{
    height: 200px;
    margin-bottom: 30px;
  }

  .cafe-text{
    text-align: center;
  }

  .store-name{
    margin-bottom: 20px;
  }

  address{
    line-height: 2.4;
  }



/*****
■お問い合わせエリア
お客さまからのお問い合わせを受け付ける
お問い合わせフォームになります。
*****/



/*****
■フッターエリア
ページの最下部となるエリアです。
基本的にはロゴやサイトメニューなどの情報を表示します。
*****/
  .footer-content{
    text-align: center;
    flex-wrap: wrap;
  }
  
  .logo-wrapper{
    flex-grow: 1;
    flex-basis: 100%;
  }

  .logo{
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .sns-block{
    justify-content: center;
    margin-bottom: 40px;
  }

  .menu{
    flex-basis: 100%;
    margin-bottom: 20px;
  }

  .menu:last-child{
    margin-bottom: 0;
  }

  .menu ul li{
    margin-bottom: 10px;
  }

} /* ここまで767px以下の範囲 */