@charset "UTF-8";

/*-----------------------------
タブレット
@media (min-width: 768px) {}

PC
@media (min-width: 1024px) {}

ワイドPC微調整
@media (min-width: 1280px) {}
------------------------------*/


/****************************************
	トップページ
*****************************************/

/*=============================
	mainvisual
==============================*/
.top-visual-sec {
	overflow: hidden;
	position: relative;
}
.top-visual-sec .mainvisual {
	max-width: 100%;
	height: auto;
}
.top-visual-sec .mainvisual img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4/5.5;
	object-fit: cover;
}
.top-visual-sec .mark {
	z-index: 100;
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}
.top-visual-sec .copy-wrap {
	position: absolute;
	bottom: 2.3rem;
	left: 1.5rem;
	width: calc(100% - 3rem);
	z-index: 1000;
	color: #fff;
}
.top-visual-sec .copy-wrap .copy-main {
	font-size: 3rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
}
.top-visual-sec .copy-wrap .copy-sub {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 1px;
	margin-top: .5rem;
}
@media (min-width:768px){
	.top-visual-sec .mainvisual img {
		aspect-ratio: 4/2.8;
		object-fit: cover;
	}
	.top-visual-sec .mark {
		width: 70%;
		height: auto;
	}
	.top-visual-sec .copy-wrap {
		position: absolute;
		bottom: 50%;
		left: 2rem;
		transform: translate(0, 50%);
	}
	.top-visual-sec .copy-wrap .copy-main {
		font-size: 3.4rem;
	}
	.top-visual-sec .copy-wrap .copy-sub {
		font-size: 1.3rem;
		margin-top: .5rem;
	}
}
@media (min-width: 1024px) {
	.top-visual-sec .mainvisual {
		max-height: 100vh;
	}
	.top-visual-sec .mainvisual img {
		aspect-ratio: 4/2.8;
		object-fit: cover;
	}
	.top-visual-sec .mark {
		width: 70%;
		height: auto;
	}
	.top-visual-sec .mark img {
		max-width: 1100px;
	}
	.top-visual-sec .copy-wrap {
		left: 3rem;
	}
	.top-visual-sec .copy-wrap .copy-main {
		font-size: 4.8rem;
	}
	.top-visual-sec .copy-wrap .copy-sub {
		font-size: 1.8rem;
		margin-top: .4rem;
	}
}
@media (min-width: 1280px) {
	.top-visual-sec .copy-wrap .copy-main {
		font-size: 5.5rem;
	}
	.top-visual-sec .copy-wrap .copy-sub {
		font-size: 2rem;
		margin-top: .4rem;
	}
}

