@charset "UTF-8";
/* CSS Document */

*{box-sizing:border-box;margin:0;padding:0;}

body{
	font-size:16px;
	font-family:"Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
}

a{text-decoration:none;}
ul,li{list-style:none;}

.sp{display:none;}

.anim{transition:all 2s;opacity:0;}
.anim.active{opacity:1;transform:translate(0,0);}

#logo-animation{
	position:fixed;
	left:0;
	top:0;
	z-index:9;
	background:#7ec0b8;
	height:100vh;
	width:100%;
}
#logo-animation.done{
}
#base {
    width: 50%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
		margin:auto;
}
#sample path {
    fill-opacity: 0; /*透過1で塗りの色が見える状態*/
    fill: none; /*塗りの色*/
    stroke: #fff; /*線の色*/
}
#sample.done path{
    fill-opacity: 1; /*透過1で塗りの色が見える状態*/
    fill: #fff; /*塗りの色*/
    stroke: none; /*線の色*/
}



.fadein{opacity:0;}
.slidein-top{opacity:0;transform:translate(0,-100px);}
.slidein-right{opacity:0;transform:translate(100px,0);}
.slidein-left{opacity:0;transform:translate(-100px,0);}
.slidein-bottom {opacity:0;transform:translate(0,100px);}

.more{
	position:relative;
	font-size:12px;
	text-align:center;
	background:#000;
	color:#fff;
	padding:1em 2em;
	max-width:200px;
	margin-top:16px;
}
.more.cnt{background:none;max-width:350px;margin:20px auto;letter-spacing:5px;}
.more.cnt span.arrow{position:absolute;top:45%;right:60px;transition:all 1s;}
.more.cnt:hover span.arrow{right:50px;}
.more a{color:#fff;display:block;padding:2em 3em;background:#000;}
.more:hover{opacity:.7;}
.arrow {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-top: 5px;
  border-radius: 9999px;
  background-color: #fff;
	margin-left:12px;
}
.arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 8px;
  height: 1px;
  border-radius: 9999px;
  background-color: #fff;
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%;
}
#box-works .more.cnt{margin:120px auto 20px;}

/* header
*****************************/
#header{
	position:fixed;
	top:0;
	z-index:2;
	width:100%;
	backdrop-filter:blur(8px);
}
#header.open{
	background:#fff;
	/*backdrop-filter: blur(12px);*/
}
#header .inner{
	width:100%;
	max-width:1200px;
	padding:40px 40px 20px;
	margin:0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	justify-content:space-between;
}
#logo{width:200px;}




/* mainNav
*****************************/
#mainNav{
	font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#mainNav ul{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
#mainNav ul li{
	display:inline-block;
	position:relative;
}
#mainNav ul li a{
	color:#000;
	display:block;
	padding:1em;
	font-weight:bold;
	letter-spacing:2px;
	font-size:14px;
}
#mainNav ul li a:hover{
	text-decoration:underline;
}
#mainNav ul li.menu-parents a span::after{
	content:"";
	display:inline-block;
	width:14px;
	height:13px;
	margin-left:3px;
	background:url(../img/arrow-bottom.png) no-repeat;
	background-size:100%;
}

.menu-child{
	display:none;
	position:fixed;
	top:80px;
	left:0;
	width:100%;
	text-align:right;
}
.menu-child ul{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding-right:30px;
}
.menu-child li{
	display:inline-block;
}
.menu-child li a{
	padding:20px 10px;
	display:inline-block;
	color:#000;
	display:block;
	letter-spacing:2px;
	font-size:12px !important;
	font-weight:normal !important;
}
.menu-child li a::after{
	content:" | ";
	display:inline-block;
	margin-left:20px;
	color:#bebebe;
}


/* SP button
*****************************/
.btn-trigger {
	display:none;
  position:absolute;
	top:37px;
	right:25px;
	z-index:9;
  width:30px;
  height:23px;
  cursor:pointer;
}
.btn-trigger span {
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#000;
}
.btn-trigger span {
  display:inline-block;
  transition:all .5s;
  box-sizing:border-box;
}
.btn-trigger span:nth-of-type(1) {top:0;}
.btn-trigger span:nth-of-type(2) {top:10px;}
.btn-trigger span:nth-of-type(3) {bottom:0;}
#btn01.active span:nth-of-type(1) {
  -webkit-transform:translateY(10px) rotate(-45deg);
  transform:translateY(10px) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
  opacity:0;
}
#btn01.active span:nth-of-type(3) {
  -webkit-transform:translateY(-12px) rotate(45deg);
  transform:translateY(-12px) rotate(45deg);
}


