/*
スマホパーツ非表示
======================================*/
.smpHeader { display:none; }


/* micro clearfix
======================================*/
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/*
以下PC用スタイル
======================================*/

html { color: #666; font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif; margin:0 auto; text-align: left; }
body { background-image: url(https://www.rakuten.ne.jp/gold/sentire/CORBO/_image/interview/bg_water_rbr.jpg); background-position:left top; background-repeat: repeat; background-attachment: fixed; font-size: 16px; line-height: 1.75em;/*28px*/margin:0 auto; width:100%;}
h1 { display:none; font-size:2.25em;/*36px*/ line-height:1.3333;/*48px*/
margin-bottom:24px;}
h2 { background-color:#efefef; border-left:10px solid #600; color:#600; font-size:1.5em;/*24px*/ font-weight: 600; line-height:1;/*24px*/margin-bottom:24px; padding: .5em 0 .5em .5em ; }
p { margin-bottom:1em; }
.capR { font-size: 12px; line-height:1.5; margin-bottom: 2em; text-align: right; }
.capL { font-size: 12px; line-height:1.5; margin-bottom: 2em; text-align: left; }
.que { color:#600; text-indent:-1em; padding-left:1em; }
.img950 { width:950px; }

.line{ width: 100%; border:1px dashed #edc; margin-bottom: 2em; }

/* iframe ヘッダー読み込み  */
.ifItemOut { width:1200px; height:500px; margin:0 auto; }

/* intvWrap インタビューページ全体を覆うボックス */
#intvWrap { background: #fff; width:1200px; margin:0 auto; padding:0 40px; box-shadow: 0 0 4px #000; -moz-box-shadow: 0 0 4px #000; }

/* インタビュータイトル部分 */
#intvTit img { width:100%; height: auto; padding:0; }

/* インタビューコンテンツ部分 footer上まで */
#intvCont { width:100%; margin:0 auto; }


/* インタビュー本文
============================================================*/

/* テキスト左 イメージ右 */
.txtL { margin-bottom:2em; }
.txtL img { float:right; margin:0 0 1em 1em; width:40%; }
.txtL .que { color:#600; text-indent:0; padding-left:0em; }

/* テキスト右 イメージ左 */
.txtR { margin-bottom:2em; }
.txtR img { float:left; margin:0 1em 1em 0; width:40%; }
.txtR .que { color:#600; text-indent:0em; padding-left:0em; }

/* テキスト、イメージセンター 100% */
.txtC { margin-bottom:2em; }
.txtC img { width:100%; margin-bottom:1em; }
.txtC .que { color:#600; text-indent:-1em; padding-left:1em;}

/* テキスト、イメージ左右二つ（もしくはセンター幅100%画像もあり） 100% 写真2カラム  */
.txtCimg2 { margin:0 auto 2em; width:100%;}
.txtCimg2 .imgFL { float:left; width:49%; }
.txtCimg2 .imgFR { float:right; width:49%; }
.txtCimg2 .imgFLmb1 { float:left; width:49%; margin-bottom:-0.5em; }/* 画像4つ時左 下ネガティブマージン*/
.txtCimg2 .imgFRmb1 { float:right; width:49%; margin-bottom:-0.5em; }/* 画像4つ時右　下ネガティブマージン */
.txtCimg2 .imgC { margin-bottom:1em; width:100%; }/* センター幅100%画像 */ .txtCimg2 .que { color:#600; text-indent:0; padding-left:0em; }

/* アニメーション系 */
.fadeInUpImg{ -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; opacity:1; }


/* gallery
============================================================*/

#galleryWrap { width:100%; margin-bottom:48px; }
#galleryWrap .row4 { background-color:#fff; display:block; float:left; overflow:hidden; position:relative; width:237px; height:158px; } /* ギャラリー各画像の親ボックス */

#galleryWrap .row4 .gallery { /*.galleryはimgタグに記述しているclass、transition指定 */
width:100%; height: auto; -webkit-opacity:1; -moz-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1;
 transition: transform 0.2s linear 0s; transition-property: transform; transition-duration: 0.2s;
 transition-timing-function: linear; transition-delay: 0s; -webkit-transition: transform 0.2s linear 0s; -webkit- transition-property: transform; -webkit-transition-duration: 0.2s; -webkit- transition-timing-function: linear; -webkit-transition-delay: 0s; -moz-transition: transform 0.2s linear 0s; -moz- transition-property: transform; -moz-transition-duration: 0.2s; -moz- transition-timing-function: linear; -moz-transition-delay: 0s; -o-transition: transform 0.2s linear 0s; -o- transition-property: transform; -o-transition-duration: 0.2s; -o- transition-timing-function: linear; -o-transition-delay: 0s; -ms-transition: transform 0.2s linear 0s; -ms- transition-property: transform; -ms-transition-duration: 0.2s; -ms- transition-timing-function: linear; -ms-transition-delay: 0s; }

#galleryWrap .row4:hover{ -webkit-opacity:.6; -moz-opacity:.6; -o-opacity:.6; -ms-opacity:.6; opacity:.6; }
#galleryWrap .row4:hover .gallery { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);} /* hover時透明度.6に、transformで1.1倍に拡大 */


/*
インタビューの続きはこちら  #intvNext
============================================================*/

/* 各ボタン */
#intvNext { margin-bottom:48px; width:100%; }
#intvNext li { background:#efefef; line-height:2.5; list-style-type:none; margin:0 auto .5em; text-indent:1em; width:96%; }
#intvNext li a { background:#f9f9f9; border:1px solid #ccc; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; color:#600; display:block; position:relative; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-decoration:none; }
#intvNext li a:hover { background:#600; border:1px solid #600; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; color:#fff; display:block; position:relative; width:100%; }

/* ＞矢印 beforeが実際の表示部分 */
#intvNext li a:before { background:#CCC; content:""; display:block; position:absolute; right:35px; text-decoration:none; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); width:10px; margin-top: -5px;-webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }

/* after部分は背景と同色のrotateをかけたブロックを重ねてマスクとして使用、矢印を生成 */
#intvNext li a:after{ background: #f9f9f9; content:""; display: block; margin-top: -5px; position: absolute; text-decoration:none; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 10px; height:10px; top: 50%; right: 38px; }

/* ＞矢印 ホバー時 色変更 右へにゅるっと移動 */
#intvNext li a:hover:before { background: #fff; content: ""; display: block; height: 10px; margin-top: -5px; position: absolute; right: 30px; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* ＞矢印 ホバー時 after部分は背景と同色のrotateをかけたブロックを重ねてマスクとして使用、矢印を生成 */
#intvNext li a:hover:after{ background: #600; content: ""; display: block; margin-top: -5px; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 50%; right: 33px; width: 10px; height: 10px; }


/*職人の皆様のお声  #artisanWrap
============================================================*/
#artisanWrap { font-size:.9em; line-height:.9; width:100%; margin-bottom:48px; }

/* display table-cell */
.artisanTwo { border-collapse: separate; border-spacing: 1em 0; display: table; }
.artisanTwo .fL { display:table-cell; width:40%; padding:1% 2%; background:#f9f9f9; }
.artisanTwo .fR { display:table-cell; width:40%; padding:1% 2%; background:#f9f9f9; }
#artisanWrap span { font-weight: bold; color:#600; }
#artisanWrap .imgFull { width:100%; margin-bottom:48px; }

/* 職人様のお声 */
#intvCO .artisanWrap { font-size:.9em; width: 950px }
#intvCO .artisan { width: 100%; margin-bottom: 1em; }
#intvCO .artisan .name { font-weight: bold; }
#intvCO .artisan p { margin-bottom: .3em; }
#intvCO .artisan p.last { margin-bottom:2em; }
#intvCO .artisan p span { color: #740; margin-right: .5em; font-weight: bold; }

/* 職人様写真 2列 Ver. */
#intvCO .artisanImg2_fL { width: 47%; margin: 0 0 3% .5%; float: left; }
#intvCO .artisanImg2_fR { width: 47%; margin: 0 2% 3% 0; float: right; }
#intvCO .artisanImg2_fL img,
#intvCO .artisanImg2_fR img {
	width: 100%;
	border: 5px solid #fff;
	box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-o-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-ms-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}
/* 職人様 1列 写真左 テキスト右 Ver. */
#intvCO .artisanImg2col_fLimg { width: 36%; margin: 0 3% 2% .5%; float: left; }
#intvCO .artisanImg2col_fLtxt { width: 58%; float: left; margin: 0 0 2% 2%; }
#intvCO .artisanImg2col_fLimg img,
#intvCO .artisanImg2col_fRimg img {
	width: 100%;
	border: 5px solid #fff;
	box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-o-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-ms-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}

/* 職人様 1列 写真右 テキス左 Ver. */
#intvCO .artisanImg1col_fR { width: 36%; margin: 0 2% 3% 3%; float: right; }
#intvCO .artisanImg1col_fR img {
	width: 100%;
	border: 5px solid #fff;
	box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-o-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
	-ms-box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}
.corbo .artisanImg1col_fRtxt { width: 58%; float: left; margin: 0 1% 3% 0; }




/*ブランドページへバナー  .toBrandBa
============================================================*/
.toBrandBa { width: 1200px; text-align:right; margin:48px 0 48px 0; text-align: center; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; transition: all .2s; }
.toBrandBa:hover { color: #00f; cursor:pointer; opacity:.6; text-decoration:none; }

/* 最下部TOPページへ戻るボタン */
.toTop { display: block; margin: 0 auto 3em; width:100%; }
.toTop a { display: block; width: 80%; line-height: 3; margin: 10px auto; background-color: #600; color: #fff; text-decoration:none; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; transition: all .2s; }
.toTop a:hover { opacity:.6; cursor:pointer; }


/*フッター
============================================================*/
footer p { margin:0 auto; padding:2em 0 3em; text-align:center; width:100%; }


/*その他パーツ
============================================================*/

/* 下から出てくる TOPへ戻るボタン */
#backTopPC { bottom:20px; right:20px; position:fixed; z-index:10; }
#backTopPC a img { opacity:1; width:44px; height:44px; }
#backTopPC a:hover img { opacity:.6; }