/*******************
Information
*******************/
/* 

概要：
モバイルファーストデザイン
pcでもモバイルのビューポートを維持
切り替えは
スマホ→タブレット→デスクトップ

スマホ→タブレット
「まほうのだがしやかか」と写真を一枚左側に追加表示
Bodyは右寄り

タブレット→デスクトップ
「MAHOU NO DAGASHIYA KAKA」と写真を一枚右側に追加表示
Bodyは中央

BreakPoint
mb = 910px
pc = 1120px


デザイン：

カラー{
mainColor : #F4F0ED;
black : #383838;
}

フォント{
headlineFont : Shippori Mincho B1
400 regular,
500 medium,
600 semibold,
700 bold,
800 extrabold;

textFont : 
Zen Kaku Gothic New
300 light,
400 regular,
500 medium,
700 bold,
900 black;
}

*/


/*******************
root
*******************/

:root{
  --black: #383838;
  --gray: #888888;
  --light-gray: #E0E0E0;
  --main-color: #F4F0ED;
  --headline-font:  "Shippori Mincho B1", serif;
  --text-font: "Zen Kaku Gothic New", serif;
  --fw-light:300 !important;
  --fw-regular:400 !important;
  --fw-medium:500 !important;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --fw-black:900;
  --highlight-letter-space:0.08em;
  --highlight-line-height:2.3;
  --normal-letter-space:0.05em;
  --normal-line-height:1.9;
  --title-letter-space:0.12em;
  --title-line-height:1.4;
  --small-letter-space:0.08em;
  --small-line-height:1.5;
  --link-letter-space:0.06em;
  --link-line-height:1.9;
}


/*******************
common
*******************/

body{
  width: 100vw;
  min-width: 320px;
  color: var(--black);
}

p,
a,
li,
span,
.normalText,
small{
  font-family: var(--text-font);
}

h1,
h2,
h3,
h4,
h5,
.headlineText{
  font-family: var(--headline-font);
  line-height: var(--title-line-height);
  letter-spacing: var(--title-letter-space);
}

h2{
  font-size: 28px;
  font-weight: var(--fw-medium);
  text-align: center;
}

h3{
  font-size: 22px;
  font-weight: var(--fw-medium);
}

h4{
  font-size: 20px;
  font-weight: var(--fw-medium);
}

img,
video{
  display: block;
  width: 100%;
  object-fit: contain;
}

.link{
  font-weight: var(--fw-bold);
  text-align: right;
  letter-spacing: var(--link-letter-space);
  line-height: var(--link-line-height);
}

.linkWithBorder{
  text-align: center;
  border: solid 1px var(--black);
  border-radius: 30px;
  letter-spacing: var(--link-letter-space);
  line-height: var(--link-line-height);
}
.linkWithBorder a{
  display: block;
  width: 100%;
  padding: 15px 0;
}

.highlightText{
  letter-spacing: var(--highlight-letter-space);
  line-height: var(--highlight-line-height);
}

.normalText{
  letter-spacing: var(--normal-letter-space);
  line-height: var(--normal-line-height);
}

.smallText{
  letter-spacing: var(--small-letter-space);
  line-height: var(--small-line-height);
}

.tab,
.pc{
  display: none;
}

@media(min-width:910px){
  .tab{
    display: inherit;
  }
}

@media(min-width:1120px){
  .pc{
    display: inherit;
  }
}

/* 確認用 */
.highlight{
  background: #fee994;
  display: inline !important;
}

/*******************
Body
*******************/

.outer{
  min-width: 320px;
  background: #ffffff;
  position: relative;
}

@media(min-width:910px){
  .outer{
    width: 390px;
    margin: 0 10% 0 auto;
  }
}

@media(min-width:1120px){
  .outer{
    margin: 0 auto;
  }
}

.background{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height:100vh;
  z-index: -1;
  background-image: url(../img/common/background.jpg);
}

.background .backgroundItem {
  position: absolute;
}

