@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;
overflow:hidden;}

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

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


.classic_title { margin-top:10px;
width:80%;
margin-left: auto;
margin-right: auto;
}


.top_title { display: block;
text-align:left;
font-size:20px !important;
}



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


.top_content_width { text-align: left !important;
  margin-top: 30px;
  margin-left:auto;
  margin-right:auto;
  width:80%;
  }


  .top_content { text-align: left　!important;
    }



/** ***************************************************************************
 * brを非表示（文詰める）にする
 * ************************************************************************* */



/** ***************************************************************************
 * 非表示にする
 * ************************************************************************* */
 .not_display {
    display: none;
  }



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


/** ***************************************************************************
 *　フロート解除
 * ************************************************************************* */
.clearfix::after {
content: “”;
display: block;
clear: both;
}


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

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

  .glass_1_td { width:100% !important;
    display:block !important;
	margin-left:auto;
	margin-right:auto;
	text-align: center !important;
   }



 .classic_glass_1{width:100%;
  margin-top:10px!important;
   }



.glass_1_coment{
width: 300px !important;
margin-left:-15px !important;
margin-right:auto !important;
text-align: left  !important;
margin-top:20px !important;
}

.glass_1_coment_2{
width: 300px !important;
text-align: left  !important;
margin-top:20px !important;
margin-left:-15px !important;
}

.glass_1_no_1 { 
 margin-top: 15px !important;
 text-align: center;
 display:block!important;
 margin-left:auto !important;
 margin-right:auto !important;
 width: 20% !important; 
}







/** ***************************************************************************
 * メガネ１ 色玉 レスポンシブ
 * ************************************************************************* */

 .glass_1_color_pc{
  display:none;}
 

.glass_1_color_responsive{
	margin-top:10px !important;
	width:80% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	text-align: center !important;
}


.rens_color_div{padding-top:30px;}


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


.glass_color_text{text-align:left !important;
display: inline-block}







/*　注意書き */
.glass_renscolor_other { text-align: left;
width:100% !important;
margin-left:auto;
margin-right:auto;
margin-top:-10px;}


.glass_renscolor_other_2 {
text-align: left;
width:100% !important;
margin-left:auto;
margin-right:auto;
line-height: 1em;}

















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

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


 .glass_2_td { width:300px !important;
    display:block !important;
	margin-left:auto !important ; /* ←手動配置修正のため要再検討！*/　　
	margin-right:auto ;
	text-align: center !important;
   }

 .glass_2_td img { width:300px !important;
    display:block !important;
	margin-left:-300px!important; /* ←手動配置修正のため要再検討！*/　　
	margin-right:auto !important;
	text-align:center !important;
   }

 .classic_glass_2{width:100%;
  margin-top:10px!important;
   }



.glass_2_coment{
width: 300px !important;
margin-left:auto !important; /* ←手動配置修正のため要再検討！ */　　
margin-right:auto !important;
text-align: center  !important;
margin-top:20px !important;
}

.glass_2_coment span{
text-align: left  !important;
display: inline-block;
}

.glass_2_coment_2{
width: 300px !important; 
margin-left:20px !important; /* ←手動配置修正のため要再検討！ */　
text-align: left  !important;
margin-top:20px !important;
}

.glass_2_no_2 { 
 margin-top: 260px !important;
 text-align: center;
 display:block!important;
 margin-left:auto !important;
 margin-right:auto !important;
 width: 20% !important; 
}




/** ***************************************************************************
 * メガネ2 色玉 レスポンシブ
 * ************************************************************************* */
 .glass_2_color_pc{
  display:none;}
 
 
 .glass_2_color_responsive{
	margin-top:10px !important;
	width:80% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	text-align: center !important;
}


.rens_color_div{padding-top:30px;}


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


.glass_color_text{text-align:left !important;
display: inline-block}









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

.glass_3_table_3　{ width:100% !important;
  margin-left: auto !important;
  margin-right:auto !important;
  display: inline !important;
  margin-top:-80px;
  }


 .glass_3_td { width: 300px !important;
    display:block !important;
	margin-left:0px !important; /* ←手動配置修正のため要再検討！*/　　
	margin-right:auto !important;
	margin-top:-30px !important;
   }

 
 .glass_3_td img { 
	margin-left:20px !important;
   }

 .classic_glass_3{width:300px !important;
  margin-top:10px!important;
  display: block !important;
   }



.glass_3_coment{
width: 300px !important;
margin-left:-280px !important; /* ←手動配置修正のため要再検討！ */　
margin-right:auto !important;
text-align: center  !important;
margin-top:20px !important;
 display: block !important;
}


.glass_3_coment span{
text-align: left  !important;
display: inline-block;
}


.glass_3_coment_2{
width: 300px !important;
margin-left:-280px !important; /* ←手動配置修正のため要再検討！ */　
margin-right:auto !important;
text-align: left  !important;
margin-top:20px !important;
 display: block !important;
}


