@charset "utf-8";

html{
	font-size: 16px;
	scroll-behavior: smooth;
}

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

@font-face {
	font-family: 'NotoSans';
	src: url(../fonts/NotoSansJP-VariableFont_wght.ttf);
}



/* ------変数・汎用クラス------ */
/* ●変数 */
	/* PC用 */
	:root{
		/* フォントサイズ用 */
		--font-xxs: 0.625rem;  /* 10x */
		--font-xs: 0.875rem;    /* 12px */
		--font-s:  clamp(0.75rem, 0.666rem + 0.17vw, 0.875rem); /* 12~14px */
		--font-n:  clamp(0.875rem, 0.791rem + 0.17vw, 1rem);    /* 14~16px */
		--font-l:  1.125rem;   /* 18px */
		--font-xl: 1.5rem;     /* 24px */
		--font-xxl: 1.75rem;   /* 28px */
		--font-ttl: 2rem;      /* 32px */
		--font-cc:  clamp(2rem, 0.664rem + 2.78vw, 4rem);       /* 32px~64px */
	
		/* margin,padding用 */
		--space-xs: 0.25rem; /* 4px */
		--space-s:  0.5rem;  /* 8px */
		--space-n: 	1rem;    /* 16px */
		--space-nn: 1.5rem;  /* 24px */
		--space-l:  2rem;    /* 32px */
		--space-xl: 4rem;    /* 64px */
		--space-h:  7rem; /* 100px */
		
		/* コンテンツサイズ */
		--arrow-size: 2.5rem;   /* 40px */
		--contents-size: 50rem; /* 800px */
	
		/* 色 */
		--c-yellow:  #f8b62d;
		--c-blue:    #0074a5;
		--c-pink:    #e18091;
		--c-gray:    #e1e5e6;
		--c-grayb:   #727171;
		--c-sky:     linear-gradient(45deg, #a7d7e8 0%, #1babcd 70%)
;
		/* 各種サイズ */
	}
	
	@media screen and (max-width:768px) {
		/* スマホ用 */
		:root{
			/* フォントサイズ用 */
			--font-xxs: 0.5rem;  /* 8px */
			--font-xs: clamp(0.625rem, 0.545rem + 0.43vw, 0.75rem);   /* 10~12px */
			--font-s:  clamp(0.75rem, 0.67rem + 0.43vw, 0.875rem); /* 12~14px */
			--font-n:  clamp(0.875rem, 0.795rem + 0.43vw, 1rem);  /* 14px */
			--font-l:  1.25rem; /* 20px */
			--font-xl: 1.5rem;     /* 24px */
			--font-xxl:1.28rem;
			--font-ttl: 1.5rem;  /* 32px */
			--font-cc: clamp(1.5rem, 0.538rem + 5.13vw, 3rem); /* 24px~48px */
	
			/* margin,padding用 */
			--space-xs: 0.25rem; /* 4px */
			--space-s:  0.5rem;  /* 8px */
			--space-n: 	0.75rem;    /* 12px */
			--space-nn: 1.5rem;  /* 24px */
			--space-l:  2rem;    /* 32px */
			--space-xl: 5rem;    /* 80px */
			--space-h:  7.5rem;    /* 120px */
	
			/* 各種サイズ */

		}
	}
	
	/* ●汎用クラス（サイズ、幅、一部カラーは原則ここにあるクラスを使用します） */
	
	/* 基本フォントサイズ */
	.font-xxs{font-size: var(--font-xxs);}
	.font-xs{font-size: var(--font-xs);}
	.font-s{font-size: var(--font-s);}
	.font-n{font-size: var(--font-n);}
	.font-l{font-size: var(--font-l);}
	.font-xl{font-size: var(--font-xl);}
	.font-xxl{font-size: var(--font-xxl);}
	
	/* h2用フォントサイズ */
	.font-title{font-size: var(--font-ttl);}
	.font-title-alt{font-size: calc(var(--font-ttl) * 1.25)}
	
	/* フォント太さ */
	.font-bold{
		font-weight: 600;
	}
	
	/* 基本幅、高さ調整用(padding) */
	.padding-s{padding: var(--space-s);}
	.padding-n{padding: var(--space-n);}
	.padding-nn{padding: var(--space-nn);}
	.padding-l{padding: var(--space-l);}
	.paddingrl-l{padding-right: var(--space-l); padding-left: var(--space-l);}
	.paddingt-n{padding-top: var(--space-n);}
	.paddingt-nn{padding-top: var(--space-nn);}
	.paddingt-l{padding-top: var(--space-l);}
	.paddingb-n{padding-bottom: var(--space-n);}
	.paddingb-l{padding-bottom: var(--space-l);}
	.paddingl-n{padding-left: var(--space-n);}
	.paddingl-l{padding-left: var(--space-l);}
	.paddingr-n{padding-right: var(--space-n);}
	.paddingr-l{padding-right: var(--space-l);}
	.paddingtb-xs{padding: var(--space-xs) 0;}
	.paddingtb-s{padding: var(--space-s) 0;}
	.paddingtb-n{padding: var(--space-n) 0;}
	.paddingtb-l{padding: var(--space-xl) 0;}
	.paddingtb-xl{padding: var(--space-xl) 0;}
	.paddingrl-s{padding: 0 var(--space-s);}
	.paddingrl-n{padding: 0 var(--space-n);}
	.paddingrl-l{padding: 0 var(--space-l);}

	.padding-header{padding: calc(var(--space-n) * 1.5) var(--space-l);}
	
	/* ヘッダーと同じ高さの幅 */
	.paddingt-h{padding-top: var(--space-h);}
	@media screen and (max-width:768px){
		.padding-header{padding: calc(var(--space-n) * 1.5) var(--space-n);}
	}
	
	/* ナビゲーションの幅 */
	
	/* 幅、高さ調整用(marginが必要な場合) */
	.marginl-xs{margin-left: var(--space-xs);}
	.marginr-xs{margin-right: var(--space-xs);}
	.marginb-xs{margin-bottom: var(--space-xs);}
	.marginrl-n{margin: var(--space-n);}
	.margint-n{margin-top: var(--space-n);}
	.marginb-n{margin-bottom: var(--space-n);}
	.margint-nn{margin-top: var(--space-nn);}
	.margint-xl{margin-top: var(--space-xl);}
	.margintb-nn{margin: var(--space-nn) 0;}
	.margintb-xl{margin: var(--space-xl) 0;}
	
	/* 文字間の幅 */
	.line-height-p{line-height: 1.7;}
	
	/* コンテンツなどの幅 */
	.padding-content{padding: var(--space-n) var(--space-n) calc(var(--space-n) * 3) var(--space-n);}
	.padding-content-s{padding: var(--space-n) var(--space-n) calc(var(--space-n) * 2) var(--space-n);}
	.padding-box{padding: var(--space-n) calc(var(--space-n) * 3);}
	.padding-box-s{padding: var(--space-s) var(--space-n);}
	
	/* 色 */
	.text-yellow{background-color: #fff; color: var(--c-yellow);}
	.text-blue{background-color: #fff; color: var(--c-blue);}
	.bg-yellow{background-color: var(--c-yellow); color: #fff;}
	.bg-blue{background-color: var(--c-blue); color: #fff;}
	.bg-gray{background-color: var(--c-gray);}
	.bg-sky{background: var(--c-sky);}

	/* 改行位置制御 */
	.nowrap-word{white-space: nowrap;}
	
	@media  screen and (max-width:768px) {
		/* コンテンツサイズのスマホ版 */
		.padding-box{padding: var(--space-n) calc(var(--space-n) * 1.5);}
		.padding-content{padding: var(--space-n) 0 calc(var(--space-n) * 3) 0;}
	}
	/* ------変数・汎用クラスここまで------ */

body{
	width: 100%;
	font-family: "NotoSans", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", yu-mincho-pr6, serif;
}

img{
	width: 100%;
	vertical-align: bottom;
}

li{
	text-decoration: none;
	list-style: none;
}

a{
	color: #000;
	text-decoration: none;
	transition: all 0.3s;
}

input[type="submit"]{
	transition: all 0.3s;
}

a:hover,
input[type="submit"]:hover{
	opacity: 0.5;
}

/* パーツなど */
	/* 角丸のボタン */
	.button_round{
		width: 13.5rem;
		height: 2.625rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
	}

	.button_flex{
		display: flex;
		flex-direction: row;
	}

	.button_flex > p{
		letter-spacing: 0.1em;
	}

	.button_flex > p > span{
		display: block;
		letter-spacing: 0;
	}

	.button_flex_up{
		display: flex;
		flex-direction: column;
	}

	/* アイコン */
	.icon-s{
		width: 1.5rem;
		margin-right: var(--space-xs);
	}

	.icon-n{
		width: 2rem;
		margin-right: var(--space-xs);
	}

	.content_mobile{
		display: none;
	}

	@media screen and (max-width:768px){
		.content_mobile{
			display: block;
		}

		.content_pc{
			display: none;
		}
	}

/* header */
header{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	z-index: 100;
}

.header_logo > img{
	height: 3.125rem;
}

.header_nav{
	letter-spacing: 0.1em;
}

.header_nav ul{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-n);
}

/* ☆main */
/* firstview */
.firstview{
	width: 100%;
	text-align: center;
	background: linear-gradient(to bottom, #fff, #fff 60%, var(--c-sky) 50%);
	padding-top: 150px;
}

.firstview img{
	width: 95%;
	max-width: 69rem;
}

.scrollwrap{
	height: 5.5rem;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--c-sky);
	margin-bottom: 20px;
}

/*Scrollの位置調整*/
.scrolldown {
	position: absolute;
	width: 10%;
	height: 18%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	color: var(--c-grayb);
	text-align: center;
}

/*Scrollを促す縦線*/


.scrolldown span::after {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 4.0rem;
	animation: scroll 2s ease-in-out infinite;
	background: var(--c-grayb);

}

/*アニメーション*/
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}

	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}

	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}

	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

.wrapper{
	width: 95%;
	max-width: 62.5rem;
	margin: 0 auto;
	text-align: center;
}

/* introduction */
.intro_1{
	max-width: 47rem;
	padding-top: 6rem;
	padding-bottom: 8.75rem;
}

.intro_2{
	max-width: 62.5rem;
	padding-bottom: 4.5rem;
}

/* point */
.wide_wrapper{
	width: 100%;
	text-align: center;
}

.point_position{
	position: relative;
	max-width: 95%;
	max-width: 47rem;
	margin: 0 auto;

}

.point_1{
	max-width: 47rem;
	padding-top: 6rem;
	padding-bottom: 8.75rem;
}

.point_illust{
	max-width: 8rem;
	position: absolute;
	bottom: 0;
	right: 0;
}

/* work */

.work_position{
	position: relative;
	width: 95%;
	max-width: 47rem;
	margin: 0 auto;

}

.work_1{
	max-width: 47rem;
	padding-top: 6rem;
	padding-bottom: 8.75rem;
	position: relative;
}

.work_2{
	width: 95%;
	max-width: 34rem;
	padding-bottom: 4.5rem;
}

.work_illust_1{
	max-width: 10.5rem;
	position: absolute;
	bottom: 0;
	left: 100%;
	transform: translate(-50%, -50%);
}

.work_illust_2{
	max-width: 7rem;
	position: absolute;
	top: 87%;
	left: 0;
}

/* visit */
.visit_box{
	width: 95%;
	max-width: 47rem;
	margin: 0 auto;
	padding-top: 6rem;
	padding-bottom: 6rem;
	letter-spacing: 0.05em;
}
.visit_box > h2{
	margin-bottom: 1rem;
}

.visit_box > p{
	line-height: 1.75;
}

.visit_buttons{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: calc(var(--space-n) * 1.5);
	margin-top: 4.5rem;
}

.visit_buttons > .button_round{
	width: 15.625rem;
	height: 4rem;
	font-weight: 600;
	letter-spacing: 0;
	border-radius: 15px;
}

.visit_buttons .button_flex > p{
	letter-spacing: 0.075em;
}

/* flow */
.flow_position{
	position: relative;
	max-width: 47rem;
	margin: 40px auto 0;
}

.flow_1{
	max-width: 47rem;
	margin: 0 auto;
	padding-bottom: 8.75rem;
}

.flow_illust_1{
	max-width: 5rem;
	position: absolute;
	top: -4rem;
	left: 0;
}

.flow_illust_2{
	max-width: 5rem;
	position: absolute;
	top: -4rem;
	right: 0;}

/* company */
.company_1{
	max-width: 47rem;
	margin: 0 auto;
	padding-top: 6rem;
	padding-bottom: 3rem;
}

iframe{
	width: 100%;
	max-width: 47rem;
	height: 25rem;
	margin-bottom: 8.75rem;
}

/* form */
.contact_wrapper{
	padding: 4rem 0;
}

.contact_form{
	width: 95%;
	max-width: 28.8rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-n) * 1.5);
}

