@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
	#loading {
		position: fixed;
		width: 100vw;
		height: 100vh;
		transition: all .5s ease;
		background-color: #fff;
		z-index: 99999;
	}

	#loading.is-loaded {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-100vw);
	}

	.loading-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		-webkit-animation: loadinglogo 1s ease-in-out 0s infinite alternate;
		animation: loadinglogo 1s ease-in-out 0s infinite alternate;
	}
	.loading-logo img{
		width:20vw;
	}

	@keyframes loadinglogo {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	#page {
	display: none;
	}

	#page.is-loaded {
	display: block;
	}
	.main_movie{
		width:100vw;
	}
	.main_movie video{
		width:100%;
	}
	.loading-overlay {
		position: fixed;
		inset: 0;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;
		opacity: 1;
		visibility: visible;
		transition: opacity 0.4s ease, visibility 0.4s ease;
	  }
	  
	  .loading-overlay.is-hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	  }
	  
	  .loading-video {
		width: 80%;
		max-width: 80%;
		height: auto;
		display: block;
	  }
	  .main_movie{
		width:100vw;
	
	}
	.main_movie img{
		width:100vw;
		margin:0 auto;
	}	
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
	#loading {
		position: fixed;
		width: 100vw;
		height: 100vh;
		transition: all .5s ease;
		background-color: #fff;
		z-index: 99999;
	}

	#loading.is-loaded {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-100vw);
	}

	.loading-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		-webkit-animation: loadinglogo 1s ease-in-out 0s infinite alternate;
		animation: loadinglogo 1s ease-in-out 0s infinite alternate;
	}
	.loading-logo img{
		width:20vw;
	}

	@keyframes loadinglogo {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	#page {
	display: none;
	}

	#page.is-loaded {
	display: block;
	}
	.main_movie{
		width:100vw;
	}
	.main_movie img{
		width:100vw;
	}
	.loading-overlay {
		position: fixed;
		inset: 0;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;
		opacity: 1;
		visibility: visible;
		transition: opacity 0.4s ease, visibility 0.4s ease;
	  }
	  
	  .loading-overlay.is-hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	  }
	  
	  .loading-video {
		width: 100%;
		max-width: 100%;
		height: auto;
		display: block;
	  }
	  .main_movie{
		width:100vw;
	
	}
	.main_movie img{
		width:100vw;
		margin:0 auto;
	}
}



/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	Service

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.top_area_service{
		width: 100%;

		background-size:100% auto;
		height: 62vw;
	}
	.top_area_service_contents{
		width: 44vw;
		margin: 0 auto;
		text-align: left;
		padding: 17vw 0;
	}
	.top_area_service_title{
		font-size: 50px;
		letter-spacing: 2px;
		padding-bottom: 22px;
	}
	.top_area_service_text{
		font-size: 16px;
		line-height: 2;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_area_service{
		width: 100%;

		background-size:100% auto;
		height: 123vw;
	}
	.top_area_service_contents{
		width: 86vw;
		margin: 0 auto;
		text-align: left;
		padding: 11vw 0;
	}
	.top_area_service_title{
		font-size: 10vw;
		letter-spacing: 0.6vw;
		padding-bottom: 5vw;
	}
	.top_area_service_text{
		font-size: 3.6vw;
		line-height: 2;
	}
}