.glass_3_no_3 { 
 margin-top: 230px !important;
 text-align: center;
 display:block!important;
 margin-left:-190px !important; /* ←手動配置修正のため要再検討！ */　
 margin-right:auto !important;
 width: 20% !important; 
}



/** ***************************************************************************
 * メガネ3 色玉 レスポンシブ
 * ************************************************************************* */
 .glass_3_color_pc{
  display:none;}
 
 
 .glass_3_color_responsive{
	margin-top:10px !important;
	width:80% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	text-align: center !important;
}


.rens_color_div{padding-top:30px;}


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


.glass_color_text{text-align:left !important;
display: inline-block}



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


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


 .glass_4_td { width:300px !important;
    display:block !important;
	margin-left:-300px !important; /* ←手動配置修正のため要再検討！*/　　
	margin-right:0px !important;
	text-align: center !important;
	margin-top: -30px;
   }



.glass_4_td img { 
	display: block !important;
	margin-left:-20px !important; /* ←手動配置修正のため要再検討！ */　
	margin-right:auto !important;
   }





 .classic_glass_4{width:100%;
  margin-top:10px!important;
   }



.glass_4_coment{
width: 300px !important;
margin-left:20px !important; /* ←手動配置修正のため要再検討！ */　
text-align: center  !important;
margin-top:20px !important;
}

.glass_4_coment span{
text-align: left  !important;
display: inline-block;
}


.glass_4_coment_2{
width: 300px !important; 
margin-left:20px !important; /* ←手動配置修正のため要再検討！ */　
text-align: left  !important;
margin-top:20px !important;
}





.glass_4_no_4 { 
 margin-top: 260px !important;
 text-align: center;
 display:block!important;
 margin-left:auto !important;
 margin-right:auto !important;
 width: 20% !important; 
}




.wp-image-2759{margin-top:1000px !important;}



/** ***************************************************************************
 * メガネ4 色玉 レスポンシブ
 * ************************************************************************* */
 .glass_4_color_pc{
  display:none;}
 
 
 .glass_4_color_responsive{
	margin-top:10px !important;
	width:80% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	text-align: center !important;
}


.rens_color_div{padding-top:30px;}


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


.glass_color_text{text-align:left !important;
display: inline-block}
  
  
  
  
/** ***************************************************************************
 *　メガネ5 のテーブル
* ************************************************************************* */
.glass_5_table_5　{ width:100% !important;
  margin-left: auto !important;
  margin-right:auto !important;
  display: inline !important;
  margin-top:100px !important;
  }


 .glass_5_td { width: 300px !important;
    display:block !important;
	margin-left:auto !important;
	margin-right:auto !important;
	margin-top:150px !important;
   }

 
 .glass_5_td img { 
	display: block !important;
	margin-left:auto !important;
	margin-right:auto !important;
   }

 .classic_glass_5{width:300px !important;
  margin-top:10px!important;
  display: block !important;
   }



.glass_5_coment{
width: 300px !important;
margin-left:0px !important; /* ←手動配置修正のため要再検討！ */　
text-align: center !important;
margin-top:20px !important;
}

.glass_5_coment span{
text-align: left  !important;
display: inline-block;
}


.glass_5_coment_2{
width: 300px !important; 
margin-left:0px !important; /* ←手動配置修正のため要再検討！ */　
text-align: left  !important;
margin-top:20px !important;
}


.glass_5_no_5 { 
 margin-top: -150px !important;
 text-align: center;
 display:block!important;
 margin-left:120px !important; /* ←手動配置修正のため要再検討！ */　
 margin-right:auto !important;
 width: 20% !important; 
}


.wp-image-2759{margin-top:-162px !important;}






/** ***************************************************************************
 * メガネ5 色玉 レスポンシブ
 * ************************************************************************* */
 .glass_5_color_pc{
  display:none;}
 
.glass_5_renscolor{margin-top:10px !important;}
 
 .glass_5_color_responsive{
	margin-top:10px !important;
	width:80% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	text-align: center !important;
}


.rens_color_div{padding-top:30px;}


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


.glass_color_text{text-align:left !important;
display: inline-block}
  
  
  




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

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


.other_blurrightcut_img{
margin-top:0px !important;
display:block !important;
width:300px !important;
marign-left:auto !important;
margin-right: auto !important;}



.other_blurrightcut_text{
margin-top:-380px !important;
}


.other_blurrightcut_button{
margin-top:-350px !important;
display: block!important;
width:100% !important;
}






.other_henkolense_img{
margin-top:150px !important;
display:block !important;
width:300px !important;
marign-left:auto !important;
margin-right: auto !important;
}







.other_henkolense_button{
margin-top:300px !important;
display: block!important;
width:100% !important;
}




.other_henkolense_text  {
width:300px !important;
display:block !important;
margin-left:-300px !important;
margin-rignt:auto !important;
}













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

@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;
  }

}