/*=============================
	intro
==============================*/
.top-intro-sec {
	padding: 4rem 0 3rem 0;
	overflow: hidden;
	position: relative;
}
.top-intro-sec .copy-main {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1px;
}
.top-intro-sec .copy-sub {
	margin-top: 1rem;
	line-height: 2;
}
.top-intro-sec .copy-sub p {
	margin-top: 1rem;
}
.top-intro-sec .photo {
	text-align: center;
	margin-top: 2rem;
}
.top-intro-sec .photo img {
	width: 85%;
}
.top-intro-sec .deco-txt {
    width: 45rem;
    position: absolute;
    bottom: -1rem;
    left: 2rem;
    font-weight: 800;
    color: #F8F9F9;
    font-size: 4.5rem;
    line-height: 1;
	z-index: -1;
}
@media (min-width:768px){
	.top-intro-sec {
		padding: 4rem 0 3rem 0;
	}
	.top-intro-sec .wrap {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.top-intro-sec .note {
		width: 55%;
		margin-top: 1rem;
	}
	.top-intro-sec .copy-main {
		font-size: 1.5rem;
	}
	.top-intro-sec .photo {
		width: 40%;
		text-align: left;
		margin-top: 0;
	}
	.top-intro-sec .photo img {
		width: 100%;
	}
	.top-intro-sec .deco-txt {
		width: auto;
		bottom: -1rem;
		left: auto;
		right: 0;
		font-size: 6rem;
	}
}
@media (min-width:1024px){
	.top-intro-sec {
		padding: 6rem 0 6rem 0;
	}
	.top-intro-sec .note {
		width: calc(100% - 30rem);
		margin-top: 1rem;
	}
	.top-intro-sec .copy-main {
		font-size: 1.6rem;
		letter-spacing: 1px;
	}
	.top-intro-sec .copy-sub {
		margin-top: 2rem;
	}
	.top-intro-sec .photo {
		width: 26rem;
	}
	.top-intro-sec .deco-txt {
		width: auto;
		bottom: -1.2rem;
		left: auto;
		right: 0;
		font-size: 8rem;
	}
}
@media (min-width:1080px){
	.top-intro-sec .note {
		width: calc(100% - 34rem);
		margin-top: 1rem;
	}
	.top-intro-sec .copy-main {
		font-size: 1.8rem;
		letter-spacing: 1px;
	}
	.top-intro-sec .photo {
		width: 30rem;
	}
}
@media (min-width:1280px){
	.top-intro-sec .note {
		width: calc(100% - 41rem);
		margin-top: 2rem;
	}
	.top-intro-sec .photo {
		width: 36rem;
	}
	.top-intro-sec .deco-txt {
		bottom: -1.4rem;
		font-size: 9rem;
	}
}

/*=============================
	service（事業内容）
==============================*/
.top-svc-sec {
	background-color: #F2F3F4;
	border-radius: 30px 30px 0 0;
	padding: 3rem 0 10rem 0;
	position: relative;
	overflow: hidden;
}
.top-svc-sec .m-inner {
	position: relative
}
.top-svc-sec:before {
	position: absolute;
	display: block;
	content:"";
	right: -20rem;
	bottom: 1rem;
	width: 45rem;
	height: 45rem;
	background: url("../img/top/svc_bg_mark.webp") no-repeat 0 0;
	background-size: cover;
}
.top-svc-sec .m-ttl-L {
	text-align: center;
}
.top-svc-sec .list-item {
	margin-top: 4rem;
}
.top-svc-sec .list-item img {
	border-radius: 10px;
}
.top-svc-sec .list-item .note {
	padding: .8rem .5rem 0 .5rem;
}
.top-svc-sec .list-item .note .ttl {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	border-bottom: 1px solid #C9C9C9;
	padding-bottom: .5rem;
}
.top-svc-sec .list-item .note .ttl .sub {
	font-size: 1rem;
}
.top-svc-sec .list-item .note .copy {
	margin-top: .5rem;
}
.top-svc-sec .list-item .note .btn-wrap {
	margin-top: .5rem;
	text-align: right;
}
.top-svc-sec .list-item .note .btn {
	position: relative;
	display: inline-block;
	padding: 12px 34px 12px 20px;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-weight: 900;
	font-size: .9rem;
	line-height: 1.4;
	letter-spacing: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: #DEEBDC;
	color: #01862B;
}
.top-svc-sec .list-item .note .btn:before {
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translate(0, -50%);
	display: block;
	content:"";
	width: 18px;
	height: 18px;
	background: url("../img/common/icon_arrow_blank_green.svg") no-repeat 0 0;
	background-size: cover;
}
.top-svc-sec .list-item .note .btn:hover {
	opacity: .8;
}
@media (min-width: 768px) {
	.top-svc-sec {
		border-radius: 60px 60px 0 0;
		padding: 5rem 0 10rem 0;
	}
	.top-svc-sec:before {
		right: -20rem;
		bottom: -3rem;
		width: 60rem;
		height: 60rem;
	}
	.top-svc-sec .intro-copy {
		text-align: center;
	}
	.top-svc-sec .list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
		margin-top: 2rem;
	}
	.top-svc-sec .list-item {
		margin-top: 0;
	}
	.top-svc-sec .list-item .note {
		padding: .8rem .5rem 0 .5rem;
	}
}
@media (min-width: 1024px) {
	.top-svc-sec {
		border-radius: 100px 100px 0 0;
		padding: 6rem 0 14rem 0;
	}
	.top-svc-sec:before {
		right: -14rem;
		bottom: -7rem;
		width: 84rem;
		height: 84rem;
	}
	.top-svc-sec .list {
		gap: 3.5rem;
		margin-top: 3rem;
	}
	.top-svc-sec .list-item .note {
		padding: 1rem .5rem 0 .5rem;
	}
	.top-svc-sec .list-item .note .ttl {
		font-size: 1.8rem;
		padding-bottom: .5rem;
	}
	.top-svc-sec .list-item .note .ttl .sub {
		font-size: 1.2rem;
	}
	.top-svc-sec .list-item .note .copy {
		margin-top: .8rem;
	}
	.top-svc-sec .list-item .note .btn-wrap {
		margin-top: .8rem;
	}
	.top-svc-sec .list-item .note .btn {
		font-size: 1rem;
	}
}

