@charset "UTF-8";

/* PC用CSS Document */


/* normalize */
@import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css);

/* fontsgoogle */
@import url(https://fonts.googleapis.com/css?family=Asap);

*
{
 margin: 0px;
 padding: 0px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html,
body
{
 height: 100%;
}

html
{
/* ルートのフォントサイズを10pxに */
 font-size: 62.5%;
}

body
{
 font-size: 14px;
 font-size: 1.4rem;
 font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}

a
{
 color: #D20000;
 text-decoration: none;
 -webkit-transition: All 0.2s ease;
 -moz-transition: All 0.2s ease;
 -o-transition: All 0.2s ease;
 -ms-transition: All 0.2s ease;
 transition: All 0.2s ease;
}

a:hover
{
 color: #E14444;
 text-decoration: none;
}

a:hover img.overimg
{
 opacity: 0.8;
}

ul.nolist,
.nolist li
{
 list-style: none;
}

ul.reglist
{
 list-style: disc outside;
 margin-left: 1.5em;
}

.reglist li
{
 list-style: disc outside;
 margin-bottom: 5px;
}

ul.cp_list_pink {
	padding: 0.5em;
  list-style-type: none;
  display:inline-block;
}
ul.cp_list_pink li {
  position: relative;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom:5px;
	border-bottom: 1px solid rgba(238, 139, 160, 1);
}
ul.cp_list_pink li:after,
ul.cp_list_pink li:before{
	content:'';
	position: absolute;
	border-radius: 50%;
}
ul.cp_list_pink li:before {
	top: 50%;
	left: 0.2em;
	width: 17px;
	height: 17px;
	background: rgba(238, 139, 160, 1);
	transform: translateY(-50%);
}
ul.cp_list_pink li:after {
	top: 1.1em;
	left: 0.7em;
	width: 14px;
	height: 14px;
	background: rgba(238, 139, 160, 0.5);
}
ul.cp_list_blue {
	padding: 0.5em;
  list-style-type: none;
  display:inline-block;
}
ul.cp_list_blue li {
  position: relative;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom:5px;
	border-bottom: 1px solid rgba(86, 178, 231, 1);
}
ul.cp_list_blue li:after,
ul.cp_list_blue li:before{
	content:'';
	position: absolute;
	border-radius: 50%;
}
ul.cp_list_blue li:before {
	top: 50%;
	left: 0.2em;
	width: 17px;
	height: 17px;
	background: rgba(86, 178, 231, 1);
	transform: translateY(-50%);
}
ul.cp_list_blue li:after {
	top: 1.1em;
	left: 0.7em;
	width: 14px;
	height: 14px;
	background: rgba(86, 178, 231, 0.5);
}
ul.cp_list_green {
	padding: 0.5em;
  list-style-type: none;
  display:inline-block;
}
ul.cp_list_green li {
  position: relative;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom:5px;
	border-bottom: 1px solid rgba(133, 183, 75, 1);
}
ul.cp_list_green li:after,
ul.cp_list_green li:before{
	content:'';
	position: absolute;
	border-radius: 50%;
}
ul.cp_list_green li:before {
	top: 50%;
	left: 0.2em;
	width: 17px;
	height: 17px;
	background: rgba(133, 183, 75, 1);
	transform: translateY(-50%);
}
ul.cp_list_green li:after {
	top: 1.1em;
	left: 0.7em;
	width: 14px;
	height: 14px;
	background: rgba(133, 183, 75, 0.5);
}

.wrap
{
 clear: both;
 margin: 0;
 padding: 0;
}

img.line1
{
 border: 1px solid #CCCCCC;
}

.clear
{
 clear: both;
}

/* dlink */
div.dlink a
{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 text-indent: -9999px;
}

div.dlink:hover
{
 background-color: #FFF;
 transition: all 0.5s ease;
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}

div.dlink2 a
{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 text-indent: -9999px;
}

/*------------------------------
 Basic Color
----------------------------- */

.red
{
 color: #FF0000;
}

.col_white
{
 color: #ffffff;
}

.col_red
{
 color: #e20012;
}

.col_pink
{
 color: #ee8ba0;
}

.col_orange
{
 color: #f09153;
}

.col_green
{
 color: #85b74b;
}

.col_green2
{
 color: #009639;
}

.col_green3
{
 color: #79b1ae;
}

.col_green4
{
 color: #5BB231;
}

.col_green5
{
 color: #42bbc3;
}

.col_beige
{
 color: #937840;
}

.col_blue
{
 color: #56b2e7;
}

.col_blue2
{
 color: #0080A4;
}

.col_blue_fb
{
 color: #305097;
}

.col_dbrown
{
 color: #130303;
}

.col_brown
{
 color: #663300;
}

.col_umber
{
 color: #563E20;
}

.col_purple
{
 color: #ec82e3;
}

.col_gray
{
 color: #363537;
}

.col_gray2
{
 color: #808080;
}

.col_greige
{
 color: #C3BCBA;
}

.col_dgreige
{
 color: #726B60;
}

.col_navy
{
 color: #202f55;
}

.col_yellow
{
 color: #ffed00;
}



.bkcol_red
{
 background-color: #e20012;
}

.bkcol_red2
{
 background-color: #e51c2d;
}

.bkcol_pink
{
 background-color: #ee8ba0;
}

.bkcol_pink2
{
 background-color: #be006a;
}

.col_pink_ist
{
 color: #D93177;
}


.bkcol_orange
{
 background-color: #f09153;
}

.bkcol_rorange
{
 background-color: #ff6347;
}

.bkcol_gold
{
 background-color: #B38540;
}

.bkcol_dgold
{
 background-color: #937840;
}

.bkcol_green
{
 background-color: #85b74b;
}

.bkcol_green2
{
 background-color: #6dbb58;
}

.bkcol_green3
{
 background-color: #009639;
}

.bkcol_green4
{
 background-color: #42bbc3;
}

.bkcol_black
{
 background-color: #000000;
}

.bkcol_blue
{
 background-color: #56b2e7;
}

.bkcol_blue2
{
	background-color: #00a0e9;
}

.bkcol_brown
{
	background-color: #663300;
}

.bkcol_purple
{
 background-color: #ec82e3;
}

.bkcol_gray
{
 background-color: #999999;
}

.bkcol_lgray
{
 background-color: #eeeeee;
}

.bkcol_dgray
{
 background-color: #333333;
}

.bkcol_yellow
{
 background-color: #ffffe0;
}

.bkcol_yellow2
{
 background-color: #ffed00;
}

.bkcol_beige
{
 background-color: #FAF0CA;
}

.bkcol_beige2
{
 background-color: #E9E3D0;
}

.bkcol_dbeige
{
 background-color: #B8860B;
}

.bkcol_greige
{
 background-color: #C3BCBA;
}

.bkcol_white
{
 background-color: #fff;
}

/*------------------------------
背景グラデーション
--------------------------------*/
.flamingo {
  background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen; }

/*-----------------------
 Margin
-------------------------*/

.mb0
{
 margin-bottom: 0px !important;
}

.mb10
{
 margin-bottom: 10px !important;
}

.mb20
{
 margin-bottom: 20px !important;
}

.mb30
{
 margin-bottom: 30px !important;
}

.mb40
{
 margin-bottom: 40px !important;
}

.mb50
{
 margin-bottom: 50px !important;
}

.mb60
{
 margin-bottom: 60px !important;
}

.mb70
{
 margin-bottom: 70px !important;
}

.mb80
{
 margin-bottom: 80px !important;
}

.mb90
{
 margin-bottom: 90px !important;
}

.mb100
{
 margin-bottom: 100px !important;
}

.mb110
{
 margin-bottom: 110px !important;
}

.mb120
{
 margin-bottom: 120px !important;
}

.mt10
{
 margin-top: 10px !important;
}

.mt20
{
 margin-top: 20px !important;
}

.mt30
{
 margin-top: 30px !important;
}

.mt40
{
 margin-top: 40px !important;
}

.mt50
{
 margin-top: 50px !important;
}

.mt60
{
 margin-top: 60px !important;
}

.mt70
{
 margin-top: 70px !important;
}

.mt80
{
 margin-top: 80px !important;
}

.mt90
{
 margin-top: 90px !important;
}

.mt100
{
 margin-top: 100px !important;
}

.mt110
{
 margin-top: 110px !important;
}

.mt120
{
 margin-top: 120px !important;
}

.mr10
{
 margin-right: 10px !important;
}

.mr20
{
 margin-right: 20px !important;
}

.mrb40
{
 margin-right: 40px !important;
 margin-bottom: 40px !important;
}
.ml15
{
	margin-left: 15px;
}

.ml20
{
	margin-left: 20px;
}
.pdtop10
{
 padding-top: 10px !important;
}
.pdtop20
{
 padding-top: 20px !important;
}
.pdtop30
{
 padding-top: 30px !important;
}
.pdtop40
{
 padding-top: 40px !important;
}
.pdtop50
{
 padding-top: 50px !important;
}
.pdtop60
{
 padding-top: 60px !important;
}
.pdtop70
{
 padding-top: 70px !important;
}
.pdtop80
{
 padding-top: 80px !important;
}
.pdtop90
{
 padding-top: 90px !important;
}
.pdtop100
{
 padding-top: 100px !important;
}
.pdbtm10
{
 padding-bottom: 10px !important;
}
.pdbtm20
{
 padding-bottom: 20px !important;
}
.pdbtm30
{
 padding-bottom: 30px !important;
}
.pdbtm40
{
 padding-bottom: 40px !important;
}
.pdbtm50
{
 padding-bottom: 50px !important;
}
.pdbtm60
{
 padding-bottom: 60px !important;
}
.pdbtm70
{
 padding-bottom: 70px !important;
}
.pdbtm80
{
 padding-bottom: 80px !important;
}
.pdbtm90
{
 padding-bottom: 90px !important;
}
.pdbtm100
{
 padding-bottom: 100px !important;
}
.pdtb0
{
 padding-top: 0px !important;
 padding-bottom: 0px !important;
}
.pdtb5
{
 padding-top: 5px !important;
 padding-bottom: 5px !important;
}

.pdtb10
{
 padding-top: 10px !important;
 padding-bottom: 10px !important;
}

.pdtb20
{
 padding-top: 20px !important;
 padding-bottom: 20px !important;
}

.pdtb30
{
 padding-top: 30px !important;
 padding-bottom: 30px !important;
}

.pdtb40
{
 padding-top: 40px !important;
 padding-bottom: 40px !important;
}

.pdtb50
{
 padding-top: 50px !important;
 padding-bottom: 50px !important;
}

.pdtb60
{
 padding-top: 60px !important;
 padding-bottom: 60px !important;
}

.pdtb70
{
 padding-top: 70px !important;
 padding-bottom: 70px !important;
}

.pdtb80
{
 padding-top: 80px !important;
 padding-bottom: 80px !important;
}

.pdrl0
{
 padding-right: 0 !important;
 padding-left: 0 !important;
}

.pdrl5
{
 padding-right: 5px !important;
 padding-left: 5px !important;
}

.pdrl10
{
 padding-right: 10px !important;
 padding-left: 10px !important;
}

.pdrl20
{
 padding-right: 20px !important;
 padding-left: 20px !important;
}

.pdrl30
{
 padding-right: 30px !important;
 padding-left: 30px !important;
}

.pdrl40
{
 padding-right: 40px !important;
 padding-left: 40px !important;
}

.pdl40
{
  padding-left: 40px;
}

.fll
{
 float: left !important;
}

.flr
{
 float: right !important;
}

.center
{
 text-align: center;
 margin-right: auto;
 margin-left: auto;
}

.ta_right
{
 text-align: right;
}

.ta_left
{
 text-align: left;
}

/*-----------------------
 Font Size
-------------------------*/

.fs12
{
 font-size: 12px !important;
 font-size: 1.2rem !important;
}

.fs14
{
 font-size: 14px !important;
 font-size: 1.4rem !important;
}

.fs16
{
 font-size: 16px !important;
 font-size: 1.6rem !important;
}

.fs18
{
 font-size: 18px !important;
 font-size: 1.8rem !important;
}

.fs20
{
 font-size: 20px !important;
 font-size: 2rem !important;
}

.fs24
{
 font-size: 24px !important;
 font-size: 2.4rem !important;
}

.fs30
{
 font-size: 30px !important;
 font-size: 3rem !important;
}

.fs45
{
 font-size: 45px !important;
 font-size: 4.5rem !important;
}

.fssm
{
 font-size: smaller !important;
}

.fslg
{
 font-size: larger !important;
}

.lh12
{
 line-height: 1.2em !important;
}

.lh15
{
 line-height: 1.5em !important;
}

.lh18
{
 line-height: 1.8em !important;
}

.lh20
{
 line-height: 2em !important;
}

/*-----------------------
 Font Weight
-------------------------*/

.fw-n
{
  font-weight: normal;
}

/*-----------------------
 テキストの装飾
-------------------------*/
.underline_bold
{
	border-bottom: solid 3px;
}

.underline_dot
{
	border-bottom: dotted 2px;
}

.underline_red
{
  position: relative;
  padding: 1.5rem;
  text-align: center;
}
.underline_red::before
{
  position: absolute;
  bottom: 0;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #e20012;
}

/*-----------------------
 imgとテキストなどの縦位置関係
-------------------------*/
.txt-middle {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.txt-end {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

/* ------------------------
テキスト左寄せのまま中央
------------------------ */
.txt-leftcenter {
  display: table;
  margin: 0 auto;
}
/*-----------------------
 Round
-------------------------*/

.round5
{
 border-radius: 5px;
}

.round10
{
 border-radius: 10px;
}

.round50per
{
 border-radius: 50%; /*画像が正方形の時だけ正円*/
}

/*-----------------------
 Button
-------------------------*/

.css3button_red,
.css3button_blue,
.css3button_green,
.css3button_orange,
.css3button_red2, 
.css3button_brown, 
.css3button_gray, 
.css3button_pink
{
 line-height: 1em;
 padding: 0;
 margin: 0;
}

.css3button_red a
{
 background-color: #FF235A;
}

.css3button_red2 a
{
 background: #E60012;
}

.css3button_blue a
{
 background-color: #0E5FE4;
}

.css3button_gray a
{
 background: #999999;
}

.css3button_green a
{
 background: #5FB706;
}

.css3button_orange a
{
 background: #FF6600;
}

.css3button_brown a
{
 background-color: #988462;
}
.css3button_pink a
{
 background-color: #FF5475;
}

.css3button_red a,
.css3button_blue a,
.css3button_gray a,
.css3button_green a,
.css3button_orange a, 
.css3button_brown a
{
 color: #ffffff;
 text-decoration: none;
 padding: 16px 2px;
 margin: 0;
 border-radius: 5px;
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
 box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
 text-shadow: 0px 1px 2px rgba(000, 000, 000, 0.3);
 /*Gradient*/
 background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.30) 100%);
 background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.30) 100%);
 background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.30) 100%);
 background-image: -ms-linear-gradient(top, rgba(255,255,255,0.00), rgba(255,255,255,0.30));
 background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.30) 100%);
 /*Transition*/
 -webkit-transition: All 0.2s ease;
 -moz-transition: All 0.2s ease;
 -o-transition: All 0.2s ease;
 -ms-transition: All 0.2s ease;
 transition: All 0.2s ease;
 display: block;
 text-align: center;
}

