@charset "UTF-8";

/* ページ構成
---------------------------------------------------------- */
#records_2018 {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: #e4398d;
  background: url(../../../img/contents_pc/lp/records_2018/bg_main.png) repeat;
  background-attachment: fixed;
  background-position: 50% 0;
}

#records_2018 div[class^="box0"] > img {
  vertical-align: bottom;
}


/* 各box
---------------------------------------------------------- */

#records_2018 .topWrap {
  width: 100%;
}

#records_2018 div.box01,
#records_2018 div.box02,
#records_2018 div.box03,
#records_2018 div.box04 {
  position: relative;
  left: 50%;
  margin-left: -700px;
  text-align: center;
  width: 1400px;
}

#records_2018 div.box01 {
  height: 950px;
  background: url(../../../img/contents_pc/lp/records_2018/mainpic_01.png) no-repeat;
  z-index: 200;
}

#records_2018 div.box01 i.logo {
  position: absolute;
  top: 430px;
  left: 244px;
  height: 442px;
  width: 442px;
  text-align: center;
  background: url(../../../img/contents_pc/lp/records_2018/img_logo.png) 50% no-repeat;
  transform: rotateZ( 0deg );
  transition: 0.5s;
  border-radius: 200px;
  z-index: 500;
}

#records_2018 div.box01 i.logo:hover {
  transform: rotateZ( 360deg ) ;
  cursor: grab;
}

#records_2018 div.box02 {
  height: 524px;
	margin-top: 20px;
  /* background: url(../../../img/contents_pc/lp/records_2018/mainpic_02.png) no-repeat; */
  z-index: 200;
}

#records_2018 div.box02 .video {
border: 4px solid #333;
}

#records_2018 div.box03 {
  height: 1120px;
  background: url(../../../img/contents_pc/lp/records_2018/mainpic_03.png) no-repeat;
  z-index: 200;
}

#records_2018 div.box04 {
}

/*
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
*/

@-webkit-keyframes spin {
  0%,90% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
  }
}

@keyframes spin {
  0%,90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

/* 注意 */
#records_2018 .box05 .attn {
  position: absolute;
  bottom: 95px;
  margin-left: 370px;
  width: 940px;
  height: 120px;
  padding: 10px;
}

#records_2018 .box05 .attn li {
  text-align: left;
  color: #fff;
  list-style: disc;
}

/* テキスト画像
---------------------------------------------------------- */


/* ボタン
---------------------------------------------------------- */
#records_2018 .box01 a,
#records_2018 .box02 a,
#records_2018 .box03 a {
  position: absolute;
  z-index: 100;
  left: 50%;
  opacity: 0;
  background: white;
}

#records_2018 .box01 a:hover,
#records_2018 .box02 a:hover,
#records_2018 .box03 a:hover,
#records_2018 .box04 a:hover {
  opacity: 0.2;
  cursor: pointer;
}

#records_2018 .box01 .btn_twt {
  width: 75px;
  height: 75px;
  margin-left: 388px;
  top: 300px;
  border-radius: 50px;
  z-index: 500;
}

#records_2018 .box03 .btn_twt_tamaki {
  width: 30px;
  height: 30px;
  margin-left: -217px;
  top: 214px;
  border-radius: 100px;
  z-index: 500;
}

#records_2018 .box03 .btn_twt_aoi {
  width: 30px;
  height: 30px;
  margin-left: -249px;
  top: 311px;
  border-radius: 100px;
  z-index: 500;
}

#records_2018 .box03 .btn_zoom01,
#records_2018 .box03 .btn_zoom02,
#records_2018 .box03 .btn_zoom03 {
  width: 160px;
  height: 160px;
  margin-left: -413px;
  bottom: 420px;
  z-index: 500;
  position: absolute;
}

#records_2018 .box03 .btn_zoom02 { bottom: 154px; }
#records_2018 .box03 .btn_zoom03 {bottom: 154px;margin-left: 28px;}

