@charset "utf-8";

/*------------------------------
共通設定
------------------------------*/

#feature-wrap {font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-size: 15px; line-height: 1.8 !important; letter-spacing: normal !important;}
#feature-wrap img { width:inherit; height: inherit;}


/*------------------------------
content-wrap
------------------------------*/
.content-wrap{ width: 950px; margin: 0 auto; color: #464646; background:url(../img/bg.jpg) repeat;}
.content-wrap a{ color: #464646 ;}
.content-wrap a:hover img { opacity: 0.5; transition: all 0.2s ease-out 0s; }
.content-wrap .copy{ text-align: center; padding: 15px 0; font-size: 12px; }

.contentsBox { width: 780px;  margin: 0 auto; }
.contentsBox .btn { text-align: center;}

/*=====================================================================
【PCのみ】ボタン2つ横並び
=======================================================================*/

@media screen and (min-width: 768px) {
.btn-container {
  display: flex; /* 子要素を横並びにする */
  justify-content: center; /* 必要に応じて中央揃えにする */
  gap: 20px; /* 画像間の隙間を設定する */
  }
}  

@media screen and (min-width: 768px) {
    .btn-container {
        display: flex;
        justify-content: space-between;
    }
}
#feature-wrap #sec03 .btn img {
    height: inherit;
    width: 100%;
}
.contentsBox #sec03 .btn {
    text-align: center;
    width: 48%;
}

@media (max-width: 767px) {
    .contentsBox #sec03 .btn{
        width: 90%;
        padding-bottom: 2%;
        margin: 0 auto;
    }
}

#feature-wrap #sec06 .btn img {
    height: inherit;
    width: 100%;
}
.contentsBox #sec06 .btn {
    text-align: center;
    width: 48%;
}

@media (max-width: 767px) {
    .contentsBox #sec06 .btn{
        width: 90%;
        padding-bottom: 2%;
        margin: 0 auto;
    }
}



