@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*
■ユーザー事例
1_メインタイトル
2_本文
3_画像4点
*/

body{
	font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}
h1,h2,h3,h4,h5{margin:0; padding:0;}
p{
	text-align: justify;
	text-justify: inter-ideograph;
}


/******************************************************************

   	1_メインタイトル

******************************************************************/
#user{}
#user .nextContents{
	padding:145px 0 0 0;/*top 145pxでぴったり*/
	position:relative;
}
#user .nextContents h3.nextPageTitle{
	display:none;
}
#user .logo {
	position:absolute;
    width: 172px;
    height: 81px;
	padding-top:20px;
	top:145px;
	right:20px;
	z-index:2;
}
#user .nextContents .fixed {
    position: fixed;
    top: 0;
	opacity:0.75;
}
#user .kaneda #mainBg{
	width:100%;
	height:600px;
	position:relative;
	display:table;
	background:url(../../user/images/01/bg_title.jpg) center center no-repeat;
	background-size:cover;
}
#user .kaneda #mainBg #mainCopy{
	width:1200px;
	height:600px;
	margin:0 auto;
	display:table-cell;
	vertical-align:middle;
}
#user #mainBg #mainCopy h3,
#user #mainBg #mainCopy p{
	text-align:center;
	color:#ffffff;
}
#user #mainBg #mainCopy h3{
	font-size:50px;
	font-weight:700;
	letter-spacing:2px;
	line-height:68px;
	margin-bottom:25px;
}
#user #mainBg #mainCopy p{
	font-size:16px;
	font-weight:500;
	letter-spacing:2px;
	line-height:32px;
	margin-bottom:20px;
}


/******************************************************************

   	2_本文

******************************************************************/

#user #interview{}

#user #interview .interviewBox{
	width:650px;
	margin:0 auto 60px;
}
#user #interview .interviewBox h4{
	font-size:26px;
	font-weight:700;
	letter-spacing:1px;
	line-height:32px;
	margin:60px 0 30px;
}
#user #interview .interviewBox p{
	font-size:15px;
	line-height:200%;
	margin-bottom:30px;
}
#user #interview .interviewBox p.interviewee{
	color:#00a7ac;
}
#user #interview .interviewBox p.photo{
	font-size:13px;
	line-height:160%;
	color:#333f48;
	text-align:center;
}
#user #interview .interviewBox p.photo img{
	margin-bottom:5px;
}

#user #interview .interviewBox #profileBox{
	margin:0 0 30px 0;
	padding:30px;
	border:1px solid #00a7ac;
	box-sizing:border-box;
}
#user #interview .interviewBox #profileBox #profileImg{
	float:left;
	width:200px;
}
#user #interview .interviewBox #profileBox #profileText{
	float:right;
	width:360px;
	color:#00a7ac;
	padding-top:20px;
}
#user #interview .interviewBox #profileBox #profileText p,
#user #interview .interviewBox #profileBox #profileText ul li{
	font-size:13px;
	letter-spacing:1px;
	line-height:22px;
	margin-bottom:0;
}
#user #interview .interviewBox #profileBox #profileText p#profileName{
	font-size:20px;
	font-weight:700;
	letter-spacing:3px;
	padding-top:3px;
}
#user #interview .interviewBox #profileBox #profileText p#profileName:after{
	content:"";
	width:100%;
	border-bottom:1px solid #00a7ac;
	display:block;
	margin-bottom:20px;
	padding-bottom:20px;
}
#user #interview .interviewBox #profileBox #profileText p#profileName span{
	font-size:13px;
}
#user #interview .interviewBox #profileBox #profileText ul li span{
	width:4.5em;
	display:inline-block;
}



/******************************************************************

   	3_画像4点

******************************************************************/

#user #interview #photoBox{
	width:100%;
	background-color:#eeeeee;
	padding:70px 0 60px;
}
#user #interview #photoBox #photoBoxInner{
	width:1200px;
	margin:0 auto;
}
#user #interview #photoBox #photoBoxInner ul{
	margin-bottom:20px;
}
#user #interview #photoBox #photoBoxInner ul li{
	display:inline-block;
	width:285px;
	margin:0 20px 0 0;
}
#user #interview #photoBox #photoBoxInner ul li:last-child{
	margin:0px;
}
#user #interview #photoBox #photoBoxInner ul li img{
	vertical-align:bottom;
}
#user #interview #photoBox #photoBoxInner p{
	font-size:13px;
	line-height:160%;
	color:#333f48;
}
#user #interview #photoBox #photoBoxInner p span{
	color:#00a7ac;
	font-weight:bold;
	padding:0 3px 0 5px;
}
#user #interview #photoBox #photoBoxInner p span:first-child{
	padding:0 3px 0 0;
}



