@charset "utf-8";


/* Old Single
*******************************************************************************************************************/


.article_header{display: none;}
.single_header--title{ font-size: 3.4rem; font-weight: 700; color:var(--main-color);letter-spacing: 0.1rem; margin-top: -7px; margin-bottom: 25px; padding: 0 10px;}
.single_headerbar{ border: solid 1px var(--main-color); border-left:none; border-right:none; display: flex; justify-content: space-between; padding: 28px 10px; margin-bottom: 50px; letter-spacing: 0.08rem; font-size:1.23rem;}
.headerbarL{letter-spacing: 0.06rem;}
.headerbarL i{color:var(--main-color);}
.headerbarR{font-family: 'Roboto Condensed', sans-serif; color:var(--main-color); }
.headerbarR time{margin-left: 10px;}
.headerbarR i{ margin-right:3px; vertical-align:-1px; color:var(--main-color); }
.headerbarL ul{ list-style:none;}
.headerbarL li{ display:inline-block; color:var(--main-color); margin:0 5px 0 0;}
.headerbarL li a{color:var(--main-color); padding:3px 3px; position: relative;}
.headerbarL span{ vertical-align:-1px; margin:0 1px 0 0;}
.p_text{ padding:15px 30px 40px 30px; color:#000; letter-spacing:0.35rem; font-size:1.65rem; line-height:3.4rem;word-break:break-all; text-align: justify; box-sizing: border-box;}


.p_text .price{font-family:'Roboto Condensed', sans-serif !important; font-size: 2.8rem; letter-spacing: 0.03rem;}
.p_sText{letter-spacing: 0.2em; font-size:1.4rem; line-height:1.7em;  margin-bottom: 25px;}
code{ font-size:1.3rem;font-family: 'Roboto Condensed', sans-serif; color: #333; background-color:#EEE; padding:4px 12px; margin:0 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.g{ font-size:1.4rem; color: #333; background-color:#EEE; padding:7px 12px; margin:0 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.key{ font-size:1.4rem; background-color:#666; padding:3px 10px 3px 14px; margin:0 3px 0 1px; color: #FFF; font-family: 'Roboto Condensed', sans-serif;
-webkit-border-radius: 3px; border-radius: 3px; border-bottom: solid 2px #111; border-right: solid 1px #111;}
span.y{background-color:#fffa76; padding:0 3px;} 
span.r{border-bottom:solid 2px  rgb(250, 174, 174); padding:0 1px 3px 1px;}
span.b{ font-size:1.2rem; background-color:var(--main-color); color:#FFF; letter-spacing: 0.1rem;  padding:10px 10px 10px 10px;margin-right: 8px;border-radius: 3px; } 
a.tlink{ color:#1770c9; margin: 0 1px 0 4px; letter-spacing: 0.08rem;}
a.tlink i, a.tlink span{ vertical-align: 0px;}


.link a {
	position: relative;
	display: block;
	color:var(--main-color); 
	background-color:#f4f4f4; 
	padding:12px 20px; margin-bottom:40px;  letter-spacing: 0.08em;
	z-index: 1;
	transition: .3s;
  }
.link a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background:#e4e8f3;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
  }
  .link a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
  }
.link img{display: none; }
.link span, .y_link span{ margin-right:5px; font-size:16px; vertical-align:-1px;}
.y_link a{color:#333; display:block; background-color:#fff881; padding:15px 20px; margin-bottom:30px;  letter-spacing: 0.08em; transition: all 0.2s ease-in; }
.y_link a:hover{ background-color:#fff100; color:#000;}
.title_bubble{position: relative; color: #FFF; line-height: 2.6rem; font-size: 2rem; letter-spacing: 0.1rem; background: var(--color-03); padding: 25px; border-radius: 8px;}
.title_bubble:before {
	content: '';
	position: absolute;
	display: block;
	z-index: 1;
	border-style: solid;
	border-color: var(--color-03) transparent;
	border-width: 20px 10px 0 10px;
	bottom: -15px;
	left:10%;
	margin-left: -10px;
}
.list_title{font-size: 2.8rem; color: var(--main-color); font-weight: bold; margin-bottom: 20px; letter-spacing: 0.01rem;font-family:'Noto Sans JP', sans-serif;}
.title_h1{ border-bottom:solid 1px var(--main-color); border-top:solid 1px var(--main-color); padding:24px 3px; font-size:2.5rem; font-weight: 700; color: var(--main-color); margin-bottom:20px; letter-spacing: 0.08rem; }
.title_h2{ border-left:solid 4px var(--main-color); color:#222; line-height:1.4; letter-spacing: 0.02em; padding:0px 16px; font-size:2.3rem; font-weight: bold; margin-bottom: 25px; }
.title_h2b{border-bottom:solid 1px var(--main-color); border-top:solid 1px var(--main-color); padding:15px 3px 12px 3px; font-size:2.2rem; margin-bottom:20px;color:#111; letter-spacing: 0.05rem; font-weight: bold; }
.title_h3{position: relative; border-bottom:solid 3px #EEE; color:#222; font-size:2rem; font-weight: bold; margin-bottom: 30px; letter-spacing: 0.05rem; line-height: 1.8; padding-bottom: 2px;}
.title_h3::after {
	position: absolute;
	content: " ";
	border-bottom: solid 3px var(--main-color);
	bottom: -4px;
	width:8%;
	display: block;
}
.title_h4{  font-weight: bold;  font-size:1.8rem; background:#F4F4F4; padding:9px 15px; margin-bottom: 30px; border-left: solid 5px var(--main-color); letter-spacing: 0.08rem;}
.title_h5{  font-weight: bold;  font-size:1.7rem;margin-bottom: 10px; letter-spacing: 0.08rem; position: relative; padding-left: 19px;}
.title_h5::after{position: absolute; left:0; top:12px; content: ''; width: 6px;height:6px;border: solid 3px var(--main-color); border-radius:100%;}

.title_num{ display: flex; margin-bottom: 10px; margin-top: 10px;}
.title_numL{ background-color:var(--main-color); border-radius: 50%; color:#FFF; text-align: center; width: 40px; height: 40px; line-height: 40px; font-family: 'Roboto Condensed', sans-serif; font-size:1.8rem; margin-right: 13px; display: block;}
.title_numR{ font-size:2.2rem; color:#222;  padding-top:1px;flex: 1;}
.title_sale{font-size: clamp(22px, 3vw, 34px); text-align: center; font-weight: 700; margin-bottom: 20px; line-height: clamp(2.5rem, 7vw, 4.5rem);}
.subT01{position: relative; padding-left: 1.7rem; font-size:1.7rem; margin-bottom:10px; margin-left: 11px; font-weight: bold; letter-spacing: 0.08em;}
.subT01::after {position: absolute; top:17px;left:0;content: ''; width: 13px; height:2px; background-color:var(--color-03);}
.subT02{font-size:1.8rem; font-weight: bold; padding: 5px 0; margin-bottom: 20px;letter-spacing: 0.07em; border-bottom: solid 1px #666;}
.subT03{position: relative; font-size:1.8rem; font-weight: bold; letter-spacing: 0.06em; color:var(--color-05); padding-left: 27px; line-height: 2.5rem; margin-bottom: 8px;}
.subT03::after{position: absolute; top:2.05rem;left: -3px;margin-top:-20px;content: '\e900';color:var(--color-05); font-size:24px;font-family: 'icomoon' !important;z-index:1;}
.books_title{font-size: 2.3rem; font-weight:bold; letter-spacing: 0.05rem; padding:0 10px 20px 10px; border-bottom: dotted 1px #999; margin-bottom: 35px; line-height: 3rem;}


.books_img{text-align: center; padding: 0 0 35px 0; border-bottom: dotted 1px #999; margin-bottom: 25px;}
.books_img img{max-height: 400px;}
.books_img img.img-line{border: solid 1px #DDD;}
.books_mokuji{border-radius: 6px; padding:20px 30px; margin-bottom: 20px; font-size: 1.45rem; letter-spacing: 0.05rem; line-height: 2.6rem; border: solid 1px #DDD;}
.books_mokuji ul{list-style: none;}
.books_mokuji__title{padding-bottom: 5px; margin-bottom: 18px; border-bottom: solid 1px #DDD;}
.books_mokuji__title i{margin-right: 5px;}

.td_num{background-color:#FFF; border-radius: 50%; color:#333; text-align: center; width: 20px; height: 20px; line-height: 20px; font-family: 'Roboto Condensed', sans-serif; font-size:1.3rem; margin-right: 5px; display:inline-block; letter-spacing:normal; vertical-align: 1px;}
.point_green{color: #01b901; font-size:2.2rem; letter-spacing: 0.1rem; line-height: 3.2rem; font-weight: bold;}


.mrk.active{background-position: -100% 1.8em; }
.mrk{background-repeat: repeat-x;background-size: 200% 2px; background-position: 0 1.8em;transition: all 1s ease-out 0.6s; padding: 6px 0px 6px 0px; margin: 0 3px;}
.mrkb.active{background-position: -100% 0.5em; }
.mrkb { font-size:1.6rem; color:#000; background-repeat: repeat-x; background-size: 200% 1.5em; background-position:0 0.5rem ; transition: all 0.7s ease-out 0.6s; padding: 6px 3px 6px 6px; margin: 0 3px; letter-spacing:0.15rem;}
.mrkb{
	background-image: -webkit-linear-gradient(to right, transparent 50%, rgb(255, 255, 147) 50%);
    background-image: linear-gradient(to right, transparent 50%, rgb(255, 255, 147) 50%);
	}
.mrk{
	background-image: -webkit-linear-gradient(to right, transparent 50%, rgb(250, 174, 174) 30%);
    background-image: linear-gradient(to right, transparent 50%, rgb(250, 174, 174) 30%);
	}

.mokuji02 {background-color:var(--bg-color-01);}
.mokuji02 a{ padding: 10px 0; color:#333;cursor: pointer;}
.mokuji_sub{position: relative; font-size: 1.6rem; padding:6px 15px; border-bottom:solid 1px #DDD;}
.mokuji_sub a{color:#444; letter-spacing: 0.1rem;transition: .2s linear; display: block;}
.mokuji_sub a:hover{ padding-left:8px; color:#888;}
.mokuji_tab {text-align: center;display: block;}
.mokuji_area {border-top:dotted 1px #CCC;}
.mokuji_arrow {position: relative;}
.mokuji_arrow:after {
  position: absolute;
  top: 50%;
  left: 50.5%;
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  -webkit-transform: translate(32px, -5px) rotate(135deg);
          transform: translate(32px, -5px) rotate(135deg);
  transition: border-color .3s ease, -webkit-transform .6s ease;
  transition: border-color .3s ease, transform .6s ease;
}
.mokuji_arrow.active:after {
  -webkit-transform: translate(32px, -2px) rotate(-45deg);
          transform: translate(32px, -2px) rotate(-45deg);
}

.codeA{ background-color:#f5f2f0; border-top:none; font-size:1.35rem; margin-bottom:30px; padding:5px; letter-spacing: 0.05em; box-sizing: border-box; overflow: hidden;}
.codeTextE{ padding: 40px 0; text-align: center; font-size:1.4rem; }
.codeTextJ{ padding: 40px 0; text-align: center; font-size:1.4rem; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
.codeTextJL{ padding: 30px; word-break: break-all; font-size:1.4rem; line-height: 1.5;}
.p_comment{position: relative; padding: 25px 25px 25px 73px; background-color:#edf3f8; margin-bottom: 30px; font-size:1.3rem; line-height: 1.7; letter-spacing: 0.15rem;}
.p_comment:before {position: absolute;top: 50%;left: 22px;margin-top: -25px;content: '\e0d8';color:#83accd; font-size:32px;font-family: 'icomoon' !important;z-index:1;}
.p_comment--caution{position: relative; padding: 25px 25px 25px 73px; background-color:#fff4d1; font-size:1.3rem; line-height: 1.7; letter-spacing: 0.15rem;}
.p_comment--caution:before {position: absolute;top: 50%;left: 25px;margin-top: -23px;content: '\e60b';color:#f9c566; font-size:32px;font-family: 'icomoon' !important;z-index:1; font-size:2.8rem;}
.p_comment--info{position: relative; padding: 25px 25px 25px 73px; background-color:#F4F4F4; margin-bottom: 30px; font-size:1.3rem; line-height: 1.7; letter-spacing: 0.15rem;}
.p_comment--info:before {position: absolute;top: 50%;left: 22px;margin-top: -26px;content: '\e88e';color:#507eae; font-size:32px;font-family: 'icomoon' !important;z-index:1;}
.s_sbm{ margin-bottom: 70px; border-bottom: solid 1px var(--main-color); height: 20px;}
.s_sbm ul{ list-style:none; z-index:1;  height: 40px; background-color: #FFF; padding: 0 15px; width: 220px; margin: 0 auto; display: flex; justify-content: space-around;}
.s_sbm li{font-size:1.5rem;margin:0 5px;border-radius: 50%;}
.s_sbm li a{display: block; color: #FFF; line-height: 40px; text-align: center; width:40px; height:40px; letter-spacing: -0.5rem;border-radius: 50%;}
.s_sbm li.sf a{ background-color:var(--main-color);} .s_sbm li.sf a:hover{background-color:#3b5998;}
.s_sbm li.st a{ background-color:var(--main-color);} .s_sbm li.st a:hover{background-color:#33ccff;}
.s_sbm li.sh a{ background-color:var(--main-color);} .s_sbm li.sh a:hover{background-color:#008fde;}
.s_sbm li.sp a{ background-color:var(--main-color);} .s_sbm li.sp a:hover{background-color:#ef4156;;}
.s_sbm li i{margin-right: 4px; vertical-align: -1px;}
.talk_area {max-width:750px;margin:0 auto 50px auto;}
.talk_area .talk_case {width: 100%;display: flex;flex-wrap: wrap;}
.talk_area .talk_case:nth-child(even) {flex-direction: row-reverse;margin-top: 20px;}
.talk_area .talk_case .talk_icon{width:80px; min-height: 80px;}
.talk_area .talk_case:nth-child(odd) .talk_icon{
	  background: url(../img/icon_w.svg) no-repeat;
	  background-size: 100%;
	  background-position: left 0;
	  left: 0;
	
	}
.talk_area .talk_case:nth-child(even) .talk_icon{
	  background: url(../img/icon_m.svg) no-repeat;
	  background-size: 100%;
	  background-position: right 0;
	  right: 0;
	}
.talk_area .talk_case .talk_fuki {width: 68%;}
.talk_area .talk_case .talk_text {
		font-size: 1.45rem;
		line-height: 2.2rem;
	  width: 100%;
	  position: relative;
	  left: 30px;
	  padding: 25px;
	  background-color: #f9ecef ;
	  border-radius: 10px;
	}
.talk_area .talk_case .talk_text::before {
	  content: '';
	  position: absolute;
	  display: block;
	  top: 30px;
	  left: -20px;
	  border-style: solid;
	  border-width: 7px 20px 7px 0;
	  border-color: transparent #f9ecef transparent transparent;
	}
.talk_area .talk_case:nth-child(even) .talk_text {
	  left:unset;
	  right:80px;
	  background-color: #ecf0f6;
	}
.talk_area .talk_case:nth-child(even) .talk_text::before {
	  left:unset;
	  right: -20px;
	  border-color: transparent #ecf0f6 transparent transparent;
	  transform: rotate(180deg);
	}
.t_follow {
	padding: 50px 0;
	margin-bottom: 35px;
	background: #f3f3f3;
	border-radius:0.5rem;
	text-align: center;
  }
  .t_follow--text{margin-bottom:20px; font-size:1.35rem; letter-spacing:0.2rem; color: #00acee;}
  .t_follow p a{
	font-family: 'Roboto Condensed', sans-serif;
	position: relative;
	overflow: hidden;
	width: 250px;
	padding: 1em 0;
	margin: 0 auto;
	background: #efefef;
	border: none;
	border-radius: .5rem;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	text-align: center;
	outline: none;
	cursor: pointer;
	transition: .2s ease-in-out;
	box-shadow: -4px -4px 12px rgba(255, 255, 255, .7),
				-4px -4px 8px rgba(255, 255, 255, .5),
				4px 4px 6px rgba(255, 255, 255, .075),
				4px 4px 8px rgba(0, 0, 0, .15);
  }
  .t_follow p a {color: #00acee; display: block;}
  .t_follow p a i{margin-right:5px;font-size: 1.8rem; vertical-align:-3px;}
  .t_follow p a:hover {
	box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
				-2px -2px 4px rgba(255, 255, 255, .4),
				2px 2px 2px rgba(255, 255, 255, .05),
				2px 2px 4px rgba(0, 0, 0, .1);
  }
  
  .t_follow p a::after {
	content: '';
	position: absolute;
	top: -100px;
	left: -100px;
	width: 50px;
	height: 50px;
	background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
	animation-name: shiny;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
  }
  @keyframes shiny {
	0% {
		transform: scale(0) rotate(25deg);
		opacity: 0;
	}
  
	50% {
		transform: scale(1) rotate(25deg);
		opacity: 1;
	}
  
	100% {
		transform: scale(30) rotate(25deg);
		opacity: 0;
	}
  }
.blog_card{ padding: 18px; background-color: #F4F4F4;margin-bottom: 8px; position: relative; display: flex; justify-content: space-between;transition: all 0.2s ease-in;}
.blog_card--title{ color:#FFF; font-size: 1.2rem; text-align: center;background-color: #507eae; position: absolute; top:-26px; left:0px; padding:0 15px; line-height: 2.6rem; }
.blog_card--title i{font-size: 1.2rem; vertical-align: -1px; margin-right: 4px; }
.blog_card a{position:absolute; top:0; left:0; width:100%; height:100%; display: block; z-index:2;}
/* .blog_card:hover{opacity: 0.8;} */
.blog_card p{margin-bottom: 0;}
.blog_card_l{width: 100px; margin-right: 18px;}
.blog_card_r{ width: 100%; line-height:1.7; letter-spacing: 0.12em; }
.blog_card_h2{font-size:1.6rem; font-weight: bold; color:#555;}
.blog_card--text{font-size: 1.15rem; padding: 5px 0;}
.blog_card_r .cite{ font-size:1.1rem; color: blue; font-family: 'Roboto Condensed', sans-serif;}
.product_cap{ background-color: #EEE; font-size: 1.3rem; letter-spacing: 0.1rem; padding: 15px; margin-bottom:30px; line-height: 1.8;}
.btn_blank{ background-color: #EEE;}
.google-auto-placed{overflow: hidden;  margin:0 0 40px 0 !important; box-sizing:border-box !important;}


.Imglink{ margin-bottom:20px;}
.img_r{ border-radius: 8px;}
.Imglink a{ display:block; position:relative; overflow:hidden; padding:4px; background-color:#F1F1F1; text-align: center;}
.Imglink a span {vertical-align:text-bottom;display:block;position: absolute;width:100%;height:100%;top:0;left: 0;margin: 0;background:url(../img/link.png) center center no-repeat rgba(0, 0, 0, 0.3);color: #fff;opacity:0;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition: 0.2s ease-in-out;transition: 0.2s ease-in-out;}
.Imglink a:hover span{opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
.Imglink a img {-webkit-transform: scale(1);transform: scale(1);-webkit-transition: all 0.3s;transition: all 0.3s;overflow: hidden;}
.Imglink a:hover img{-webkit-transform: scale(1.02);transform: scale(1.02);}
.Imgtop{padding:0px 15px 0px 15px; margin-bottom:20px;}
.ImgtopText{text-align: right; padding:10px 10px 10px 0; font-size: 1.1rem; letter-spacing: 0.07rem; background: #f7f7f7; color: #444;}
.ImgtopText a{color:var(--color-05)}
.ImgtopText a:hover{text-decoration: underline;}
.Imggray{padding:3px; background-color:#EEE; margin-bottom:15px;}
.Imgfont{padding:3px; background-color:#3c3c3c; margin-bottom:15px; text-align: center;}
.Imgad{padding:8px 0; margin: 0 15px; text-align: center; background-color: var(--sub-color); color: #FFF; font-size: 1.2rem;}
.Imgad i{font-size:1.7rem; margin-right: 5px; vertical-align: -0.3rem;}
.p_con span.g{ font-size:96%; background-color:#EEE; padding:2px 10px; margin:0 1px;
 -moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px;}
.p_conTable{ width: 100%; line-height: 2.2rem;}
.p_conTable  th, .p_conTable  td  { padding:15px 13px; border: 1px solid #ddd;  border-left:none; border-right:none; vertical-align: middle;}
.p_conTable  th  { background: #f4f4f4; width: 30%; text-align: left;}
.p_conTable__cap{font-size: 1.15rem; line-height: 1.9rem; color:red; letter-spacing: 0.1rem;}
.p_conTable_sp{overflow-x: auto; -webkit-overflow-scrolling: touch;}
.p_conTable_sp::-webkit-scrollbar{height: 12px;}
.p_conTable_sp::-webkit-scrollbar-track{background: #F1F1F1;}
.p_conTable_sp::-webkit-scrollbar-thumb {background: #BCBCBC;}
.p_conTable02{
	color: #111;
	table-layout: fixed;
	word-break: break-all;
	word-wrap:break-word; font-size: 1.3rem; border-collapse:separate; border-spacing:0; letter-spacing: 0.08rem;
	
}
.p_conTable02 tr:first-child th,
.p_conTable02 tr:first-child td { color: #FFF;
	border-top:1px solid var(--main-color);background: var(--color-03)!important; 
}
.p_conTable02 th:first-child, .p_conTable02 tr:first-child, .p_conTable02 td:first-child {
	border-left:1px solid var(--main-color);
}
.p_conTable02 th, .p_conTable02 tr, .p_conTable02 td {
	padding: 12px 9px;
	min-width:100px;
	background-color:#fff;
	border-right:1px solid var(--main-color);
	border-bottom:1px solid var(--main-color);
	
}
.p_conTable02 tr:nth-child(odd) td {
	background: var(--bg-color-01); 
}
.p_conTable02 th, .p_conTable02 td  {line-height:1.8rem; vertical-align: middle; }
.p_conTable02  th  {text-align: center; }
.p_conTable03{font-size: 1.5rem;letter-spacing: 0.08rem; line-height:2rem;}
.p_conTable03 th{background-color: var(--color-03); color: #FFF; text-align: center;
padding: 5px 5px; align-items: center;}
.p_conTable03, .p_conTable03 td, .p_conTable03 th{border: 1px solid var(--main-color);vertical-align: middle;}
.p_conTable03 td, .p_conTable03 th{padding: 15px 10px; }
a.p_conTable_link{ color:#1770c9;letter-spacing: 0.05rem; font-size:1.2rem;}
.p_anno{color: red; font-size: 1.2rem; letter-spacing: 0.15rem; line-height: 2.2rem;}
.p_50 {margin-bottom:20px;}
.p_100 a{ display:block; position: relative;overflow: hidden; margin-bottom:20px; padding:0; width:100%;}
.p_50 ul{ list-style:none;letter-spacing: -.40em;}
.p_50 li{ display:inline-block; width:48%; margin:0.5% 1%; letter-spacing:normal;position: relative;overflow: hidden;}
.p_50 li p, .p_100 p{position: absolute; color:#FFF; padding:0 15px; line-height:1.8; font-size:76%;bottom: -40px;left: 0;z-index: 2;width: 100%; height: 40px; background: rgba(0,0,0,.6);-webkit-transition: .3s;transition: .3s;}
.p_con .p_50 li:hover p, .p_con .p_100:hover p{bottom: 0;}
.p_50 li a, .p_100 li a{ display:block; padding:0;}
.curl{ padding: 40px 0; text-align: center; font-size: 110%;}
.ccss{ padding: 30px; font-size: 120%;}
.ccs-t{background-color:var(--color-03); padding:10px 10px 10px 35px; font-size:1.7rem; color: #FFF; letter-spacing: 0.1em; position: relative;}
.ccs-t::after {position: absolute;top: 50%;left:15px;transform:translateY(-50%);content: '';width: 8px;height:8px;border: solid 3px #FFF;border-radius:100%;}
.ccs-m{background-color:#f5f2f0; padding: 50px 25px; font-size: 130%; margin-bottom: 30px;letter-spacing: 0.18em; }
.p_list ul{ list-style:none; margin-bottom: 15px; padding-top: 10px;}
.p_list li{position: relative; line-height: 2.4rem; letter-spacing:0.02em; padding:1px 0 8px 16px; color:var(--color-05); font-size: 1.7rem;  font-weight: bold;}
.p_list li::after {position: absolute; left:0; top:7px; content: ''; width: 6px;height:6px;border: solid 3px var(--color-05); border-radius:100%;}
.p_use{ color:#555; font-size:1.05rem; background-color:#f4f4f4; padding:15px 3%; text-align:right;letter-spacing: 0.1em;}
.p_ibg{ margin-bottom:30px;}
.p_ibg img{}
.p_cap{ color:#555; text-align: right;font-family: 'Roboto Condensed', sans-serif; font-size:1.1rem; letter-spacing: 0.08em; margin-top:-1px;}
blockquote{background-color:#FFF; padding:3em; position:relative; margin-bottom:30px; line-height: 1.8; font-size:1.4rem; border: solid 1px #DDD; border-radius: 10px;}
blockquote a{ color:var(--color-05)!important; text-decoration: underline;}
blockquote a:hover{opacity: 0.7;}
blockquote:before{
content:"“";
font-size:500%;
line-height:1em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#CCC;
position:absolute;
left:15px;
top:15px;
}
blockquote:after{
content:"”";
font-size:500%;
line-height:0em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#CCC;
position:absolute;
right:15px;
bottom:10px;
}
blockquote .blockquote_title{ font-size:1.5rem; border-bottom: solid 1px #CCC; padding: 5px 0; margin-bottom: 15px;}
blockquote .iyu{font-size:1.2rem; text-align: right; padding: 6px; letter-spacing: 0.1em;}
blockquote .iyu a{color:#446689;}
.p-sp_area{ text-align: center; margin-bottom: 30px; }
.p-sp_area ul{ display: flex;justify-content: center; list-style: none; padding: 50px 0px;}
.p-sp_area li{ width: 40%;margin: 0 12px;}
.p-sp_area li img, .p-sp_area--yoko img{box-shadow: 0 0 6px #999;}
.p-sp_area--yoko{width: 80%; padding-top: 50px; margin: 0 auto;}
.p-sp_area--yokoL{padding-bottom:50px;}
.p-sp_area_gray{ background: #f4f4f4;}
.p-sp_area_pd{ padding: 20px 0;}
.single_tag{margin-bottom: 40px;}
.single_tag ul{ list-style: none; padding: 0;}
.single_tag li{border-top:solid 1px var(--main-color);transition: all 0.2s ease-in;}
.single_tag li:first-child{border-top:none;}
.single_tag li a{position: relative; letter-spacing: 0.1em; font-size: 1.5rem; color:var(--main-color);  padding-top: 1.4rem; padding-bottom:1.4rem;display: block; line-height: 2rem; padding-left: 40px;}
.single_tag li a::before {
    position: absolute;
    content: '';
    width: 19px;
    height: 19px;
    background:var(--main-color);
    border-radius: 50%;
	top:15px;
    left: 10px;
}
.single_tag li a::after {
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top:22px;
    left: 16px;

}
.single_tag li a:hover{ background: var(--main-color); color: #FFF;}
.single_tag li a:hover::before {
    background:#FFF;
	top:15px;
}
.single_tag li a:hover::after {
    border-top: solid 1px var(--main-color);
    border-right: solid 1px var(--main-color);
    top:22px;
}



.twitter_area{display: flex; flex-wrap:wrap; justify-content: space-between;}
.twitter_single{margin-left:auto; margin-right: auto; width:48%;}
.single_case{display: flex; justify-content: space-around; background: #EEE; padding: 25px 10px; margin-bottom: 20px; border-radius: 8px;}
.single_case p{width: 46%; margin: 0;}
.single_case p img{border-radius: 6px;}

/* Single AD
*******************************************************************************************************************/
.single_ad_300{ display: flex; justify-content: space-around; margin: 0 10px 20px 10px;}
.single_ad_338{display: flex; justify-content:space-between; margin: 0 10px 20px 10px;}
.single_ad_res{display: flex; justify-content: center; margin: 0 0 40px 0;}
@media(max-width: 1180px) {
.single_ad_300 div:nth-child(1),.single_ad_338 div:nth-child(1){display:none;}
.single_ad_300, .single_ad_338{justify-content: center;margin: 0 0 30px 0;}
}
.single_ad_300 .ad_div, .single_ad_338 .ad_div, .side_ad:nth-child(1){position: relative; height: 260px;}
.single_ad_300 .ad_div::after, .single_ad_338 .ad_div::after{content: "PR"; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-size:1rem; letter-spacing: 0.08rem; color:var(--main-color)}
.ad_responsive { width:670px; height: auto; }
@media( max-width:860px) {.ad_responsive {width:300px; height: 250px; } }
@media(min-width: 860px) { .ad_responsive { width:670px; height: auto; } }
.ad_338_280 { width:300px; height: 250px; }
@media( max-width:860px) {.ad_338_280 {width:300px; height: 250px; } }
@media(min-width: 860px) { .ad_338_280 { width: 338px; height: 280px; } }
.ad_300_250 { width:300px; height: 250px; }
@media( max-width:860px) {.ad_300_250 {width:300px; height: 250px; } }
@media(min-width: 860px) { .ad_300_250 {width:300px; height: 250px;  } }

.art_ads {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important; 

}
.art_ads .adsbygoogle {
    display: block !important;
    width: 100% !important;
    /* 336x280以上を呼び込み、かつデザインを維持する最小高さ */
    min-height: 280px !important;
}


/* Special Contents
*******************************************************************************************************************/
.huluT h3{position: relative; padding-left: 1.4em; font-size:1.9rem;; font-weight: bold; margin-bottom:25px; color:#444;}
.huluT h3::after{position: absolute;top:13px;left:0; content: '';width: 18px; height:2px; background-color: #CCC;}
.hululink a{color:#FFF; display:block; background-color:#66aa33; padding:15px 20px; margin-bottom:20px;  letter-spacing: 0.1em;}
.hululink a:hover{opacity: 0.8;}
.hulupoint{color:#66aa33; font-size:120%; font-weight: bold; margin-bottom: 5px; letter-spacing: 0.03em;}
.hulupoint span{ margin-right: 3px;}
.two-list{ margin-bottom:20px;}
.two-list ul{list-style: none; padding: 0;margin: 0; display: flex; justify-content: space-between;}
.two-list li{ margin:1%; width: 48%}
.RankTable{ width: 100%; }
.RankTable  th, .RankTable td { padding: 10px; border: 1px solid #DDD; border-left: none; border-right: none; }
.RankTable  th  { width: 8%; }
.RankIcon{ background:url(../img/crown.svg) no-repeat;background-size: 100%; width:30px; color: #FFF; font-family: 'Roboto Condensed', sans-serif; font-size:89%; letter-spacing: 0.1em; text-align: center; line-height: 33px;}
.p_subT{ font-size:1.8rem; font-weight:bold; margin-bottom:15px; line-height: 1.6; letter-spacing: 0.1rem;}
.p_subT02{ margin-bottom:8px;}
.p_subT02 i{ font-size:16px; margin-right:5px; vertical-align:-2px;}
.h_yt{ padding:0px 30px 0px 30px; position:relative;}
.h_cap{ position: absolute ; right:35px; bottom:-25px; font-size:60%; color: #666;}
.single_point {position: relative; padding: 28px 28px 20px 28px; margin-bottom:30px;}
.single_point.p_g{ background: #f4f4f4f3; border-radius: 8px;border: solid 3px #f4f4f4;}
.single_point.p_lb{ background: #FFF; border-radius: 8px; border: solid 3px var(--color-05);}
.single_point.p_lr{ background: #FFF; border-radius: 8px; border: solid 3px var(--color-06);}
.single_point.p_lo{ background: #FFF; border-radius: 8px; border: solid 3px var(--color-07);}
.single_point.p_b{ background:var(--color-02);}
.single_point_title {position: absolute;display: inline-block; letter-spacing: 0.1em; top: -16px; left: 11px; padding: 8px 18px; line-height: 1; font-size:1.3rem;color: #FFF;border-radius:15px;}
.pt_g{ background: #01b901;}
.pt_b{ background:var(--color-05);}
.pt_r{ background:var(--color-06);}
.pt_o{ background:var(--color-07);}
.single_list_blue, .single_list_red, .single_list_orange{ list-style:none; }
.single_list_blue li, .single_list_red li, .single_list_orange li{position: relative; padding:1px 0 1px 25px;line-height: 23px; margin: 7px 0; letter-spacing:0.06rem; color:#111;}
.single_list_blue li:before {position: absolute; top:1px; left:0px;content: '\e900';color:var(--color-05); font-size:1.9rem;font-family: 'icomoon' !important;z-index:1;}
.single_list_red li:before {position: absolute; top:1px; left:0px;content: '\e900';color:var(--color-06); font-size:1.9rem;font-family: 'icomoon' !important;z-index:1;}
.single_list_orange li:before {position: absolute; top:1px; left:0px;content: '\e900';color:var(--color-07); font-size:1.9rem;font-family: 'icomoon' !important;z-index:1;}
.single_list_num_b, .single_list_num_r, .single_list_num_o{counter-reset: my-counter;list-style: none; padding: 0;}
.single_list_num_b a:hover, .single_list_num_r a:hover, .single_list_num_o a:hover{color: var(--color-05); text-decoration: underline;}
.single_list_num_b li, .single_list_num_r li, .single_list_num_o li{position: relative; padding:1px 1px 1px 28px;line-height: 23px; margin: 7px 0; letter-spacing:0.08rem;}
.single_list_num_b li:before, .single_list_num_r li:before, .single_list_num_o li:before {font-family: 'Roboto Condensed', sans-serif; font-size:1.3rem; font-weight:300; content: counter(my-counter);counter-increment: my-counter;
  top:2px; left:0px; display: block; position: absolute;
  color: #FFF;
  padding: 0;
  line-height: 21px;
  text-align:center;
  height: 21px;
  width: 21px;
  border-radius: 50%;
}
.single_list_num_b li:before{background-color:var(--color-05); }
.single_list_num_r li:before{background-color:var(--color-06); }
.single_list_num_o li:before{background-color:var(--color-07); }

.sp_list_green { list-style:none; }
.sp_list_green li{position: relative; padding:1px 0 1px 18px; font-weight: bold; line-height:2.3rem; margin: 7px 0; letter-spacing:0.06rem; color:#222;}
.sp_list_green li::after {position: absolute; top:6px; left:0;content: ''; width: 6px;height:6px;border-radius:100%;border: solid 3px #01b901; }
.movie-wrap {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.movie-wrap iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.btn_area{display: flex; flex-wrap: wrap; justify-content: center;}
.btn_apple a, .btn_google a, .btn_amazon a, .btn_rakuten a, .btn_blank{margin-right: 10px; border-radius: 2px; text-align: center; width: 192px;padding: 10px; color: #FFF; letter-spacing: 0.1rem; display: block; font-size: 1.25rem; font-family: 'Roboto Condensed', sans-serif;}
.btn_apple a:hover, .btn_google a:hover, .btn_amazon a:hover, .btn_rakuten a:hover{opacity: 0.8;}
.btn_apple a{ background-color: #333;}
.btn_google a{ background-color: #333;}
.btn_rakuten a{ background-color: #bf0000;}
.btn_amazon a{ background-color: #fff100;}
.s_amaraku{position: relative; display: flex; flex-wrap: wrap; margin-bottom: 30px; border: solid 1px #DDD; border-radius: 8px; padding: 25px;}
.s_amaraku_img{ width:150px; margin:0 30px 0 0; text-align: center;}
.s_amaraku_img img{max-width: 150px; max-height: 150px;}
.s_amaraku_text{flex: 1; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.02rem; line-height: 2.4rem; display: flex; flex-direction: column;}
.s_amaraku_text p{padding: 5px 0; font-weight: normal; font-size: 1.2rem; color: var(--color-05);}
.s_amaraku_btn{margin-top: auto; display: flex; justify-content: space-between;; text-align: center;}
.s_amaraku_btn i{margin-right: 5px; vertical-align: -1px;}
.s_amaraku_btn .btn100{width: 100% !important; letter-spacing: 0.08rem;}
.s_amaraku_btn .amazon_all{width: 100%;}
.s_amaraku_btn .amazon, .s_amaraku_btn .rakuten{ width: 48%;}
.s_amaraku_btn .amazon a, .s_amaraku_btn .amazon_all a{background-color: #ffd700; color: #000;}
.s_amaraku_btn .rakuten a{background-color: #d80000; color: #FFF;}
.s_amaraku_btn .rakuten img{display: none;}
.s_amaraku_btn .amazon a::before, .s_amaraku_btn .amazon_all a::before{	background: #fff100;}
.s_amaraku_btn .rakuten a::before{	background: #f72626;}
.s_amaraku_btn .amazon a, .s_amaraku_btn .amazon_all a,  .s_amaraku_btn .rakuten a{
	font-size: 1.35rem; 
	position: relative;
	display: block;
	padding:11px 0;
	box-shadow: 0px 12px 12px -12px #999;
	z-index: 1;
	border-radius: 3px;
	transition: .3s;
  }
  .s_amaraku_btn .amazon a::before,   .s_amaraku_btn .amazon_all a::before, .s_amaraku_btn .rakuten a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';border-radius: 3px;
	transform-origin: left bottom;
	transform: scale(1, 0);
	transition: transform .3s;
  }
  .s_amaraku_btn .amazon a:hover::before,   .s_amaraku_btn .amazon_all a:hover::before, .s_amaraku_btn .rakuten a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
  }
.sp_contents01{border: solid 3px #ff0000; padding: 20px; border-radius: 8px; margin-bottom: 30px;}
.sp_promotion{border: solid 3px #ff0000; padding: 20px; border-radius: 8px; position: relative; display: flex; justify-content: space-between;}
.sp_promotion::after{content: "＼ PICKUP ／";position: absolute; top: -20px; left: 50%;  transform: translateX(-50%); background: #fff;font-size:1.6rem;color: #ff0000; padding: 0 10px;font-family: 'Roboto Condensed', sans-serif; font-weight: bold;}
.sp_promotion_ad{ margin:0 20px 0 0; text-align: center;}
.sp_promotion_text{flex: 1;  display: flex; flex-direction: column; color: red;}
.sp_promotion_text .promotion_title{font-size: 2.8rem; font-weight: bold; text-align: center; line-height: 3.4rem; padding-bottom: 17px; border-bottom: solid 3px red;}
.sp_promotion_text .promotion_text{ padding: 13px 0; font-size: 1.4rem; line-height: 2.1rem; letter-spacing: 0.06rem;}





/* Single_Old
*******************************************************************************************************************/
.article_header{display: none;}
.single_title{ padding:0px 0 10px 0; font-size:240%; line-height:1.8; letter-spacing:0.01em; margin-top: -10px; margin-bottom: 40px;}
.single_title a{ color:#444;}
.single_title a:hover{ color:#006CFF;}
.p_con{font-size:108%; line-height:2.2; letter-spacing:0.05em; text-align: justify;}
.p_con span.icon-export{font-size:16px; vertical-align:-2px; margin-right:2px;}
.p_con .credit{font-size:86%; background-color:#f8f8f8; border-bottom:solid 1px #EEE; width:96%; text-align:right; padding:1% 2%; letter-spacing:normal;}


.p_con .p_sText{  letter-spacing: 0.2em; font-size: 95%; line-height:1.7;  margin-bottom: 30px;}
.p_con .h_yt{ padding:30px 35px 0px 35px; position:relative; margin-bottom: -10px;}
.p_con .Line{ border-bottom:solid 1px #CCC; padding-bottom:3px; margin-bottom:30px;}
.p_con b{ font-weight:bold;}
.p_con h1{ border-bottom:solid 1px #666; border-top:solid 1px #666; padding:28px 3px; font-size:189.5%;}
.p_con h2{ border-left:solid 3px #243c54; padding:0px 10px 0px 24px; font-size:146.5%;}
.p_con h4{position: relative; padding-left: 1em; font-size:140%; margin-bottom: -20px; margin-left: 11px;}
.p_con h4::after {position: absolute; top:22px;left:0;content: ''; width: 14px; height:1px; background-color: #243c54;}
.p_con h4 span{font-size:69%;padding-left: 1.3em;}
.p_con h5{padding:0px; font-size:138%; margin-bottom: 15px; letter-spacing: 0.15em;}

.p_con .Elink span{ margin-right:5px; font-size:16px; vertical-align:-1px;}
.p_con .Etitle{font-size:142%;}
.p_con .EtitleL{font-size:123%; border-bottom:solid 1px #CCC; padding-bottom:3px;}
.p_con .Elink{font-family: 'Roboto Condensed', sans-serif; font-weight:300; font-size:118%; letter-spacing: 0.02em; margin-bottom:15px; word-break: break-all;}


.p_con code{font-size:86%; background-color:#EEE; padding:2px 10px 4px 10px; margin:0 4px;
 -moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px;}
.p_con .no{float: left; font-size:140%;  background-color:#243c54; display: block; height:48px; width:48px; color:#FFF; text-align:center; vertical-align:middle; display:table-cell; -moz-border-radius: 50%;-webkit-border-radius: 50%; border-radius:50%; ; line-height: 48px;}
.p_con .noT{ margin-left:40px; display:block;padding:0px 20px; font-size:156%;}
.p_con .p_L1{ float:left; width:30%; margin-right:2%; text-align:center; display:table-cell;}
.p_con .p_R1{ float:right;width:67%; font-size:89%; line-height:1.5;}
.p_con .p_HL1{ float:left; width:20%; margin-right:2%; display:table-cell;}
.p_con .p_L1 a:hover, .p_con .p_HL1 a:hover{ background-color:#FFF;}
.p_con .p_HR1{ float:right;width:75%; line-height:1.5; margin-bottom:25px; font-size:90%;}
.p_conFL{ margin-bottom:15px;}
.p_conFL ul{ list-style:none;}
.p_conFL li{ float:left; margin:0 10px;}

.a_position{margin-top : -50px;
  padding-top : 50px;}
.m_tab {text-align: center;display: block;}
.m_area {border-top:dotted 1px #CCC;}
.m_arrow {position: relative;}
.m_arrow:after {
  position: absolute;
  top: 50%;
  left: 50.5%;
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  -webkit-transform: translate(32px, -5px) rotate(135deg);
      -ms-transform: translate(32px, -5px) rotate(135deg);
          transform: translate(32px, -5px) rotate(135deg);
  transition: border-color .3s ease, -webkit-transform .6s ease;
  transition: border-color .3s ease, transform .6s ease;
}
.m_arrow.active:after {
  -webkit-transform: translate(32px, -2px) rotate(-45deg);
      -ms-transform: translate(32px, -2px) rotate(-45deg);
          transform: translate(32px, -2px) rotate(-45deg);
}

.p_view{font-family: 'Roboto', sans-serif; font-weight:300; font-size:116%; color:#555;background-color:#f8f8f8; padding:12px 18px; text-align:right;}
.p_view span{ font-size:16px; vertical-align:-2px; margin-right:3px; color:#888;}

#p_snsB{ margin-bottom: 100px; border-bottom: solid 1px #CCC; height: 20px;}
#p_sns{ z-index:1;  height: 40px; background-color: #FFF; padding: 0 30px; width: 175px; margin: 0 auto;}
#p_sns ul{list-style: none;padding: 0;margin: 0;  }
#p_sns li{ float:left; font-size:115%; width: 38px;height: 38px; margin:0 10px; -webkit-border-radius: 50%;-moz-border-radius: 50%; border-radius: 50%;}
#p_sns li a{display: block; background-color:#333; color: #FFF; line-height: 38px; text-align: center;
	-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
#p_sns li a i{vertical-align: -1px;}
#p_sns li.h a:hover{ background-color:#008fde;}
#p_sns li.f a:hover{ background-color:#3b5998;}
#p_sns li.t a:hover{ background-color:#33ccff;}
#p_sns li.p a:hover{ background-color:#ef4156;}


.tct{ border-top:solid 1px #EEE; border-bottom:none; text-align:right;}
.sct{ border: solid 1px #CCC; border-left:none; border-right:none; padding: 30px 0px; margin-bottom: 20px; font-size: 86%;}
.sct_l{float: left;}
.sct_r{float: right; margin-right: 10px; }
.sct_r{font-family: 'Lato', sans-serif; color:#666;letter-spacing:0.05em;}
.sct_r i{ margin-right:3px; vertical-align:-1px;color:#777;}
.sct_l ul{ list-style:none;}
.sct_l li{ display:inline-block; color:#666; margin:0 -2px;}
.sct_l li a{color:#666; padding:1px 4px;}
.sct_l a:hover{ background-color:#fff100; color:#000;}
.sct_l span{ vertical-align:-1px; margin:0 2px 0 14px; font-size:12px;}
.s_topad{ padding:10px 20px 20px  20px;text-align:center; background-color:#f8f8f8; margin-bottom: 60px;}
.s_topad p{padding:0 0 8px 8px; font-family: 'Roboto', sans-serif; font-size:86%; text-align:left;}
.s_bmad{}
.s_bmad ul{ list-style:none;letter-spacing: -.40em; padding:10px 25px;}
.s_bmad li{display:inline-block;text-align:center; width:50%;letter-spacing: normal; padding:25px 0;}
.p_title{font-family: 'Roboto', sans-serif; font-weight:300; letter-spacing:0.05em; color: #666;  padding:10px 0; border-bottom:solid 1px #CCC; margin-bottom:25px; }
.p_related{ margin-bottom: 20px;}
.p_related ul{display: table; table-layout: fixed; list-style:none; letter-spacing: -.40em; padding:15px 0 15px 0;  width:100%;}
.p_related li{ display:inline-block; vertical-align:top; width:29.3%; margin:0 2% 25px 2% ;letter-spacing: normal; padding-bottom: 10px;}
.p_related li a{color:#333; }
.p_related li a img{width:100%;}
.p_related li a .Ri{display:block;}
.p_related .Rc{padding:10px 5px 10px 5px; overflow:hidden; height:26px; font-size:96%; line-height:18px;
display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}
.post_ads{ padding: 5px 20px 20px 20px; margin-bottom:40px;}
.p_relatedW{ padding:15px 10px; font-size:118%;letter-spacing: normal;}
.p_relatedW span{ vertical-align:-1px; margin-right:3px; color:#325576;}






/* Pickup
*******************************************************************************************************************/
.pickup_title{font-family: 'Roboto Condensed', sans-serif; text-align: center; font-size:1.6rem; letter-spacing: 0.1rem; padding-bottom: 35px; margin-bottom: 10px; position: relative;}
.pickup_title::after{content: ''; height: 2px; width: 16px; display: block; background-color: #666; position: absolute; left: 50%; bottom:15px;transform:translateX(-50%);}
.pickup{ margin-bottom: 50px;}
.pickup ul{ list-style:none; display: flex; flex-wrap: wrap; justify-content: space-between;}
.pickup li{ width:48%;}
.pickup--con { display: flex; flex-wrap: nowrap; justify-content: space-between; padding:12px 0px; position: relative;transition: all 0.2s ease-in;}
.pickup--con a{position:absolute; top:0; left:0; width:100%; height:100%; display: block; z-index:2;}
.pickup--con:hover {opacity: 0.8;}
.pickup--conL{ width: 28%;  display: block;}
.pickup--conR{width: 68%; font-size:1.4rem; font-weight: 700;  letter-spacing: 0.1rem;  color:var(--main-color);}





@media screen and (min-width:20em) and ( max-width:37.5em) {  /*320px ~600px */

.post_ad{margin-bottom:20px;}
.con_page--title{ font-size:1.8rem; letter-spacing: 0.1rem;}
.con_page--search01{text-align: center;  font-size:1.2rem; margin-bottom: 30px;letter-spacing: 0.1rem; padding: 0 20px;}
.single_headerbar{margin-bottom: 30px; padding: 20px 0px; font-size: 1.0rem;}
.headerbarR time:nth-child(2){display: none;}
.single_header--title{ font-size: 2.5rem;letter-spacing: 0.08rem; margin-top:0px; margin-bottom: 30px; padding: 0px 8px; line-height: 1.4;}
.mrk{background-position: 0 1.8em;}
.mrk.active{background-position: -100% 1.8em; }
.mrkb { font-size:1.4rem; background-size: 200% 1.4em; background-position:0 0.6rem;}
.mrkb.active{background-position: -100% 0.5em; }

.codeA{width:344px; margin: 0 auto  30px auto;}
.p_text{ padding:10px 5px 10px 5px; box-sizing: border-box; color:#333; letter-spacing:0.12rem; font-size:1.5rem; line-height:2.0; text-align: justify;}
.p_text .price{font-size:2.2rem;}
.p_sText{letter-spacing: 0.15em; font-size:1.3rem;}
.g{ font-size:1.3rem; padding:4px 12px; }
.link a{ padding:8px 15px;}


.title_bubble{line-height: 2.2rem; font-size: 1.6rem;padding: 18px;}
.list_title{font-size: 1.8rem; margin-bottom: 10px; letter-spacing: 0.01rem;}
.title_h1{padding:16px 3px; font-size:1.7rem; margin-bottom:10px;}
.title_h2{line-height:1.4; letter-spacing: 0.08em; padding:0px 10px; font-size:1.8rem; }
.title_h2b{line-height:1.4; padding:15px 10px 12px 10px; font-size:1.8rem; }
.title_h3{font-size:1.6rem;letter-spacing: 0.08rem;}
.title_h4{ font-size:1.5rem; padding:8px 12px;}
.title_h5{font-size:1.5rem;letter-spacing: 0.08rem;}
.title_h5::after{left: 0px; top:10px;}
.title_num{ display: flex; }
.title_numL{ width: 34px; height: 34px; line-height: 34px;font-size:1.6rem; margin-right: 10px;}
.title_numR{ font-size:1.7rem;padding-top:3px;}

.point_green{font-size:1.8rem;line-height: 2.8rem;}
.s_amaraku{padding: 20px;}
.s_amaraku_img{ width:100%; margin:0 0 20px 0;}
.s_amaraku_text{font-size: 1.5rem;line-height: 2.2rem;}
.t_follow--text{display:none;}
.talk_area .talk_case .talk_text {font-size: 1.3rem;line-height: 1.8rem; padding: 15px;  left: 25px;}
.talk_area .talk_case:nth-child(even) .talk_text {right:55px;}
.talk_area .talk_case .talk_text::before {top: 15px;}
.talk_area .talk_case .talk_fuki {margin-top:10px;}
.blog_card_l{width: 23%; margin-right: 15px;}
.blog_card_r{ width: 75%; line-height:1.7; letter-spacing: 0.06em; }
.blog_card_h2{font-size:1.2rem; font-weight: bold; line-height: 1.5;}
.blog_card_r .cite, .blog_card--text{display: none; height: 1px;}
.p_conTable th{width: 94%; display: block;border: none; padding:3px 10px;}
.p_conTable td{width: 94%; display: block;border: none; padding:12px 10px;}
.single_point {position: relative; padding: 25px 15px 25px 15px; margin-bottom:40px;}
.p_list li{ line-height: 2rem; }
.p_list li::after {top:5px;}
.single_list_blue li, .single_list_num_b li, .single_list_num_r li, .single_list_num_o li, .sp_list_green li{font-size:1.3rem;  letter-spacing:0.03rem;}
.side_menu, .side_search  {padding:0 30px;}
.single_list_blue li:before, .single_list_red li:before, .single_list_orange li:before  { top:3px;}
.single_list_num_b li:before, .single_list_num_r li:before, .single_list_num_o li:before {top:1px;}
.sp_list_green li::after {top:6px;}
 .btn_apple a, .btn_google a, .btn_amazon a, .btn_rakuten a, .btn_blank{margin-right: 10px; width: 120px;padding: 10px; color: #FFF; letter-spacing: 0.1rem; font-size: 1.15rem;}
.p_use{ font-size:0.9rem;padding:5px 3%;letter-spacing: 0.06em;}
.p_comment, .p_comment--caution, .p_comment--info{padding: 20px 20px 20px 60px;line-height: 1.6; letter-spacing: 0.12rem;}
.p_comment:before {top: 50%;left: 14px;margin-top: -23px;}
.p_comment--caution:before {top: 50%;left: 17px;}
.p_comment--info:before {top: 50%;left: 15px;margin-top: -26px;}
.p-sp_area ul{ display: flex; justify-content: center;flex-wrap:wrap; list-style: none; padding: 30px 0px;}
.p-sp_area li{ width: 75%; margin: 0 12px; margin: 15px 0;}


.p-sp_area ul{ display: flex; justify-content: center;flex-wrap:wrap; list-style: none; padding: 30px 0px;}
.p-sp_area li{ width: 75%; margin: 0 12px; margin: 15px 0;}

.single_list_num_b li:before, .single_list_num_r li:before, .single_list_num_o li:before {top:2px;}
.single_case{justify-content:center; flex-wrap: wrap; padding: 20px; text-align: center;}
.single_case p{width: 100%;}
.single_case p:first-child{margin-bottom: 20px;}
.btm-cate__link li{ line-height: 1.8rem; font-size: 1.8rem;}
}







@media screen and (min-width:20em) and ( max-width:62em) {/*　350px~992px　*/

.Imgtop{padding:0px 5px 0px 5px;}
.Imgad{margin: 0 5px;font-size: 1.0rem;}
.Imgad i{font-size:1.5rem;}
.single_tag li a::before {top:16px;}
.single_tag li a::after {top:23px;}


.talk_area .talk_case .talk_icon{width:60px;min-height: 60px;}

.sp_promotion{flex-wrap: wrap;}
.sp_promotion_ad{width:100%; margin:10px 0 20px 0;}
.sp_promotion_text .promotion_text{ padding: 18px 0;}
.campaign_lead{font-size: 2rem;}
.twitter_single{width:100%;}
.side_pr{display: none;}
}

@media screen and (min-width:20em) and ( max-width:23.5rem) {/*　350px~375px　*/

.post_con{margin-bottom:20px;}
.post{margin-bottom:10px; padding:0px;}
.post_img{ width: 20%;}
.post_right{width: 78%;}
.post_title{font-size:1.2rem; margin-top: -2px; line-height:1.9rem; padding-bottom:8px; border-bottom: none; }
.post_cap{ display: none;}
.pickup ul{  justify-content:center;}
.pickup li{ width:100%;}
.pickup--con {padding:5px 5px;}
.pickup--conL{ width: 20%;}
.pickup--conR{width: 77%; font-size:1.3rem; }
.side_rank--conL{width:20%; max-width: initial; }
.side_rank--conR{width:77%; font-size:1.3rem; color:#444; letter-spacing: 0.1rem; }
.pagenavi-area li a, .pagenavi-area li span{line-height: 40px;width: 40px;height: 40px;margin:0 2px;}
.detail_codepen{ padding:10px 10px 3px 10px; }
.detail_codepen ul{list-style: none; display: flex; flex-wrap: wrap;}
.detail_codepen li{width: 100%; text-align: center;}
}


@media screen and (min-width:23.5rem) and ( max-width:37.5em) {/*　375px~600px　*/

.post_con{margin-bottom:20px;}
.post{margin-bottom:5px;}
.post_main--left { margin-right: 15px;}
.post_img{ width: 20%;}
.post_right{width: 76%;}
.post_title{font-size:1.45rem;margin-top:0px; line-height:2.1rem; padding-bottom:8px; border-bottom: none; }
.post_cap{ display: none;}
.pickup ul{justify-content:center;}
.pickup li{ width:100%;}
.pickup--con {padding:5px 5px;}
.pickup--conL{ width: 20%;}
.pickup--conR{width: 77%; font-size:1.35rem; }

.p_conTable02{font-size: 1.15rem;}
.pagenavi-area li a, .pagenavi-area li span{line-height: 40px;width: 40px;height: 40px;margin:0 3px;}
.product_cap{ font-size: 1.15rem; }
.detail_codepen{ padding:10px 10px 3px 10px; }
.detail_codepen ul{list-style: none; display: flex; flex-wrap: wrap;}
.detail_codepen li{width: 100%; text-align: center;}
}

@media screen and (min-width:37.5em) and ( max-width:48em) {/*　600px~768px　*/

.post_title{font-size:1.8rem;margin-top: -5px; padding-bottom:8px; border-bottom: none; }
.post_cap{ padding-top:8px; font-size:1.2rem;line-height:1.6; }
.side_rank{ width:100%;}
.side_pick{ width:100%;}
.pickup ul{ justify-content:center;}
.pickup li{ width:100%;}
.pickup--conL{ width: 20%;}
.pickup--conR{width: 77%; font-size:1.4rem; }
}
 
@media screen and (min-width:48em) and ( max-width:62em) {/*　768px~992px　*/

.post{ margin-bottom:30px;}
.post_main--left { margin-right: 20px;max-width: 32%;}
.post_title{font-size:1.8rem;margin-top: -5px; padding-bottom:8px; border-bottom: none; }
.post_cap{ padding-top:8px; font-size:1.2rem;line-height:1.6; }


}
@media screen and (min-width:62em) and ( max-width:64em){/*　992px~1024px　*/

.post_title{font-size:1.8rem; padding-bottom:0; border-bottom: none;}
.twitter_single{width:100%;}
}