.form_title{
	text-align: center;
	letter-spacing: 0.05em;
}

.form_text{
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 1rem;
	line-height: 1.75;
}

.form_row{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
}

.form_row > p{
	width: 100%;
	font-weight: bold;
	margin-right: var(--space-xs);
}

.form_row:last-of-type > p{
	align-self: flex-start;
}

.form_row > p > span{
	font-size: var(--font-s);
	color: red;
}

.form_row > input{
	width: 100%;
	height: 2.8rem;
	padding: var(--space-xs) var(--space-n);
	border: 2px solid #000;
	border-radius: 10px;
}

.form_row > textarea{
	width: 100%;
	height: 10em;
	padding: var(--space-xs) var(--space-n);
	border: 2px solid #000;
	border-radius: 10px;
}

.form_confirmation_border{
	overflow-wrap: break-word;
}

.form_pp{
	text-align: center;
}

.form_pp a{
	color: var(--c-blue);
}

.form_button{
	/* buttonタグのリセットCSS */
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	appearance: none;

	color: #fff;
	padding: 8px 24px;
	background-color: #3abec1;
	cursor: pointer; /* ポインターカーソルを表示 */
}

.form_button[disabled] {
	background-color: #ccc;
	cursor: not-allowed; /* クリック不可のカーソルを表示 */
}

