@charset "utf-8";
/*
--------------------------------------------------
Smartphone CSS
--------------------------------------------------*/
/* Common
--------------------------------------------------*/
@media screen and (max-width:767px){
html{
	width:100%;
	min-width:100%;
}
body{
	width:100%;
	min-width:100%;
}
.innercol{
	width:94%;
}
.pc{
	display:none !important;
}
.sp{
	display:block !important;
}
.spimg{
	width:100%;
}
/*1	ヘッダー
1-1	左ロゴ+SNSボタン+CVボタン
------------------------------------------------*/
.top{
	min-width:100%;
	height: auto;
}
.top .leftcol{
	max-width: 60%;
	box-sizing:border-box;
}
.top .rightcol{
	max-width: 40%;
	margin:0;
	box-sizing:border-box;
}
.top .leftcol h1{
	margin: 22px 0 19px 0;
	font-size:1.9rem;
}
.top .rightcol .snsCol{
	width:122px;
	min-width: 0;
}
.top .rightcol .snsCol ul{
	padding:18px 0 0 0;
}
.top .rightcol .snsCol ul li{
	width:22px;
	height:22px;
	margin: 0 14px 0 0;
	display:inline-block;
}
.top .rightcol .snsCol ul li a{
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	font-style:normal;
}
.top .rightcol .snsCol ul li a:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	font-size:2.5rem;
}
.top .rightcol .snsCol ul li a:hover{
	color:#333;
	opacity:1;
}
.top .rightcol .snsCol ul li.tw a:after{
	content:"\f099";
}
.top .rightcol .snsCol ul li.fb a:after{
}
.top .rightcol .snsCol ul li.fb a:after{
}
.top .rightcol .snsCol ul li.icon-hatebu:before{
	position:absolute;
	top:-1px;
	left:0;
	padding:5px;
	font-size:1.5rem !important;
	color:#fff;
	background:#333;
	border-radius:6px;
	-webkit-border-radius:6px;
    -moz-border-radius:6px;
}
.top .rightcol .snsCol ul li.tw a:hover:after{
	color:#55acee;
}
.top .rightcol .snsCol ul li.fb a:hover:after{
	color:#3b5998;
}
.top .rightcol .snsCol ul li.icon-hatebu:hover:before{
	background:#55acee;
}
.top .rightcol .linkcol{
	display:none;
}
.top .linkcol_sp{
	width:100%;
	margin:0;
	padding:0;
	display:block;
}
.top .linkcol_sp a{
	position:relative;
	width:100%;
	margin:0;
	padding:12px;
	font-size:1.6rem;
	line-height:130%;
	color:#fff;
	background-size:3%;
	text-align:left;
	box-sizing:border-box;
	display:block;
}
.top .linkcol_sp a:hover{
	text-decoration: none;
}
.top .linkcol_sp a:after{
	position:absolute;
	top:12px;
	right:12px;
	content:"\f105";
	margin:0;
	padding:0;
	line-height:1;
	font-size:3.6rem;
	font-style:normal;
	font-family:'FontAwesome';
	color:#fff;
	display:inline-block;
	text-align:right;
	vertical-align:middle;
}
.top .linkcol_sp img{
	width:40px;
	margin:0 10px 0 0;
	float:left;
}
/*2	フッター
2-1	コピーライト+テキスト+ロゴ
------------------------------------------------*/
.bottom .footerCol{
	padding:50px 0;
	text-align:center;
}
.bottom .leftcol{
	padding:0;
	font-size:1.1rem;
	float:none;
}
.bottom .rightcol{
	padding:0;
	text-align:center;
	font-size: 0.9rem;
	float:none;
}
.bottom .leftcol .ttl{
	margin:0 auto 12px;
	color:#000;
	text-align:center;
	font-size: 3.4rem;
	line-height:100%;
	font-weight:normal;
	font-family:'Questrial', sans-serif;
	display:block;
}
.bottom .rightcol .ttl{
	display:none;
}
/*3	サイドパーツ
3-1	スクロールに追従するボタン
------------------------------------------------*/
a.buybtn{
	width:180px;
	height:70px;
}
a.buybtn img{
	width:40px;
}
a.buybtn span{
	margin:6px 0 0 0;
	font-size:1.4rem;
}
/*4	セクション
4-1	ノーマル
------------------------------------------------*/
.mainimg{
	min-height: 186px;
}
.maincatch{
	margin:0 0 24px 0;
	padding: 14px 0 10px;
}
.maincatch h2.catchttl{
	width:100%;
	font-size:1.8rem;
	line-height:150%;
}
.maincatch .prtxt{
	font-size:0.9rem;
}
/*4-2	パララックス
------------------------------------------------*/
.paracol{
	margin:0 0 50px;
}
.paracol .parainner{
	top:0;
	left:0;
	padding:0;
	text-align:center;
}
.paracol .parainner .innercol{
	padding:30px 0 0 0;
}
.paracol .parainner .innercol h3{
	font-size:2.2rem;
}
.paracol .parainner .innercol img{
	max-width: 77%;
}
/*4-3	最大幅ブロック
------------------------------------------------*/
.imgcol{
}
/*5	オブジェクト-1
5-1	見出し
------------------------------------------------*/
.innercol h3{
	font-size:2.1rem;
}
.innercol h4{
	font-size:1.9rem;
}
h3.title1{
	padding:14px 0;
}
h3.title2{
	padding:14px 0 12px 46px;
}
 
