@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------------

↓↓↓  PC・一部共通のスタイルここから  ↓↓↓

----------------------------------------------------------------------------------*/

/* iframe ヘッダー読み込み  */

.ifItemOut { width:100vw;; height:740px;/*1200px*/; margin:0 auto; display:block; }
.smpHeader { border:none; width:100%; height:auto; margin-bottom:10px; display:none; }

.header_main { width:100vw;/*width:1200px;*/ height:760px;/*1200px*/; margin:0 auto; display:block; }


.pcHeader {
/* width: 1200px; margin: 0 auto; */
width: 100vw;
}


.foot_mini {
width: 950px;
margin: 0 auto;
}
.footer_copyright {
width: 950px;
margin: 0 auto;
}


/* PCでは表示 */
.pc_show { display:block; }

/* PCでは表示 */
.pc_show_inline { display:inline-block; }

/* PCでは非表示 */
.sp_show { display:none; }

/* PCでは非表示 */
.sp_show_inline { display:none; }

/*----- 基本設定 -----*/
html { 
	width:100%;
	padding: 0;
	margin: 0;
}
body {
	background: #ffffff;
	color:#555555;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 100%;
	line-height:1.7;
/*	width:1200px;1050px;*/
	margin:0 auto;
	/* padding:0 50px; */
  padding: 0;
}
img {
 max-width:100%;    
}

ul,ol,li{
list-style:none;
margin:0;
padding:0;
}

.w950_wrapper {
width: 950px;
margin: 0 auto;
}

/* パディングとボーダーをコンテンツ幅に含める */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
h1 { margin-top:0; }
h2 { margin:2em 0 0; background:#eeeeee; border-radius: 4px; line-height:1.3; padding:15px; }

.green { color:#336600; }

/* micro clearfix
-----------------------------------------------------*/
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom:1; }

/* float */
.fl_l { float:left; }
.fl_r { float:right: }

/* マージン
-----------------------------------------------------*/
.mr5 { margin-right: 5px; } .mr10 { margin-right:10px; }	
.mr15 { margin-right:15px; } .mr20 { margin-right:20px; }
.mr25 { margin-right:25px; } .mr30 { margin-right:30px; }

.ml5  { margin-left: 5px; } .ml10 { margin-left:10px; }	
.ml15 { margin-left:15px; } .ml20 { margin-left:20px; }
.ml25 { margin-left:25px; } .ml30 { margin-left:30px; } .mb50 { margin-bottom:50px; }

.mb1e { margin-bottom:1em; }
.mb2e { margin-bottom:2em; }
.mb3e { margin-bottom:3em; }
.mb4e { margin-bottom:4em; }
.mb5e { margin-bottom:5em; }

.mb1rem { margin-bottom:1rem; }
.mb2rem { margin-bottom:2rem; }
.mb3rem { margin-bottom:3rem; }
.mb4rem { margin-bottom:4rem; }
.mb5rem { margin-bottom:5rem; }

.m0a {
 width:950px;
 margin:0 auto;
}
/* テキストセンター揃え */
.tac {
 text-align: center;
}
/* テキスト右揃え */
.tar {
text-align: right;
}
/*========================================
アニメーションに関する指定（共通部分） ここから
========================================*/

/* ふわっとベーシックに現れるアニメーション用
=============================================*/
.fadeIn {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	visibility: visible !important;
	position: relative;
	z-index: 1;
}
@-webkit-keyframes fadeIn {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@keyframes fadeIn {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}

/* ふわっと下から現れるアニメーション用
=============================================*/
.fadeInUp {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
	position: relative;
	z-index: 1;
}
@-webkit-keyframes fadeInUp {
 0% {
 opacity: 0;
 -webkit-transform: translateY(20px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
}
}
@keyframes fadeInUp {
 0% {
 opacity: 0;
 -webkit-transform: translateY(20px);
 -ms-transform: translateY(20px);
 transform: translateY(20px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
}
}

/* ふわっと左から右へ現れるアニメーション用
=============================================*/
.fadeInRight {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	visibility: visible !important;
	position: absolute;
	z-index: 1;
}
@-webkit-keyframes fadeInRight {
 0% {
 opacity: 0;
 -webkit-transform: translateX(-20px) rotate(-20deg);
}
 100% {
 opacity: 1;
 -webkit-transform: translateX(0) rotate(0);
}
}
@keyframes fadeInRight {
 0% {
 opacity: 0;
 -webkit-transform: translateX(-20px) rotate(-20deg);
 -ms-transform: translateX(-20px) rotate(-20deg);
 transform: translateX(-20px) rotate(-20deg);
}
 100% {
 opacity: 1;
 -webkit-transform: translateX(0) rotate(0);
 -ms-transform: translateX(0) rotate(0);
 transform: translateX(0) rotate(0);
}
}
/* アニメーションに関する指定（共通部分）ここまで */

/*----------------------------------------------------------------------------------

 ↑↑↑  PC・一部共通のスタイルここまで  ↑↑↑

----------------------------------------------------------------------------------*/

/*===========================================================================================

↓↓↓  センティーレワンが選ばれている理由ページ（reason.html）ここから  ↓↓↓

===========================================================================================*/
/*
3つのこだわり
========================================*/

#reason .kodawari_wrap ul li {
 float:left;
 margin-right:10px;
 width:310px;
}
#reason .kodawari_wrap ul li:last-child {
 margin-right:0;
}
#reason .kodawari_wrap ul li img {
 width:100%;
}

/*
センティーレワンを選んでいただいている理由
========================================*/
#reason .line {
margin-bottom:1.5em;
border-bottom: 2px solid #000000;
width:50px;
}