/* ================================================================================

	MEMBER

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.member_title{
		background: #FFF;
		text-align: center;
	}
	.member_title img{
		width:1200px;
		margin:0 auto;
	}
	.top_member_service{
		padding-bottom: 8vw;
	}
	.top_area_member_contents{
	
	}
	.top_area_member_contents ul{
		width:1100px;
		margin: 124px auto 0;
	}
	.top_area_member_contents li{
		display:inline-block;
		width: calc(100% / 3.1);
		padding: 0 20px 46px;
	}
	.member_number{
		font-size: 76px;
		color:#2f88d7;
	}
	.member_number2{
		color:#93ccff;
	}
	.member_yakushoku{
		background: #FFF;
		color: #222;
		animation: flash 1.5s infinite linear;
		opacity: 0;
		display: inherit;
		padding-right: 10px;
		font-size: 15px;
	}
	.member_text{
		font-size:15px;
		margin-top:10px;
	}
	.section01{
		background: url(../img/yotsuba_design_02.gif)center top no-repeat;
		background-size: auto;
		background-size: 100% auto;

		text-align: center;
		width: 100vw;
		height: 13vw;
		margin-top: -7vw;
	}
	.section01_text{
		font-size: 17px;
		text-align: center;
		color: #000;
		line-height: 1.8;
	}
	.section02{
		background: url(../img/section02_04.gif)center top no-repeat;
		background-size: auto;
		background-size: 100% auto;
		text-align: center;
		margin-top: 7vw;
		padding: 5vw;

	}
	.title_s{
		font-size: 46px;
		font-weight:600;
		color:#222;

	}
	.title_s::first-letter {
		color: rgb(77, 118, 212);
	  }
	.btns{
		display: flex;
		width: 906px;
		margin: 65px auto -9px;
	}
	.btns_sub{
		width: calc(100% / 3.2);
		margin: 13px;
	}
	.btns_sub img{
		width:100%;
	}
	.section03{
		margin: 0 auto;
		width: 1000px;
		text-align: center;
	}
	.out_base{
		width:1000px;
display: flex;
margin:0 auto;
	}
	.out_left{
width:450px;
	}
	.out_titles{
		font-size: 23px;
		color: #2b65c0;
		text-align: left;
		font-weight: 600;
	}
	.out_text{
		font-size: 18px;
		color: #000;
		text-align: left;
		padding: 10px;
	}
	.out_right{
		width:500px;
	}
	.out_right img{
		width:100%;
	}
	.out_text{
		font-size:20px;
		color:#000;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.member_title{
		background: #FFF;
		text-align: center;
		padding: 6vw 0 0;
	}
	.member_title img{
		width: 100vw;
		margin:0 auto;
	}
	.top_member_service{
	
	}
	.top_area_member_contents{
	
	}
	.top_area_member_contents ul{
		width: 90vw;
		margin: 22vw auto 0;
	}
	.top_area_member_contents li{
		display:inline-block;
		padding: 0 5vw 7vw;
	}
	.member_number{
		font-size: 21vw;
		color: #2f88d7;
		width: 29vw;
		float: left;
		padding-bottom: 24vw;
	}
	.member_number2{
		color:#93ccff;
	}
	.member_yakushoku{
		background: #FFF;
		color: #222;
		animation: flash 1.5s infinite linear;
		opacity: 0;
		display: inherit;
		padding-right: 2vw;
		font-size: 4vw;
	}
	.member_text{
		font-size:15px;
		margin-top:10px;
	}
	.section01{
		background: url(../img/yotsuba_design_02.gif)center top no-repeat;
		background-size: auto;
		background-size: auto;
		background-size: 100% auto;
		text-align: center;
		width: 100vw;
		height: 19vw;
		margin-top: 25vw;
	}
	.section01_text{
		font-size: 3.7vw;
		text-align: left;
		color: #000;
		line-height: 1.8;
		padding: 0 5vw;
		margin-top: 3vw;
	}
	.section02{
		background: url(../img/section02_04.gif)center top no-repeat;
		background-size: auto;
		background-size: 100% auto;
		text-align: center;
		margin-top: 7vw;
		padding: 5vw;

	}
	.title_s{
		font-size: 8vw;
		font-weight: 600;
		padding-top: 5vw;
		margin-bottom: 5vw;

	}
	.title_s::first-letter {
		color: rgb(77, 118, 212);
	  }
	.btns{
		display: block;
		width: 89vw;
		margin: 0 auto;
		text-align: center;

	}
	.btns_sub{
		width: 94%;
		margin: 10px;
		display:inline-block;
		width: calc(100% / 2.3); 
	}
	.btns_sub img{
		width:100%;
	}
	.section03{
		margin: 0 auto;
		width: 100vw;
		text-align: center;
	}
	.out_base{
		width:100vw;

margin:0 auto;
	}
	.out_left{
width:;
	}
	.out_titles{
		font-size: 6vw;
		color: #2b65c0;
		text-align: center;
		font-weight: 600;
	}
	.out_text{
		font-size: 4vw;
		color: #000;
	}
	.out_right{
		width:;
	}
	.out_right img{
		width:100%;
	}
	.out_text{
		font-size: 4vw;
		color: #000;
		text-align: left;
		padding: 3vw 9vw 0;
	}
	.main_movie img{
		width:100vw;
	}
}

/* アニメーション */
@keyframes flash {
	9%{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	100%{
		opacity: 1;
	}

}



/* ================================================================================

	CLIENT

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.top_client_service{
		width: 100%;

		background-size:100% auto;
		height: 60vw;
	}
	.top_area_client_contents{
		text-align: center;
		padding-top: 7vw;
	}
	.top_area_client_title{
		font-size: 94px;
		letter-spacing: 2px;
		padding-bottom: 22px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	.top_client_service{
		width: 100%;

		background-size:100% auto;
		height: 163vw;
	}
	.top_area_client_contents{
		text-align: center;
		padding-top: 13vw;
	}
	.top_area_client_title{
		font-size: 11vw;
		letter-spacing: 2px;
		padding-bottom: 6vw;
	}
}





/* ================================================================================

	COMPANY
================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.company_logo{
		text-align: center;
		padding-top: 11vw;
	}
	.company_logo img{
		width:200px;
		margin:0 auto;
	}
	.top_company_service{
		width: 100%;
		background: url(../img/company_bg.gif)center bottom no-repeat;
		background-size: 100% auto;
		height: 2251px;
	}
	.top_area_company_contents{
		text-align: center;
		padding-top: 0vw;
	}
	.top_area_company_title{
		font-size: 94px;
		letter-spacing: 2px;
		padding-bottom: 22px;
	}
	.company_info{
		border-bottom: 1px solid #FFF;
		color: #FFF;
		width: 752px;
		margin: 0 auto;
		display: flex;
		padding: 12px 0;
		text-align: left;
		font-size: 18px;
	}
	.komoku{	
		width: 150px;
	}
	.kaito{
	
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.company_logo{
		text-align: center;
		padding-top: 11vw;
	}
	.company_logo img{
		width: 27vw;
		margin: 15vw auto 0;
	}
	.top_company_service{
		width: 100%;
		background:url(../img/company_bg_sp.gif)center top no-repeat;
		background-size: 168% auto;
		height: 412vw;
	}
	.top_area_company_contents{
		text-align: center;
		padding-top: 0vw;
	}
	.top_area_company_title{
		font-size: 11vw;
		letter-spacing: 2px;
		padding-bottom: 22px;
	}
	.company_info{
		border-bottom: 1px solid #FFF;
		color: #FFF;
		width: 84vw;
		margin: 0 auto;
		display: flex;
		padding: 4vw 0;
		text-align: left;
		font-size: 3.5vw;
	}
	.komoku{	
		width: 30%;
	}
	.kaito{
		width: 70%;
	}
}





/* ================================================================================

	CONTACT

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.top_area_contact_contents{
		text-align: center;
		padding-top: 8vw;
	}
	.top_area_contact_title{
		font-size: 94px;
		letter-spacing: 2px;
		padding-bottom: 22px;
	}
	.contact_input{
		width: 752px;
		margin:0 auto;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_area_contact_contents{
		text-align: center;
		padding-top: 8vw;
	}
	.top_area_contact_title{
		font-size: 11vw;
		letter-spacing: 2px;
		padding-bottom: 3vw;
		padding-top: 7vw;
	}
	.contact_input{
		width:80vw;
		margin:0 auto;
	}
}



/* ================================================================================

	MESSAGE

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.top_message_area{
		background: url(../img/message_bg.jpg)top center repeat-y;
		padding-top: 12vw;
		padding-bottom: 12vw;
	}
	.top_message_title{
		font-size: 7vw;
		letter-spacing: 0px;
		color: #25242a;
		background: #FFF;
		line-height: 1.5;
		text-align: left;
	}
	.top_message_text{
		font-size: 3.4vw;
		color: #FFF;
		padding: 9vw 0 0 10vw;
		font-weight: 500;
	}
	.top_message_text02{
		font-size: 3.8vw;
		color: #FFF;
		padding: 10vw 0 0 10vw;
		font-weight: 700;
	}
	
	.top_message_text03{
		font-size: 2.5vw;
		color: #FFF;
		padding: 0vw 0 0 8vw;
		font-weight: 500;
	}
	
	.top_message_text04{
		font-size: 3.4vw;
		color: #FFF;
		padding: 11vw 0 0 10vw;
		font-weight: 500;
	}

	.company-section {
		background: #f3f3f3;
		padding: 60px 20px;
	  }
	  
	  .company-title {
		margin: 0 0 40px;
		text-align: center;
		font-size: 56px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.08em;
		color: #2f2f2f;
	  }
	  
	  .company-title::first-letter {
		color: #4a82c2;
	  }
	  
	  .company-list {
		max-width: 1000px;
		margin: 0 auto;
	  }
	  
	  .company-row {
		display: flex;
		align-items: flex-start;
		border-bottom: 1px solid #bdbdbd;
		padding: 12px 0;
		gap: 24px;
	  }
	  
	  .company-label {
		flex: 0 0 160px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.8;
		color: #2f2f2f;
	  }
	  
	  .company-value {
		flex: 1;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.8;
		color: #2f2f2f;
	  }
	  

	  
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_message_area{
		background: url(../img/message_bg.jpg)top center repeat-y;
		padding-top: 18vw;
		padding-bottom: 18vw;
		background-size: 100%;
	}
	.top_message_title{
		font-size: 9vw;
		letter-spacing: 0px;
		color: #25242a;
		background: #FFF;
		line-height: 1.5;
		text-align: left;
	}
	.top_message_text{
		font-size: 4.7vw;
		color: #FFF;
		padding: 13vw 0 0 10vw;
		font-weight: 500;
		line-height: 2;
	}
	.top_message_text02{
		font-size: 5vw;
		color: #FFF;
		padding: 12vw 0 0 10vw;
		font-weight: 700;
	}
	
	.top_message_text03{
		font-size: 2.5vw;
		color: #FFF;
		padding: 0vw 0 0 8vw;
		font-weight: 500;
	}
	
	.top_message_text04{
		font-size: 4.7vw;
		color: #FFF;
		padding: 15vw 0 0 10vw;
		font-weight: 500;
		line-height: 2;
	}
}

/* =========================
   Contact Form 7 for current page
   ========================= */

   .wpcf7 {
	max-width: 900px;
	margin: 60px auto 0;
	padding: 40px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 20px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
  }
  
  .wpcf7 p {
	margin: 0 0 20px;
  }
  
  .wpcf7 label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #333;
	line-height: 1.8;
  }
  
  .wpcf7 .required {
	color: #d93636;
	margin-left: 4px;
  }
  
  .wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
  }
  
  /* 2カラム */
  .wpcf7 .cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
  }
  
  .wpcf7 .cf7-grid p {
	margin: 0;
  }
  
  /* 入力欄 */
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #d8d8d8;
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	color: #222;
	box-sizing: border-box;
	transition: 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
  }
  
  .wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
  }
  
  .wpcf7 input::placeholder,
  .wpcf7 textarea::placeholder {
	color: #aaa;
  }
  
  .wpcf7 input[type="text"]:focus,
  .wpcf7 input[type="email"]:focus,
  .wpcf7 input[type="tel"]:focus,
  .wpcf7 textarea:focus {
	outline: none;
	border-color: #6a8f5b;
	box-shadow: 0 0 0 4px rgba(106, 143, 91, 0.12);
  }
  
  /* 送信ボタン */
  .wpcf7 input[type="submit"] {
	display: inline-block;
	width: 100%;
	padding: 16px 20px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #6a8f5b 0%, #88b776 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: 0.25s ease;
	box-shadow: 0 10px 24px rgba(106, 143, 91, 0.25);
  }
  
  .wpcf7 input[type="submit"]:hover {
	transform: translateY(-2px);
	opacity: 0.96;
  }
  
  .wpcf7 input[type="submit"]:active {
	transform: translateY(0);
  }
  
  /* エラー */
  .wpcf7 .wpcf7-not-valid {
	border-color: #e54848 !important;
  }
  
  .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12px;
	color: #d93636;
	font-weight: 700;
  }
  
  /* 送信結果 */
  .wpcf7 .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 14px 16px !important;
	border-radius: 12px;
	font-size: 14px;
  }
  
  .wpcf7 form.sent .wpcf7-response-output {
	background: #eef8ea;
	border: 1px solid #b9d9ad;
	color: #2f5a24;
  }
  
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.failed .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.aborted .wpcf7-response-output {
	background: #fff1f1;
	border: 1px solid #efb2b2;
	color: #a33a3a;
  }
  
  @media (max-width: 768px) {
	.wpcf7 {
		padding: 3vw;
		margin-top: 3vw;
		width: 90%;
	  }
  
	.wpcf7 .cf7-grid {
	  grid-template-columns: 1fr;
	  gap: 16px;
	  margin-bottom: 16px;
	}

	.wpcf7 {

		border-radius: 2vw;

	  }
	.cf7-grid br{
		display:none;
	}

	.company-section {
		padding: 40px 16px;
	  }
	
	  .company-title {
		font-size: 38px;
		margin-bottom: 28px;
	  }
	
	  .company-row {
		flex-direction: column;
		gap: 6px;
		padding: 10px 0;
	  }
	
	  .company-label {
		flex: none;
		width: 100%;
	  }
	
	  .company-value {
		width: 100%;
	  }

	  .company-section {
		background: #f3f3f3;
		padding: 60px 20px;
	  }
	  
	  .company-title {
		margin: 0 0 40px;
		text-align: center;
		font-size: 56px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.08em;
		color: #2f2f2f;
		font-size: 8vw;
		font-weight: 600;
		padding-top: 5vw;
		margin-bottom: 5vw;
	  }
	  
	  .company-title::first-letter {
		color: #4a82c2;
	  }
	  
	  .company-list {
		max-width: 1000px;
		margin: 0 auto;
	  }
	  
	  .company-row {
display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #bdbdbd;
    padding: 2vw;
    gap: 2vw;
    margin-bottom: 4vw;
	  }
	  
	  .company-label {
		flex: 0 0 -2px;
		font-size: 5vw;
		font-weight: 700;
		line-height: 1.2;
		color: #2f2f2f;
	  }
	  
	  .company-value {
		flex: 1;
		font-size: 3.8vw;
		font-weight: 500;
		line-height: 1.2;
		color: #2f2f2f;
	  }
	  

  }