/* headline
*****************************/
.headline{
}
.page-top .headline .inner{
	position:relative;
	z-index:1;
	height:100vh;
	max-height:900px;
	min-height:300px;
	margin-bottom:80px;
	overflow:hidden;
}
[data-loading="true"] .page-top .headline .inner::before{
	content:"";
	background:#7ec0b8;
	position:absolute;
	top:0%;
	right:-35%;
	z-index:-1;
	width:100%;
  height:100%;
}
[data-loading="true"] .page-top .headline .inner::after{
	content:"";
	background:url(../img/head-bg-top.png) no-repeat right top;
	position:absolute;
	top:0;
	right:0%;
	z-index:-1;
	width:100%;
  height:100%;
}
[data-loading="true"] .page-top .headline .inner::before{
  animation: bg1 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
}
@keyframes bg1 {
	0% {
		opacity:0;
		-webkit-transform:skewX(0deg);
		transform:skewX(0deg);
		-webkit-transform:translateY(-100%);
		transform:translateY(-100%);
	}
	30% {
		transform: scaleX(1) translateX(0);
		-webkit-transform:skewX(0deg);
		transform:skewX(0deg);
		-webkit-transform:translateY(-100%);
		transform:translateY(-100%);
	}
	100% {
		transform: scaleX(1) translateX(0);
		-webkit-transform:skewX(-20deg);
		transform:skewX(-20deg);
	}
	30%, 100% {
		opacity: 1;
	}
}
.page-top .headline .inner::after{
  animation: bg2 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
}
@keyframes bg2 {
	0% {
		opacity:0;
		-webkit-transform:translateY(100%);
		transform:translateY(100%);
	}
	30% {
		-webkit-transform:translateY(100%);
		transform:translateY(100%);
	}
	100% {
		transform: scaleX(1) translateX(0);
	}
}
.page-top .headline .inner #title{
	position:absolute;
	top:40%;
	left:0;
	right:0;
	width:100%;
	max-width:1200px;
	margin:0px auto;
	padding:0 40px;
}
.page-top .headline .inner #title #catch{
	font-size:80px;
	font-weight:bold;
	line-height:1.5;
	margin-bottom:20px;
  animation: move3 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
}
@keyframes move3 {
	0% {
		opacity:0;
		-webkit-transform:translateY(-100%);
		transform:translateY(-100%);
	}
	30% {
		-webkit-transform:translateY(-100%);
		transform:translateY(-100%);
	}
	100% {
		transform: scaleX(1) translateX(0);
	}
}
.page-top .headline .inner #title p{
	line-height:2em;
}
.page-top .headline .inner #title p{
  animation: move4 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
}
@keyframes move4 {
	0% {
		opacity:0;
		-webkit-transform:translateY(100%);
		transform:translateY(100%);
	}
	30% {
		-webkit-transform:translateY(100%);
		transform:translateY(100%);
	}
	100% {
		transform: scaleX(1) translateX(0);
	}
}


#under.headline{
	margin-top:130px;
	position:relative;
	overflow:hidden;
}
[data-loading="true"] #under.headline:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	background:#7ec0b8;
	width:100%;
	height:100%;
  animation: move5 .3s ease-in;
  transform-origin: left center;
}
@keyframes move5 {
	0% {
		-webkit-transform:translateX(-100%);
		transform:translateX(-100%);
	}
	100% {
		-webkit-transform:translateX(0%);
		transform:translateX(0%);
	}
}

#headline-sub-image{
	position:relative;
	height:200px;
	margin-top:-160px;
	overflow:hidden;
}
[data-loading="true"] #headline-sub-image:after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	width:50%;
	height:100%;
  animation: move6 .3s ease-in;
  transform-origin: right center;
}
.page-service #headline-sub-image:after{background:url(../img/head-bg-service.png) no-repeat right bottom;}
.page-mission #headline-sub-image:after{background:url(../img/head-bg-mission.png) no-repeat right bottom;}
.page-works #headline-sub-image:after{background:url(../img/head-bg-works.png) no-repeat right bottom;}