#records_2018 .box03 .btn_buy {
  position: absolute;
  width: 560px;
  height: 95px;
  margin-left: -273px;
  bottom: 21px;
  border-radius: 100px;
  z-index: 500;
  position: absolute;
}


.scrolltop a {
  width: 90px;
  height: 102px;
  background: url(../../../img/contents_pc/lp/records_2018/sprite.png) no-repeat -11px -240px;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
  z-index:300;
}

/* 注意事項
---------------------------------------------------------- */

/* 記事系 
---------------------------------------------------------- */

#records_2018 div.box04 {
  /* background: #000; */
  padding: 30px;
  width: 1020px;
  margin: 0 auto;
  left: 0;
}

#records_2018 div.box04 .article_body {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  border: 4px solid #424242;
}


#records_2018 .center img {
  text-align: center;
  display: block;
  margin: 0 auto;
}

#records_2018 p.ttl_01 {
  background: #35e0ff;
  color: #000;
  font-size: 20px;
  margin-bottom: 10px;
  text-align: left;
  padding: 10px;
  font-weight: bold;
  border: 4px solid #424242;
}

#records_2018 p.ttl_02 {
  width: 490px;
  height: 60px;
  display: block;
  background: url(../../../img/contents_pc/campaign/april_2018/pc_sprite.png) no-repeat 0 -312px;
  font-size: 24px;
  text-align: left;
  padding: 19px 0 0 30px;
  margin: 20px 0;
}

#records_2018 dl {
  margin-bottom: 20px;
}

#records_2018 dl dt {
  width: 100px;
  height: 100px;
  display: table-cell;
}

#records_2018 .face {
  width: 100px;
  height: 100px;
  background: url(../../../img/contents_pc/lp/records_2018/sprite.png) no-repeat -7px -12px;
  display: table-cell;
}

#records_2018 .face.nj_01 {
  background: url(../../../img/contents_pc/campaign/april_2018/pc_sprite.png) no-repeat 0 0;
}
#records_2018 .face.ms_01 {
  background: url(../../../img/contents_pc/lp/records_2018/sprite.png) no-repeat -7px -117px;
}

#records_2018 dd {
  display: table-cell;
  text-align: left;
  padding: 5px;
}

#records_2018 .page_navi {
  margin: 20px auto 0;
  padding: 5px 10px;
  display: block;
  line-height: 50px;
  background: rgba(82, 97, 118, 0.1);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1) inset;
  font-size: 14px;
  text-align: center;
}
#records_2018 .page_navi span {
  text-decoration: none;
  padding: 8px 15px;
  letter-spacing: 1px;
  position: relative;
  top: 0;
  color: #898989;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: solid 1px #c4c4c4;
  background-color: #e5e5e5;
}
#records_2018 .page_navi a {
  text-decoration: none;
}
#records_2018 .page_navi a span {
  cursor: pointer;
  color: #fff;
  border: solid 1px #dc237b;
  background-color: #f5429f;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.23) inset, 0 1px 1px rgba(0, 0, 0, 0.36);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.23) inset, 0 1px 1px rgba(0, 0, 0, 0.36);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.23) inset, 0 1px 1px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.23);
}
#records_2018 .page_navi a span:hover {
  position: relative;
  top: 1px;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.23) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.23) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.23) inset;
}

.article_body.sako p {
  padding: 0 20px;
  margin-bottom: 10px;
}
.article_body p img{border:1px solid #424242;}


.article_body .dental{
text-align:left;
border:1px dotted #424242;
padding:10px;
margin:10px;
border-radius:10px;
background:#f5f5f5;
}

/* アニメ
---------------------------------------------------------- */

#records_2018 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


/* 汎用 */
.fs24{font-size:24px;}

.hr_top {
  display: block;
  margin: 0 auto;
}

.color_10{color:#ff9800 !important;}