@charset "utf-8";
html {
	scroll-behavior: smooth;
	scroll-padding-top: 75px;
}

* {
	margin: 0px;
}
body {
	font-family: montserrat, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	color: #666;
//	text-align: center;
	-webkit-text-size-adjust: 100%;
	background-color: #ec8686;
}
body p {
	padding-top: 5px;
	padding-bottom: 5px;
}
a {
	color:#F2AAAA;
	text-decoration: none;
}
img {
	border-style: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

h2 {
	font-size: 24px !important;
	padding-bottom: 10px !important;
}

iframe {
    width: 90%;
	aspect-ratio: 16 / 9;
//	object-fit: cover;
}
#img_block {
	clear: both;
	background-color: #EEE;
	padding-top: 25px;
	height: 730px;
//	height: 80vh;
//	padding-bottom: 3%;
}


@media screen and (max-width: 500px) {
#img_block {
	height: initial;
}
}

#marge_block {
    clear: both;
    background-color: #eee;
	padding-top: 10px;
}

#block {
	clear: both;
	background-color:#EC8686;
}
#block2 {
	clear: both;
	background-color:#EC8686;
	padding-top: 70px;
}
#block3 {
	clear: both;
	background-color:#FAE1E1;
	padding-top: 30px;
	padding-bottom: 20px;
}
#block4 {
	clear: both;
	background-color: #EEE;
	padding-top: 60px;
}
#block5 , #block9 {
	clear: both;
	background-color: #FFF;
	padding-top: 40px;
}
#block6 {
	clear: both;
    background: repeating-linear-gradient(-45deg, #F2AAAA, #F2AAAA 90px, #eee 0px, #eee 550px);
}
#block7 {
	clear: both;
	background-color: #eee;
    padding-top: 50px;
    margin-top: -30px;
}
#block8 {
	clear: both;
}
#block10 , #block11 , #colophon {
	clear: both;
	background-color: #FFF;
}

#img_content {
	padding-bottom: 80px;
	margin: 0 auto;
    width: 100%;
}

#content1 {
	position: relative;
	padding-top: 40px;
	margin-right: 5px;
	margin-left: 5px;
}

#content2 , #content4 , #content5 , #content6 , #content7 , #content8 , #content9 {
	padding-bottom: 80px;
	margin: 0 auto;
    width: 90%;
}

#content3 {
	padding-top: 20px;
	padding-bottom: 10px;
    margin: 0 auto;
    width: 90%;
}

#content6 {
	padding-bottom: 0px;
}

#content9 {
	padding-top: 50px;
	padding-bottom: 80px;
	margin: 0 auto;
    width: 90%;
}

#content10 , #content11 {
	padding-top: 0px;
	padding-bottom: 80px;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}

/* footer */
/*
footer {
	clear: both;
	margin-top: 20px;
	border-top: 1px solid #BBBBBB;
	padding-top: 50px;
//	padding-bottom: 50px;
}
footer a:link {
	color: #000000;
	text-decoration: none;
}
footer a:visited {
	color: #000000;
	text-decoration: none;
}
*/

/*メニューマウスオーバー*/
li.menu-item > a div#def , .mobile-menu > a div#def {
	display:inline-block;
	width:110px;
	text-align: center;
}
li.menu-item > a:hover div#def , .mobile-menu > a:hover div#def {
	display:none;
	text-align: center;
}
li.menu-item > a div#over , .mobile-menu > a div#over {
	display:none;
	font-size:12px;
	width:110px;
	text-align: center;
}
li.menu-item > a:hover div#over , .mobile-menu > a:hover div#over {
	display:inline-block;
	font-size:12px;
	text-align: center;
	margin-bottom: -2px;
}

/*contentタイトル*/
#content2 > h2 {
	color: #fff;
	text-align: center;
}

h2 > hr {
	width:50px !important;
	border-top: 2px solid !important;
	margin: 0 auto !important;
	margin-bottom: -5px !important;
}