.page-works-exsample #headline-sub-image:after{background:url(../img/head-bg-works-exsample.png) no-repeat right bottom;}
.page-works-mitsuhuku #headline-sub-image:after{background:url(../img/head-bg-works-mitsuhuku.png) no-repeat right bottom;}
.page-works-sanko-marin #headline-sub-image:after{background:url(../img/head-bg-works-sanko-marin.png) no-repeat right bottom;}
.page-works-sanko-marin-system #headline-sub-image:after{background:url(../img/head-bg-works-sanko-marin-system.png) no-repeat right bottom;}
.page-works-chousetsuchi-tennis #headline-sub-image:after{background:url(../img/head-bg-works-chousetsuchi-tennis.png) no-repeat right bottom;}


.page-about #headline-sub-image:after{background:url(../img/head-bg-about.png) no-repeat right bottom;}
.page-web-create #headline-sub-image:after{background:url(../img/head-bg-web-create.png) no-repeat right bottom;}
.page-web-marketing #headline-sub-image:after{background:url(../img/head-bg-web-marketing.png) no-repeat right bottom;}
.page-web-consulting #headline-sub-image:after{background:url(../img/head-bg-web-consulting.png) no-repeat right bottom;}
.page-system-development #headline-sub-image:after{background:url(../img/head-bg-system-development.png) no-repeat right bottom;}
.page-privacy #headline-sub-image:after{background:url(../img/head-bg-privacy.png) no-repeat right bottom;}
.page-contact #headline-sub-image:after{background:url(../img/head-bg-privacy.png) no-repeat right bottom;}
@keyframes move6 {
	0% {
		-webkit-transform:translateX(100%);
		transform:translateX(100%);
	}
	100% {
		-webkit-transform:translateX(0%);
		transform:translateX(0%);
	}
}

#under.headline .inner{
	position:relative;
	padding:80px 40px;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	color:#fff;
}
#under.headline #title{
	position:relative;
	z-index:1;
}
#under.headline #title p:first-child{
	font-size:14px;
	margin-bottom:10px;
}
#under.headline #title p:last-child{
	font-size:52px;
	letter-spacing:5px;
	font-weight:bold;
}




#rootPath{
	font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	clear:both;
	max-width:1200px;
	padding:0 40px;
	margin:40px auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
  flex-wrap:wrap;
	color:#999;
}
#rootPath li{
	position:relative;
	font-size:14px;
}
#rootPath li::after{
	content:"";
	width:22px;
	height:12px;
	display:inline-block;
	color:#333;
	background:url(../img/arrow-right.svg) no-repeat center center;
}
#rootPath li:last-child::after{
	content:inherit;
}
#rootPath li a{
	color:#333;
	font-weight:normal;
}
#rootPath li a:hover{
	text-decoration:underline;
}


/* main
*****************************/
#main{
	clear:both;
}
#contents{
}

#contents .inner{
	width:100%;
	max-width:1200px;
	padding:80px 40px;
	margin:0 auto;
}
#contents .bg-color{
	position:relative;
}
#contents .bg-color::before{
	content:"";
	background:#7ec0b8;
	background:linear-gradient(0deg, rgba(126,192,184,1) 0%, rgba(255,255,255,1) 100%);
	position:absolute;
	top:0;
	left:-90px;
	z-index:-1;
	width:20%;
  height:100%;
	-webkit-transform:skewX(-20deg);
  transform:skewX(-20deg);
}

.bg-color .title h2{
	font-size:40px;
	letter-spacing:5px;
	border-left:5px solid #7ec0b8;
	padding-left:20px;
	margin-bottom:32px;
}
.bg-color .title p{
	line-height:2em;
	max-width:40%;
	text-align:justify;
}