@media screen and (max-width: 767px){

/******************************************************************

   	1_[SP]メインタイトル

******************************************************************/
#user .nextContents{
	padding:0;
	position:relative;
}
#user .nextContents h3.nextPageTitle{
	display:block;
}
#user .logo {
    width: 35%;
    height:auto;
	padding-top:120px;
	top:0px;
	right:5%;
	z-index:98;
	opacity:1;
	transition: all 0.5s;
}
#user .nextContents .fixed {
    position: fixed;
	opacity:0;
}
#user .kaneda #mainBg{
	height:600px;
}
#user .kaneda #mainBg #mainCopy{
	width:90%;
	height:100%;
	margin:0 auto;
	padding:0 5%;
	/*display:table-cell;
	vertical-align:middle;*/
}
#user #mainBg #mainCopy h3,
#user #mainBg #mainCopy p{
	text-align:left;
	/*color:#ffffff;*/
}
#user #mainBg #mainCopy h3{
	font-size:24px;
	font-weight:700;
	letter-spacing:1px;
	line-height:38px;
	margin-bottom:25px;
}
#user #mainBg #mainCopy p{
	font-size:15px;
	letter-spacing:1px;
	line-height:26px;
	/*font-weight:500;
	margin-bottom:20px;*/
}


/******************************************************************

   	2_[SP]本文

******************************************************************/

#user #interview{}

#user #interview .interviewBox{
	width:90%;
	padding:0 5%;
	margin:0 auto 50px;
}
#user #interview .interviewBox h4{
	font-size:18px;
	letter-spacing:0px;
	line-height:26px;
	margin:40px 0 25px;
	/*font-weight:700;*/
}
#user #interview .interviewBox p{
	font-size:15px;
	line-height:180%;
	margin-bottom:25px;
}
/*#user #interview .interviewBox p.interviewee{
	color:#00a7ac;
}*/
#user #interview .interviewBox p.photo{
/*	font-size:13px;
	line-height:160%;
	color:#333f48;*/
	text-align:left;
}
#user #interview .interviewBox p.photo img{
	margin-bottom:5px;
}

#user #interview .interviewBox #profileBox{
	width:100%;
	padding:3%;
	/*margin:0 0 30px 0;
	padding:30px;
	border:1px solid #00a7ac;
	box-sizing:border-box;*/
}
#user #interview .interviewBox #profileBox #profileImg{
	float:left;
	width:26%;
}
#user #interview .interviewBox #profileBox #profileText{
	float:right;
	width:70%;
	padding-top:0px;
	/*color:#00a7ac;*/
}
#user #interview .interviewBox #profileBox #profileText p,
#user #interview .interviewBox #profileBox #profileText ul li{
	font-size:13px;
	line-height:20px;
	letter-spacing:0px;
	/*letter-spacing:1px;
	margin-bottom:0;*/
}
#user #interview .interviewBox #profileBox #profileText p#profileName{
	font-size:16px;
	letter-spacing:2px;
	/*font-weight:700;
	padding-top:3px;*/
}
#user #interview .interviewBox #profileBox #profileText p#profileName:after{
	margin-bottom:12px;
	padding-bottom:12px;
	/*content:"";
	width:100%;
	border-bottom:1px solid #00a7ac;
	display:block;*/
}
#user #interview .interviewBox #profileBox #profileText p#profileName span{
	font-size:13px;
}
#user #interview .interviewBox #profileBox #profileText ul li span{
	width:4em;
	/*display:inline-block;*/
}



/******************************************************************

   	3_[SP]画像4点

******************************************************************/

#user #interview #photoBox{
	width:90%;
	/*background-color:#eeeeee;*/
	padding:50px 5%;
}
#user #interview #photoBox #photoBoxInner{
	width:100%;
	/*margin:0 auto;*/
}
#user #interview #photoBox #photoBoxInner ul{
	margin-bottom:10px;
}
#user #interview #photoBox #photoBoxInner ul li{
	/*display:inline-block;*/
	width:50%;
}
#user #interview #photoBox #photoBoxInner ul li:nth-child(odd){
	margin:0 1px 1px -1px;
}
#user #interview #photoBox #photoBoxInner ul li:nth-child(even){
	margin:0 0 1px 0;
}
#user #interview #photoBox #photoBoxInner ul li:last-child{
	margin:0 0 1px 0;
}
/*#user #interview #photoBox #photoBoxInner ul li img{
	vertical-align:bottom;
}
#user #interview #photoBox #photoBoxInner p{
	font-size:13px;
	line-height:160%;
	color:#333f48;
}
#user #interview #photoBox #photoBoxInner p span{
	color:#00a7ac;
	font-weight:bold;
	padding:0 3px 0 5px;
}
#user #interview #photoBox #photoBoxInner p span:first-child{
	padding:0 3px 0 0;
}*/