/*=============================
	photo（swiper）
==============================*/

/* swiper */
.top-photo-sec {
	overflow: hidden;
	position: relative;
	margin-top: -5rem;
}
.top-photo-sec .swiper-02 {
	margin-top: 10px;
}
.top-photo-sec .swiper-wrapper {
	transition-timing-function: linear;
}
/*画像の大きさ：370px×230pxを0.5倍編集*/
.top-photo-sec .swiper-slide {
	height: 115px !important;
	width: auto !important;
}
.top-photo-sec .swiper-slide img {
	width: 185px;
}
@media (min-width:768px){
	/*画像の大きさ：370px×230pxを0.6倍編集*/
	.top-photo-sec .swiper-slide {
	  height: 138px !important;
	  width: auto !important;
	}
	.top-photo-sec .swiper-slide img {
		width: 222px;
	}
}
@media (min-width:1024px){
	/*画像の大きさ：370px×230pxを0.9倍編集*/
	.top-photo-sec .swiper-slide {
	  height: 207px !important;
	  width: auto !important;
	}
	.top-photo-sec .swiper-slide img {
		width: 333px;
	}
}

/*=============================
	company（会社概要）
==============================*/
.top-cpn-sec {
	padding: 4rem 0;
}
@media (min-width:768px){
	.top-cpn-sec {
		padding: 6rem 0;
	}
	.top-cpn-sec .wrap {
		display: grid;
		grid-template-columns: 16rem 1fr;
		gap: 1rem;
	}
}
@media (min-width:1024px){
	.top-cpn-sec {
		padding: 6rem 0;
	}
	.top-cpn-sec .wrap {
		grid-template-columns: 24rem 1fr;
		gap: 1rem;
	}
}


/*=============================
	access（アクセス）
==============================*/
.top-access-sec {
	padding: 4rem 0;
	background-color: #F2F3F4;
}
.top-access-sec .note {
	padding: 0 1rem;
}
.top-access-sec .note .name {
	font-weight: 700;
}
.top-access-sec .photo {
	display: block;
	width: calc(100% - 1rem);
	height: 13rem;
	border-radius: 10px 0 0 10px;
	margin-top: 2rem;
	margin-left: 1rem;
	background: url("../img/top/access_img_2.webp")no-repeat left center;
	background-size: cover;
}
@media (min-width:768px){
	.top-access-sec {
		padding: 6rem 0;
	}
	.top-access-sec .wrap {
		display: grid;
		grid-template-columns: 22rem 1fr;
		column-gap: 1rem;
		align-items: center;
		padding: 0 0 0 1rem;
	}
	.top-access-sec .note {
		padding: 0;
	}
	.top-access-sec .photo {
		width: 100%;
		height: 16rem;
		border-radius: 10px 0 0 10px;
		margin-top: 0;
		margin-left: 0;
	}
}
@media (min-width:1024px){
	.top-access-sec {
		padding: 6rem 0;
	}
	.top-access-sec .wrap {
		padding: 0 0 0 3rem;
	}
	.top-access-sec .photo {
		height: 20rem;
		border-radius: 20px 0 0 20px;
	}
}
@media (min-width:1280px){
	.top-access-sec .wrap {
		grid-template-columns: 32rem 1fr;
		column-gap: 1rem;
		padding-left: calc((100vw - 1200px) / 2);
	}
	.top-access-sec .photo {
		height: 22rem;
		border-radius: 20px 0 0 20px;
	}
	.top-access-sec .note .name,
	.top-access-sec .note .copy {
		font-size: 1.1rem;
	}
}

