@media screen and (min-width:0px) and ( max-width:640px) {

  h2.case_mes {
  	font-size: 2rem;
  }

  h2.case_mes+p {
    font-size: 1.5rem;
  }

  .sp_none {
    display: none!important;
  }

}

@media screen and (min-width:641px) and ( max-width:1024px) {

  h2.case_mes {
  	font-size: 2rem;
  }

  h2.case_mes+p {
    font-size: 1.5rem;
  }

  .tablet_none {
    display: none;
  }

}

@media screen and (min-width:1025px) {

  h2.case_mes {
  	font-size: 3rem;
  }

  h2.case_mes+p {
    font-size: 1.5rem;
  }

  .pc_none {
    display: none!important;
  }

}






/*
 * Custom translucent site header
 */

.s-userlist {
  padding-top: 5rem;
}

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

.text-white {
    color: #fff!important;
}
.text-center {
    text-align: center!important;
}
.bg-dark {
    background-color: #343a40!important;
}













/*
responsive
*/

.w-100 {
  width: 100%!important;
}

@media (min-width: 768px) {
  .d-md-flex {
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
  }


}


/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.flex-equal > * {
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }
}

.overflow-hidden { overflow: hidden; }








/* NEWラベル */
.new_triangle {
    background: #fafafa;
    margin: 0 auto;
    position: relative;
}

/* ラベル部分 左上に表示 */
.new_triangle::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 6em solid transparent;
    border-left: 6em solid #c12748;
    position: absolute;
    z-index: 100;
}
.new_triangle::after {
    content: "New!";
    display: block;
    top: 15px;
    transform: rotate(-45deg);
    color: #fff;
    left: 10px;
    position: absolute;
    z-index: 101;
}

h2.case_mes {
	background:none!important;
	font-family: MS PMincho!important;
	padding: 0 0 1vw 0!important;
  color: #fff;
}

h2.case_mes span {
  color:#ffba00;
  font-size:2em;
}


p.lead {
  color:#fff;
}

.date {
	text-align: right;
	font-size: 1em;
  margin-bottom: 1rem;
}

.date i,
.contents-space i {
	margin: 0 5px;
}


.contents-space{
	margin: 2vw 3vw;
}


.more-btn {
/*	margin: 3vw 0; */
	width: 50%;
}


.continued {
	position: relative;
}

.continued p {
	font-size: 2em;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.content-link {
	color:#fff;
}

.content-link:hover {
	text-decoration:none;
	color:#fff;

}

.info-wrap {
	margin: 3vw 3vw;
}

.info-btn {
	background:#ffba00;
	color:#000;
	width: 80%;
}

.info-btn:hover {
	background:#343a40;
	border:1px solid #ffba00;
	color: #ffba00;
}



/* fade-up
------------------------*/
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }




/* Larger devices */
@media ( min-width: 600px) {
  .prev-next-link {
    display: flex;
  }
  .prev-next-link a {
    flex: 1;
  }
  .prev-next-link a,
  .prev-next-link a:first-child {
    border: none;
  }
  .next-link {
    text-align: right;
  }
}
blockquote {
	position: relative;
	padding: 35px 15px 10px 15px;
	box-sizing: border-box;
	background: #0c0c0c;
	color: #b7b7b7;
	border-left: 4px solid #ffba00;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
	border-radius: 5px;
	font-size:1.3rem;
	display: block;
}

blockquote:before{
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 3px;
	vertical-align: middle;
	content: "“";
	font-family: sans-serif;
	color: #ffba00;
	font-size: 90px;
	line-height: 1;
}

blockquote p {
	padding: 0;
	margin: 7px 0;
	line-height: 1.7;
	display: block;
}

blockquote cite {
	display: block;
	text-align: right;
	color: #888888;
	font-size: 0.9em;
}


.talk_no1 {
	color:#EF866B;
}

.talk_no2 {
	color:#6495ED;
}

.talk_no3 {
	color:#79af8f;
}

.talk_no4 {
	color:#FFC679;
}

.talk_no5 {
	color:#F8ACAC;
}


/*注釈関連
---------------*/


.jump_info,
.jump_info:hover {
	color:#ffba00;
	text-decoration:none;
}


.more_info {
	font-size:1.3rem;
	color:#777777;
}




.tweet_wrap {
position: relative!important;
	display: block!important;
	margin: 50px 0!important;
	padding: 22px 0 0 100px!important;
}

.tweet_wrap img {
	position: absolute!important;
	top: 0!important;
	left: 0!important;
	width: 80px!important;
	height: auto!important;
	margin: 0 20px 0 0!important;
}


.tweet_wrap .fukidashi {
    display: inline-block!important;
    position: relative!important;
    padding: 17px 13px 7px!important;
    border-radius: 12px!important;
    background: #6f6f6f!important;
}

.tweet_wrap .fukidashi:after {
    content: ""!important;
    display: inline-block!important;
    position: absolute!important;
    top: 18px!important;
    left: -24px!important;
    border: 12px solid transparent!important;
    border-right: 12px solid #6f6f6f!important;
}


.talking_pic {
	width:100px!important;
}



.writer_intro {
	 background:rgba(0,0,0,0.7);
	 padding:5px;"
}

.writer_intro div {
	padding:0 0 0 100px!important;
	margin:20px;
}

.writer_intro img {
	margin:10px;
}

.writer_intro p {
	margin:0px;
}

.writer_intro .writer_name {
	font-size:3rem;
}