/* service */
.item-list-base{
	margin-top:40px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
  flex-wrap:wrap;
	justify-content:space-between;
}
.item-list-base li{
	width:50%;
	max-width:540px;
	position:relative;
}
.item-list-base li a{
	position:relative;
	display:block;
	color:#000;
	box-shadow:5px 5px 20px rgba(0,0,0,.1);
	transition:all .5s;
	background-size: 100%;
	margin-bottom:20px;
}
.item-list-base li:nth-child(even){
	top:120px;
}
.item-list-base li div.bg-img{
	padding:40px;
}
.item-list-base li.service-img-web a{background:#fff url(../img/service-img-web.png) no-repeat right center; background-size: 60%}
.item-list-base li.service-img-system a{background:#fff url(../img/service-img-system.png) no-repeat right center; background-size: 60%}
.item-list-base li.service-img-marketing a{background:#fff url(../img/service-img-marketing.png) no-repeat right center; background-size: 60%}
.item-list-base li.service-img-consulting a{background:#fff url(../img/service-img-consulting.png) no-repeat right center; background-size: 60%}


.item-list-base li div.bg-img h3{
	margin-bottom:1em;
	font-size:1.5em;
	text-shadow:1px 1px 0px #fff;
}
.item-list-base li div.bg-img h3 span{
	display:block;
	font-weight:normal;
	font-size:12px;
	padding-left:1px;
}
.item-list-base li div.bg-img p{
	width:40%;
	text-align:justify;
	line-height:1.5;
	font-size:13px;
}

/* works */
#box-works .item-list-base li{
	margin-bottom:20px;
}
#box-works img{
	vertical-align:bottom;
}
#box-works a p{
	padding:20px;
	font-weight:bold;
	font-size:1.2em;
	background:#fff;
}
#box-works a p span{
	display:block;
	font-weight:normal;
	font-size:12px;
}
#box-works a p span.works{
	color:#999;
}

/* about */
#box-about{
	background:url(../img/about-bg.jpg) no-repeat bottom right;
}
.item-list-base li.about-img-company a {
	background: #fff url(../img/about-img-company.png) no-repeat right center;
	background-size: 60%;
}
#box-about #comment{
	font-weight:bold;
	font-size:1.2em;
	margin-top:16px;
}
.item-list-base li a:hover{
	background-size:65%;
}


/* about(company) */	
#company-info{
	margin:30px 0;
	padding:80px 80px 40px;
	background:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.1);
}
#company-info table{
	text-align:left;
	width:100%;
}
#company-info table th,
#company-info table td{
	padding:2em;
	vertical-align:middle;
	font-size:14px;
}
#company-info table th{
	font-weight:bold;
	width:200px;
	min-width:120px;
	border-top:1px solid #333;
}
#company-info table td{
	border-top:1px solid #eee;
	border-left:20px solid #fff;
}


/* privacy */
#privacy #info{
	max-width:1200px;
	margin:0 auto;
	padding:80px 80px 40px;
	background:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.1);
}
#privacy #info dl{
	margin-top:60px;
}
#privacy #info dl dt{
	font-size:1.5em;
	font-weight:bold;
	margin-bottom:20px;
	border-left:5px solid #7ec0b8;
	padding-left:10px;
}
#privacy #info dl dd{
	margin-bottom:60px;
	text-align:justify;
}
#privacy #info dl dd ol{
	margin-top:2em;
	margin-left:2em;
	margin-bottom:2em;
	list-style:inside;
}
#privacy #info dl dd ol li{
	list-style:decimal;
	margin-bottom:1em;
}
/*
ol li::marker{color:#22ae9d;}
*/


/* mission */
#mission-info p:first-child{
	display:block;
	font-size:2em;
	margin-bottom:30px;
	font-weight:bold;
}
#mission-info p:last-child span{
	display:inline-block;
	max-width:50%;
	line-height:2;
}
#mission-bg-img{
	padding-left:30%;
	padding-top:60px;
}




