@charset "UTF-8";
/*
---------------------------------------------------- */
#main-rolex-contents{ width:720px; margin:0 auto; font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.8em; color: #333; text-align: left; }

#main-rolex-contents h3 { font-size: 18px; line-height: 1.8em; font-weight: bold; }

#main-rolex-contents .red{ color: #FF0000; }
#main-rolex-contents .bold{ font-weight: bold; }
#main-rolex-contents .center{ text-align: center; }

#main-rolex-contents .spt5{ margin-top: 5px; }
#main-rolex-contents .spt10{ margin-top: 10px; }
#main-rolex-contents .spt15{ margin-top: 15px; }
#main-rolex-contents .spt20{ margin-top: 20px; }
#main-rolex-contents .spt30{ margin-top: 30px; }
#main-rolex-contents .spt40{ margin-top: 40px; }
#main-rolex-contents .spt50{ margin-top: 50px; }
#main-rolex-contents .spt65{ margin-top: 65px; }
#main-rolex-contents .spt80{ margin-top: 80px; }
#main-rolex-contents .spt100{ margin-top: 100px; }

#main-rolex-contents .spb10{ margin-bottom: 10px; }
#main-rolex-contents .spb20{ margin-bottom: 20px; }
#main-rolex-contents .spb40{ margin-bottom: 40px; }

#main-rolex-contents .flex{ display: flex; display: -webkit-flex; align-items: center; }
#main-rolex-contents .flex .child{ width: 50%; }
#main-rolex-contents .flex .child+.child{ padding-left: 40px; }
#main-rolex-contents .flex .child .photo{ width: 100%; }

#main-rolex-contents .button a { background: #025f44; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 300px; padding: 10px 25px; color: #f4de9b; border: 2px solid #f4de9b; border-radius: 50px; transition: 0.3s ease-in-out; font-weight: 500; z-index:0; text-decoration: none; }
#main-rolex-contents .button a:before { content: ""; position: absolute; top: 0; bottom: 0; width: 0; display: block; background: #FFFFFF; transition: .3s; left:0; border-radius: 50px; }
#main-rolex-contents .button a:hover { color: #025f44; border: 2px solid #025f44; }
#main-rolex-contents .button a:hover:before { width: 100%; z-index: -1; }

/* SNSボタン */
.flowbtn{ font-family:'Times New Roman',sans-serif; border-radius:13px; position:relative; display:inline-block; width:50px; height:50px; font-size:33px; color:#fff!important; transition:.5s; text-decoration:none; }
.flowbtn i{ position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
/* Twitter */
.fl_tw{ background:#55acee; }
/* 問い合わせ */
.fl_ma{ background:#f3981d; }
/* Facebook */
.fl_fb{ background:#3b5998; }
/* はてブ */
.fl_hb{ background:#1ba5dc; }
/* Pocket */
.fl_pk{ background:#ef3f56; }
/* Feedly */
.fl_fd{ background:#6cc655; }
/* YouTube */
.fl_yu{ background:#fc0d1c; }
/* LINE */
.fl_li1{ background:#00c300; }
/* Instagram紫グラデ背景色 */
.insta_btn { background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; }
/* Instagramオレンジグラデ背景色 */
.insta_btn:before{ content: ''; position:absolute; top:17px; left:-1px; width:45px; height:34px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); }
/* Instagramアイコン調整 */
.insta_btn .fa-instagram{ font-size:40px; }
/* アイコンボタン下テキスト調整 */
.flowbtn div{ font-size:11px; color:#666; position:relative; top:45px; }
/* アイコンボタンにマウスホバーした時の指定*/
.flowbtn:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); text-decoration:none; }
/* ulタグの内側余白を０にする */
ul.snsbtniti{ padding:0!important; margin: 0 25%; }
/* アイコンボタン全体の位置 */
.snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; }
/* アイコンボタン同士の余白調整 */
.snsbtniti li{ flex:0 0 33%; text-align:center!important; }

@media screen and (max-width : 480px ){
	#main-rolex-contents{ font-size: 16px; }
	#main-rolex-contents h3 { font-size: 16px; }

	#main-rolex-contents{ width:100%; margin-top: 0; padding-top: 0; }
	#main-rolex-contents .flex{ flex-wrap: wrap; width:90%; margin:20px 5%; }
	#main-rolex-contents .flex .child{ width: 100%; order: 1;}
	#main-rolex-contents .flex .child0{ order: 0; }
	#main-rolex-contents .flex .child+.child{ padding: 20px 0; }
	#main-rolex-contents .flex img{ margin: 0 auto; }
	#main-rolex-contents .button a { font-size: 14px; }
	#main-rolex-contents .spt65{ margin-top: 0px; }

}