#reason .w440_l {
 width:440px;
 float:left;
}
#reason .w440_r {
 width:440px;
 float:right;
}

#reason .w500_l {
 width:500px;
 float:left;
}
#reason .w500_r {
 width:500px;
 float:right;
}

/*
革を育てる愉しみ
========================================*/

/* アンカーリンク */
#leather_aging {
/*padding-top:20px;*/
}


/* 経年変化吹き出し */
#reason .img_balloon {
position: relative;
width:950px;
height:500px;
z-index:0;
}
#reason .img_balloon .z1 {
position:absolute;
top:0;
left:0;
z-index:100;
width:950px;
height:500px;
}
/* 透過吹き出しが上 */
#reason .img_balloon .z2 {
position:absolute;
top:0;
left:0;
z-index:200;
width:950px;
height:500px;
}
/* スタッフの愛用品 */
#reason .aging_items li {
 float:left;
 margin-right:34px;
 margin-bottom:25px;
 width:290px;
}
#reason .aging_items li:nth-child(3n) {
 margin-right:0;
}
#reason .aging_items li img {
 width:290px;
}
/* 大変よく味がでました スタンプ */
#reason .bg_stamp_wrap {
position: relative;
width:950px;
height:auto;
}
#reason .inner {
position:relative;
background-color: rgba(255,255,255,0);
}
#reason .fade_stamp {
position:absolute;
width:130px;
height:128px;
top:0; right:10px;
z-index:10;
}

/*===========================================================================================

***   ↓↓↓ ご利用ガイド FAQ よくあるお問い合わせページ（FAQ.html）PC ここから ↓↓↓  ***

===========================================================================================*/
#guide_faq h2 {
  margin-bottom: 1.5rem;
}

#guide_faq h3 {
  font-size:1.2rem;
  color:#96b420;
  border-left:3px solid #96b420;
  /*border-left:3px solid #fb8f40;*/
  padding-left: .5rem;
  margin:2rem 0 2rem;
}
#guide_faq h3 a:link,
#guide_faq h3 a:visited,
#guide_faq h3 a:hover,
#guide_faq h3 a:active {
  color:#96b420;/*#96b420;*/
}
#guide_faq p { margin:0; padding:0; }
#guide_faq ul,ol,li { margin:0;}
#guide_faq .acmenu li {
  list-style:none;
  padding-left:15px;
  text-indent:-5px;
/*list-style-type:disc;
padding-left:1rem;
text-indent:1rem;*/
}
#guide_faq .acmenu ul {
  margin:10px 0 5px 0; 
}
#guide_faq .acmenu li:before {
  content:"";
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 100%;
	background: #96b420;
	position: relative;
	left: -5px;
	top: -3px;
}
#guide_faq .red {
  color:#ff0000;
}

#guide_faq .cap {
  color:#666666;
  font-size:.8rem;
}
#guide_faq .cap_bg {
  margin-top:2rem;
  color:#666666;
  font-size:.8em;
  background: #fafafa;
  padding:1rem;
	padding-left:2rem;
	text-indent:-1rem;
}