/* contact */
#contact-form{
	max-width:900px;
	margin:60px auto;
	background:#fff;
	padding:60px;
	box-shadow:0 0 10px rgba(0,0,0,.1);
}
#contact p.info{
	max-width:640px;
	margin:0 auto;
}
.contac-form-item{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	padding:2em;
}
.contac-form-item p{
	width:30%;
	margin-top:1em;
}
.contac-form-item p span{
	color:#fff;
	background:#ff7350;
	font-size:13px;
	border-radius:3px;
	display:inline-block;
	padding:0 5px;
	margin-left:5px;
}
.contac-form-item input[type="text"],
.contac-form-item select,
.contac-form-item textarea{
	padding:1.4em;
	background:#f8f8f8;
	border:none;
	width:70%;
	font-size:16px;
	max-width:520px;
	-webkit-appearance:none;
	border:1px solid #ccc;
}
.contac-form-item textarea{
	min-height:8em;
}
.input-select{
	position:relative;
	width:70%;
	display:block;
}
.input-select select{
	width:100%;
	background:#f8f8f8 url(../img/arrow-bottom.png) no-repeat right center;
	background-position: 96% center;
}
#send-check-btn{
	margin:20px auto 40px;
	text-align:center;
}
#send-check-btn a{
	text-decoration:underline;
}
#send-check-btn label{
	display:inline-block;
	padding:10px 20px;
	border:1px solid #ccc;
	cursor:pointer;
}
#send-check-btn label input{
	margin-right:5px;
}
#btn-submit{
	text-align:center;
}
#btn-submit input[type="submit"]{
	display:inline-block;
	width:300px;
	color:#fff;
	background:#000;
	padding:1.4em 0;
	border:none;
	cursor:pointer;
	-webkit-appearance:none;
}
#btn-submit input[type="submit"].ng{
	opacity:.3;
	cursor:default;
}





#contact-banner{
	clear:both;
	margin-top:80px;
}
.contact-banner-bg{
	background:url(../img/contact-banner-bg.jpg) no-repeat center center;
	background-size:cover;
}
#contact-banner ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	justify-content:space-between;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:80px 40px;
}
#contact-banner li{
	background:#fff;
	width: 46%;
	text-align:center;
	box-shadow:5px 5px 20px rgba(0,0,0,.2);
	margin:0 auto;
}
#contact-banner li .inner{
	padding:40px;
}
#contact-banner li .inner .title{
	font-size:24px;
	font-weight:bold;
	letter-spacing:5px;
}
#contact-banner li .inner .title span{
	font-size:12px;
	font-weight:normal;
	letter-spacing:5px;
	display:block;
}
#contact-banner li .inner .text{
	margin:20px auto;
	max-width:300px;
}
#contact-banner li .inner a{
	display:block;
	background:#000;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	padding:2em 0;
}
#contact-banner li .inner a:hover{
	opacity:.7;
}
#contact-banner li:last-child{display:none;}



/* flow-step
*****************************/
#flow-step{margin-top:40px;}
#flow-step ul{
	clear:both;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content:space-around;
}
#flow-step ul li{
	margin:60px 0 0;
	width:30%;
	text-align:center;
}
#flow-step ul li p.ttl{
	font-weight:bold;
	margin-bottom:1em;
	font-size:1.2em;
}
#flow-step ul li p.ttl span{
	display:block;
	margin-bottom:1.5em;
	padding:10px 30px;
	border:3px double #111;
	/*
	background:#111;
	color:#fff;
	-webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
	*/
}
#flow-step ul li p.info{
	font-size:13px;
	line-height:2;
}
#flow-step .tiles li{
	margin:35px 0 0;
	background:#fff;
	box-shadow: 0px 0px 30px rgba(0,0,0,.1);
}
#flow-step .tiles li div.ttl{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	padding:30px 0px 30px 30px;
  align-items: center;
	line-height:1.4;
	border-bottom:1px solid #eee;
}
#flow-step .tiles li p.icon{
	width:80px;
}
#flow-step .tiles li p.icon img{
	width:auto;
	height:80px;
}
#flow-step .tiles li p:last-child{
	padding:30px;
}



/* footer
*****************************/
#footer{
	background:#7ec0b8;
	padding-bottom:80px;
}
#footer a{color:#fff;}
#footer h3{margin-bottom:.7em;font-size:24px;}
#footer .inner{
	font-weight:bold;
	color:#fff;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:80px 40px 0px;
}
#footer .row:first-child{margin-bottom:60px;}
#footer ul{
	margin-bottom:20px;
}
#footer ul li{
	display:inline-block;
	margin-right:1em;
}
#footer ul li::after{
	content:" | ";
	margin-left:1em;
}
#footer ul li:last-child::after{
	content:"";
}
#footer ul li.title{
	min-width:16em;
}
#footer ul li.title:after{
	content:"";
}
#footer ul li a{
	font-weight:normal;
	font-size:14px;
}
#footer ul li a:hover{text-decoration:underline;}