#user .nextNavTitle{
	margin:0;
}

}

#user .horunavi .horunaviBox{
	box-sizing: border-box;
}

#user .horunavi .horunaviBox .horunaviBoxInner{

}

#user .horunavi .horunaviBox .horunaviBoxInner .horunaviManga{
	padding-bottom: 100px;
	background: url(../../user/horunavi/images/bg-manga.jpg) no-repeat center top;
	background-attachment: fixed;
	background-size: cover;
}

#user .horunavi .horunaviBox .horunaviBoxInner .horunaviManga .horunaviMangaTitle{
	margin-bottom: 55px;
	padding-top: 40px;
	text-align: center;
}
#user .horunavi .horunaviBox .horunaviBoxInner .horunaviManga .horunaviMangaTitle h1 img{
	width: 553px;
}

#user .horunavi .horunaviMangaBox{
	width: 1240px;
	margin: 0 auto;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem:first-child {
    margin-top: 0;
}
#user .horunavi .horunaviMangaBox .horunaviMangaItem {
    width: 600px;
    margin: 70px auto 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    -webkit-filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.2));
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemNumber {
    position: relative;
    display: table;
    width: 107px;
    height: 107px;
    background: #2badb0;
    border-radius: 107px;
    text-align: clear;
    top: -20px;
    margin: 0 auto;
}
#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemNumber p{
	display: table-cell;
	color: #fff;
	vertical-align: middle;
	text-align: center;
	font-family: "Barlow Condensed", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size: 1.25em;
	line-height: 1;
}
#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemNumber p span {
	display: block;
	font-size: 1.875em;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem h2{
	margin: 0 30px 30px;
	text-align: center;
	font-size: 1.625em;
	color: #222;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage{
	position: relative;
	margin: 0 0 20px;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 152px;
	background: #ffe200;
	top: 50%;
	right: 0;
	margin: -76px 0 0;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage figure{
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	z-index: 1;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage figure img{
	width: 280px;
	height: auto;
	z-index: 10;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemContent{
	margin: 0 30px 30px;
	color: #2badb0;
	font-size: 1.375em;
	font-weight: bold;
	text-align: center;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemText{
	margin: 0 30px 40px;
	font-size: 1em;
	text-align: center;
	color: #101010;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemLink{
	text-align: center;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemLink a{
	display: block;
	padding: 36px 30px 40px;
	color: #fff;
	font-size: 1.875em;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #222;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemLink a:hover{
	opacity: 0.7;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemLink a span{
	position: relative;
}

#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemLink a span::after{
	content: "";
	position: absolute;
	width: 20px;
	height: 12px;
	background: url(../../user/horunavi/images/icon-pdf-02.png) no-repeat 0 0;
	background-size: cover;
	top: 50%;
	right: -30px;
	margin: -4px 0 0;
}

@media only screen and (max-width: 767px){
	#user .horunavi .horunaviBox .horunaviBoxInner .horunaviManga{
		padding-bottom: 13.33333vw;
		background: url(../../user/horunavi/images/bg-manga-sp.jpg) no-repeat center 0;
		background-attachment: fixed;
	}
	#user .horunavi .horunaviBox .horunaviBoxInner .horunaviManga .horunaviMangaTitle{
		width: calc(100% - 30px);
		margin: 0 auto 7.33333vw;
		padding-top: 5.33333vw;
	}
	#user .horunavi .horunaviBox .horunaviBoxInner .horunaviManga .horunaviMangaTitle h1 img{
		width: 100%;
		height: auto;
	}
	#user .horunavi .horunaviMangaBox{
		width: 100%;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem{
		width: calc(100% - 30px);
		margin: 9.33333vw auto 0;
		border-radius: 10px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemNumber{
		width: 21.33333vw;
		height: 21.33333vw;
		border-radius: 21.33333vw;
		top: -5.33333vw;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemNumber p{
		font-size: 17px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemNumber p span{
		font-size: 31px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem h2{
		margin: 0 4vw 4vw;
		font-size: 22px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage{
		margin-bottom: 10px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage figure{
		margin: 0;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage figure img{
		width: 50vw;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaImage::after{
		height: 20.26667vw;
    margin: -10.13333vw 0 0;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemContent{
		margin: 0 4vw 5.66667vw;
		font-size: 18px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemText{
		margin: 0 4vw 5.33333vw;
		font-size: 13px;
	}
	#user .horunavi .horunaviMangaBox .horunaviMangaItem .horunaviMangaItemLink a{
		padding: 4.8vw 4vw 5.33333vw;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		font-size: 5.33333vw;
		font-size: 20px;
	}
}