h2 > #sub {
	font-size:16px;
	font-weight: bold;
}

#content2 hr {
	color: #fff;
	background-color: #fff;
}

h3 {
	font-size:16px;
}

/*solution*/
#content1 {
	position: relative;
}

@media (width < 780px) {
	#content1 > div {
		color: #fff;
		text-align: center;
		line-height:200%;
		width: 80%;
        margin: 0 auto;
	}
}
@media (780px <= width < 1000px) {
	#content1 > div {
		color: #fff;
		text-align: left;
		position: absolute;
		top: 85px;
		left: 60px;
		line-height:200%;
		width: 35%;
	}
}
@media (1000px <= width) {
	#content1 > div {
		color: #fff;
		text-align: left;
		position: absolute;
		top: 90px;
		left: 14%;
		line-height:200%;
		width: 28%;
	}
}

#content1 img {
	margin: auto;
    display: block;
}
  
.solution_container {
	max-width: 600px;
	margin:30px auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-template-rows: 1.6em 1.6em;
	grid-auto-columns: 1fr;
	gap: 20px 20px;
	justify-content: center;
	grid-auto-flow: row;
}

.solution_container > .solution01 , .solution_container > .solution02 , .solution_container > .solution03 , .solution_container > .solution04 {
	width: 80%;
	margin: 0 auto;
	background-color: #fff;
	color: #ec8686;
	font-weight: bold;
	text-align: center;
}

.solution_container2 {
	max-width: 600px;
	margin:30px auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-auto-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: 20px 20px;
	justify-content: center;
	grid-auto-flow: row;
}

.solution_container2 > .solution01 , .solution_container2 > .solution02 {
	width: 80%;
	margin: 0 auto;
	color: #fff;
	text-align: justify;
}

.solution_title {
	color: #fff;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
}

.solution_container2 img {
	display: block;
	margin-bottom: 15px;
	width: 100%;
}

/*youtube*/
.youtube_container {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	border-radius: 10px;
	gap: 20px 20px;
	justify-content: center;
	grid-auto-flow: row;
}

@media (width < 780px) {
	.youtube_container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr ;
		grid-auto-columns: 1fr;
	}
	.youtube_movie  {
	    width: 100%;
	}
}
@media (780px <= width) {
	.youtube_container {
		display: grid;
		grid-template-columns: 43% 42%;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		grid-auto-flow: row;
		gap: 2px 2px;
		grid-template-areas:
			"youtube youtube_illust"
			"youtube_movie youtube_movie"
	}
	.youtube_movie  {
	    width: 510px;
	}
}

@media (width <= 560px) {
	.youtube_container > .youtube {
		 width: 65%;
	}
	.youtube_movie  {
	    width: 100%;
	}
}

.youtube_container > .youtube {
	margin: 22px auto;
	background-color: #fff;
	color: #ec8686;
	font-weight: bold;
}

.youtube_container img {
    border-style: none;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    position: relative;
//    bottom: 18px;
}

.youtube_container > .youtube_illust {
	margin: 0 auto;
//	background-color: #fff;
	color: #ec8686;
	font-weight: bold;
	margin-top: -43px;
}

.youtube_container > .youtube_movie {
	margin: 0 auto;
	padding-bottom: 30px;
	color: #ec8686;
	font-weight: bold;
	text-align: center;
}

.youtube_movie > img {
    border-style: none;
    height: auto;
    width: 90%;
    margin: 20px auto 30px;
}

/*iOS横向き*/
.iphone , ipad {
	@media (orientation: landscape){
	  .youtube_movie iframe {
		margin-left:-110px;
		width:400px;
	  }
	  .melody_movie iframe {
		margin-left:-45px;
		width:400px;
		text-align: center;
	  }
	  #block11 iframe {
//	  	margin-left:-50px;
		width:300px;
	  }
	  
	}
}