.background .backgroundItem h4{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.background .backgroundItem h4.jp{
  font-size: 30px;
  margin-right: 30px;
  line-height: 1.2;
  letter-spacing: 0.12em;
 }

.background .backgroundItem h4.en{
  transform: rotate(0.5turn);
  font-size: 18px;
  margin-left: 30px;
  line-height: 2.1;
  letter-spacing: 0.12em;
 }

.background .backgroundItem img{
  /* width: 250px; */
  width: 30vw;
  min-width: 250px;
  max-width: 300px;
}

@media(min-width:910px){
  .background .backgroundItem.tab{
    display: flex;
    top: 30px;
    left: 40px;
  }
}

@media(min-width:1120px){
  .background .backgroundItem img{
    /* width: 250px; */
    width: 20vw;
    min-width: 250px;
    max-width: 300px;
  }
  .background .backgroundItem.pc{
    display: flex;
    bottom: 40px;
    right: 40px;
  }
}
/*******************
Header
*******************/

header{
  position: relative;
  height: 420px;
}

/*============
Logo
============*/

header .title{
  width: 94px;
  position: absolute;
  z-index: 1;
  top: 35px;
  left: 20px;
}

header .headerImage{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

header .headerImage img,
header .headerVideo video{
  height: 420px;
  object-fit: cover;
}

/*============
.btnTrigger
============*/
header .btnTrigger {
  position: absolute;
  top: 35px;
  right: 20px;
  width: 36px;
  height: 24px;
  cursor: pointer;
  z-index: 2;
}
header .btnTrigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--black);
  border-radius: 4px;
}
header .btnTrigger, .btnTrigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
header .btnTrigger span:nth-of-type(1) {
  top: 0;
}
header .btnTrigger span:nth-of-type(2) {
  top: 10.5px;
}
header .btnTrigger span:nth-of-type(3) {
  bottom: 0;
}

header .btnTrigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(10.5px) rotate(-45deg);
}
header .btnTrigger.active span:nth-of-type(2) {
  opacity: 0;
}
header .btnTrigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-10.5px) rotate(45deg);
}

/*******************
Nav
*******************/

nav{
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  top:0;
  left: 0;
  background: var(--main-color);
  z-index: 1;
  transition: 0.3s;
}

nav.active{
  display: inherit;
  transition: 0.3s;
}

nav .container{
  padding: 0px 20px;
}
nav .container .navTitle{
  position: absolute;
  top: 35px;
  left: 20px;
}
nav .container .navTitle h2{
  font-size: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
}

nav .navItems{
  margin-top: 100px;
  letter-spacing: 0.08em;
}

/* 
footerと共有
*/
.navItems .navItem{
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: 18px;
  padding: 18px 0px;
  border-top: 1px solid var(--black);
}

.navItems .navItem:last-child{
  border-bottom: 1px solid var(--black);
}

.navItems .navItem span{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navItems .navItem img{
  width: 26px;
}

.navLinks{
  margin-top: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.navLinks .navLink.Instagram,
.navLinks .navLink.Line{
  text-align: left;
  display: block;
  font-size: 40px;
  font-weight: var(--fw-bold);
  margin-right: 20px;
}

.navLinks .navLink.Line{
  font-size: 34px;
}


/*******************
Main
*******************/

/*============
TOPページ
============*/

/* 
#about
*/

#top #about .container{
  padding-top: 35px;
  padding-bottom: 50px;
}

#top #about .aboutText{
  margin: 0px 20px;
}

#top #about .aboutMovie{
  width: 100%;
  margin-top: 50px;
}

#top #about .aboutMovie iframe{
  display: block;
}

/* 
#space
*/

#top #space .container{
  padding-top: 60px;
  padding-bottom: 100px;
  background-color: var(--main-color);
}

#top #space .container .innerBox{
  background: #ffffff;
  border-radius: 20px;
  margin-top: 45px;
  padding: 45px 0px 85px;
}

#top #space section{
  padding-bottom: 60px;
}

#top #space section:not(#top-tatami-room){
  margin-left: 20px;
  margin-right: 20px;
}


#top #space section#top-candy,
#top #space section#top-lunch-box{
  border-bottom : solid 1px var(--black);
}

#top #space section#top-lunch-box,
#top #space section#top-tatami-room{
  padding-top: 60px;
}

#top #space section#top-tatami-room .spaceName,
#top #space section#top-tatami-room .spaceImage,
#top #space section#top-tatami-room .spaceInfo{
  margin-left: 20px;
  margin-right: 20px;
}

#top #space section h3.name{
  margin-top: 5px;
}

#top #space section .spaceImage,
#top #space section .spaceInfo{
  margin-top: 20px;
}

#top #space section .spaceLink.link{
  margin-top: 5px;
}

/* 駄菓子スペース */

/* お弁当・お惣菜スペース */


/* 座敷スペース */
#top #space section#top-tatami-room #gallery{
  margin-top: 50px;
}

#top #space section#top-tatami-room #gallery .galleryItems{
  margin-left: 20px;
  margin-right: 20px;
}

#top #space section#top-tatami-room #gallery .galleryItems,
#top #space section#top-tatami-room #gallery .galleryItems .galleryBtns{
  display: flex;
  justify-content: space-between;
}

