@charset "UTF-8";
/*
Theme Name:STUDIO FOCUS
*/

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17



html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
*{box-sizing: border-box;}
body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

ul,ol {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs 
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs 
mark {
    background-color:#fff;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs 
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
img{
	vertical-align:bottom;
	max-width: 100%;
}
*/

/************** layout base ********************/

/*.clearfix{
overflow:hidden;
}
.clear:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}


a{color:#393939;
	text-decoration:none;
}
a:hover{
}
*/

/*ボタンrollover*/
/*a:hover{
-moz-opacity:0.60;
opacity:0.60;}

sup {
	line-height: 100%;
	font-size:10px;
	vertical-align: 0.4em;
}
sub{
	line-height: 100%;
	font-size:10px;
	vertical-align: -0.1em;
}
*/
.txtLeft{
text-align:left !important;
}
.txtRight{
text-align:right !important;
}
.txtCenter{
text-align:center !important;
}
.fw{font-weight:bold !important;}
.f10{ font-size:10px !important;}
.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f13{ font-size:13px !important;}
.f14{ font-size:14px !important;}
.f15{ font-size:15px !important;}
.f16{ font-size:16px !important;}
.f17{ font-size:17px !important;}
.f18{ font-size:18px !important;}

.txtRed{ color:#e60012;}
.note{ color:#666666; font-size:12px;}

.fLeft{ float:left;}
.fRight{ float:right;}
.fNon{
	float:none !important;
}

.mTop0{ margin-top:0 !important;}
.mTop5{ margin-top:5px !important;}
.mTop10{ margin-top:10px !important;}
.mTop15{ margin-top:15px !important;}
.mTop20{ margin-top:20px !important;}
.mTop25{ margin-top:25px !important;}
.mTop30{ margin-top:30px !important;}
.mTop35{ margin-top:35px !important;}
.mTop40{ margin-top:40px !important;}
.mTop45{ margin-top:45px !important;}
.mTop50{ margin-top:50px !important;}

.mBtm0{ margin-bottom:0 !important;}
.mBtm5{ margin-bottom:5px !important;}
.mBtm10{ margin-bottom:10px !important;}
.mBtm15{ margin-bottom:15px !important;}
.mBtm20{ margin-bottom:20px !important;}
.mBtm25{ margin-bottom:25px !important;}
.mBtm30{ margin-bottom:30px !important;}
.mBtm35{ margin-bottom:35px !important;}
.mBtm40{ margin-bottom:40px !important;}
.mBtm45{ margin-bottom:45px !important;}
.mBtm50{ margin-bottom:50px !important;}
.mBtm60{ margin-bottom:60px !important;}

.pTop0{ padding-top:0 !important;}
.pTop5{ padding-top:5px !important;}
.pTop10{ padding-top:10px !important;}
.pTop15{ padding-top:15px !important;}
.pTop20{ padding-top:20px !important;}
.pTop25{ padding-top:25px !important;}
.pTop30{ padding-top:30px !important;}
.pTop35{ padding-top:35px !important;}
.pTop40{ padding-top:40px !important;}
.pTop45{ padding-top:45px !important;}
.pTop50{ padding-top:50px !important;}

.pBtm0{ padding-bottom:0 !important;}
.pBtm5{ padding-bottom:5px !important;}
.pBtm10{ padding-bottom:10px !important;}
.pBtm15{ padding-bottom:15px !important;}
.pBtm20{ padding-bottom:20px !important;}
.pBtm25{ padding-bottom:25px !important;}
.pBtm30{ padding-bottom:30px !important;}
.pBtm35{ padding-bottom:35px !important;}
.pBtm40{ padding-bottom:40px !important;}
.pBtm45{ padding-bottom:45px !important;}
.pBtm50{ padding-bottom:50px !important;}
.pBtm60{ padding-bottom:60px !important;}




main{
 overflow: hidden;
}
.flex{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;}
@media screen and (min-width: 769px) {
.spOnly{ display:none;}
	.pcFlex{		
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
	}
}/*-PC only-*/
@media screen and (max-width: 768px) {
.pcOnly{ display:none;}

}/*spOnly*/
/************** layout base ********************/
/*body{
 position: relative;
text-align:center;
font-family:"Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, sans-serif;
line-height:1.2;
 font-weight: 500;
}*/
.fontMin{
 font-family:"Zen Old Mincho" , "游明朝" , "Yu Mincho" ,Garamond , "Times New Roman" ,"ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" ,  "游明朝体" , "YuMincho" ,  "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

div,p,dl{
text-align:left;
}

main p,
main dt,
main dd,
main li,
main td,
main th{
color:#000;
font-size:16px;
line-height:2.1;
	font-weight: 400;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6{
 color: #000;
font-size:18px;
 font-weight: 700;
 line-height: 1.1;
}


@media screen and (max-width: 768px) {
	body{
-webkit-text-size-adjust: 100%;
		
	}
  img{
    height: auto;
  }
  h2{
    font-size: 24px;
  }
 /* p,dt,dd,li,td,th{
    font-size:16px;
  }*/
}/*-sp end-*/


/* layout base */
main{
/*	width: min(90vw , 1260px);*/
	margin: auto;
	padding-top: 200px
}

/* Case & Tips common */
#titleBox,
#tipsContents,
#caseContents{
	width: min(90vw , 975px);
	margin: auto
}

.cat{
	display: block;
	background: #CEDBE9;
	max-width: 215px;
	line-height: 25px;
	border-radius: 12.5px;
	font-size: 11px;
	color: #567CA5;
	text-align: center;
	font-weight: 700;

}

.cat.cat_snstraining{
	background: #EAD8DD;
	color: #AF759B;
}

.date{
	font-size: 14px;
	line-height: 1.4;
}

.archive #titleBox{
		width: min(90vw , 1260px);
	margin: auto;
	padding-left: 36px;
	margin-bottom: 30px
}

.archive #titleBox h1 img{
	height: 85px;
	margin-right: 25px;
	width: auto
}

.archive #titleBox h1 span{
	display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

.archive .termLink{
	width: min(90vw , 1260px);
	margin: auto;
	padding-left: 36px;
	display: flex;
	gap:15px;
}

.archive.post-type-archive-tips .termLink,
.archive.tax-tips_cat .termLink{
	margin-bottom: 70px
}

.archive .termLink li a{
	display: block;
	border-radius: 12px;
	line-height: 24px;
	padding: 0 10px;
	background: #F3F3F3;
	font-size: 12px;
	font-weight: 700;
	color: #838383;
}
.archive .termLink li.current a{
	background: #083650;
	color: #fff;
}

.archive .tagList{
	margin-top: 20px;
	width: min(90vw , 1260px);
	margin: 20px auto 70px;
	padding-left: 36px;
	display: flex;
	gap:10px;
}
.archive .tagList li{
	font-size: 12px;
}

.archive .tagList li::after {
  background-color: #000; /* 線の色 */
  content: "";
  height: 1px; /* 線の高さ */
  width: 12px; /* 線の長さ */
	display: inline-block;
	vertical-align: middle;
}
.archive .tagList li::after {
  margin-left: 10px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}



.archive #tipsList,
.archive #caseList{
	padding-bottom: 130px;
}
.archive #tipsList ul,
.archive #caseList ul{
	margin-bottom: 150px
}
.pageNavi{
	margin: auto;
	text-align: center
}

.pageNavi span,
.pageNavi a{
	display: inline-block;
	width: 58px;
	text-align: center;
	font-size: 14px;
}

.pageNavi span.current{
	background: #083650;
	line-height: 24px;
	border-radius: 12px;
	color: #fff;
}


.single main h1{
	font-family:"Zen Old Mincho" , "游明朝" , "Yu Mincho" , serif;
  font-size: 30px;
	font-weight: 600;
  line-height: 1.5;
	text-align: left;
	color: #083650
}

.single main h2{
 font-family:"Zen Old Mincho" , "游明朝" , "Yu Mincho" , serif;
 font-size: 24px;
font-weight: 600;
line-height: 1.6;
	text-align: left;
	letter-spacing: 0.05em;
}

.single h2.enTitle{
	margin: 0 auto 60px;
}
.single #caseList h2.enTitle,
.single #tipsList h2.enTitle{
	width: min(71% , 975px);
}

