@charset "UTF-8";
/* CSS Document */

/*---------- common ----------*/

.fv-page_ttl-in h2 span span {
  font-size: 1.6rem;
}

#food h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.8rem;
  line-height: 1.2;
  color: #000;  
}
#food h2 span {
  display: block;
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
}

/*---------- .greeting ----------*/
.gree{
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 5rem;
  position: relative;
}
.gree section{
  width: auto;
  margin-left: 0;
  padding: 2.5rem 0 5rem;
}
.gree section h2{
  padding: 0 0 3rem;
}
.gree section h2 + p{
  font-size: 1.4rem;
}
.gree section h2 + p span{
  display: block;
  padding: 0 0 1rem;
}
.gree figure{
  width: auto;
  text-align: center;
  position: static;
}



/*---------- .check ----------*/
.check{
  padding: 5rem 0 0;
  background: var(--gray);
}
.check-flex{
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem;
}
.check-flex h2{
  width: auto;
  padding: 0 0 3rem;
  text-align: center;
}
.check-point{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
}
.check-point article{
  width: auto;
  margin: 0 0 3rem;
}
.check-point article div{
  padding: 0 1rem;
}
.check-point article div dl{
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
}
.check-point article div dl dt{
  width: 14%;
  text-align: center;
  font-size: 2.1rem;
}
.check-point article div dl dd{
  width: 86%;
  padding: 0 0 0 1.5rem;
  border-left: 1px solid #ccc;
  font-size: 1.8rem;
}
.check-point article div dl + p{
  height: auto;
  padding: 0 0 2rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;  
}
.check-point article div dl + p span{
  display: block;
  color: var(--red);
  font-size: 1.2rem;  
}
.check-point article div p.check-btn a{
  display: block;
  padding: 0.5rem 0;
  text-align: center;
  border: 1px solid var(--red);
  color: var(--red);
  background: #fff url(../img/arrow_down-red.svg) no-repeat 82% 53%;
  background-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;  
}
.check-point article div p.check-btn a:hover{
  color:#fff;
  background: var(--red) url(../img/arrow_down-white.svg) no-repeat 82% 53%;
  background-size: 12px;
}



/*---------- .area ----------*/
.area-flex{
  padding: 5rem 0 50rem;
  background: url(../img/page-map.svg) no-repeat center bottom;
  background-size:500px;
}
.area-flex section{
  width: auto;
  margin-left: 0;
  padding: 0;
}
.area-flex section h2{
  text-align: center;
}
.area-flex section h2 + p{
  padding: 3rem 1.5rem 0;
  font-size: 1.4rem;
}
.area-flex section h2 + p span{
  display: block;
  padding: 1rem 0 0;
}



/* 料金
--------------------------*/
.ph-menu{
  padding: 5rem 0;
}
.ph-menu section{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0 1.5rem;
}

/* 料金 左 SP
--------------------------*/
.ph-menu-note{
  width: auto;
  padding: 0 0 4rem;
}
.ph-menu-note h2{
  padding: 0 0 3rem;
  text-align: center;
}

/* スマホ用サブメニュー ------- */
.ph-menu-note ul{
  display: flex;
  justify-content: center;
  margin: 0 0 4rem;
  padding: 1rem 0;
  background: var(--gray);
}
.ph-menu-note ul li a{
  display: block;
  padding: 0 1.5rem;
  text-align: center;
  border-right:1px solid #ccc;
  font-size: 1.2rem;
  font-weight: bold;
}
.ph-menu-note ul li:last-child a{
  border-right: 0;
}

/* 見出し h3 ------- */
.ph-menu-note h3{
  padding: 0 0 3rem;
  text-align: center;
  line-height: 1.4;  
  font-size: 2.4rem;
}
.ph-menu-note h3 > span{
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--red);
}
.ph-menu-note h3 > span span{
  font-size: 1.4rem;
}
.ph-menu-note h3 + p{
  padding: 0 1rem;
  line-height: 2;
  font-size: 1.4rem;
  font-weight: bold;
}