.css3button_red2 a,
.css3button_pink a
{
 color: #ffffff;
 text-decoration: none;
 padding: 16px 2px;
 margin: 0;
 border-radius: 5px;
 /*Transition*/
 -webkit-transition: All 0.2s ease;
 -moz-transition: All 0.2s ease;
 -o-transition: All 0.2s ease;
 -ms-transition: All 0.2s ease;
 transition: All 0.2s ease;
 display: block;
 text-align: center;
}

.css3button_red a:hover
{
 background: #FF235A;
}

.css3button_red2 a
{
 background: #E60012;
}

.css3button_blue a:hover
{
 background: #0E5FE4;
}

.css3button_gray a:hover
{
 background: #333333;
}

.css3button_green a:hover
{
 background: #74E007;
}

.css3button_orange a:hover
{
 background: #FF9900;
}

.css3button_brown a:hover
{
 background-color: #B7A587;
}

.css3button_pink a:hover
{
 background-color: #D6254D;
}

.css3button_red a:hover,
.css3button_blue a:hover,
.css3button_gray a:hover,
.css3button_green a:hover,
.css3button_orange a:hover, 
.css3button_brown a:hover
{
 color: #ffffff;
 text-decoration: none;
 -webkit-box-shadow: 0px 0px 0px rgba(000, 000, 000, 0);
 box-shadow: 0px 0px 0px rgba(000, 000, 000, 0);
}