.form_button_row{
	text-align: center;
}

.form_button{
	display: block;
	width: 7.75rem;
	border: 2px solid #000;
	border-radius: 5px;
	background-color: var(--c-yellow);
	font-weight: 600;
	margin: 0 auto;
}

.complete_wrapper {
	text-align: start;
	line-height: 1.5em;
}

.complete_title {
	margin: 50px auto 80px;
	text-align: center;
}

.form_confirmation_border {
	margin-bottom: 30px;
}

.form_confirmation_border_bottom {
	margin-bottom: 80px;
}

/* .voices_position{
	margin: 0 auto;
	max-width: 47rem;
} */

/* footer */

.footer_wrapper{
	position: relative;
	width: 100%;
	max-width: 62.5rem;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 1rem;
	padding-top: 6rem;
	padding-bottom: 8.75rem;
	letter-spacing: 0.05em;
}


.footer_logo{
	width: clamp(9rem,18.75vw,11rem);
}

.footer_nav{
	display: flex;
	flex-direction: column;
	gap: var(--space-n);
}

.footer_nav a{
	color: #fff;
}

.footer_nav ul{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(1rem,2.0833333333333333333333333333333vw,2rem);
	flex-wrap: wrap;
}

.footer_nav a{
	display: inline-block;
}

.footer_nav .footer_button{
	display: grid;
	grid-template-columns: repeat(2, auto);
	align-items: center;
	gap: var(--space-s);
	flex-shrink: 0;

}

