@charset "utf-8";

/** ***************************************************************************
 * 共用
 * ************************************************************************* */


#main {
  font-size: 4.08vw;
}

#main div.body {
  max-width: 950px;
}

#main * + .column {
	margin-top: 0;
}

#main .column ~ .column {
  margin-top: 11.56%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main {
    font-size: 30px;
  }

  #main * + .column {
    margin-top: 0;
  }

  #main .column ~ .column {
    margin-top: 130px;
  }

}

/** ***************************************************************************
 * ヘッダー
 * ************************************************************************* */

#main .header div.body {
  padding-top: 8.89%;
  padding-bottom: 8%;
  position: relative;
  z-index: 1;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .header div.body {
    padding-top: 100px;
    padding-bottom: 90px;
  }

}


/** ***************************************************************************
 * メイン背景
 * ************************************************************************* */

 .mmmm-1 { background-color: #F4F5F0;}

 .classic_top_photo { text-align: center;
  width: 60%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.classic_top_photo img{ text-align: center;
  width: 100%;
  height:100%;
  margin-right: auto;
  margin-left: auto;
}


.classic_title { margin-top:30px;}



 .classic_top_line { text-align: center;
  width:100%;
}


.top_content_width { text-align: center;
  margin-top: 30px;
  }


/** ***************************************************************************
 * bを標準太さの文字に直す
 * ************************************************************************* */
 b {
  font-weight: normal;
}



/** ***************************************************************************
 * スマホ版を非表示
 * ************************************************************************* */
.glass_1_color_responsive{display: none;}
.glass_2_color_responsive{display: none;}
.glass_3_color_responsive{display: none;}
.glass_4_color_responsive{display: none;}
.glass_5_color_responsive{display: none;}














/** ***************************************************************************
 * メガネ１のテーブル
 * ************************************************************************* */

 .glass_1_table_1　{ width:100%;
  margin-left: auto;
  margin-right:auto;
  margin-top:-80px;
  }

  .classic_glass_1{width:30%;}

  .glass_1_no_1 { 
    text-align: center;}


    .glass_1_table_kakko1{
      margin-top: -5px;
    }
  
    .glass_1_table_kakko2 {
     margin-top: -30px;}
 

/** ***************************************************************************
 * メガネ１ 色玉
 * ************************************************************************* */
.glass_1_renscolor { 
margin-top: -50px;
text-align: center;}

.glass_1_renscolor_table {
  border-collapse: collapse;
  width: 80%;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
}

.glass_renscolor_other { text-align: center;
margin-left:auto;
margin-right:auto;
margin-top:-10px;}


.glass_renscolor_other_2 {  text-align: center;
margin-left:auto;
margin-right:auto;
margin-top:-10px;}
 
 

 /** ***************************************************************************
 *　メガネ2のテーブル
 * ************************************************************************* */
 .glass_2_table_2　{
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;
  }

 .classic_glass_2
 { width:30%;}

 .glass_2_no_2 { 
   text-align: center;}

  .glass_2_table_kakko1{
    margin-top: -10px;
  }

  .glass_2_table_kakko2 {
   margin-top: -30px;}


 .glass_2_coment {
  margin-top:30px;
 }

   
/** ***************************************************************************
 * メガネ2 色玉
 * ************************************************************************* */
.glass_2_renscolor { 
  margin-top: 10px;
  text-align: center;}
  
  .glass_2_renscolor_table {
    border-collapse: collapse;
    width: 80%;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
  }


/** ***************************************************************************
 *　メガネ3のテーブル
* ************************************************************************* */
.glass_3_table_3　{
  width: 80%;
  margin-right: auto;
  margin-left: auto;}

 .classic_glass_3
 { width:30%;}

 .glass_3_no_3 { 
   text-align: center;
   margin-top:130px;}

  
 .glass_3_coment {
  margin-top:50px;
 }


 .glass_3_table_kakko1{
  margin-top: 100px;
}

.glass_3_table_kakko2 {
 margin-top: 140px;}



  
/** ***************************************************************************
 * メガネ3 色玉
 * ************************************************************************* */
 .glass_3_renscolor { 
  margin-top: -50px;
  text-align: center;}
  
  .glass_3_renscolor_table {
    border-collapse: collapse;
    width: 80%;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
  }



 /** ***************************************************************************
 *　メガネ4のテーブル
 * ************************************************************************* */
 .glass_4_table_4　{
  width: 80%;
  margin-right: auto;
  margin-left: auto;}

 .classic_glass_4
 { width:30%;}

 .glass_4_no_4 { 
   text-align: center;}

  .glass_4_table_kakko1{
    margin-top: -10px;
  }

  .glass_4_table_kakko2 {
   margin-top: -10px;}


 .glass_4_coment {
  margin-top:70px;
 }

 .glass_4_coment_2 {
  margin-top:10px;
 }
/** ***************************************************************************
 * メガネ4 色玉
 * ************************************************************************* */
.glass_4_renscolor { 
  margin-top: 10px;
  text-align: center;}
  
  .glass_4_renscolor_table {
    border-collapse: collapse;
    width: 80%;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
  }



  .glass_3_table_3　{
    width: 80%;
    margin-right: auto;
    margin-left: auto;}
  
   .classic_glass_3
   { width:30%;}
  
   .glass_3_no_3 { 
     text-align: center;
     margin-top:130px;}
  
    
   .glass_3_coment {
    margin-top:50px;
   }
  
  
   .glass_3_table_kakko1{
    margin-top: 100px;
  }
  
  .glass_3_table_kakko2 {
   margin-top: 110px;}
  
  
  
/** ***************************************************************************
 *　メガネ5 のテーブル
* ************************************************************************* */
.glass_5_table_5　{
  width: 80%;
  margin-right: auto;
  margin-left: auto;}

 .classic_glass_5
 { width:30%;}

 .glass_5_no_5 { 
   text-align: center;
   margin-top:130px;}

  
 .glass_5_coment {
  margin-top:50px;
 }


 .glass_5_table_kakko1{
  margin-top: 100px;
}

.glass_5_table_kakko2 {
 margin-top: 110px;}



  
/** ***************************************************************************
 * メガネ5 色玉
 * ************************************************************************* */
 .glass_5_renscolor { 
  margin-top: -80px;
  text-align: center;}
  
  .glass_5_renscolor_table {
    border-collapse: collapse;
    width: 80%;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
  }





/** ***************************************************************************
 * その他
 * ************************************************************************* */
 .option_line { 
  text-align: center;
  width:100%;}
  
.option_table { width:70%;
 margin-left:auto;
 margin-right:auto;
  }

.tenpo_butto{width:50%;
  margin-left:auto;
  margin-right:auto;}








/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .header .title {
    margin-bottom: 90px;
  }

}

/** ***************************************************************************
 * 10%OFF
 */

#main .header .discount {
  padding-left: 19.35%;
  padding-right: 19.35%;
  text-align: center;
}