/*=====================================================================
【共用】背景色
=======================================================================*/
.bgcl_red {background-color:#A0191F;}

/*=====================================================================
【共用】文字色
=======================================================================*/
.cl_aquablue {color:#00a3c5;}


/*=====================================================================
【共用】border色
=======================================================================*/
.border_aquablue { border-color: #00778d;}


/*=====================================================================
【共用】概要
=======================================================================*/
.contentsDetail { background-color:#A0191F; border-radius: 12px; margin:0px 0 37px 0 ; width:774px; }

.contentsDetail .title { color:#fff; padding:16px 30px 16px 71px; position: relative;}
.contentsDetail .title:before {
    content: "";
    background: url(../img/deco.png)no-repeat top center;
    width: 35px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}
.contentsDetail .title span { display:block; font-size:24px; font-weight: 700; line-height:1.4em; padding:0 10px; }

.contentsDetail .contents { background-color:#FFF; color:#000; border-radius: 0 0 10px 10px; padding:33px 30px; }
.contentsDetail .contents .left { display:inline-block; margin: 0 4% 0 0; padding: 0; vertical-align:top; text-align: justify;}
.contentsDetail .contents .right { display:inline-block; text-align: right; vertical-align:top;}

#sec01, #sec02, #sec03, #sec04, #sec05, #sec06, #sec07, #sec08, #sec09, #sec10, #sec11, #sec12{margin-bottom: 78px;}

#sec01 .contentsDetail,#sec02 .contentsDetail,#sec03 .contentsDetail,#sec04 .contentsDetail, #sec05 .contentsDetail,
#sec06 .contentsDetail,#sec07 .contentsDetail,#sec08 .contentsDetail,#sec09 .contentsDetail, #sec10 .contentsDetail,
#sec11 .contentsDetail,#sec12 .contentsDetail {border:solid 3px #A0191F;}
/*=====================================================================
SNS
=======================================================================*/
#fb_tw {width: 240px; height: 20px; margin: 10px 50px 25px auto; line-height: 1.7;}
.fb-like {height:20px;}


/*=====================================================================
各商品
=======================================================================*/
/* #sec01
--------------------------------------------*/
#sec01 .contentsDetail .contents .left {width:50%;}
#sec01 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec01 .contentsDetail .contents .right img { height: auto; width:100%;}

/* #sec02
--------------------------------------------*/
#sec02 .contentsDetail .contents .left {width:50%;}
#sec02 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec02 .contentsDetail .contents .right img { height: auto; width:100%;}

/* #sec03
--------------------------------------------*/
#sec03 .contentsDetail .contents .left {width:50%;}
#sec03 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec03 .contentsDetail .contents .right img { height: auto; width:100%;}

/* #sec04
--------------------------------------------*/
#sec04 .contentsDetail .contents .left {width:50%;}
#sec04 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec04 .contentsDetail .contents .right img { height: auto; width:100%;}

/* #sec05
--------------------------------------------*/
#sec05 .contentsDetail .contents .left {width:50%;}
#sec05 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec05 .contentsDetail .contents .right img { height: auto; width:100%; margin-top: -40px}

/* #sec06
--------------------------------------------*/
#sec06 .contentsDetail .contents .left {width:50%;}
#sec06 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec06 .contentsDetail .contents .right img { height: auto; width:100%;}

/* #sec07
--------------------------------------------*/
#sec07 .contentsDetail .contents .left {width:50%;}
#sec07 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec07 .contentsDetail .contents .right img { height: auto; width:100%; margin-top: -40px}

/* #sec08
--------------------------------------------*/
#sec08 .contentsDetail .contents .left {width:50%;}
#sec08 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec08 .contentsDetail .contents .right img { height: auto; width:100%;}

/* #sec09
--------------------------------------------*/
#sec09 .contentsDetail .contents .left {width:50%;}
#sec09 .contentsDetail .contents .right {width:45%;}
/*右側のイメージの位置*/
#sec09 .contentsDetail .contents .right img { height: auto; width:100%;}

/*=====================================================================
スナップフレンズボタン
=======================================================================*/
@media screen and (min-width: 768px) {

.btn_01 {display: flex; margin: 10px; justify-content: space-between;}

} 
/*=====================================================================
【共用】コピーライト
=======================================================================*/
.copyright {margin-top:10px; font-size:0.8em; line-height:1.1em;}


/*=====================================================================
【共用】キャッチコピー
=======================================================================*/
.catchcopybox { width: 100%; margin:15px auto; }
.catchcopy { font-size: 18px; font-weight: bold; color: #000000; line-height: 30px; /*border-bottom: solid 3px #A3D3FB;*/ }


/*================================================
  SP
================================================*/
@media (max-width: 767px) {

/*------------------------------
content-wrap
------------------------------*/
.content-wrap { width:100%; }
.content-wrap img{ width:100% !important; }
.content-wrap a{ text-decoration: underline;}
.contentsBox  { width:90%; margin: 15px auto ; padding-top: 1%; padding-bottom: 5%;}
.contentsBox .btn { width: 90%; padding-bottom: 2%; margin: 0 auto;}
    
/*=====================================================================
【SP】【共用】概要
=======================================================================*/
.contentsDetail{ width:100%;}  
.contentsDetail .contents { padding: 4%;}    
.contentsDetail .contents .left { display: block; font-size: 15px; width: 100%!important;}
.contentsDetail .contents .right { display: block; margin: 0 auto; padding: 3% 0 0 0; width: 100%;}
.contentsDetail .title span { font-size:18px;}    

/*右側のイメージの位置（強制）*/
.contentsDetail .contents .right img { height: auto; margin-top: 0 !important; width: 100%;}
	
/*=====================================================================
【共用】キャッチコピー
=======================================================================*/
.catchcopybox { width: 100%; margin:15px auto; }
.catchcopy { font-size: 18px; font-weight: bold; color: #000000; line-height: 30px; /*border-bottom: solid 3px #A3D3FB;*/ }
	
/*=====================================================================
SNS
=======================================================================*/
#fb_tw {width:235px; height: 20px; margin: 10px 4% 25px auto;}
.fb-like {height:20px;}
 
.pc-only {display: none;}
.sp-only {display: block;}
    
}