#guide_faq dl.acmenu { margin-bottom: 1.5rem; }
#guide_faq .acmenu dt {
  font-weight: 500;
  display:block;
  width:950px;
  height:50px;
  text-align:left;
  border:#999 1px solid;
  cursor:pointer;
  padding:10px;
  padding-right:20px;
    
  /* 矢印用 */ 
  position: relative;
  display: inline-block;
  padding-left:35px;
  text-indent:-25px;
}
#guide_faq .acmenu dt:before {
  content:"Q.";
  font-weight: bold;
  padding-right:10px;
}
#guide_faq .acmenu dt:after {
  content:"";
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #96b420;
  border-right: solid 2px #96b420;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
}
#guide_faq .acmenu dd {
  font-weight: normal;
  background:/*#fffcf7*/#f9fbf4;
  width:950px;
  height:auto;
  text-align:left;
  border:#999 1px solid;
  border-top:none;
  margin-left:0;
  padding:10px 10px 15px 10px;
  padding-left:35px;
  text-indent:-25px;
  display:none;
}
#guide_faq .acmenu dd:before {
  color:#96b420;
  content:"A.";
  font-weight: bold;
  padding-right:10px;
}

#guide_faq .acmenu dt.active:after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

#guide_faq .inquiry_attention ul {
  border:1px solid #ff0000;
  padding:10px;
  margin-right:10px;
  background-color:#ffffff;
}

#guide_faq .inquiry_attention ul.black {
  border:1px solid #efefef;
}

#guide_faq .inquiry_attention li+li {
  margin-top:10px;
}


/*-------------------------
スマホここから
---------------------------*/
@media screen and (max-width: 768px) {
/*==============================
/* 共通部分ここから
==============================*/
body {
  width:100%;
  padding:0 15px;
}
  
.ifItemOut { display:none; }
.smpHeader { display:block; }


.pcHeader {
width: 100%; margin: 0 auto;
}

.header_main {
display: none;}


img { max-width: 100%; }
h1 { font-size:22px; }
h2 { font-size:20px; }

/* スマートフォンでは表示 */
.sp_show { display:block; }

/* スマートフォンでは表示 */
.sp_show_inline {
display:inline-block;
}

/* スマートフォンでは非表示 */
.pc_show { display:none; }

/* スマートフォンでは非表示 */
.pc_show_inline { display:none; }


/* float */
.fl_l { float:none; }
.fl_r { float:none; }
.mr30 { margin-right:0; }

/* スマホ 画像サイズ調整 */
.img_90p { width: 90%; }  
.img_80p { width: 80%; }
.img_70p { width: 70%; }


/*  フッター小（共通部分）
==============================*/
.footer_mi_sp {margin-bottom:3rem}

/* フッター小のリンクの設定 */

/* linkとvisited時の挙動 */
.footer_mi_sp a:link,
.footer_mi_sp a:visited {
display: block;
width:100%;
background: #fdfdfd;
border:1px solid #dddddd;
padding:.5rem;
text-align:center;
text-decoration: none;
color:#666666;
}
/* 上 左右の角丸 */
.footer_mi_sp a:first-child {
border-radius: 3px 3px 0 0; 
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-o-border-radius:  3px 3px 0 0;
-ms-border-radius:  3px 3px 0 0;
}
/* 下 左右の角丸 */
.footer_mi_sp a:last-child {
border-radius: 0 0 3px 3px; 
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
}
/* hoverとactive時の挙動 */
.footer_mi_sp a:hover,
.footer_mi_sp a:active {
background: #bf0000;
color:#ffffff;
}
.footer_mi_sp a+a {
border-top:none!important;
}

/* このページの先頭に戻る */
#backTopPC { bottom:20px; right:20px; position:fixed; z-index:10; display:none; }
#backTopPC a img { opacity:.7; width:44px; height:44px; }
#backTopPC a:hover img { opacity:.5; }

/*フッター
============================================================*/
footer p { margin:0 auto; padding:2em 0 3em; text-align:center; width:100%; }

/*==============================
/* 共通部分ここまで
==============================*/

/*============================================================
3つのこだわり（reason.html内）
============================================================*/
/* 3つのこだわり部分の指定 */
#reason .kodawari3 .img_90p { width: 90%; margin:0 auto; display:block; }  
#reason .kodawari3 .img_80p { width: 80%; margin:0 auto; display:block; }
#reason .kodawari3 .img_70p { width: 70%; margin:0 auto; display:block; }

/* 画像3点ともにwidth100%パターン */
#reason .kodawari_wrap ul li {
 float:none;
 margin-right:0;
 width:100%;
}
#reason .kodawari_wrap ul li img {
 width:100%;
}

/*============================================================
センティーレワンを選んでいただいている理由（reason.html内）
============================================================*/
#reason .line {
margin-bottom:1.5em;
border-bottom: 2px solid #000000;
width:50px;
}

#reason .w440_l {
 width:100%;
 float:none;
}
#reason .w440_r {
 width:100%;
 float:none;
}
#reason .w500_l {
 width:100%;
 float:none;
}
#reason .w500_r {
 width:100%;
 float:none;
}
/*#reason .w440_l img*/
/*
#reason .w440_r img,
#reason .w500_l img,
#reason .w500_r img 
 width:100%;*/