/** ***************************************************************************
 * 詳しくはコチラ
 */

#main .header .button {
  width: 100%;
  padding-left: 12.90%;
  padding-right: 12.90%;
  text-align: center;
  -webkit-transform: translate(-50%, 66.90%);
          transform: translate(-50%, 66.90%);
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
}

#main .header .button a {
  vertical-align: top;
  display: inline-block;
}

#main .header .button img {
  opacity: 1;
}

/** ***************************************************************************
 * 紹介文
 * ************************************************************************* */

#lead {
  padding-top: 14.22%;
  line-height: 2.4;
  font-family: 'NotoSerifCJKjp', serif;
  text-align: center;
  background: url("../../_images/line_color/bg-1.jpg");
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #lead {
    padding-top: 160px;
  }

}

/** ***************************************************************************
 * タイトル
 */

#lead .title {
  margin-bottom: 8%;
  line-height: 1.8;
  font-size: 5.17vw;
  font-weight: 600;
  text-align: center;
}

#lead .title strong {
  font-weight: inherit;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #lead .title {
    margin-bottom: 90px;
    font-size: 38px;
  }

}

/** ***************************************************************************
 * どんなフレーム・レンズカラーがおすすめ？
 */

#lead .button {
  margin-top: -5.38%;
  -webkit-transform: translate(0, 60%);
          transform: translate(0, 60%);
  text-align: center;
}

#lead .button img {
  opacity: 1;
}

/** ***************************************************************************
 * おすすめアイテム
 * ************************************************************************* */

#main .osusume-item {
  padding-top: 8%;
  padding-bottom: 8%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .osusume-item {
    padding-top: 90px;
    padding-bottom: 90px;
  }

}

/** ***************************************************************************
 * タイトル
 */

#main .osusume-item .section-title {
  margin-bottom: 16.89%;
  padding-left: 24.95%;
  padding-right: 24.95%;
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .osusume-item .section-title {
    margin-bottom: 190px;
  }

}

/** ***************************************************************************
 * モデル写真
 */

#main .osusume-item div.section-photo {
  font-family: 'NotoSerifCJKjp', serif;
}

#main .osusume-item div.section-photo div.item ~ div.item {
  margin-top: 8%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .osusume-item div.section-photo div.item ~ div.item {
    margin-top: 90px;
  }

}

/** ***************************************************************************
 * 商品
 */

#main .osusume-item div.products {
}

/** ===========================================================================
 * タイトル
 */

#main .osusume-item div.products .title {
  margin-bottom: 8.89%;
  padding-left: 0.5em;
  line-height: 1.6;
  font-family: 'NotoSerifCJKjp', serif;
  font-size: 4.35vw;
  font-weight: 600;
  border-left: 3px solid #333;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .osusume-item div.products .title {
    margin-bottom: 100px;
    font-size: 32px;
  }

}