/* 料金 右 SP
--------------------------*/
.ph-menu-content{
  width: auto;
  padding: 0;
}

.ph-menu-content article{
  position: relative;
}

/* 見出し h4 ------- */
.ph-menu-content article h4{
  width: 9rem;
  height: 3rem;
  margin: 0 0 1.5rem;
  text-align: center;
  color: #fff;
  background: #000;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: bold;  
  position: relative;
}
.ph-menu-content article h4::before{
  display: block;
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  border-bottom:8px solid transparent;
  border-left:8px solid #000;
}
.ph-menu-content article h4 span {
  display: block;
  width: 25em;
  color: #333;
  font-weight: normal;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translateY(-50%);
}

/* サービス（SERVICE）------- */
.ph-menu-content article .ph-menu-icon{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0 2rem;
}
/* サービス アイコンボックス------- */
.ph-menu-content article .icon-box{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  margin: 0 0 1rem;
  padding: 1.5rem 0;
  background: var(--gray);
}
.ph-menu-content article .icon-box > p{
  width: 28%;
}
.ph-menu-content article .icon-box > p span{
  display: block;
  width: 4rem;
  margin: 0 auto;
}
.ph-menu-content article .icon-box > p span.icon-size{ 
  width: 7rem;  
}
.ph-menu-content article .icon-box ol{
  width: 72%;
  padding: 0 2.5rem;
  border-left: 1px solid #ccc;
  text-align: left;
}
.ph-menu-content article .icon-box ol li:first-child{
  padding: 0;
  font-size: 1.6rem;
}
.ph-menu-content article .icon-box ol li:last-child{
  font-size: 1.4rem;
}
.ph-menu-content article .icon-box ol li:last-child span{
  display: block;
  color: var(--red);
}



/* 料金（PRICE）------- */
.ph-menu-tb{
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
}
.ph-menu-tb tr{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.ph-menu-tb th,.ph-menu-tb td{
  line-height: 1.5;
  vertical-align: middle;
}
.ph-menu-tb strong{
  padding: 0 0.2rem;
  font-family: Roboto, 'Noto Sans JP', sans-serif;
}
.ph-menu-tb th strong{
  font-size: 1.6rem;
}
.ph-menu-tb td strong{
  font-size: 2rem;
}
.ph-menu-tb th span, .ph-menu-tb td span {
  display: block;
  font-size: 1.4rem;
}
.ph-menu-tb th{
  padding: 2rem;
  text-align: left;
  background: var(--gray);
}
.ph-menu-tb td{
  padding: 2rem 0 2rem 2.5rem;
}

/* 共通：ベーシック・台紙 ---*/
.price-tb th{width: 42%;}
.price-tb td{width: 58%;}

/*共通：注釈 ---*/
.price-ol{
  padding: 2rem 0 2.5rem;
}
.price-ol li{
  padding: 0 0 0.5rem 1.1em;
  font-size: 1.2rem;
  line-height: 1.3;
  position: relative;
}
.price-ol li::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}



/* 動画編集
------------------------*/
.mv-ttl{
  width: 100%;
  padding: 0.5rem 0 1rem;
  font-size: 1.4rem;
  position: static;
}

.movie-tb th{width: 37%;}
.movie-tb td{width: 63%;}

.ph-menu-tb th.th-media{
  padding: 2rem 0;
  text-align: center;
}
.ph-menu-tb td.td-media{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;  
  padding: 2rem 0 2rem 1.5rem;
}
.ph-menu-tb td.td-media p{
  width: auto;
}
.ph-menu-tb td.td-media p.mark-dvd::before,
.ph-menu-tb td.td-media p.mark-bray::before{
  margin: 0 0.5rem 0 0;
  padding: 0 0.2rem;
  line-height: 1;
  text-align: center;  
  font-size: 1.2rem;
}
.ph-menu-tb td.td-media p.mark-dvd::before{
  content: "DVD";
  color: #026b3c;
  border: 1px solid #026b3c;
}
.ph-menu-tb td.td-media p.mark-bray::before{
  content: "ブルーレイ";
  text-align: center;
  color: #4272d7;
  border: 1px solid #4272d7;
}