/*========================================
革を育てる愉しみ（reason.html内）
========================================*/
/* 経年変化吹き出し */
#reason .img_balloon {
position: relative;
width:100%;
height:auto;
z-index:0;
}
#reason .img_balloon .z1 {
position:absolute;
top:0;
left:0;
z-index:100;
width:100%;
height:auto;
}
/* 透過吹き出しが上 */
#reason .img_balloon .z2 {
position:absolute;
top:0;
left:0;
z-index:200;
width:100%;
height:auto;
}
/* スタッフの愛用品 */
#reason .aging_items li {
 float:left;
 margin-right:4%;
 margin-bottom:25px;
 width:48%;
}
#reason .aging_items li:nth-child(3n) {
 margin-right:4%;
}

#reason .aging_items li:nth-child(even) {
 margin-right:0;
}
#reason .aging_items li img {
 width:100%;
}
/* 大変よく味がでました スタンプ */
#reason .bg_stamp_wrap {
width:100%;
position: relative;
background:url(https://image.rakuten.co.jp/sentire/cabinet/reason/img_stamp.jpg) no-repeat right bottom;
}
#reason .inner {
  position:relative;
  background-color: rgba(255,255,255,0.6);
}
#reason .fade_stamp {
position:absolute;
width:130px;
height:128px;
bottom:0;
right:0;
z-index:10;
}
/*========================================================================================================================
 ご利用ガイド FAQ よくあるお問い合わせページ（FAQ.html）ここから  ***
=========================================================================================================================*/

#guide_faq img { max-width:100%; }
#guide_faq table { font-size:14px; }

#guide_faq .acmenu dt,
#guide_faq .acmenu dd { font-size:95%; width:100%; height:auto; }
#guide_faq .inquiry_attention li { font-size:.9rem; }

}



/*========================================================================================================================
 /* 防水スプレーの使い方特集 rainyday.html（PC）ここから ↓↓↓  ***
=========================================================================================================================*/

body#rainyday {font-size:1em; line-height: 1.8;}
#rainyday h2 {
font-weight: 500;
margin-bottom: 2rem;
background-image:url(https://image.rakuten.co.jp/sentire/cabinet/column/rainyday_bg.jpg) ;
background-repeat: repeat;
color:#fff/*#a555d7*/;
}
#rainyday h3 { color: #333; padding-left: 1rem; border-left: 3px solid #a555d7; margin-top:2rem; }


/* 関連する記事 */
#rainyday .related_items {
display: flex;
line-height: 1.4;
justify-content:space-between;
flex-wrap: wrap;
}
#rainyday .related_items img {
display: block;
margin-bottom: .5em;
}
#rainyday .related_items_title {
font-size: 1.4em;
font-weight: bold;
border-left: 5px solid #333333;
padding-left: .5em;
margin-bottom: 1.5em;
margin-top:3em;
}
#rainyday .related_items a {
display: block;
width: 31.5%;
margin-bottom: 1.5em;
}
#rainyday .related_items a img {
display: block;
}

/*-------------------------
スマホここから
---------------------------*/
@media screen and (max-width:767px) {

.w950_wrapper {
width:100%;
margin: 0 auto;
}

.foot_mini {
width: 100%;
margin: 0 auto;
}
.footer_copyright {
width: 100%;
margin: 0 auto 2rem;
}


#rainyday .related_items a {
display: block;
width: 48%;
margin-bottom: 1.5em;
}

}

/*========================================================================================================================
 /* #コーデ・雰囲気で探す特集 outfit.html（PC）ここから ↓↓↓  ***
=========================================================================================================================*/

body#outfit {
font-family: 'Montserrat', sans-serif;
font-weight:500;
width:1200px;
}

#outfit .main_img,
#outfit .main_img img {
width:100%;
margin: 0 auto;
}
#outfit .main_txt {
background-color: #f9f9f9;
color: #339933;
font-weight: bold;
text-align: center;
padding:1rem;
margin: 0 auto;
}

#outfit .col3_w950_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 950px;
margin: 0 auto;
}
#outfit .col3_w950_wrap .item {
width: 31%;
margin-bottom: 70px;
background-color: #f9f9f9;
font-size: .6em;
line-height: 1.2;
padding-bottom: .5rem;
}
#outfit .item a {
color: #999999;
}
#outfit .item img {
display: block;
margin-bottom:.7rem;
}
#outfit .col3_w950_wrap .item span {
display: block;
padding: 0 .5rem;
}