#top #space section#top-tatami-room #gallery .galleryItems .galleryBtns .galleryBtn{
  width: 25px;
  margin-left: 10px;
  cursor: pointer;
}

#top #space section#top-tatami-room #gallery .galleryImages{
  margin-top: 15px;
}

#top #space section#top-tatami-room #gallery .galleryImages .galleryImage{
  display: block;
  margin-right: 10px;
}

/* 
slick
*/
/* dotsを丸くカスタマイズするCSS */
.dot-class {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot-class li {
  width: 5px;
  height: 5px;
  margin: 0 2px;
  background: var(--light-gray);
  border-radius: 50%;
  cursor: pointer;
}

.dot-class li:hover,
.dot-class li.slick-active {
  background: var(--gray);
}
.dot-class li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}


/* 
#top-daily
*/

#top #top-daily .container{
  padding:50px 20px 40px;
}

#top #top-daily .container .dailyInstagram,
#top #top-daily .container .dailyText,
#top #top-daily .container .dailyText,
#top #top-daily .container .dailyLink{
  margin-top: 20px;
}

#top #top-daily .container .dailyText{
  text-align: center;
}

#top #top-daily .container .dailyLink{
  display: block;
}


/* 
#access
*/

#access .container{
  padding: 40px 0px 60px;
}

#access .container .accessImage,
#access .container .accessInfo{
  margin-top: 40px;
}

#access .container .accessInfo{
  padding-left: 20px;
  padding-right: 20px;
}

#access .container .accessInfo .time{
  margin-top: 10px;
}

#access .container .accessInfo .mapLink{
  width: 100%;
  text-align: left;
  margin-top: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--black);
}

#access .container .accessInfo .phone{
  margin-top: 20px;
}
#access .container .accessInfo .line{
  margin-top: 20px;
}

#access .container .accessInfo .accessMap{
  margin-top: 15px;
}


/*============
駄菓子ページ
============*/
#candy{}

/* 
#candy-about
*/
#candy #candy-about .container{
  padding: 50px 20px 30px;
}

#candy #candy-about .container .aboutText,
#candy #candy-about .container .aboutSubText{
  margin-top: 20px;
}

#candy #candy-about .container .aboutSubImg{
  margin-top: 50px;
}

/* 
#candy-menu
*/
#candy #candy-menu .container{
  padding: 30px 20px 60px;
}

#candy #candy-menu .container .menuText{
  margin-top: 20px;
  text-align: center;
}

#candy #candy-menu .container .menuBox{
  margin-top: 50px;
}

#candy #candy-menu .container .menuBox .menuName{
  margin-top: 20px;
}

#candy #candy-menu .container .menuBox .menuInfo{
  margin-top: 15px;
}

/*============
お弁当・お惣菜ページ
============*/
#food{}

/* 
#food-about
*/
#food #food-about .container{
  padding: 50px 20px 30px;
}

#food #food-about .container .aboutText,
#food #food-about .container .aboutSubText{
  margin-top: 20px;
}

#food #food-about .container .aboutSubImg{
  margin-top: 50px;
}

/* 
#food-menu
*/
#food #food-menu .container{
  padding: 30px 20px 60px;
}

#food #food-menu .container .menuText{
  margin-top: 20px;
  text-align: center;
}

#food #food-menu .container .menuBox{
  margin-top: 50px;
}

#food #food-menu .container .menuBox .menuName{
  margin-top: 20px;
}

#food #food-menu .container .menuBox .menuPrice{
  margin-top: 10px;
}

#food #food-menu .container .menuBox .menuInfo{
  margin-top: 15px;
}

/* 
#what-we-cook
*/
#what-we-cook .container{
  background: var(--main-color);
  padding: 60px 0px 100px;
}

#what-we-cook .container .cookBox{
  margin-top: 40px;
  background: #ffffff;
  border-radius: 20px;
  padding: 60px 20px 35px;
}

#what-we-cook .container .cookBox .cookText{
  margin-top: 40px;
}

/* 
#food-commitment
*/
#food #food-commitment{
  padding: 60px 20px 80px;
}

#food #food-commitment #commitment{
  margin-top: 0;
}

/*============
こだわりページ
============*/
#feature{}

/* 
#feature-about
*/
#feature #feature-about .container{
  padding: 50px 0px 30px;
}

#feature #feature-about .container .aboutText,
#feature #feature-about .container .aboutSubText{
  margin-top: 20px;
  padding: 0px 20px;
}

#feature #feature-about .container .aboutSubImg{
  margin-top: 50px;
}

#feature #feature-about .container .aboutBox {
  margin-top: 20px;
}

#feature #feature-about .container .aboutBox .featureItem{
  padding: 50px 20px;
}