/*=============================
	map
==============================*/
.top-map-sec .map-box {
	height: 260px;
}
.top-map-sec .map-box iframe {
	width: 100%;
	height: 260px;
}
@media (min-width:768px){
	.top-map-sec .map-box {
		height: 300px;
	}
	.top-map-sec .map-box iframe {
		width: 100%;
		height: 300px;
	}
}
@media (min-width:1024px){
	.top-map-sec .map-box {
		height: 400px;
	}
	.top-map-sec .map-box iframe {
		width: 100%;
		height: 400px;
	}
}


/****************************************
	お問い合わせ page-contact
*****************************************/
.page-contact .form-sec {
	margin-top: 2rem;
	background-color: #fff;
	padding: 4rem 0;
}
.page-contact .form-sec .m-ttl-L {
	text-align: center;
}
@media (min-width: 768px) {
	.page-contact .form-sec {
		margin-top: 2rem;
		padding: 6rem 0;
	}
}
@media (min-width: 1024px) {
	.page-contact .form-sec {
		margin-top: 3rem;
		padding: 8rem 0;
	}
}

/*=============================
	フォーム内
==============================*/
.page-contact .form-sec .contact-form {
	margin-top: 2rem;
}
.page-contact .contact-form th,
.page-contact .contact-form td {
	display: block;
	line-height: 1.5;
	font-size: 1.1rem;
	vertical-align: top;
}
.page-contact .contact-form th {
	padding: 2rem 1rem 1rem 1rem;
	font-weight: 700;
}
.page-contact .contact-form tr:first-child th {
	border-top: 1px dashed #C9C9C9;
}
.page-contact .contact-form .must-mark {
	display: inline-block;
	background-color: #f00;
	color: #fff;
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
	padding: 2px 5px;
	margin-left: 5px;
}
.page-contact .contact-form td {
	padding: 0 1rem 2rem 1rem;
	border-bottom: 1px dashed #C9C9C9;
}
/*確認画面の表*/
.page-contact .contact-form table.confirm {
	border-top: 1px dashed #C9C9C9;
	margin-top: 1rem;
}
@media (min-width:768px){
	.page-contact .form-sec .contact-form {
		margin-top: 4rem;
	}
	.page-contact .contact-form table th,
	.page-contact .contact-form table td {
		display: table-cell;
		font-size: 1.1rem;
		padding: 1.5rem 2rem;
	}
	.page-contact .contact-form table th {
		border-bottom: 1px dashed #C9C9C9;
		width: 16rem;
	}
	.page-contact .contact-form tr:first-child td {
		border-top: 1px dashed #C9C9C9;
	}
	.page-contact .contact-form table td {
		border-bottom: 1px dashed #C9C9C9;
	}
	.page-contact .contact-form table.confirm {
		border-top: 1px dashed #C9C9C9;
		margin-top: 2rem;
	}
}
@media (min-width: 1024px) {
	.page-contact .contact-form table th,
	.page-contact .contact-form table td {
		font-size: 1.2rem;
	}
}
@media (min-width: 1280px) {
	.page-contact .form-sec .contact-form {
		padding: 0 4rem;
	}
}