/*-------------------------
スマホここから
---------------------------*/
@media screen and (max-width:767px){


body#outfit {
width:100%;
margin: 0 auto;
}

#outfit .main_txt {
font-size: .8rem;
text-align: left;
}

#outfit .col3_w950_wrap {
width: 100%;
}

#outfit .col3_w950_wrap .item {
width: 49%;
margin-bottom: 1rem;
font-size: .6em;
}

}



/*========================================================================================================================
 /* CORBO.製ICカード乗車券用パスケースにつきまして iccard.html（PC）ここから ↓↓↓  ***
=========================================================================================================================*/

body#CORBOiccard {font-size:1em; line-height: 1.8;}
#CORBOiccard h2 {
font-weight: 500;
margin-bottom: 2rem;
background-color: #005438;
background-repeat: repeat;
color:#fff/*#a555d7*/;
}
#CORBOiccard h3 { color: #660000; padding-left: 1rem; border-left: 3px solid #005438; margin-top:2rem; }

.corbopage {
width: 970px;
margin: 0 auto;
}

/* 関連する記事 */
#CORBOiccard .related_items {
display: flex;
line-height: 1.4;
justify-content:space-between;
flex-wrap: wrap;
}
#CORBOiccard .related_items img {
display: block;
margin-bottom: .5em;
}
#CORBOiccard .related_items_title {
font-size: 1.4em;
font-weight: bold;
border-left: 5px solid #333333;
padding-left: .5em;
margin-bottom: 1.5em;
margin-top:3em;
}
#CORBOiccard .related_items a {
display: block;
width: 31.5%;
margin-bottom: 1.5em;
}
#CORBOiccard .related_items a img {
display: block;
}




/*-------------------------
スマホここから
---------------------------*/
@media screen and (max-width:767px) {

.corbopage {
width: 100%;
}

#CORBOiccard .related_items a {
display: block;
width: 48%;
margin-bottom: 1.5em;
}

}


/*========================================================================================================================
 /* お使いのスマホの機種や、パソコンモニターによる色味の違いについて difference.html（PC）ここから ↓↓↓  ***
=========================================================================================================================*/

body#difference {font-size:1em; line-height: 1.8;}
#difference h2 {
font-weight: 500;
margin-bottom: 2rem;
background-color: #013a72;
background-repeat: repeat;
color:#fff/*#a555d7*/;
}
#difference h3 { color: #660000; padding-left: 1rem; border-left: 3px solid #013a72; margin-top:2rem; }


/* 関連する記事 */
#difference .related_items {
display: flex;
line-height: 1.4;
justify-content:space-between;
flex-wrap: wrap;
}
#difference .related_items img {
display: block;
margin-bottom: .5em;
}
#difference .related_items_title {
font-size: 1.4em;
font-weight: bold;
border-left: 5px solid #333333;
padding-left: .5em;
margin-bottom: 1.5em;
margin-top:3em;
}
#difference .related_items a {
display: block;
width: 31.5%;
margin-bottom: 1.5em;
}
#difference .related_items a img {
display: block;
}

/*-------------------------
スマホここから
---------------------------*/
@media screen and (max-width:767px) {

#difference .related_items a {
display: block;
width: 48%;
margin-bottom: 1.5em;
}
}

/*========================================================================================================================
 /* 天然皮革の性質による"表情や色の違い"につきまして color_difference2.html（PC）ここから ↓↓↓  ***
=========================================================================================================================*/

body#difference2 {font-size:1em; line-height: 1.8;}
#difference2 h2 {
font-weight: 500;
margin-bottom: 2rem;
background-color: #604137;
background-repeat: repeat;
color:#fff/*#a555d7*/;
}
#difference2 h3 { color: #660000; padding-left: 1rem; border-left: 3px solid #604137; margin-top:2rem; }


/* 関連する記事 */
#difference2 .related_items {
display: flex;
line-height: 1.4;
justify-content:space-between;
flex-wrap: wrap;
}
#difference2 .related_items img {
display: block;
margin-bottom: .5em;
}
#difference2 .related_items_title {
font-size: 1.4em;
font-weight: bold;
border-left: 5px solid #333333;
padding-left: .5em;
margin-bottom: 1.5em;
margin-top:3em;
}
#difference2 .related_items a {
display: block;
width: 31.5%;
margin-bottom: 1.5em;
}
#difference2 .related_items a img {
display: block;
}

/*-------------------------
スマホここから
---------------------------*/
@media screen and (max-width:767px) {

#difference2 .related_items a {
display: block;
width: 48%;
margin-bottom: 1.5em;
}
}
