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

div.freepage-wrap{margin: 0 8px;}

/*-- フリーページタイトル --*/
.freepage-title {
  font-size: 1.8rem;
  border-left: solid 4px #ff40a9;
  padding: 12px 8px;
  background: #fff0f6;
  margin-bottom: 16px;
}

/*---------------------------------
よくあるご質問
---------------------------------*/
div.faq-wrap{margin-top: 24px;}
div.faq-wrap a {
  color: #ff40a8;
  text-decoration: underline;
  word-break: break-all;
}

div.faq-index-box{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
}

div.faq-index-box div.faq-cate-box{
  display: block;
  width: calc((100% - 10px)/2);
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid;
}

div.faq-index-box div.faq-cate-box:nth-of-type(2n){margin-right: 0;}
div.faq-cate-box p.faq-cate-title{
  padding: 0;
  margin: 0;
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
}

div.faq-cate-box p.faq-cate-title:before{
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;  
  content: "▼";
  top: 12px;
  right: 5px;
  transition-duration: 500ms;
}

div.faq-cate-box p.faq-cate-title.open:before{
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;  
  content: "▼";
  right: 10px;
  transform: rotate(-180deg);
  transition-duration: 500ms;
}

div.faq-cate-box p.faq-cate-title a{
  display: block;
  width: 100%;
  padding: 12px 24px 12px 12px;
  text-decoration: none;
  color: #333333;
}
div.faq-cate-box ul.faq-index{
  display: none;
  border: none;
  margin: 0;
  padding: 10px;
}

div.faq-cate-box ul.faq-index li{margin-bottom: 8px;}
div.faq-cate-box ul.faq-index.open {display:block;}