/*=============================
	formパーツ
==============================*/
/* 初期表示 placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #D1D1CF;
	font-size: 1.1rem;
    font-weight: normal;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #D1D1CF;
	font-size: 1.1rem;
    font-weight: normal;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #D1D1CF;
	font-size: 1.1rem;
    font-weight: normal;
}


input,select,textarea {
	background-color: #fff;
	border: 1px solid #DEDDDD;
	border-radius: 10px;
	font: inherit;
	font-size: 1.1rem;
	color: #000;
	padding: 1rem 1rem;
	width: 100%;
	
}


/* チェックボックス */
.checkbox input[type=checkbox].check-btn-item{
	display: none;
}
.checkbox label {
	display: inline-block;
	margin-right: 15px;
}
.checkbox .check-btn-item + span {
	padding-left: 25px;
	display: inline-block;
	position: relative;
	font-size: 1.1rem;
	line-height: 1.2;
	margin-bottom: 1rem;
}
.checkbox .check-btn-item + span::after,
.checkbox .check-btn-item + span::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
}
.checkbox .check-btn-item + span::before {
	border: 1px solid #DEDDDD;
	background-color: #fff;
	border-radius: 4px;
	left: 0;
	height: 20px;
	width: 20px;
}
.checkbox .check-btn-item + span::after{
	border: none;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	height: 15px;
	left: 5px;
	opacity: 0;
	top: 0;
	transform: rotate(45deg);
	width: 10px;
}
.checkbox .check-btn-item:checked + span::before {
	border: 1px solid #FE958C;
	background-color: #FE958C;
}
.checkbox .check-btn-item:checked + span::after {
	opacity: 1;
}
.checkbox .error {
	font-size: 1rem;
	margin-top: 0.5em;
}
@media (min-width:768px){
	.checkbox label {
		margin-right: 30px;
	}
}
@media (min-width:1024px){
	.checkbox .check-btn-item + span {
		font-size: 1.1rem;
		line-height: 1;
	}
}

/*=============================
	formパーツ ボタン
==============================*/
.contact-btn-wrap {
	margin: 2rem 0 0 0;
}
.contact-btn-wrap .list-item {
	margin: 0 0 1rem 0;
}
.contact-btn-wrap .list-item:last-child {
	margin: 0 0 0 0;
}
.contact-btn-wrap .contact-btn {
	position: relative;
	display: block;
	max-width: 100%;
	width: 16rem;
	padding: 16px 3px;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 1px;
	color: #fff;
	margin-left: auto;
	margin-right: auto;
	transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-webkit-transition: 0.25s ease-in-out;
	-o-transition: 0.25s eease-in-out;
}
.contact-btn-wrap .contact-btn.black {
	background-color: #000;
	border: 2px solid #000;
}
.contact-btn-wrap .contact-btn.gray {
	background-color: #bcbdc1;
	border: 2px solid #bcbdc1;
}
.contact-btn-wrap .contact-btn:hover {
	opacity: 0.8;
}
@media (min-width:1024px){
	.contact-btn-wrap {
		margin: 2rem 0 0 0;
	}
	.contact-btn-wrap .list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.contact-btn-wrap .list-item {
		margin: 0 1.5rem;
	}
	.contact-btn-wrap .contact-btn {
		width: 18rem;
		max-width: 100%;
		padding: 20px 3px;
		font-size: 1.1rem;
	}
}

/*=============================
	確認画面
==============================*/
.contact-form .contact-btn-wrap .confirm-txt {
	font-size: 1rem;
	padding: 1rem 0 2rem 0;
}
.contact-form .error-box {
	width: 100%;
	margin: 1rem auto 2rem auto;
	border-top: 2px dotted #f00;
	border-bottom: 2px dotted #f00;
	padding: 2rem 0;
	color: #f00;
	font-size: 1rem;
	font-weight: 700;
}
.contact-form .copy-error,
.contact-form .copy-thanks {
	font-size: 1rem;
}
@media (min-width:768px){
	.contact-form .contact-btn-wrap .confirm-txt {
		text-align: center;
	}
	.contact-form .error-box {
		text-align: center;
	}
	.contact-form .copy-error,
	.contact-form .copy-thanks {
		text-align: center;
		font-size: 1.1rem;
	}
}