/*melody*/
.melody_container {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	border-radius: 10px;
}

.melody_container > .melody {
	text-align: center;
}

.melody_container > .melody_movie {
	margin: 0 auto;
	padding-bottom: 30px;
	color: #ec8686;
	font-weight: bold;
	text-align: center;
}


@media (width < 780px) {
	.melody_movie  {
	    width: 100%;
	}
}
@media (780px <= width) {
	.melody_movie  {
	    width: 510px;
	}
}

@media (width <= 560px) {
	.melody_movie  {
	    width: 100%;
	}
}

.melody_movie > img {
    border-style: none;
    height: auto;
    width: 90%;
    margin: 20px auto 30px;
}


/*adaw*/
.adaw_container {
	max-width: 600px;
	height: 50px;
	margin:30px auto;
	background-color: #fff;
	border-radius: 10px;
}

.adaw_container > div {
	padding-top: 14px;
	text-align: center;
}

.adaw_container > div > a {
    display: block;
	border-radius: 10px;
    text-decoration: none;
}

.adaw_container a:hover {
	background-color: #F2AAAA;
    color: #FFF !important;
    text-decoration: none;
    margin: -14px auto;
    padding: 14px;
}

/*Topix & Blog*/
.topix_container {
	max-width: 600px;
	padding-top: 50px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	text-align: center;
}


/*更新履歴*/
.top_new_content {
//    background-color: #f5f5f5;
}

.new_cate {
    display: inline-block;
    border: 1px solid #666;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    padding: 2px 15px;
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    width: 110px;
    height: 20px;
    text-align: center;
}

.top_new_content ul {
    text-align: left;
    margin: 15px 10px;
}

.top_new_content li {
    padding: 15px 0;
    border-bottom: 1px solid #666;
	font-size: 1.16em;
    line-height: 1.8;
    font-weight: normal;
    margin: 0 10px;
}

.top_new_content li .new_date , .entry-meta .new_date {
    color: #EC8686;
}

.top_new_content li .new_title {
    padding: 15px 15px;
}
.new_more {
    margin: 20px auto 20px;
    padding-bottom: 20px;
}

/*Company*/
.company_container {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	border-radius: 10px;
	text-align: center;
}

.company_container h3 {
	font-size:14px;
	font-weight: bold;
	text-align:left;
	white-space: nowrap;
}

.company_container table {
    background: #fff;
    border-spacing: 0;
    margin-bottom: 50px;
    width: 300px;
    float: left;
    padding: 10px;
}

@media (width < 780px) {
	.company_container table  {
	    width: 100%;
	}
}
@media (780px <= width) {
	.company_container table  {
	    width: 300px;
	}
}

@media (width <= 560px) {
	.company_container table  {
	    width: 100%;
	}
}

@media (orientation: landscape) {
	.company_container table  {
	    width: 100%;
	}
}

.company_container table th, .company_container table td {
    border-bottom: 1px solid #666;
    padding: 10px;
    text-align: justify;
    text-align-last: left;
}

.company_container table.history th {
	white-space: nowrap;
}

/*代表メッセージ*/
div.message {
	clear: both;
}

details.message summary {
	display: block;
	text-align: center;
}

details.message summary::-webkit-details-marker {
	display: none;
	text-align: center;
}

details.message {
	cursor: pointer;
	display: block;
    max-width: 540px;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 50px;
    border: 1px solid #666;
}
details.message summary {
	cursor: pointer;
	display: block;
    max-width: 540px;
    margin: 0px auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 50px;
}

details.message .icon {
	display: block;
	position: relative;
	width: 24px;
	margin: 18px auto;
	flex-shrink: 0;
	transform-origin: center 43%;
	transition: transform 0.4s;
}

details.message[open] .icon {
	transform: rotate(180deg);
}

details.message .icon::before,
details.message .icon::after {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 3px;
	background-color: #EC8687;
}