h3.title2:before{
    content:"";
    position: absolute;
    top: 12px;
    left:16px;
    width:16px;
    height:16px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
 
h3.title2:after{
    content: "";
    position: absolute;
    top: 34px;
    left:8px;
    height:10px;
    width:10px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}
h3.title3{
	padding:0 0 12px 30px;
	border-bottom:2px solid;
}
 
h3.title3:before{
    top:4px;
    width:16px;
    height:16px;
}
h3.title4{
	padding:0 0 14px 0;
	border-bottom: 2px solid;
}
h3.title5{
	padding:10px;
}
h3.title5:after{
  border-top: 16px solid;
  border-right:10px solid transparent;
  border-left:10px solid transparent;
  bottom:-16px;
  left:14%;
}
/*5	オブジェクト-2
5-2	テキストを含むレイアウト
------------------------------------------------*/
.articletxt{
	font-size:1.5rem;
	line-height:180%;
}
/*5	オブジェクト-3
5-2	テキストを含むレイアウト
------------------------------------------------*/
.phcol1{
	width:48%;
	margin:0 4% 0 0;
}
.imageright .phcol1{
	margin: 0 0 0 4%;
}
.imageright .txtcol1{
	float:none;
}
.txtcol1{
	width:100%;
	float:none;
}
.phcol2{
	margin:0 4% 0 0;
	width: 48%;
}
.col .phcol2{
	margin:0;
}
.col.onealignsp {
	width: 100%;
	float: none;
}
.imageright .phcol2 {
	margin: 0 0 0 4%;
}
.txtcol2{
}
/*5	オブジェクト-4
5-2	テキストを含むレイアウト
------------------------------------------------*/
.col .txtcol{
	font-size:1.5rem;
	line-height:180%;
}
/*5	オブジェクト-5
5-2	テキストを含むレイアウト
------------------------------------------------*/
.col2{
	width:48.4%;
	margin:0 0 24px 0;
	padding:0;
	float:left;
}
.col2:nth-child(2n){
	width:48.4%;
	margin:0 0 24px 0;
	padding:0;
	float:right;
}
.col2:nth-child(3n){
	width:48.4%;
	margin:0 0 24px 0;
	padding:0;
	float:left;
}
.col2:last-child{
	margin:0;
}
.col2 .txtcol{
	font-size:1.5rem;
	line-height:180%;
}
.col2.sp1col{
	width: 100%;
	float: none;	
}
/*5	オブジェクト-6
5-2	テキストを含むレイアウト
------------------------------------------------*/
.col3{
	width:48.4%;
	margin: 0 1.6% 24px 0;
	float: none;
	display: inline-block;
	vertical-align: top;
}
.col3:nth-child(2n){
	margin-right: 0;
}
.col3:nth-child(4n){
	width:48.4%;
}
.col3:last-child,.col3:nth-last-child(2){
	margin:0;
	float: none;
}
.col3:nth-last-child(2){
	margin-right: 1.6%
}
.col3 .txtcol{
	font-size:1.5rem;
	line-height:180%;
}
.col3 p{
	margin-bottom: 0;
}
.col3.onealignsp {
	width: 100%;
	float: none;
}

/*5	オブジェクト-7
5-3	各要素をフェードインで遅れてふわっと表示
------------------------------------------------*/

/*5	オブジェクト-8
5-4	コンバージョンボタン
5-4	コンバージョンボタン2
角丸はlib.css - "Radius"を参照
------------------------------------------------*/
.btnCol{
	width:100%;
}
.btnCol a{
	height: auto;
	padding: 40px 0;
	margin:0 0 30px 0;
	font-size:2.2rem;
	letter-spacing:1px;
}
/*.btnCol a.btnbg01{
	padding: 137px 0 40px 0;
} */
.btnCol .btn01{
	background:no-repeat 50% 30%;
	max-height: 50px;
}
/*5	オブジェクト-9
5-5	グラフ
------------------------------------------------*/
.graphcol{
	width:280px;
	min-height: 280px;
	margin:0 auto 30px;
	padding:80px 0;
	text-align:center;
}
.graphcol svg.svg01{
	width:280px;
	height:280px;
	z-index:200;
}
.graphcol svg.svg02{
	width:280px;
	height:280px;
}
.graphcol svg.svg01 circle{
	margin:0;
	padding:0;
    fill:transparent;
    stroke:#ccc;
  	box-sizing:border-box;
}
.graphcol.on svg.svg01 circle{
    stroke-width:24;
    stroke-dasharray:730 804;
}
.graphcol svg.svg02 circle{
	stroke-width:24;
}
@keyframes circle {
	0% { stroke-dasharray: 0 804;}
	99.9%{ stroke-dasharray:730 804;}
}
.graphcol .number{
	font-size:7rem;
}
.graphcol .number span{
	font-size: 5rem;
}
.graphcol .txt{
	font-size:1.4rem;
}
.graphcol .txt span{
	font-size:2.5rem;
}
/*5	オブジェクト-10
5-6	ライター自己紹介
------------------------------------------------*/
.writerinfo{
	width:100%;
	padding:12px;
}
.writerinfo img{
	margin:0;
	width:28%;
	height: auto;
}
.writerinfo .txt{
	width:68%;
	padding:0;
	display:block;
	float:right;
}
.writerinfo .name{
}
/*5	オブジェクト-11
5-7	商品紹介
------------------------------------------------*/
.productcol{
	padding:14px;
}
.productcol .photo{
	width:100%;
	padding:30px 0;
	text-align:center;
	float:none;
}
.productcol .txt{
	width:100%;
	float: none;
}
.productcol .photo img{
	max-width: 60%;
	width: auto;
}
.productcol .txt .ttl{
	font-size: 1.8rem;
}
.productcol .txt .ttl span{
	font-size: 3rem;
	line-height:150%;
}
.productcol .txt a.btn{
	font-size:1.6rem;
}
.productcol .txt a.btn:after{
	right:10px;
}
/*5	オブジェクト-12
5-8	画像の上に文字
------------------------------------------------*/
.txtoverimg{
	margin:0 auto 50px;
	padding-top:70%;
}
.txtoverimg .imgtxt{
	padding:30px 14px 14px;
	font-size:1.4rem;
}
/*5	オブジェクト-13
5-9	メディア風タグ
------------------------------------------------*/
.tagcol{
	padding: 14px 4% 8px;
	font-size:1.4rem;
}
.tagcol .index{
	width: 21%;
	margin:0 2% 0 0;
	padding:0;
	vertical-align: top;
}
.tagcol ul.taglist{
	width: auto;
	max-width: 69%;
	box-sizing: border-box;
}
/*5	オブジェクト-14
5-10	引用ブロック
------------------------------------------------*/
.quotescol{
	width:100%;
	margin:40px auto;
	padding:50px 30px;
	font-size:1.5rem;
	line-height:180%;
}
.quotescol:before{
	font-size:1.9rem;
}
.quotescol:after{
	font-size:1.9rem;
}
/*5	オブジェクト-15
5-11	セリフ
------------------------------------------------*/
.opcol .photo{
	width:24%;
}
.opcol .txt{
	width:75%;
	padding: 0 0 0 18px;
	box-sizing:border-box;
}
.opcol .txt .txtcol{
	padding:14px 18px;
	font-size:1.4rem;
}
.opcol .txt .txtcol:after{
  border-right: 16px solid #fdf8eb;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-top:-8px;
  left: -14px;
  top:10%;
}
.opcol .txt .txtcol span{
	font-size:1.4rem;
}
.opcol.imageright .txt{
	padding: 0 18px 0 0;
}
.opcol.imageright .txt .txtcol:after{
  border-left: 16px solid #fdf8eb;
  right: -14px;
}
/*5	オブジェクト-16
5-12	チェックボックス
------------------------------------------------*/
ul.checkbox{
	padding:0 16px;
}
ul.checkbox li{
	font-size:1.9rem;
	margin:0 0 10px 0;
}
ul.checkbox li:before{
	margin:-2px 6px 0 0;
	font-size: 1.8rem;
}
/*5	オブジェクト-17
5-13	ノーマルな囲み
------------------------------------------------*/
.bgclrwrap{
	width:100%;
	padding:30px 10px;
}
.bgclrwrap h3.innerttl span{
	border-bottom:1px solid #000;
	font-size: 2rem;
}


/*5	オブジェクト-18
5-14	罫線
------------------------------------------------*/
.ruledline{
	padding:20px;
	font-size:1.5rem;
	line-height:180%;
}
.ruledline h4.innerttl{
	margin:0 0 12px 0;
	padding:14px 0 0 0;
	font-size: 2.2rem;
	line-height:130%;
	text-align:center;
	border:none;
}
}