.css3button_red2 a:hover
{
 background: #FF3746;
 color: #FFFF00;
 text-decoration: none;
}

.css3button_red i,
.css3button_blue i,
.css3button_green i,
.css3button_gray i,
.css3button_orange i,
.css3button_red2 i, 
.css3button_brown i,
.css3button_pink i
{
 margin: 0 5px 0 0;
}
i.right
{
 margin:0 0 0 5px;
}

.btn_ac_orange {
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*背景色*/
    border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
    border-radius: 20px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}

.btn_ac_orange a {
    text-decoration: none;
    color: #FFF;
}
.btn_ac_orange:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.copy_btn {
  display       : inline-block;
  border-radius : 3%;          /* 角丸       */
  border: none;
  font-size     : 12pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 15px;   /* 余白       */
  background    : #ff6347;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
}

/* 影あり角丸ボタン */
/* 会社理念ページで使用 */
.btn-push__radius {
  border-radius: 100vh;
}
a.btn-push-pink {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(238, 139, 160, 1);
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-bottom: 4px solid rgba(241, 114, 142, 1);
}
.btn-push-pink i{
  margin-left: 10px;
}
.btn-push-pink:hover {
    transform: translateY(4px);
    border-bottom: none;
}
a.btn-push-pink {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(238, 139, 160, 1);
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-bottom: 4px solid rgba(241, 114, 142, 1);
}
.btn-push-gray-fn i{
  margin-left: 10px;
  color: rgba(238, 139, 160, 1);
}
.btn-push-gray-fn:hover {
    transform: translateY(1px);
    /* border-bottom: none; */
}
a.btn-push-gray-fn {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid rgba(105, 105, 105, 1);
  font-size: 14px;
  color: #696969;
  text-decoration: none;
  padding: 5px;
  border-bottom: 2px solid rgba(0, 0, 0, 1);
}