details.message .icon::before {
	left: 0;
	transform: rotate(45deg);
}

details.message .icon::after {
	right: 0;
	transform: rotate(-45deg);
}

details.message .content {
	margin: 20px;
    margin-top: 0px;
    text-align: left;
}

details.message .content div {
    margin: 5px;
    margin-left: 20px;
    margin-bottom: 10px;
}

details.message .content img {
}

/*Employment*/
.employment_container {
	max-width: 80%;
	margin:30px auto;
    text-align: center;
}

.employment_container h2 {
	padding-top: 70px;
}

.employment_subtitle {
	max-width: 600px;
	font-weight: bold;
	margin: 40px auto;
    text-align: justify;
    text-align-last: center;
}

.employment_title {
	font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.employment_01_red {
    font-size: 28px;
    color: #cc6c6c;
}

.employment_00 {
	max-width: 600px;
	margin:30px auto;
	padding: 60px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-template-rows: 1fr;
	grid-auto-columns: 1fr;
	gap: 20px 20px;
	justify-content: center;
	place-items: center;
	grid-auto-flow: row;
}

@media (width < 900px) {
.employment_00 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas:
		"employment_02"
		"employment_01"
		"employment_03"
		"employment_04"
		"employment_06"
		"employment_05"
}

.employment_01 { grid-area: employment_01; margin-bottom: 30px;}
.employment_02 { grid-area: employment_02; margin-bottom: 30px;}
.employment_03 { grid-area: employment_03; margin-bottom: 30px;}
.employment_04 { grid-area: employment_04; margin-bottom: 30px;}
.employment_05 { grid-area: employment_05; margin-bottom: 30px;}
.employment_06 { grid-area: employment_06; margin-bottom: 30px;}

}

.employment_01 , .employment_04 , .employment_05 {
	width:100%;
    text-align: justify;
    text-align-last: left;
}

.employment_02 , .employment_03 , .employment_06 {
	width:250px;
	margin: 0 auto;
}

.employment_container table {
    background: #fff;
    border-spacing: 0;
    margin-bottom: 50px;
    width: 300px;
    float: left;
    padding: 10px;
}


/*Rrecruit*/
.recruit_container {
	max-width: 600px;
	margin:30px auto;
    text-align: center;
}

.recruit_01 , .recruit_02 , .recruit_03{
    margin: 30px auto;
    text-align: justify;
    text-align-last: left;
}

.recruit_title {
	font-size: 21px;
    font-weight: bold;
    text-align: left;
}

.recruit_title > span {
    background-color: #fff;
    padding: 2px 12px;
    margin-right: 10px;
}

.recruit_container table {
    background: #fff;
    border-spacing: 0;
    margin-bottom: 50px;
    max-width: 600px; 
}

.recruit_container table th.recruit_head, .recruit_container table td.recruit_head {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 10px;
}

.recruit_container table th, .recruit_container table td {
    border-bottom: 1px solid #666;
    padding: 10px;
    text-align: justify;
    text-align-last: left;
}

.recruit_container table th {
	background-color: #FAE1E1;
	white-space: nowrap;
}

/*mynavi*/
.mynavi_container {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	text-align: center;
}

.mynavi_recruit {
	max-width: 600px;
	height: 50px;
	margin:30px auto;
	background-color: #fff;
	border: 1px solid #666;
}

.mynavi_recruit > div {
	padding-top: 14px;
    text-align: center;
}

.mynavi_recruit > div > a {
	display: block;
	text-decoration: none;
	color: #666;
}

.mynavi_recruit a:hover {
	background-color: #666;
    color: #FFF !important;
    text-decoration: none;
    margin: -14px auto;
    padding: 14px;
}

.mynavi_container > img {
	padding: 20px;
}

.mynavi_container > .mynavi_inquiry span.tel {
	font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 24px;
}