/** ===========================================================================
 * 画像
 */

#main .osusume-item div.products div.image {
  margin-bottom: 8%;
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .osusume-item div.products div.image {
    margin-bottom: 90px;
  }

}

/** ===========================================================================
 * 内容
 */

#main .osusume-item div.products div.content {
  line-height: 2;
  font-size: 3.80vw;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #main .osusume-item div.products div.content {
    font-size: 28px;
  }

}

/** ***************************************************************************
 * カジュアル
 * ************************************************************************* */

#casual.osusume-item {
  padding-top: 32.89%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #casual.osusume-item {
    padding-top: 370px;
  }

}

/** ***************************************************************************
 * ラグジュアリー
 * ************************************************************************* */

#luxury.osusume-item {
}

/** ***************************************************************************
 * LINEお友だち限定 カラーレンズ🉐キャンペーン
 * ************************************************************************* */

#campaign {
  padding-top: 8%;
  padding-bottom: 12.44%;
  background: url("../../_images/line_color/bg-1.jpg");
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #campaign {
    padding-top: 90px;
    padding-bottom: 140px;
  }

}

/** ***************************************************************************
 * タイトル
 */

#campaign .section-title {
  margin-bottom: 7.11%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #campaign .section-title {
    margin-bottom: 80px;
  }

}

/** ***************************************************************************
 * キャッチコピー
 */

#campaign .catchopy {
  margin-bottom: 7.11%;
  padding-bottom: 1em;
  font-family: 'NotoSerifCJKjp', serif;
  font-size: 4.62vw;
  font-weight: 600;
  text-align: center;
  background: url("../../_images/line_color/image-hr-1.png") center bottom no-repeat;
  background-size: 90% auto;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #campaign .catchopy {
    margin-bottom: 80px;
    font-size: 34px;
  }

}

/** ***************************************************************************
 * 対象商品
 */

#campaign div.products {
  text-align: center;
}

#campaign div.products ~ div.products {
  padding-top: 12.44%;
  border-top: dashed 1px #000;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #campaign div.products ~ div.products {
    padding-top: 140px;
  }

}

/** ===========================================================================
 * 商品
 */

#campaign div.products .item {
  margin-bottom: 8.88%;
}

#campaign div.products .item .plus {
  margin-top: 3.56%;
  margin-bottom: 4.44%;
  line-height: 1;
  font-size: 2.25em;
  text-align: center;
  display: block;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #campaign div.products .item {
    margin-bottom: 100px;
  }

  #campaign div.products .item .plus {
    margin-top: 40px;
    margin-bottom: 50px;
  }

}

/** ===========================================================================
 * 通常価格
 */

#campaign div.products .before-price {
  margin-left: auto;
  margin-right: auto;
  padding: 1em 1.5em;
  color: #fff;
  font-size: 0.85em;
  text-align: center;
  background-color: #000;
  display: table;
}

/** ===========================================================================
 * キャンペーン価格
 */

#campaign div.products .after-price {
  margin-left: auto;
  margin-right: auto;
  padding-left: 26.88%;
  font-size: 4.62vw; /* 34px */
  background:
    url("../../_images/line_color/icon-gentei.png") left center no-repeat,
    url("../../_images/line_color/image-hr-2.png") right 84% no-repeat;
  background-size:
    auto 100%,
    77% auto;
  display: table;
}

#campaign div.products .after-price .price {
  font-size: 10.56vw; /* 78px */
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #campaign div.products .after-price {
    font-size: 49px;
  }

  #campaign div.products .after-price .price {
    font-size: 9.47vw;
  }

}

@media print, screen and (min-width:1226px) {

  #campaign div.products .after-price .price {
    font-size: 116px;
  }

}

/** ***************************************************************************
 * クーポン
 * ************************************************************************* */

#coupon {
  padding-top: 8%;
  padding-bottom: 4.44%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #coupon {
    padding-top: 90px;
    padding-bottom: 50px;
  }

}

/** ***************************************************************************
 * メッセージ
 */

#coupon .message {
  margin-bottom: 8.89%;
  font-family: 'NotoSerifCJKjp', serif;
  font-size: 4.62vw;
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #coupon .message {
    margin-bottom: 100px;
    font-size: 34px;
  }

}

/** ***************************************************************************
 * 画像
 */

#coupon div.image {
  text-align: center;
}

/** ***************************************************************************
 * 近くの和光メガネへ問い合わせる
 * ************************************************************************* */

#contact {
  padding-top: 4.44%;
  padding-bottom: 8%;
}

#contact .button {
  text-align: center;
}

#contact .button a {
  vertical-align: top;
  display: inline-block;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  #contact {
    padding-top: 50px;
    padding-bottom: 90px;
  }

}