p#copyright{max-width:1200px;margin:20px auto 0;padding:40px;color:#fff;font-weight:normal;font-size:12px;text-align:right;}





/* cookieBox
*****************************/
.c-cookie__box {
  box-sizing: border-box;
  display: flex;
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: center;
  width: 100%;
  padding: 20px 40px;
  background: #fff;
	box-shadow: 0px -5px 10px rgba(0,0,0,.1);
}
.c-cookie__box .c-container.en {
  display: none;
}
.c-cookie__box .c-container {
  display: flex;
  align-items: center;
}
.c-cookie__text {
  width: 75%;
  margin: 0 60px 0 0;
  color: #000;
  font-size: 13px;
  line-height: 1.75;
}
.c-cookie__btn {
  display: flex;
}
.c-cookie__btn--consent a,
.c-cookie__btn--detail a {
  display: block;
  padding: 10px;
  background-color: #ababab;
  color: #333;
  font-size: 13px;
  transition: 0.4s ease;
}
.c-cookie__btn--consent a:hover,
.c-cookie__btn--detail a:hover {
  opacity: 0.7;
}
.c-cookie__btn--consent {
  margin: 0 25px 0 0;
}
.c-cookie__btn--consent a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 48px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}
.c-cookie__btn--detail a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 48px;
  border: 1px solid #333;
  background-color: transparent;
  color: #333;
  text-decoration: none;
}

#c-cookie-close-btn{
	position:absolute;
	top:8px;
	right:15px;
	color:#333;
	cursor:pointer;
}