.mynavi_container > .mynavi_inquiry span.tel > span.telno {
    font-size: 36px;
}

.mynavi_inquiry {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	border: 1px solid #666;
	padding-top: 14px;
	padding-bottom: 5px;
	border-radius: 10px;
}

.mynavi_inquiry > div > a {
	display: block;
	text-decoration: none;
	color: #666;
}

.mynavi_inquiry a:hover {
	background-color: #666;
    color: #FFF !important;
    text-decoration: none;
    margin: -14px auto;
	padding-top: 14px;
	padding-bottom: 5px;
	border-radius: 10px;
}

/*banner*/
.banner_container img {
	width: 200px;
}

.banner01 {
	padding-top: 80px;
}

.banner_container {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	gap: 20px 20px;
	justify-content: center;
	grid-auto-flow: row;
}

@media (width < 780px) {
	.banner_container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr ;
		grid-auto-columns: 1fr;
	}
}

@media (780px <= width) {
	.banner_container {
		display: grid;
		grid-template-columns: 30% 30% 30%;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		grid-auto-flow: row;
		gap: 20px 20px;
		justify-items: center;
		align-items: center;
		grid-template-areas:
			"banner02 banner03 banner04"
	}
}

/*info*/
#content11 > hr {
    border-top: 1px solid #666;
    margin: 50px auto;
    max-width: 780px;
}

.info img {
	width: 400px;
	padding-top: 50px;
}

.info_container {
	display: grid;
	max-width: 600px;
	margin:70px auto;
	background-color: #fff;
	gap: 10px;
	justify-content: center;
}

@media (width < 780px) {
	.info_container {
		grid-template-columns: 100%;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		justify-content: start;
	}
	.info_container .map1 , .info_container .map2 { 
		width: 100%;
	}
	.info_container iframe {
		width:100%;
		height: calc(420px * 3 / 4);
		border-radius: 10px;
	}
}

@media (780px <= width) {
	.info_container {
		grid-template-columns: 35% 65%;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		justify-items: center;
	}
	.info_container .map1 , .info_container .map2 {
		width: 420px;
		height: calc(420px * 3 / 4);
	}
	.info_container iframe {
		width:100%;
		height: calc(420px * 3 / 4);
		border-radius: 10px;
	}
}

.tokyo > hr , .yamanashi > hr {
    border-top: 1px solid #666;
    max-width: 780px;
}

.info_container .tokyo , .info_container .yamanashi {
	text-align: left;
}

.info_container h3 {
	font-weight: bold;
}

.info_container h3 hr {
	margin-bottom: 5px;
    border-top: 1px solid;
}
.contact {
	max-width: 600px;
	margin:30px auto;
	background-color: #fff;
	border: 1px solid #666;
	padding-top: 14px;
	padding-bottom: 14px;
	border-radius: 10px;
}

.contact > div > a > span {
	font-size:18px;
}

.contact > div > a {
	display: block;
	text-decoration: none;
	color: #666;
}

.contact a:hover {
	background-color: #999;
    color: #FFF !important;
    text-decoration: none;
    margin: -14px auto;
	padding-top: 14px;
	padding-bottom: 14px;
	border-radius: 10px;
}

/*footer*/
.site-info {
	display: none;
}

.footer_container {
	display: grid;
	max-width: 780px;
	padding-top: 10px;
	padding-bottom: 10px;
    margin: 0 auto;
    border-top: 1px solid #666;
}

@media (width < 780px) {
	.footer_container {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		justify-items: start;
		padding-left: 10px;
	}

	.privacy_policy {
		justify-self: start;
	}
	
	.jcn , .invoice {
		justify-self: start;
	}
}

@media (780px <= width) {
	.footer_container {
		grid-template-columns: 150px auto 245px;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
	}

	.privacy_policy {
		justify-self: start;
	}
	
	.jcn , .invoice {
		justify-self: end;
	}
}