@charset "utf-8";
body{
	font-size: 1.4em;
}
/* ===============================================================
      Basic Elements
=============================================================== */
a:hover{
	text-decoration: none;
}
img{
	max-width: 100%;
	height: auto;
}
.pcContents{
	display: none !important;
}
#wrap {
	padding-top: 50px;
}
#contents {
	width: 94%;
	margin: auto;
}
.fullBox-sp{
	box-sizing: border-box;
	margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
}
.frexBox {
	display: flex;
	flex-wrap: wrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.section {
	margin-bottom: 40px;
}
.section:after {
	content: "";
	display: block;
	clear: both;
}
.inner,.inner2 {
	margin: 0 auto;
}
.inner:after {
	content: "";
	display: block;
	clear: both;
}
.inner2:after {
	content: "";
	display: block;
	clear: both;
}
.spInner {
	width: 92%;
	margin: auto;
}
.btn1 {
	padding: 10px 1.5em;
}
.btn2 {
	padding: 10px 1.5em;
}
.btn3 {
	padding: 8px 1.2em;
	font-size: 14px;
}
.defaFont {
	font-size: 14px;
	color: #434861;
}
.column2,.column3,.column4 {
	width: 100%;
}
.column2 .column,
.column3 .column,
.column4 .column {
	width: 100%;
	margin-bottom: 30px;
}
.column2 .column:nth-child(2n){
	margin-bottom: 0;
}
.column3 .column:nth-child(3n){
	margin-bottom: 0;
}
.column4 .column:nth-child(4n){
	margin-bottom: 0;
}
.txtArea1,.txtArea2 {
	width: 100%;
	margin-bottom: 15px;
}
.imgArea1,.imgArea2 {
	width: 100%;
	margin-bottom: 15px;
}
.imgR {
	width: 280px;
	margin: 0 auto 20px auto;
}

/* ----------- リスト ----------- */
.list_Flow li:after {
	text-align: center;
	margin-left: auto;
}

/* ----------- BOX ----------- */
.box1 {
	border: 3px solid #a8df3f;
	padding: 1em;
	margin: 1.5em 0;
	border-radius: 3px;
}
.box2 {
	border: solid 3px #DDD;
	padding: 1em;
	margin: 1.5em 0;
	border-radius: 3px;
}

/* ------ マーカー ------ */
.marker {
	font-size: 16px;
}

/* ------ ライン ------ */
.hr {
	border-bottom: solid 1px #CCC;
	padding-bottom: 30px;
}

/* ----------- width ----------- */
.w50_sp {
	width: 50% !important;
	margin: auto;
}
.w60_sp {
	width: 60% !important;
	margin: auto;
}
.w70_sp {
	width: 70% !important;
	margin: auto;
}
.w80_sp {
	width: 80% !important;
	margin: auto;
}
.w90_sp {
	width: 90% !important;
	margin: auto;
}


/* ---------------------------------------------------- /
    　　　　　　　固定ページ
------------------------------------------------------ */
/* ----------- ページMV ----------- */
.mvImg{
	min-height: 160px;
	background: url(../img/common/sp/mv.png) no-repeat;
	background-size: cover;
}
.mvImg-illust {
	background-color: #C3D600;
	background-image: url(../img/illust/sp/mv.png) !important;
}
.mvImg-character {
	background-image: url(../img/character/sp/mv.png) !important;
}
.mvImg-design {
	background-image: url(../img/design/sp/mv.png) !important;
}
.mvImg-animation {
	background-image: url(../img/animation/sp/mv.jpg) !important;
}
.mvImg-price {
	background-image: url(../img/price/sp/mv.jpg) !important;
	background-position: center center;
}
.mvImg-about {
	background-image: url(../img/about/sp/mv.jpg) !important;
	background-position: center center;
}
.mvImg-example,
.mvImg-blog {
	background-image: none !important;
	min-height: 110px !important;
}
.mvImg-contact,
.mvImg-thanks {
	background-image: url(../img/contact/sp/mv.jpg) !important;
	background-position: center center;
}
.pageTtlArea {
	top:10%;
	left: 5%;
}
.pageTtlArea .pageTtl-eg {
	font-size: 24px;
}
.pageTtlArea .pageTtl {
	font-size: 15px;
}
.mvImg-animation .pageTtlArea {
	color: #fff;
}
.mvImg-about .pageTtlArea {
	color: #fff;
}
.mvImg-example .pageTtlArea,
.mvImg-blog .pageTtlArea {
	text-align: center;
	top:25%;
	left: 0;
	right: 0;
}
.mv-btns {
	top: 100px;
	justify-content: center;
}
.mv-btn {
	margin-right: 5px;
}
.ttlArea1 {
	margin-bottom: 20px;
}
.ttlArea1 .ttl1 {
	font-size: 18px;
}
.ttlArea1 .egTtl {
	font-size: 14px;
}
.ttl1-sub{
	padding: 0 35px;
}
.ttl2 {
	font-size: 18px;
	margin-bottom: 15px;
}
.ttl2 span {
	text-align: center;
}
.ttl3 {
	font-size: 17px;
	margin-bottom: 15px;
}
.ttl4 {
	font-size: 17px;
	margin-bottom: 20px;
}
.box1 .ttl4 {
	font-size: 15px;
}
.ttl5 {
	font-size: 15px;
	margin-bottom: 20px;
}
.bigTxt1 {font-size: 16px; margin-bottom: 15px;}
.txt1 {
	font-size: 15px;
}
.txt2 {
	font-size: 15px;
}

/* ----------- table ----------- */
.tbl1 {
	margin-bottom: 20px;
	border: 1px solid #CCC;
}
.tbl1 th {
	width: 100%;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.tbl1 td {
	width: 100%;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px;
}

/* パンくず */
.topicpathArea {
	padding: 10px 0;
	margin: 0 0 20px 0;
}
.topicpathArea .inner {
	width: 94%;
	margin: auto;
}
#blog .topicpathArea,
#blogpost .topicpathArea {
	margin-bottom: 0;
}

/* ペジャー */
.pager__area{
	margin-bottom: 30px;
}

/* ----------- ページネーション ----------- */
.pagenav li {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagenav li.current,
.pagenav li.first,
.pagenav li.last,
.pagenav li.previous,
.pagenav li.next{
position: initial;
top: initial;
left: initial;
}

.pagenav li.previous a { border-left-width: 0; }

/* ----------- margin ----------- */
.mb40 {margin-bottom:30px!important;}
.mb50 {margin-bottom:30px!important;}
.mb80 {margin-bottom:30px!important;}
.mb100 {margin-bottom:30px!important;}

/* ----------- font style ----------- */
.fs22 {font-size:18px;}
.fs24 {font-size:20px;}
.fs28 {font-size:24px;}
.fs30 {font-size:24px;}




/* ===============================================================
       blog
=============================================================== */
/* ----------- blog記事一覧表示共通 ----------- */
.entryLists {
	margin-bottom: 30px;
}
.entryLists .entryList {
	width: 48.75%;
	margin: 0 2% 20px 0;
}
.entryLists .entryList .blog_thum {
	box-sizing: border-box;
	height: 135px;
}
.entryLists .entryList:nth-child(2n){
	margin-right: 0;
}
.entryLists .entryList .blog_thum img {
	max-width: 200%;
	max-height: 240%;
}
.entryLists .entryList .blog_cate {
	font-size: 13px;
	padding: 3px 10px;
}
.entryLists .entryList .entryTtl {
	font-size: 15px;
	margin-bottom: 0;
	margin-top: 10px;
}

.pagerArea{
	padding: 20px 0;
}
.pagerArea p {
	margin-bottom: 0 !important;
}

/* ----------- blogページ共通 ----------- */
#main {
	width: 100%;
	margin-bottom: 30px;
}
#sub {
	width: 100%;
	margin-bottom: 50px;
}
/* -- sidbar -- */
.side__block{
	margin-bottom: 20px;
}
.profArea {
	padding: 15px;
}
.profImg img {
	width: 100%;
}
.recent__thum{
	height: 60px;
}