#feature #feature-about .container .aboutBox .featureItem.colored{
  background: var(--main-color);
}

#feature #feature-about .container .aboutBox .featureItem .featureName{
  margin-top: 5px;
}

#feature #feature-about .container .aboutBox .featureItem .featureInfo{
  margin-top: 25px;
}


/* 
#farmer
*/
#feature #farmer .container{
  padding: 30px 20px 60px;
}

#feature #farmer .container .farmerBox{
  margin-top: 50px;
}

#feature #farmer .container .farmerBox .farmerName{
  margin-top: 20px;
}

#feature #farmer .container .farmerBox .farmerInfo{
  margin-top: 15px;
}

/*============
まほうページ
============*/
#magic{}


/* 
#magic-about
*/
#magic #magic-about .container{
  padding: 50px 20px 30px;
}

#magic #magic-about .container .aboutText{
  margin-top: 20px;
}

/* 
#magic-toy-machine
*/
#magic #magic-toy-machine .container{
  margin-top: 60px;
}
#magic #magic-toy-machine .container .machineSteps {
  margin-top: 20px;
}

#magic #magic-toy-machine .container .machineSteps .machineStep{
  padding: 50px 20px;
}

#magic #magic-toy-machine .container .machineSteps .machineStep.colored{
  background: var(--main-color);
}

#magic #magic-toy-machine .container .machineSteps .machineStep .stepName{
  margin-top: 5px;
}

#magic #magic-toy-machine .container .machineSteps .machineStep .stepInfo,
#magic #magic-toy-machine .container .machineSteps .machineStep .stepImg{
  margin-top: 25px;
}

/* 
.gap
*/
#magic .gap{ 
  height: 100px;
  background: #FFFFFF;
}

/*******************
Components
*******************/
/* 
#commitment
*/
#commitment{
  margin-top: 35px;
  background: var(--main-color);
  border-radius: 20px;
  padding: 30px 15px 35px;
}

#commitment .commitTitle,
  #commitment .commitText{
  text-align: center;
}

#commitment .commitImage,
#commitment .commitText,
#commitment .commitLink{
  margin-top: 20px;
}
#commitment .commitText{
  font-size: 14px;
}

/* 
#magic-banner
*/

#magic-banner .container{
  padding:60px 20px 50px;
  max-width: 390px;
  margin: 0 auto;
}

#magic-banner .container .aboutMagic{
  margin-top: 20px;
}

#magic-banner .container .magicSteps{
  margin-top: 15px;
  position: relative;
}

#magic-banner .container .magicSteps .magicStep{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

#magic-banner .container .magicSteps .magicStep.reverse{
  flex-direction: row-reverse;
}

#magic-banner .container .magicSteps .magicStep:nth-child(1){
  transform: translateY(10px);
}

#magic-banner .container .magicSteps .magicStep:nth-child(2){
  transform: translateY(-10px);
}

#magic-banner .container .magicSteps .magicStep:nth-child(3){
  transform: translateY(-40px);
}

#magic-banner .container .magicSteps .magicStep .stepImg{
  width: 190px;
}

#magic-banner .container .magicSteps .magicStep .stepText{
  width: fit-content;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

/* 
#rule-of-coin
*/
#rule-of-coin .container{
  background: var(--main-color);
  padding: 60px 0px 100px;
}

#rule-of-coin .container .ruleBox{
  margin-top: 40px;
  background: #ffffff;
  border-radius: 20px;
  padding: 60px 20px 35px;
}

#rule-of-coin .container .ruleBox .ruleText{
  margin-top: 40px;
}

#rule-of-coin .container .ruleBox .ruleCaption{
  margin-top: 20px;
}


/*******************
Footer
*******************/

footer .container{
  background: var(--main-color);
  padding: 40px 20px 30px;
}

footer .container .footerLogo{
  width: 235px;
  margin: 0px auto;
}

footer .container .footerNav{
  margin-top: 45px;
  width: 100%;
}

footer .container .footerCopy{
  display: block;
  margin-top: 50px;
  width: 100%;
  text-align: center;
  font-size: 14px;
}


/* 
instagram
*/

.insta_list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 20px 0;
}

.insta_list .post{
  position: relative;
  width: calc((100% - 10px)/3);
}

.insta_list .post::before{
content: "";
display: block;
padding-top: 100%;
}

.insta_list a{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

.insta_list img{
width: 100%;
height: 100%;
object-fit: cover;
}

.insta_list .post .post_cover {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  transition: 0.3s;
}

.insta_list .post.active .post_cover {
  opacity: 0.6;
  transition: 0.3s;
}