/*----------------------------------------------------
タブレット用 750px以上
----------------------------------------------------*/

@media only screen and (min-width: 750px) {

  /*---------- common ----------*/
  #food h2 {
    font-size: 4.2rem;
  }



  /*---------- .check ----------*/
  .check{
    padding: 5rem 5rem 0;
  }



  /*---------- .menu ----------*/
  .ph-menu section{
    flex-direction: row;
  }
  .ph-menu-note{
    width: 34%;
    padding: 0;
  }
  .ph-menu-note h2{
    text-align: left;
  }
  .ph-menu-content{
    width: 60%;
  }

  /* スマホ用サブメニュー ------- */
  .ph-menu-note ul{
    display: none;
  }

  /* 見出し h3 ------- */
  .ph-menu-note h3{
    text-align: left;
  }
  .ph-menu-note h3 + p {
    padding: 0 0 3rem;
    border-bottom: 1px #ccc solid;
    position: relative;
  }
  .ph-menu-note h3 + p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 8px transparent solid;
    border-top: 8px #000 solid;
    transform: rotate(45deg);
    position: absolute;
    bottom: -0.9rem;
    right: 0.3rem;
  }

  /* サービス（SERVICE）750 ------- */
  .ph-menu-content article .ph-menu-icon{
    flex-direction: row;
    padding: 0 0 3rem;
  }
  /* サービス アイコンボックス 750 ------- */
  .ph-menu-content article .icon-box{
    flex-direction: column;
    align-items: center;
    width: 48%;
    margin: 0 0 1rem;
    padding: 3rem 2rem;
  }
  /* サービス アイコンボックス 750 ------- */
  .ph-menu-content article .icon-box.mount{
    width: 80%;
  }

  .ph-menu-content article .icon-box > p{
    width: auto;
    height: 3.5rem;
  }
  .ph-menu-content article .icon-box ol{
    width: auto;
    padding: 0;
    border-left: none;
  }
  .ph-menu-content article .icon-box ol li:first-child{
    padding: 1.5rem 0 1rem;
    text-align: center;
  }
  .ph-menu-content article h4 span {
    font-size: 1.6rem;
  }



}



/*----------------------------------------------------
タブレット・PC用 1000px以上
----------------------------------------------------*/

@media only screen and (min-width: 1000px) {

  /*---------- common ----------*/
  #food h2 {
    font-size: 6.0rem;
    padding-bottom: 3rem;
  }

  /*---------- .greeting 1000 ----------*/
  .gree{
    display: block;
    padding: 0 1.5rem;
  }
  .gree section{
    width: 40%;
    margin-left: auto;
    padding: 0 0 5rem;
  }

  .gree figure{
    width:55%;
    position: absolute;
    top: 0;
    left: 1%;
  }



  /*---------- .check 1000 ----------*/
  .check{
    padding: 10rem 0 0; 
  }
  .check-flex h2{
    padding: 0 0 5rem;
  }
  .check-point{
    flex-direction: row;
    justify-content: center;
  }
  .check-point article{
    width: 30%;
    margin: 0 2.5rem;
  }



/*---------- .area 1000 ----------*/
.area-flex{
  padding: 0 1.5rem;
  background: url(../img/page-map.svg) no-repeat 5% bottom;
  background-size:450px;
}
.area-flex section{
  width: 50%;
  margin-left: auto;
  padding: 10rem 0 5rem;
}
.area-flex section h2{
  text-align: left;
}
.area-flex section h2 + p{
  padding: 3rem 0;
  font-size: 1.6rem;
}
.area-flex section h2 + p span{
  font-size: 1.4rem;
  padding: 1.5rem 0 0 0;
}



  /* 料金 1000
  --------------------------*/
  .ph-menu{
    padding: 10rem 1.5rem;
  }

  /*---------- .menu 1000 ----------*/
  .ph-menu-note{
    width: 32%;
    padding: 0;
  }

  /* オプション（OPTION）動画編集 1000　------- */
  p.mv-ttl{
    font-size: 1.6rem;
  }
  .mv-closs p{
    width: 45%;
    padding: 2rem 1rem 2rem 9rem;
    text-align: left;
  }
  .mv-closs p:first-child{
    background: url(../img/icon-camera-red.svg) no-repeat 3rem center;
    background-size: 4rem;
  }
  .mv-closs p:last-child{
    background: url(../img/icon-movie-blue.svg) no-repeat 3rem center;
    background-size: 4rem;
  }



}