/* ----------- blogTop/アーカイブ ----------- */
#blog {
	margin-bottom: 40px;
}
.cateArea {
	padding: 10px 15px;
	margin-bottom: 30px;
}
.cateTtl {
	font-size: 18px;
	line-height: 1;
}
.cateArea ul {
	display: flex;
	flex-wrap: wrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.cateArea ul li {
	margin: 0 15px 15px 0;
}
.cateArea ul li a {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 5px;
	background: #FFF;
	color: #444;
	font-size: 14px;
	font-weight: bold;
	border: 3px solid #d2f58d;
}
.cateArea ul li a:hover {
	text-decoration: none;
	background: #d2f58d;
	border: 3px solid #FFF;
}
#blog #main {
	width: 100%;
	margin-right: 0;
	padding-bottom: 70px;
	border-bottom: 1px solid #EEE;
}
.blogCate_ttl {
	font-size: 16px !important;
	margin-bottom: 20px;
}


/* ----------- blog記事ページ ----------- */
#blogpost {
	margin-bottom: 40px;
}
.postTtlArea {
	padding: 0 0 15px 0;
	margin-bottom: 20px;
}
.dateArea {
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px solid #222;
}
.dateArea .postyear {
	display: inline-block;
	font-size: 16px;
	margin-right: 2px;
}
.dateArea .postyear:after {
	content: "/" ;
}
.dateArea .postdate {
	font-size: 16px;
}
.postTtlBox {
	padding-top: 10px;
}
.postTtlBox .category {
	font-size: 13px;
	margin-bottom: 10px !important;
}
.entryMain .postTtl {
	font-size: 20px;
}
.entryMain .postThum {
	margin-bottom: 30px;
}
.entryMain .postArea {
	margin-bottom: 50px;
}
/*  SNS  */
#main .snsArea {
	width: 160px;
	padding: 0 0 20px 0;
}
#main .snsArea .snsTtl {
	width: 100px;
	margin: 0 auto 15px auto;
}