.single h2.enTitle img{
	height: 40px;
	width: auto;
	margin-right: 20px;
}
.single #thingsArea h2.enTitle img{
	height: 52px;
}
.single h2.enTitle span{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	border-bottom: 1px solid #083650;
	padding-bottom: 5px
}

.single #titleBox .cat{
		margin-bottom: 1em;
}

#postslink{
	margin-bottom: 360px;

}
#postslink ul{
	display: flex;
	gap:28px;
	width: 100%;
	justify-content: space-between
}
#postslink li{
	width: min(32% , 436px);
position: relative
}
#postslink li a{
		display: flex;
	justify-content: space-between;
	align-items: center;
}

#postslink li:not(.tolist):after{
	border-bottom:1px solid #ccc;
	position: absolute;
	bottom:3em;
	left:0;
	content: '';
	display: block;
	width: 100%;
}
#postslink li.tolist{
	text-align: center
}
#postslink li.tolist a{
	text-align: center;
display: inline-block
}

#postslink li.tolist img{
	max-width: 87px
}

#postslink li .postBox{
	width: min(52.7% , 230px);

}
#postslink li .postBox span.cat{
	margin-bottom: 1em
}
#postslink li .postBox p{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 1.6em
}
#postslink li span.arrow{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.24em;
	padding-top: 1em

}
#postslink li span.arrow.prev{
	padding-left: 2em
}
#postslink li span.arrow.next{
	padding-right: 2em
}

.single-tips #tipsList,
.single-case #caseList{
	background: #E8E7EC;