/*----------------------------------------------------
PC用 1200px以上
----------------------------------------------------*/

@media only screen and (min-width: 1200px) {
  
  /*---------- .greeting 1200 ----------*/
  .gree section{
    padding: 2.5rem 0 7rem;
  }




  .ph-menu section{
    margin: 0 0 5rem;
    padding: 5rem 0 0 0;
  }

  /* サービス（SERVICE）1200 ------- */
  .ph-menu-content article .ph-menu-icon{
    justify-content: flex-start;
  }
  /* サービス アイコンボックス 1200 ------- */
  .ph-menu-content article .icon-box{
    width: 24.25%;
    margin: 0 1% 0 0;
  } 
  /* サービス アイコンボックス(台紙用) 1200 ------- */
  .ph-menu-content article .icon-box.mount{
    width: 48%;
    margin: 0;
  }
  .ph-menu-content article .icon-box.last{
    margin: 0;
  }



}



/*----------------------------------------------------
PC用 1400px以上
----------------------------------------------------*/
@media only screen and (min-width: 1400px) {

  .fv-page_ttl-in h2 span span {
    font-size: 3.6rem;
  }

  /*---------- .greeting 1400 ----------*/
  .gree{
    padding: 0;
  }
  .gree section{
    width: 40%;
    padding: 3rem 0 0 7rem;
  }
  .gree section h2{
    padding: 0 0 5rem;
  }
  .gree section h2 + p{
    font-size: 1.6rem;
  }
  .gree section h2 + p span{
    padding: 0 0 2rem;
  }
  .gree figure{
    width:60%;
    position: absolute;
    top: 2%;
    left: 0;
  }



  /*---------- .check 1400 ----------*/
  .check{
    padding: 10rem 0 0;
  }
  .check-flex{
    flex-direction: row;
    padding: 0;
  }
  .check-flex h2{
    width: 40%;
    padding: 0;
  }
  .check-point{
    width: 60%;
    justify-content: flex-start;
  }
  .check-point article{
    width: 40%;
    margin: 0;
  }
  .check-point article:last-child {
    margin-left: 5rem;
  }
  .check-point article div dl + p{
    height: 10rem;
  }



  /*---------- .area 1400 ----------*/
  .area-flex{
    padding: 0;
    background: url(../img/page-map.svg) no-repeat 3% bottom;
    background-size:500px;
  }
  .area-flex section{
    width: 47%;
    padding: 5rem 0 8rem;
  }



  /* 料金 1400
  --------------------------*/
  .ph-menu{
    padding: 10rem 0 0;
  }

  /*---------- .menu ----------*/
  .ph-menu-note{
    width: 24%;
  }
  /* 見出し h3 ------- */
  .ph-menu-note h3{
    padding: 0 0 5rem;
    font-size: 3.6rem;
  }
  
  .ph-menu-content{
    width: 66%;
  }

   /* 料金（PRICE）1400 ------- */
  .ph-menu-tb{
    font-size: 1.8rem;
  }
  .ph-menu-tb strong{
    padding: 0 1rem;
  }
  .ph-menu-tb th strong{
    font-size: 1.8rem;
  }
  .ph-menu-tb td strong{
    font-size: 2.4rem;
  }
  .ph-menu-tb th{
    padding: 2rem 0 2rem 5rem;
  }
  .ph-menu-tb td{
    padding: 2rem 0rem 2rem 5rem;
  }

  /* 幅指定 1400 */
  .price-tb th{width: 34%;}
  .price-tb td{width: 66%;}

  .price-ol{
    padding: 1.5rem 0 3rem;
  }
  .price-ol li{
    font-size: 1.4rem;
  }



}