.footer_button p{
	letter-spacing: 0.1em;
}

.footer_button p span{
	letter-spacing: 0;
}

.footer_icon{
	width: 1.5rem;
}


.copyright{
	text-align: center;
	display: block;
}

.insert_br{
	display: none;
}

@media screen and (max-width: 768px){
	.visit_buttons {
		margin-top: 2rem;
	}
	header{
		align-items: flex-start;
	}

	.header_nav ul{
		flex-direction: column;
	}
	.header_logo > img{
		height: 2rem;
		margin-top: 10px;
	}

	.header_buttons{
		width: clamp(8rem,42.666666666666666666666666666667vw,13rem);
		height:3.25rem;
		padding: var(--space-xs);
	}

	.header_buttons > p{
		font-size: 0.75rem;
	}

	.header_buttons > p > span{
		font-size: 0.55rem;
	}

	.header_buttons > img{
		width: 1rem;
	}
	
	

	.firstview img{
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		padding-left: 1rem;
	}

	.intro_1,
	.point_1,
	.work_1,
	.visit_box,
	.company_1,
	.footer_wrapper{
		padding-top: 3rem;
		padding-bottom: 4.35rem;
	}

	.flow_1 {
		padding-top: 1rem;
		padding-bottom: 4.35rem;
	}

	.point_illust{
		max-width: 7rem;
		bottom: -1rem;
		right: 2rem;
	}

	.work_illust_1{
		max-width: 4.5rem;
		left: 85%;
	}

	.work_illust_2{
		display: none;
	}

	.flow_illust_1,
	.flow_illust_2{
		max-width: 3.5rem;
		transform: none;
		top: -6rem;
	}

	.visit_buttons{
		flex-direction: column;
	}

	.form_row{
		flex-direction: column;
		align-items: flex-start;
	}

	.footer_wrapper{
		flex-direction: column;
		align-items: center;
	}

	.footer_logo{
		margin-bottom: 3rem;
	}

	.footer_nav ul{
		display: flex;
		flex-direction: column;
		gap: var(--space-n);
	}

	.insert_br{
		display: block;
	}
}

