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

*{
	padding: 0;
	margin: 0;
}

img{
	width: 100%;
}

.main_box{
	max-width: 1000px;
	margin: auto;
	padding: 1rem 0;
}
.container{
	display: inline-block;
	width: 100%;
}
.float_l{
	float: left;
	width: 50%;
}
.float_r{
	float: right;
	width: 50%;
}
span.anchorlink {
	position: relative;
	top: -120px;
	display: block;
}
input.cssacc {
    display: none;
}
.accshow {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.cssacc:checked + .accshow {
    height: auto;
    opacity: 1;
}
/*--=============カンプ=============--*/
.access{
	padding-top: 1rem;
}
/*=========================
commmon
===========================*/
section:first-child {
	padding-top: 5rem;
}
section:last-child {
	padding-bottom: 5rem;
}
section:first-child>.main_box>h2:first-child {
	text-align: left;
	color: #aaa;
	font-size: 2.1rem;
	font-family: 'Noto serif JP',serif;
}
main h2 {
	text-align: center;
	color: #4a58a0;
	font-size: 1.8rem;
	letter-spacing: 4px;

	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
}	
main h2 .small {
	display: block;
	font-size: 0.8rem;
	line-height: 0.5rem;
}
main h2 span {
	margin: 0 2rem;
}
main h2:before,
main h2:after {
	content: '';
	background: #231815;
	height: 3px;
	-webkit-flex: 0 0 90px;
	-moz-flex: 0 0 90px;
	-ms-flex: 0 0 90px;
	-o-flex: 0 0 90px;
	flex: 0 0 90px;
}
ol li a {
	margin-left: 1.5rem;
}
ol li {
	line-height: 1.8rem;
}
.square li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0c8";
	font-size: 0.5rem;
	color: #dc1f3f;
	margin-right: 1rem;
	line-height: 1.5rem;
	font-weight: bold;
	width: 6px;
	display: block;
	float: left;
}
.square li {
	clear: both;
}
.line_green {
	border-bottom: 3px dotted #329695;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}
.line_gray {
	border-bottom: 3px dotted #ddd;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}
/*=========================

===========================*/
main {
	min-height: 120vh;
	display: block;
}
main p {
	line-height: 1.8rem;
	letter-spacing: 1px;
}
main .right p,
main .left p {
	padding: 0.5rem;
	line-height: 1.8rem;
	letter-spacing: 1px;
}
h3, .headline01 {
	font-size: 1.3rem;
	padding: 0.3rem 0.5rem 0.5rem;
	border-bottom: 1px solid;
	color: #4a58a0;
	border-left: 12px solid;
	margin-top: 2rem;
}
.headline02 {
	color: #329695;
	font-size: 1.2rem;
	font-weight: bold;
	background: linear-gradient(transparent 65%,#eee 65%);
	display: inline-block;
	padding: 0 1rem;
	margin: 1rem 0;
}
.headline03 {
	border-radius: 0;
	font-family: "Noto serif JP";
	font-size: 1.5rem;
	color: #dc1f40;
	background: linear-gradient(transparent 50%,#e7e7e7 50%);
	padding: 0 1.5rem;
	margin: 0.8rem 0;
}
.link_red p:before {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	color: #dc1f3f;
	padding-right: 0.5rem;
	font-weight: bold;
}
.link_red a {
	color: #000;
}
.link_red p {
	font-size: 1.2rem;
	line-height: 2.5rem;
}
.link_red a:hover p {
	opacity: 0.8;
}
/*=========================
COMPANY
===========================*/
/*--===== greeting =====--*/
#COMPANY .greeting {
	background: url(../img/company/greeting_bg.jpg)no-repeat;
	background-position: left bottom;
	background-size: 720px;
}
#COMPANY .greeting p {
	text-shadow: 1px 2px 1px #fff;
}
#COMPANY .greeting .flex dl {
	color: #775f00;
	margin: 0 1.5rem;
	background: #eee;
	padding: 0.5rem;
}
#COMPANY .greeting .flex dl dd {
	border-top: 1px solid;
	margin: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid;
}
#COMPANY .greeting .flex p {
	padding-top: 2rem;
	line-height: 2rem;
}
#COMPANY .greeting dl dd p strong {
	color: #775f29;
	margin: 1.5rem 0 0.5rem;
	display: block;
}
#COMPANY .greeting .main_box div:last-child dl {
	padding: 1rem;
	background: rgba(255, 255, 255, 0.6);
}
/*--===== contents =====--*/
#COMPANY .contents {
	background: #f0f2ff;
}
#COMPANY .contents>div>p {
	margin: 2rem 0;
	font-size: 1.2rem;
	color: #e03186;
}
#COMPANY .contents dl dd {
	margin: 1rem 2rem;
}
#COMPANY .contents ol {
	position: relative;
	min-height: 330px;
	width: 80%;
	margin: auto;
}
#COMPANY .contents ol li {
	margin: 0.5rem;
	background: #4a58a0;
	width: 24.5%;
	height: 240px;
	min-width: 240px;
	border-radius: 150px;
	padding: 6rem 1rem;
	text-align: center;
	color: #fff;
}
#COMPANY .contents ol li:before {
	content: "1";
	display: block;
	margin-top: -2rem;
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
	font-family: "Noto serif JP";
}
#COMPANY .contents ol li:nth-child(2):before {
	content: "2";
}
#COMPANY .contents ol li:nth-child(3):before {
	content: "3";
}
#COMPANY .contents ol li:nth-child(4):before {
	content: "4";
}
#COMPANY .contents ol li:first-child {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(74, 88, 160, 0.8);
}
#COMPANY .contents ol li:nth-child(2) {
	position: absolute;
	top: 20%;
	left: 22%;
	background: rgba(220, 63, 135, 0.8);
}
#COMPANY .contents ol li:nth-child(3) {
	position: absolute;
	top: 0;
	right: 22%;
	background: rgba(33, 115, 199, 0.8);
}
#COMPANY .contents ol li:nth-child(4) {
	position: absolute;
	top: 20%;
	right: 0;
	background: rgba(60, 60, 60, 0.8);
}
#COMPANY .contents ul.flex li {
	margin: 0.5rem;
	border: 1px dashed #4a8cd2;
	padding: 0 1rem 1rem;
	width: 33.333%;
}
#COMPANY .contents ul.flex li h3 {
	border: none;
	text-align: center;
	color: #e0629f;
}
#COMPANY .contents ul.flex li h3 .contents_1,
#COMPANY .contents ul.flex li h3 .contents_2,
#COMPANY .contents ul.flex li h3 .contents_3,
#COMPANY .contents ul.flex li h3 .contents_4 {
	background: #6b76b3;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	color: #fff;
}
#COMPANY .contents ul.flex li h3 .contents_2{
	background: #e0629f;
}
#COMPANY .contents ul.flex li h3 .contents_3{
	background: #4a8cd2;
}
#COMPANY .contents ul.flex li h3 .contents_4{
	background: #606063;
}
#COMPANY .contents dl .headline01 {
	color: #fff;
	margin-top: 3rem;
}
#COMPANY .contents dl:before {
	content: "\f106";
	display: block;
	width: 30px;
	margin: auto;
	height: 30px;
	margin-top: -5rem;
	font-size: 56px;
	color: #e0629f;
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
}
#COMPANY .contents dl {
	padding: 1.5rem;
	width: 90%;
	margin: 3rem auto 0;
	border-radius: 1rem;
	background: #e0629f;
	color: #fff;
}
/*--===== history =====--*/
#COMPANY .history {
	padding-top: 6rem;
}
#COMPANY .history .flex li {
	width: 50%;
}
#COMPANY .history ul.flex {
	background: #f3f3f3;
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	margin-top: 3rem;
}
#COMPANY .history dl {
    border-left: 1px solid #aaa;
    margin-left: 1rem;
    padding: 0.5rem 1rem 0.25rem;
}
#COMPANY .history dt {
    color: #4a58ac;
}
#COMPANY .history dd {
    margin-left: 1rem;
	font-size: 0.95rem;
}
#COMPANY .history dt {
    color: #4a58ac;
}