a.btn-push-blue {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(86, 178, 231, 1);
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-bottom: 4px solid rgba(50, 167, 235, 1);
}
.btn-push-blue i{
  margin-left: 10px;
}
.btn-push-blue:hover {
    transform: translateY(4px);
    border-bottom: none;
}
a.btn-push-dgreen {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(0, 150, 57, 1);
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-bottom: 4px solid rgba(1, 119, 46, 1);
}
.btn-push-dgreen i{
  margin-left: 10px;
}
.btn-push-dgreen:hover {
    transform: translateY(4px);
    border-bottom: none;
}
a.btn-push-yellow {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(255, 237, 0, 1);
  font-size: 16px;
  color: #696969;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-bottom: 4px solid rgba(167, 155, 1, 1);
}
.btn-push-yellow i{
  margin-left: 10px;
}
.btn-push-yellow:hover {
    transform: translateY(4px);
    border-bottom: none;
}
a.btn-push-skyblue {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(0, 155, 222, 1);
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-bottom: 4px solid rgba(0, 135, 193, 1);
}
.btn-push-skyblue i{
  margin-left: 10px;
}
.btn-push-skyblue:hover {
    transform: translateY(4px);
    border-bottom: none;
}

/* ------------------------
 基本テーブル
------------------------ */

table
{
 width: 100%;
 border: 1px solid #CCCCCC;
 border-collapse: collapse;
 border-spacing: 0;
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 20px;
 margin-left: 0px;
}