div.answer-box{margin: 24px 0 48px;}
div.answer-box h3{
  font-size: 1.6rem;
  background: url(https://gigaplus.makeshop.jp/mobilefilm/images/usr/h2-bg.png) left bottom no-repeat;
  padding-bottom: 4px;
  margin-bottom: 12px;
}

div.answer-box dl{margin-bottom: 16px;}
div.answer-box dl dt{font-weight:bold;}

@media screen and (max-width: 768px) {
    div.faq-index-box div.faq-cate-box{
      width: 100%;
      margin-right: 0;
    }
}


/*---------------------------------
取り扱いフィルム一覧
---------------------------------*/
div.table-box {
  width: 95%;
  margin: 0 auto;
}

table.film-list{width: 100%;}
table.film-list th, table.film-list td{
    border: solid 1px #ccc;
    vertical-align: middle;
    padding: 2px 6px;
    text-align: center;
}

table.film-list td.fi{
    text-align: left;
    text-decoration: underline;
}

table.film-list th{background-color: #ffebf6;}


div.sepacut-film{
    background-color:#FCE8EE;
    border: solid 1px #FFA4D1;
    margin: 40px 2%;
    padding: 16px 8px;
}

div.sepacut-film > h3{
    font-size: 1.8rem;
    margin-bottom: 0;
    padding-bottom: 8px;
}

div.sepacut-film > h3 > span{
	display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
}

div.sepacut-film > h3 > span > img{
    width: 45px;
    position:relative;
    top:-2px;
    }

div.sepacut-film > div.sepacut-film-flex{
    display:flex;
    justify-content: space-between;
    align-items: center;

}

div.sepacut-film-flex > p{width: 55%;}
div.sepacut-film-flex > p > img{width: 100%;}
div.sepacut-film-text{width: 43%;}

div.sepacut-film-text > a{
    display: block;
    width: 95%;
    margin: 16px auto 0;
    padding: 12px 0;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    border-radius: 32px;
    background: #ff40a8;
    color: #fff;
}

div.sepacut-film-text > a:hover{opacity: 0.8;}
div.sepacut-film-text .fb{font-weight:bold;}


.filmType {
	padding: 20px 0;
    border-top: 2px dotted #cccccc;
}

div.filmType h3{
    font-size: 1.8rem;
    padding-bottom: 0;
}

div.filmType div.film-flex {
  display: flex;
  align-items: center;
}

div.film-flex div.filmLeft {
  width: calc(50% - 16px);
  margin-right: 16px;
}

div.film-flex div.filmRight {width: 50%;}
div.filmRight ul{margin: 16px 0;}

div.film_deta_pack a{
    text-decoration: underline;
    color: #ff40a8;
}



@media screen and (max-width: 768px) {
    div.table-box {
        overflow-x: auto;          /* 横だけスクロール */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    table.film-list th, table.film-list td{white-space: nowrap;}
    

    div.sepacut-film > div.sepacut-film-flex{display:block;}
    div.sepacut-film-flex > p , div.sepacut-film-text{width: 100%;}
    
    div.filmType{margin: 0 8px;}
    div.filmType div.film-flex {display:block;}
    div.film-flex div.filmLeft {
      width: 100%;
      margin-right: 0;
      text-align: center;
    }
    
    div.film-flex div.filmRight {width: 100%;}
}



/*---------------------------------
手で切れるはく離フィルムについて
---------------------------------*/
div.sepacut-film-summary{margin-top: 16px;}
div.sepacut-film-summary > p:last-child{margin: 16px 0 24px;}

div.sepa-cut-film-flexbox{
    display:flex;
    justify-content: space-between;
    align-items: center;
    border: dotted #ccc;
    border-width: 2px 0 0;
    padding: 16px 8px;
}

div.sepa-cut-film-flexbox > p{width: 50%;}
div.sepa-cut-film-flexbox > p > img{width: 100%;}

div.sepa-cut-film-flexbox > div.sepacut-film-flextext{
    margin-left: 8px;
    width: 48%;
}

div.sepacut-film-flextext > dl > dt{
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 8px;
}

div.sepacut-film-flextext > dl > dd{
    margin-left: 1em;
    text-indent:-1em;
    padding-left: 1em;
    margin-bottom: 6px;
}

div.sepacut-film_movie{
    position: relative;
    margin-top: 32px;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

div.sepacut-film_movie iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.sepacut-target-item{padding: 32px 0 16px;}

div.sepacut-target-item p{
    font-size: 1.6rem;
    font-weight:bold;
    margin-bottom: 8px;
}

div.sepacut-target-item > ul{margin-left: 24px;}
div.sepacut-target-item > ul > li > a{
    line-height: 28px;
    color: #ff40a8;
    border-bottom: solid 1px;
}

@media screen and (max-width: 768px) {
    div.sepa-cut-film-flexbox{display:block;}
    div.sepa-cut-film-flexbox > p{width: 100%;}
    div.sepa-cut-film-flexbox > div.sepacut-film-flextext{width: 100%;}
    
    div.sepacut-film-flextext > dl > dd{padding-left:0;}

}


/*---------------------------------
各種保護フィルムについて
---------------------------------*/

div.film-flex-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 16px 0;
    padding: 16px 0;
    border-bottom: dashed 1px #ccc;
}

div.film-left {
    display: flex;
    width: 35%;
    min-width: 300px;
    text-align:center;
}

div.film-left div.img_l, div.film-left div.img_r{
    width: calc(50% - 4px);
    margin: 4px;
}

div.film-left p{font-size: 1.2rem;}

div.film-right {
    width: calc(65% - 16px);
    margin-left: 16px;
}

div.film-right dl dt{
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 8px;
}

div.film-right dl dd{padding-left: 8px;}

@media screen and (max-width: 768px) {
    div.film-flex-box {display:block;}
    div.film-left{margin: 0 auto;}
    
    div.film-right{
        width: 100%;
        margin-left: 0;
    }

}


/*---------------------------------
各種保護フィルムの貼り付け方法
---------------------------------*/
div.howfi-wrap h3{
  font-size: 1.6rem;
  margin: 32px 0 24px;
  padding-bottom: 4px;
  border-bottom: solid 1px #707070;
}

div.howfi-wrap h4{
  font-size: 1.4rem;
  font-weight:bold;
}


div.how_film{
    margin: 8px 0 24px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

div.how_film-section{
    box-sizing: border-box;
    border:solid 1px #ccc;
    width: calc(50% - 8px);
    padding: 16px;
    margin-bottom: 24px;
}

div.how_film-section img{width: 100%;}
div.how_film-section div.how_film-txt{
    margin-top: 8px;
}

div.how_film-section p.how_film-note{
    color:#CC2225;
    font-size: 1.2rem;
    margin-top: 4px;
}


@media screen and (max-width: 768px) {
div.how_film{display: block;}
div.how_film-section{width: 100%;}

}


/*---------------------------------
お得なキャンペーン
---------------------------------*/

div.campaign-wrap div.cam-mainimg{margin-bottom: 16px;}
div.campaign-wrap div.topiclist_{margin: 16px 0 24px;}

div.campaign-wrap div.topiclist_ h3{
  font-size: 1.4rem;
  background: url(https://gigaplus.makeshop.jp/mobilefilm/images/usr/h2-bg.png) left bottom no-repeat;
  padding: 6px 0;
  margin-bottom: 10px;
}

div.campaign-wrap div.topiclist_ h3::before {
  content: url(https://gigaplus.makeshop.jp/mobilefilm/images/usr/aicon_h2.gif);
  position: relative;
  top: 2px;
  margin-right: 5px;
}

div.topiclist_ p.cam-name, div.topiclist_ p.cam-date{
  font-size: 1.6rem;
  font-weight:bold;
}

div.cam-link-btn{
  margin: 32px auto;
  text-align: center;
}

div.cam-link-btn a{
  display: inline-block;
  background-color: #ff40a8;
  color: #FFF;
  padding: 16px 24px;
  border-radius: 6px;
}


/*---------------------------------
個人情報保護ポリシー
---------------------------------*/
div.privacy-policy-wrap div.pmark{
  text-align: center;
  margin: 16px 0;
}

div.privacy-policy-wrap h3{
  font-size: 1.6rem;
  border: solid #333;
  border-width: 0 0 1px 3px;
  padding: 8px;
  margin-bottom: 16px;
}

div.privacy-policy-wrap h4{margin-bottom: 4px;}

div.privacy{margin-bottom: 24px;}
div.privacy > ul{
  padding-left: 1em;
  text-indent: -1em;
  margin-left: 8px;
}

div.privacy > div.privacycontact{
  margin: 24px 0;
  border: solid 1px #333;
  padding: 16px 16px 8px;
}

div.privacy > div.privacycontact > p{margin-left: 8px;}

p.privacy-address{text-align:right;}


/*---------------------------------
週末ハッピークーポン　詳細ページ
---------------------------------*/
div.weekend-coupon{
	display: flex;
	justify-content: space-between;
}

div.weekend-coupon p{margin-bottom:0;}

div.coupon-detiel{
  width: calc(50% - 8px);
  text-align: center;
  border-radius: 8px;
  padding: 6px;
}

div.coupon-detiel.w500{background-color: #ff772d;}
div.coupon-detiel.w1500{background-color: #ff438b;}

div.coupon-detiel > p.coupon-ttl{
  padding: 6px;
  color: #fff;
  font-size: 1.6rem;
}
div.coupon-detiel > p.coupon-ttl span{
  font-weight: bold;
  border-bottom: solid 1px #fff;
}

div.coupon-detiel > div.coupon-code{
  font-weight: bold;
  background-color: #fff;
  margin: 6px;
  padding: 12px 0;
  border-radius: 6px;
}
div.coupon-detiel > div.coupon-code p{line-height: 32px;}

div.coupon-detiel.w500 > div.coupon-code span{
  font-size: 3.2rem;
  color: #ff772d;
}

div.coupon-detiel.w1500 > div.coupon-code span{
  font-size: 3.2rem;
  color: #ff438b;
}

ol.event-date{margin-bottom: 16px;}
ol.event-date li{margin-bottom: 4px;}

@media screen and (max-width: 768px) {
div.weekend-coupon{display: block;}
div.coupon-detiel{
  width: 100%;
  margin-bottom: 16px;
  }

}