/* ----------- 記事下定形 ----------- */
.signature {
	margin: 20px 0 30px 0;
}
.signatureL {
	width: 40%;
	margin: 20px auto 15px auto;
	display: block;
}
.signatureR {
	width: 100%;
	display: block;
	padding: 15px 15px 30px 15px;
}
.signatureR p {
	margin-bottom: 20px !important;
}
.signatureR .inner div {
	text-align: center;
}


/* ----------- 記事装飾 ----------- */
.entryMain .postArea h3 {
	font-size: 18px;
	margin: 30px 0 15px 0;
	padding: 12px 12px 10px 12px;
}
blockquote {
    padding: 10px 10px 10px 40px;
	margin-bottom: 20px;
}
blockquote:before{
	top: 10px;
    left: 10px;
    font-size: 22px;
}

/* ----------- 関連記事 ----------- */
.relatedArea {
	padding: 20px 0 0 0;
}
.relatedArea .entryLists {
	margin-bottom: 0;
}
.relatedArea .relatedAreaTtl {
	font-size: 16px;
	margin: 0 auto 20px auto;
}
.relatedArea .entryList {
	width: 48%;
	margin: 0 2% 20px 0;
}
.relatedArea .entryList:nth-child(2n){
	margin-right: 0;
}
.relatedArea .entryLists .entryList .entryTtl {
	font-size: 14px;
}

/*
===============================================================
       header
=============================================================== */
#header {
	text-align: center;
	position: relative;
}
.headArea {
	background-color: #FFF;
	height: 50px;
	width: 100%;
	border-bottom: solid 1px #CCC;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 99;
	box-shadow: 0 3px 6px rgba(0,0,0,0.2);/*以下色とかの装飾*/
}
.headLogo {
	width: 130px;
	position: absolute;
	top: -20px;
	left:10px;
}
.headBtnArea {
	height: 50px;
	width: 230px;
	position: absolute;
	top: 0;
	right: 0px;
	text-align: right;
}
.headBtnArea li {
	display: inline-block;
	margin-left: 0px;
	width: 50px;
	vertical-align: top;
}