background: linear-gradient(180deg,rgba(232, 231, 236, 1) 0%, rgba(241, 244, 247, 1) 54%, rgba(255, 255, 255, 1) 100%);
	position: relative;
	padding-top: 30px;
	padding-bottom: 130px
}

.single-tips #tipsList:before,
.single-case #caseList:before{
	content: '';
	width: 130%;
	height: 400px;
	display: block;
	z-index: -1;
	background: #E8E7EC;
		border-radius: 100%;
	position: absolute;
	top:-200px;
	left: -15%
}


/* Case */
.single-case h2{
	margin-bottom: 22px;
	margin-top: 54px
}
.single-case #titleBox h1{
	margin-bottom: 25px
}

.single-case #titleBox .infos.flex{
	margin-bottom: 42px;
	gap:30px;
	
}
.single-case #titleBox .infos.flex span{
	line-height: 1;
		font-size: 12px;
}
.single-case #titleBox .infos.flex span:first-child{
	border-right: 1px solid #000;
	padding-right: 30px;
}

.single-case #caseContents p{
	margin-bottom: 2em
}
.single-case #caseContents > div{
	margin-bottom: 160px
}

#caseList h3{
	font-size: 14px;
		font-weight: 600;
	text-align: left;
	line-height: 1.6;
	border-bottom: 1px solid #D9D9D9;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
#caseList li figure{
	margin-bottom: 30px
}
#caseList li figure img{
	aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
}
#caseList li .cat{
	width: 50%
}
#caseList ul li p.infos .clientName,
#caseList li .tags a{
	font-size: 12px;
}
/*
#caseList ul li p.infos .clientName{
	margin: 0 0 0 auto;
}*/

/* Tips */

.single-tips #titleBox h1{
	margin-bottom: 110px;
}
.single-tips #titleBox .cat{
	max-width: 215px
}

.single-tips .icatch{
	max-width: 650px;
	margin: 0 auto 100px
}

.single-tips #tipsContents{
	margin-bottom: 178px;
}

.single-tips #tipsContents h2{
	border-bottom: 1px solid #154A84;
	padding-bottom: 16px;
	margin-bottom: 22px;
	margin-top: 82px
}

#ez-toc-container {
	margin-top: 62px;
	padding: 40px 52px !important;
	
}

.ez-toc-title-container{
	font-family:"Zen Old Mincho" , "游明朝" , "Yu Mincho" , serif;
	margin-bottom: 36px;
}

.ez-toc-list li{
	margin-bottom: 1em !important
}

.single-tips #tipsContents p{
	margin-bottom: 2em;
}

.single-tips #tipsContents dt{
	font-size: 20px;
	font-weight: 700;
}

.single-tips #tipsContents dd{
	margin-bottom: 2em
}

.single-tips #tipsContents li{
	text-align: left;
}


#tipsList ul,
#caseList ul{
	width: min(92% , 1260px);
	display: flex;
	gap: 78px 40px;
	justify-content: flex-start;
	margin: auto;
	flex-wrap: wrap;
	padding-left: 36px;
}


#tipsList ul li,
#caseList ul li{
	width: min(calc(33% - 40px) , 394px)
}
#tipsList ul li h3{
	background: url("../images/casetips/tips_bg_promotioon.png") no-repeat;
	background-size: contain;
	aspect-ratio: 4.48 / 3;
  width: 100%; 
	border-radius: 5px;
	margin-bottom: 25px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3em;
	line-height: 1.4;
	position: relative
}

#tipsList ul li .cat_snstraining h3{
	background: url("../images/casetips/tips_bg_sns.png") no-repeat;
}

#tipsList ul li h3 span{
	font-size: 16px;
	margin-bottom: 1em
}
#tipsList ul li h3 span.sholder{
	transform: rotate(90deg);
	font-size: 10px;
	font-weight: bold;
	position: absolute;
  top: 50px;
	left:-20px;
  color: #fff;
}
#tipsList ul li p.infos,
#caseList ul li p.infos{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap
}

#tipsList ul li .cat{
	line-height: 18px;
	width: 50%
}

#tipsList ul li h4{
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	line-height: 1.6
}


@media screen and (max-width: 768px) {
	main{
		padding-top: 100px;
	}
	.archive #titleBox{
		padding-left: 0
	}
	.archive .termLink,
	.archive .tagList{
		flex-direction: column;
		padding-left: 0
	}
	.archive.post-type-archive-tips .termLink {
  margin-bottom: 20px;
		padding-left: 0;
		flex-wrap: wrap;
}
	#tipsList ul, #caseList ul{
		gap:20px;
		padding-left: 0
	}
	#tipsList ul li, #caseList ul li{
		width: 100%;
	}
	

	
	.single main h1{
		font-size: 24px
	}
	.single main h2{
		font-size: 20px
	}
	#ez-toc-container {
  margin-top: 30px;
  padding: 20px !important;
}
	#postslink li .postBox{
		display: none
	}
	#postslink li span.arrow{
		padding-top: 0
	}
}