/*=========================
FRANCHISE
===========================*/
/*--===== explanation =====--*/
#FRANCHISE .explanation {
	background: #ffafd0;
	background: url(../img/franchise/franchise_bg.png) no-repeat #ffafd0;
	background-position: 100% 55px;
	background-size: 55%;
}
#FRANCHISE .explanation h2 {
	color: #fff;
}
#FRANCHISE .explanation dl {
	margin-top: 2rem;
	border: 1px solid #8c4663;
	margin: 0.5rem;
	padding: 1rem;
}
#FRANCHISE .explanation dt {
	font-size: 1.1rem;
	color: #775f00;
}
#FRANCHISE .explanation dd {
	margin: 0.5rem 1rem;
	border-left: 1px solid #aaa;
	padding: 1rem 0.5rem;
}
#FRANCHISE .explanation dd li p{
	margin-left: 1.5rem;
}
#FRANCHISE .explanation dd li {
	border-bottom: 1px dashed #8c4663;
	padding-bottom: 0.25rem;
}
#FRANCHISE .explanation dd ul li:before {
	content: "・";
	display: block;
	float: left;
}
#FRANCHISE .explanation dd ol li:before {
	display: block;
	content: '1.';
	font-family: "Noto serif JP";
	font-style: italic;
	float: left;
}
#FRANCHISE .explanation dd ol li:nth-child(2):before {
	content: '2.';
}
#FRANCHISE .explanation dd ol li:nth-child(3):before {
	content: '3.';
}
/*--===== contact =====--*/
#FRANCHISE .contact {
	background: #fff5f5;
}
#FRANCHISE .contact h3 {
	color: #8c4663;
}

/*=========================
CONSULTING
===========================*/
/*--===== topic =====--*/
#CONSULTING {
	background: #eee;
}
#CONSULTING .topic p {
	font-size: 1.1rem;
	line-height: 2rem;
}
#CONSULTING .topic span {
	color: #003d9c;
}
#CONSULTING .topic .button {
	width: 50%;
	min-width: 300px;
}
/*=========================
#RECRUIT
===========================*/
/*--===== details =====--*/
#RECRUIT .details dl {
	padding: 1rem;
}
#RECRUIT .details dt {
	font-size: 1.3rem;
	color: #fff;
	margin: 3rem auto 1rem;
	background: #808abd;
	padding: 0.5rem 1rem;
	text-align: center;
	width: 80%;
	min-width: 300px;
	}
#RECRUIT .details table.table01 tbody td p{
	color: #555;
}
#RECRUIT .details .button {
	background: #6978c5;
	margin: 1rem auto;
	color: #fff;
	width: 45%;
	min-width: 300px;
}
@media screen and (min-width:1024px){
	main {
		min-height: 85vh;
	}
}