th,
td
{
 padding: 5px;
 margin: 0px;
 border-top: 0 solid #CCCCCC;
 border-right: 0 solid #CCCCCC;
 border-bottom: 1px solid #CCCCCC;
 border-left: 1px solid #CCCCCC;
 text-align: left;
 vertical-align: top;
 font-weight: normal;
 line-height: 1em;
}

/* ------------------------
マウスオーバーで透過度を変える
------------------------ */

a:hover img.overimg
{
 opacity: .75;
}

/* ------------------------
clearfix
------------------------ */

.clearfix:after
{
 content: "";
 clear: both;
 display: block;
}


/* ------------------------
YouTubeレスポンシブ化
------------------------ */
.yt {
 position: relative;
 width:100%;
 padding:56.25% 20% 20px;
 margin:0;
}
.yt iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}
.yt .pd {
 padding:0 10%;
}

/* ------------------------
CSS ホバーエフェクト（:hover）で画像の上に文字を出す
------------------------ */

.rcm-box {
 width: 100%;
 background-color: #000000;
 position: relative;
 overflow: hidden;
}
.rcm-box img {
  display: block;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.4s, transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.rcm-box:hover img {
  opacity: 0.3;
  -webkit-transform: scale3d(1.2, 1.2, 1);
  transform: scale3d(1.2, 1.2, 1);
}
.rcm-overlay {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.rcm-box:hover .rcm-overlay {
  opacity: 1;
}
.rcm-contents {
  padding: 0 10px 5px;
  color: red;
  -webkit-transform: scale3d(0, 0, 1);
  transform: scale3d(0, 0, 1);
  -webkit-transition: transform 0.4s, color 0.4s;
  transition: transform 0.4s, color 0.4s;
}
.rcm-box:hover .rcm-contents {
  color: white;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.rcm-button {
  background: red;
  padding: 5px 30px;
  text-decoration: none;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}
.rcm-box:hover .rcm-button {
  background: white;
}

/* ------------------------
飾りの調整
------------------------ */
.borderbt_none
{
 border-bottom: none;
 }


/* ------------------------
アニメーション
------------------------ */
.fade-in {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
}

.fade-up {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}