/* Under 900px width
*****************************/
@media screen and (max-width: 900px){
	.sp{display:block;}
	
	#header .inner{
		padding:20px 20px 10px;
		margin:0 auto;
		display:block;
	}
	#logo{width:200px;}
	
	#mainNav{
		display:none;
		background:#7ec0b8;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		padding:10px 80px 10px 10px;
	}
	#mainNav ul li,
	.menu-child{
		display:block !important;
	}
	#mainNav ul li a{
		display:block;
		font-size:26px !important;
		font-weight:bold !important;
		padding:20px 0px 10px 20px;
		color:#fff;
	}
	.btn-trigger {
		display:block;
	}
	.menu-child{
		background:none;
		top:inherit;
    position:inherit;
    text-align:inherit;
		padding-left:2em;
	}
	#mainNav .menu-child li a{
		font-size:18px !important;
		padding:10px;
	}
	#mainNav .menu-child li a::after{
		content:inherit;
	}
	#mainNav ul li.menu-parents a span::after{
		display:none;
	}
	
	.page-top .headline .inner{
		max-height:500px;
		min-height:300px;
		margin-bottom:60px;
	}
	[data-loading="true"] .page-top .headline .inner::before,
	[data-loading="true"] .page-top .headline .inner::after{
		right:-55%;
	}
	.page-top .headline .inner #title{
		left:inherit;
		right:inherit;
		padding:0 30px;
	}
	.page-top .headline .inner #title #catch{
		font-size:24px;
	}
	.page-top .headline .inner #title p:last-child{
		width:70%;
	}
	
	#contents .inner{
		padding:30px;
	}
	#contents .bg-color::before{
		top:0;
		left:-120px;
		z-index:-1;
		width:40%;
	}
	
	

	.bg-color .title h2{
		font-size:28px;
		margin-bottom:16px;
	}
	.bg-color .title p{
		max-width:100%;
	}
	
	.item-list-base{
		display:block;
	}
	.item-list-base li{
		width:100%;
		margin:0 auto 30px;
	}
	.item-list-base li a{
		background:#fff !important;
	}
	.item-list-base li:nth-child(even){
		top:inherit;
	}
	.item-list-base li div.bg-img{
		padding:0px;
	}
	.item-list-base li div.bg-img .sp{
		height:100px;
		overflow:hidden;
		margin-left:180px;
	}
	.item-list-base li div.bg-img h3{
		margin-bottom:0;
		padding:30px 30px 10px 30px;
		font-size:1.3em;
		margin-top:-95px;
	}
	.item-list-base li div.bg-img p{
		width:100%;
		text-align:justify;
		padding:30px;
	}
	
	.more{
		max-width:100%;
	}
	
	#box-about{
		background:none;
	}
	
	#box-works .more.cnt{
		margin-top:40px;
	}
	
	
	
	#under.headline{
		margin-top:100px;
	}
	#under.headline #title p:last-child{
		font-size:32px;
	}
	#under.headline .inner{
		padding:40px 40px;
	}
	#headline-sub-image{
		position:relative;
		height:100px;
		margin-top:-20px;
		overflow:hidden;
	}
	[data-loading="true"] #headline-sub-image:after{
		content:"";
		position:absolute;
		top:0;
		right:0;
		z-index:1;
		width:100%;
		height:100px;
		animation: move6 .3s ease-in;
		transform-origin: right center;
		background-size:70% !important;
	}
	
	
	
	#company-info{
		padding:20px 20px 0 20px;
	}
	#company-info table{
		text-align:left;
		width:100%;
	}
	#company-info table th,
	#company-info table td{
		padding:2em 0;
		vertical-align:middle;
		font-size:14px;
	}
	#company-info table th{
		width:20%;
		min-width:6em;
	}
	
	
	
	#contact-form{
		margin:40px auto;
		padding:30px;
	}
	.contac-form-item{display:block;padding:0;margin-bottom:20px;}
	.contac-form-item p{width:100%;margin-bottom:10px;}
	.input-select{width:100%;}
	.contac-form-item input[type="text"], .contac-form-item select, .contac-form-item textarea{width:100%;}
	#send-check-btn{font-size:12px;}
	#send-check-btn label{margin-top:10px;}
	#btn-submit input[type="submit"]{width:100%;}
	
	
	#contact-banner{margin-top:0;}
	#contact-banner ul{
		display:block;
		padding:30px 30px 50px;
	}
	#contact-banner li{
		width: 100%;
		margin-top:30px;
	}
	#contact-banner li .inner a{
		padding:1.4em 0;
	}
	
	#privacy #info{
		padding:40px;
		font-size:13px;
	}
	#privacy #info dl dt{
		font-size:16px;
	}
	#privacy #info dl dd{
		margin-bottom:30px;
	}
	.page-privacy #contents .bg-color::before{
		max-height:600px;
	}
	
	
	#mission-info p:first-child{
		font-size:1.3em;
	}
	#mission-info p:last-child span{
		max-width:inherit;
		text-align:justify;
	}
	#mission-bg-img{
		padding-left:0;
		padding-top:30px;
	}
	
	
	#footer{
		padding-bottom:20px;
	}
	#footer .inner{
		padding:30px 30px 0;
	}
	#footer ul{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		justify-content:space-between;
		margin-bottom:0;
	}
	#footer ul li{
		width:100%;
		margin:0;
		padding:1px;
	}
	#footer ul li:after{
		content:inherit;
	}
	#footer ul li a{
		position:relative;
		display:block;
		padding:1em;
		background:rgba(255,255,255,.2);
	}
	#footer ul li a:after{
		content:"";
		position:absolute;
		top:50%;
		right:10px;
		margin-top:-6px;
		z-index:1;
		width:15px;
		height:15px;
		background:url(../img/arrow-right-white.svg) no-repeat center center;
	}
	#footer .row:first-child{
		margin-bottom:20px;
	}
	p#copyright{padding:0 20px;text-align:center;}
	
	.c-cookie__box .c-container{
		display:block;
	}
	.c-cookie__text{
		width:100%;
		line-height:1.2;
		margin:0 0 10px;
		font-size:11px;
	}
	
	/* flow-step
	*****************************/
	#flow-step .bg-color{
		overflow:hidden;
	}
	#flow-step ul{
		display:block;
	}
	#flow-step ul li{
		margin:20px 0 40px;
		width:100%;
	}
	#flow-step ul li p.ttl{
		font-weight:bold;
		margin-bottom:.4em;
		font-size:1em;
	}
	#flow-step ul li p.ttl span{
		font-size:.7em;
	}
	#flow-step .tiles li{
		margin:0 0 30px;
	}
	#flow-step .tiles li p.icon{
		width:60px;
	}
	#flow-step .tiles li p.icon img{
		width:auto;
		height:60px;
	}
	#flow-step .tiles li div.ttl{
		padding:20px 0px 20px 30px;
	}
	#contents #web-development .bg-color::before{
		left: -240px;
	}
}
/* Under 540px width
*****************************/
@media screen and (max-width: 540px){
}