/* ----------- 開閉nav ----------- */
.btn {
	cursor: pointer;
	z-index: 200;
	display: block;
	background-color: transparent;
	background-image: url(../img/common/sp/menu_icn.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 50px;
	height: 50px;
	width: 50px;
}
.peke {
	background-position: 0px -50px;
}
.drawr {
	display: none;
	background:rgba(15,15,15,0.9);
	top: 0;
	left: 0;
	width: 87%;
	padding: 0 0 15px;
	z-index: 10000;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #F4F4F4;
	font-size: 14px;
	text-align: left;
	position: fixed;
}

.accordion2 {text-align: left;}
.accordion2 .inner {display: none;}
.accordion2 p{
	cursor: pointer;
	padding: 10px 15px;
	color: #FFF;
	font-weight: bold;
	display: block;
	border-bottom: 1px solid #444;
	box-sizing: border-box;
	background: url(../img/common/arrow2.png) right 12px center no-repeat;
	background-size: 10px;
}
.accordion2 li a{
	padding: 15px 15px;
	color: #FFF;
	font-weight: bold;
	display: block;
	border-bottom: 1px solid #444;
	box-sizing: border-box;
}
.accordion2 .serviceNav {
	background:rgba(255,255,255,0.9);
	color: #444;
}
.icn_mail {
	background: #18aed7;
}
.icn_mail:before {
	font-family: "Font Awesome 5 Free";
	content: '\f0e0';
	font-weight: bold;
	margin-right: 10px;
}

/* ===============================================================
       footer
=============================================================== */
#pagetop{
	width: 15px;
	position: fixed;
	right: 5px;
	bottom: -80px;
	opacity: 0.8;
	z-index: 1000;
}
#pagetop a{
	position: relative;
	width: 15px;
	display: block;
	background: url(img/common/pagetop.png);
}
.footBnrArea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-size: cover;
	background-position: top center
}
.footBnrArea .innerBk {
	background:rgba(18,17,17,0.6);
	padding: 20px 4%;
}
.footBnrArea .innerBk .ttlArea1 {
	color: #FFF;
}
.footBnrArea .ttl1-sub:before{
	background-color: #FFF;
}
.footBnrArea .ttl1-sub:after{
	background-color: #FFF;
}
.footBnrArea .inner2 {
	width: 90%;
	margin: auto;
}
.footBnrArea .inner2 .column {
	margin-bottom: 10px;
}
.footBnrArea .footCnt {
	height: 86px;
	background:rgba(255,255,255,0.7);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footBnrArea .footCnt .footMail {
	height: 34px;
	width: auto;
}
.footBnrArea .footCnt .tel {
	height: 44px;
	width: auto;
}
.copyright {
	padding: 10px 0;
}

/* フッター固定ボタン */
#bottomBtn {
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 10003;
	background: url(../img/common/bk3.png);
	background-size:cover;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 3px solid #666;
}
.bottomBtns {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-sizing: border-box;/* Webkit系用 */
	-moz-box-sizing: border-box;/* Firefox用 */
	box-sizing: border-box;/* 標準 */
}
.bottomBtns .bottomBtn {
	width: 33.3%;
	margin: 0;
	transition: 0.6s;
	display: block;
}
.bottomBtns .bottomBtn:after{
	content: "";
	display: block;
	clear: both;
}
.bottomBtns .bottomBtn a {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	flex: 1 1 auto;
	border: 1px solid #e4007f;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	overflow:hidden;
	transition: .3s;
	border-radius: 15px;
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	background: #e4007f;
	padding: 6px 1em;
}
.bottomBtns .bottomBtn a:hover {
	cursor: pointer;
	box-shadow: inset 0px 0px 0px 1px #e4007f;
	text-decoration: none;
	color: #e4007f;
	background: #FFF;
}
.bottomBtns .bottomBtn a:hover:after {
	width: 0%;
	left: 0;
}
.bottomBtns .footBtn p {
	margin: 0px !important;
	font-weight: bold;
	color: #e4007f;
	font-size: 13px;
	font-feature-settings : "palt";
}
.bottomBtns .footBtn p:after {
	font-family: "Font Awesome 5 Free";
	content: '\f152';
	font-weight: bold;
	margin-right: 10px;
	margin-left: 5px;
}

/* フッター（2024_01_14） */
.footMenuArea {
  width: 100%;
  background: #e4e4e4;
}
.footMenu {
  width: 90%;
  margin: auto;
  padding: 20px 0;
}
.footLogo {
  width: 150px;
  margin: auto;
}
.footNav {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
.footNav li a {
  display: inline-block;
  color: #444;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px;
}

.about__links {
	display: flex;
	flex-direction: column;
}

.btn1.btnEffect span {
	text-transform: lowercase;
}