.form_text_required {
	font-size: var(--font-s);
	color: red;
}

.content_title {
	font-size: clamp(22px, 6.5vw, 32px);
}

.content_title::after {
	content: '';
	display: block;
	width: 105px;
	height: 1px;
	background-color: #000;
	margin: 20px auto 0;
}

.introduction_title {
	margin-bottom: 80px;
}

.title_work,
.flow_title,
.voices_title,
.company_title {
	padding-top: 100px;
}

.voice_1 {
	max-width: 47rem;
	padding-top: 3rem;
	padding-bottom: 8.75rem;
	position: relative;
}

@media screen and (max-width:768px) {

	.introduction_title {
		margin-bottom: 40px;
	}
	
	.title_work,
	.flow_title,
	.voices_title,
	.company_title {
		padding-top: clamp(50px, 16.6vw, 80px);
	}

	.flow_position{
		margin: clamp(30px, 10vw, 40px) auto 0;
	}

	/* .wide_wrapper {
		padding: 0 clamp(20px, 6.667vw, 50px);
	} */

	.wrapper {
		width: 100%;
		max-width: 600px;
	}

	.content_padding {
		padding: 0 clamp(20px, 6.667vw, 40px);
	}

	.content_padding_wide {
		padding: 0 clamp(20px, 6.667vw, 80px);
	}

	.mobile_style {
		max-width: 30rem;
		margin: 0 auto;
	}

	.visit_title {
		font-size: clamp(22px, 6.5vw, 32px);
	}

	.complete_wrapper {
		padding: 0 clamp(20px, 6.667vw, 40px);
	}
	
	.complete_title {
		margin: 50px auto clamp(50px, 15vw, 80px);
	}

	.form_confirmation_border_bottom {
		margin-bottom: clamp(50px, 15vw, 80px);
	}
}