@charset "UTF-8";

/**********************************
ページ全体の記述↓
**********************************/
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

element {
	--main-theme-color: #70d954;
}

body {
	-webkit-text-size-adjust: 100%;
}

main ::selection {
	background: rgba(112, 217, 84, 0.75);
	color: #666;
	text-shadow: none;
}

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

p,
a,
h2,
table {
	color: #333;
}

p,
table,
dl {
	line-height: 1.7;
	letter-spacing: 0.01em;
}

main p,
ol li,
table tr th,
table tr td {
	text-shadow: 0 0 0.1em #ffffff;
}

.read_text {
	margin-bottom: 2em;
}

.clear_fix::after {
	display: block;
	content: "";
	clear: both;
}


/***************
パンくずリスト
****************/
.pan_list li::after {
	content: ">";
	margin: 0 1em;
}

.pan_list li:last-child::after {
	content: none;
}

.pan_list li {
	display: inline-block;
	font-size: 0.9em;
	color: #888888;
}

.pan_list li a {
	text-decoration: none;
	color: #888888;
	transition: 0.15s sll;
}

.pan_list li a:hover {
	color: #70d954;
}

.pan_list {
	margin: -5em 0 5em;
}


/**********************************
背景画像
**********************************/
body {
	background: url("../image/particle_long_base.jpg");
	background-attachment: fixed;
	animation: bgiLoop 330s linear infinite;
}

.bg_particle {
	background: url("../image/particle_long_fx.png");
	background-attachment: fixed;
	animation: bgiLoop 120s linear infinite;
}

@keyframes bgiLoop {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 0px -3000px;
	}
}

/*iOS端末ではbackground-attachment: fixed;を認識出来ないため、背景画像を固定する場合はこちらの記述を使う*/
/* body::before {
	content: "";
	display: block;
	width: 100%;
	height: 100vh;
	background: url("../image/particle_long_base.jpg");
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	animation: bgiLoop 330s linear infinite;
}

.bg_particle::before {
	content: "";
	display: block;
	width: 100%;
	height: 100vh;
	background: url("../image/particle_long_fx.png");
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	animation: bgiLoop 120s linear infinite;
} */

/**********************************
背景画像
**********************************/
/**********************************
各コンテンツのフェードインの記述↓
**********************************/
/*スクロールしなくてもアニメーションを再生する。*/
.first_fade_in {
	opacity: 0;
	animation-name: fade-in;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

.second_fade_in {
	opacity: 0;
	animation-name: fade-in;
	animation-duration: 1.5s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

.third_fade_in {
	opacity: 0;
	animation-name: fade-in;
	animation-duration: 1.5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}


@keyframes fade-in {
	from {
		opacity: 0;
		transform: translate(0px, 30px);
	}

	to {
		opacity: 1;
		transform: translate(0px, 0px)
	}
}


/*スクロールした画面の高さ検出でフェードイン*/
.fade {
	transition: all 1.5s;
	opacity: 0;
	visibility: hidden;
	transform: translate(0px, 30px);
}

.fadein {
	opacity: 1;
	visibility: visible;
	transform: translate(0px, 0px);
}

/**********************************
各コンテンツのフェードインの記述↑
**********************************/

/**********************************
ページ全体の記述↑
**********************************/

/**********************************
header↓
**********************************/
header {
	position: fixed;
	width: 100%;
	margin-left: auto;
	z-index: 50;
}


/**********************************
レスポンシブの記述↓
**********************************/

/**********************************
レスポンシブの記述↑
**********************************/

/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {}

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

/**********************************
レスポンシブの記述↑
**********************************/
/**********************************
header↑
**********************************/
/**********************************
main↓
**********************************/
.main_wrap {
	width: 80%;
	margin: 0 auto;
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700&display=swap');

.main_wrap p,
.main_wrap h2,
.main_wrap h3,
.main_wrap ul,
.main_wrap dl,
.main_wrap table {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

.h1_title {
	font-size: 4.5em;
	padding: 2em 0 1em 0;
}

.h1_title img {
	width: 3em;
}

.h1_title_contact img {
	width: 4em;
}

.h1_title_blog img {
	width: 2.4em;
}

.h2_title {
	margin: 8em 0 2.5em
}

.h2_title img {
	width: 5em;
}

.h2_title_career img {
	width: 8em;
}


/**********************************
main↑
**********************************/
/**********************************
footer↓
**********************************/
.normal_footer {
	background-color: #333333;
	padding: 3em 10% 3em;
	position: relative;
	z-index: 10000;
}




.footer_flex {
	display: flex;
	justify-content: space-between;
}

.footer_name {
	width: 50%;
	padding-left: 15%;
}

.SNS_link_title {
	width: 50%;
	/* padding-right: 15% ;*/
	padding-bottom: 1em;
}

.SNS_flex {
	width: 100%;
	display: flex;
}

.SNS_icon {
	width: 5em;
	height: 5em;
}

.SNS_icon:first-child {
	margin-right: 1em;
}

.SNS_icon a img {
	transition: all 0.1s;
}

.SNS_icon a img:hover {
	transform: scale(1.05);
}

#page_top {
	text-align: center;
}

#page_top a {
	display: inline-block;
	padding: 0.3em 0.7em;
	font-size: 2.5em;
	color: #eee;
	transition: all 0.2s;
}

#page_top a:hover {
	transform: scale(1.1);
	color: #70d954;
}

.footer_copy {
	padding-top: 1em;
	color: #888888;
}

/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {
	.footer_name {
		padding-left: 0em;
	}

	.SNS_icon {
		width: 4em;
		height: 4em;
	}
}


@media screen and (max-width:599px) {
	.footer_flex {
		flex-direction: column;
	}


	.SNS_link_title {
		margin: 3em auto 0;
	}

	.SNS_icon {
		width: 4.5em;
		height: 4.5em;
	}

	.SNS_flex {
		width: 60%;
		margin: 0 auto;
		justify-content: space-around;
	}

	.footer_name {
		width: 80%;
		padding-left: 0%;
		margin: 7em auto 0;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/

/**********************************
footer↑
**********************************/
/**********************************
aboutの記述↓
**********************************/

.about_section,
.career_section {
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
}

.about_main_flex,
.career_flex {
	display: flex;
}

.career_section {
	margin-bottom: 5em;
}

.career_dl dd {
	margin-right: 1em;
}

.about_main_text {
	margin-left: 2em;
}

.about_main_text_name p {
	margin-bottom: 1.5em
}

.mogami_pic {
	position: relative;
	max-width: 300px;
}

/* .mogami_pic::before {
	display: block;
	content: "最上谷の自画像です";
	color: #fff;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 0.9em;
	text-align: center;
	height: 3.2em;
	width: 100%;
	padding-top: 1.2em;
	margin-top: 28%;
	border-radius: 25px;
	position: absolute;
	background: #555;
} */


/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {
	.about_main_flex {
		flex-direction: column;
	}

	.mogami_pic {
		width: 50%;
		margin: 0 auto 1.5em;
	}

	.about_main_text_name {
		text-align: center;
	}
}

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

	.about_main_flex {
		flex-direction: column;
		margin-left: -10%;
	}

	.mogami_pic {
		width: 70%;
		margin: 0 auto 1.5em;
	}

	.about_main_text_name {
		text-align: center;
	}

	.career_dl dd {
		width: 5.5em;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/
/**********************************
aboutの記述↑
**********************************/

/**********************************
worksの記述↓
**********************************/
.works_section_nav {
	margin-bottom: 10em;
}

.works_prologue_section {
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
}

.work_main_text div {
	display: flex;
}

.work_main_text div dt {
	font-weight: bold;
	width: 9.5em;
	margin-bottom: 0.3em;
}

/*****
ページ内リンク
*****/
.works_link_nav {
	display: flex;
	flex-direction: column;
	position: sticky;
	position: -webkit-sticky;
	/* Safari */
	bottom: 1em;
	z-index: 0;
	margin-left: auto;
	list-style: none;
	width: 90px;
	margin-top: 120px;
	transform: translateY(500px);
	transition: 1.3s transform ease;
	/* transition: 1.3s transform cubic-bezier(0.68,-0.3, 0.33, 1.3); */
}

.works_link_nav.scrolled {
	transform: translateY(0px);

}

/* .works_link_nav.close {
	transform: translateY(500px);
} */

.works_link_nav li {
	margin-bottom: 0.5em;
}

.works_link_nav li a {
	/*display: block;*/
	margin-bottom: 0.5em;
	width: 80px;
	height: 80px;
	text-align: center;
	text-decoration: none;
	font-family: 'Fredoka One';
	font-size: 1.1em;
	line-height: 1.2;
	color: #888888;
	background-color: #fff;
	border: 3px solid #70d954;
	border-radius: 20%;
	transition: 0.15s all;
}

.one_line_padding {
	display: table-cell;
	vertical-align: middle;
}

.two_line_padding {
	display: table-cell;
	vertical-align: middle;
}


.works_link_nav li a:hover {
	/* color: #ffffff;
	background: #70d954; */
	transform: scale(1.05);
}

.works_link_nav li a:active {
	/* color: #ffffff;
	background: #70d954; */
	transform: scale(0.97);
}

.works_link_nav li a.current {
	color: #ffffff;
	background: #70d954;
	transform: scale(1.05);
}

.h2_title_other_Illust img {
	width: 12em;
}

.h2_title_other_design img {
	width: 14em;
}

#Illust,
#Other_Illust,
#Logo,
#Web,
#Other_design {
	padding: 110px 0 0;
	margin: 0 0 2em;
}




/*SPnavの記述ここから*/

.SP-nav-box {
	visibility: hidden;
}

.SP-nav-box.scrolled .toggle-nav,
.SP-nav-box.scrolled .SP_nav {
	bottom: 0em;
}

.SP-nav-box.close .toggle-nav,
.SP-nav-box.close .SP_nav {
	bottom: -10em;
}


.toggle-nav {
	width: 70px;
	height: 70px;
	background: #70d954;
	border-radius: 50px 50px 0 0;
	cursor: pointer;
	position: fixed;
	bottom: -10em;
	left: calc(50% - 35px);
	z-index: 1;
	transition: bottom 0.5s ease;
}

.toggle-nav::before {
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	/* background: rgba(0, 0, 0, 0.2); */
	border-radius: 0 0 30px 0;
	box-shadow: 10px 10px 0 8px #70d954;
	position: absolute;
	top: 35px;
	left: -35px;
	z-index: -1;
}

.toggle-nav::after {
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	/* background: rgba(0, 0, 0, 0.2); */
	border-radius: 0 0 0 30px;
	box-shadow: -10px 10px 0 8px #70d954;
	position: absolute;
	top: 35px;
	left: 70px;
	z-index: -1;
}


.nav_bar_SP {
	width: 40px;
	height: 7px;
	background: #fff;
	border-radius: 5px;
	position: absolute;
	top: calc(50% - 3.5px);
	left: calc(50% - 20px);
	z-index: 1;
}

.nav_bar_SP.nav_bar-2 {
	transform: rotate(90deg);
}


.nav_bar_box {
	width: 70px;
	height: 70px;
	transition: transform 0.7s ease;
}

.nav_bar_box.active {
	transform: rotate(225deg);
}

.SPnav_bg {
	width: 100vw;
	height: 100vh;
	position: fixed;
	bottom: 0;
	visibility: hidden;
}

.SPnav_bg.active {
	visibility: visible;
}


/*nav本体*/

.SP_nav {
	position: fixed;
	bottom: -10em;
	left: calc(50% - 35px);
	transition: bottom 0.5s ease;
}

.SP_nav::before {
	content: "";
	display: block;
	width: 70px;
	height: 70px;
	background: #70d954;
	border-radius: 60px;
	transition: transform 0.7s ease;
}

.SP_nav.active::before {
	transform: scale(5);
}

.nav-item {
	position: absolute;
	width: 70px;
	height: 70px;
}

.nav-item a {
	width: 70px;
	height: 70px;
	background: #70d954;
	text-align: center;
	text-decoration: none;
	font-family: 'Fredoka One';
	font-size: 1.1em;
	line-height: 1.2;
	display: table-cell;
	vertical-align: middle;
	color: #888888;
	background-color: #fff;
	border: 3px solid #70d954;
	border-radius: 20%;
	transition: 0.1s color ease;
}

.nav-item a:hover,
.nav-item a:active {
	color: #70d954;

}

.nav-item:nth-child(1),
.nav-item:nth-child(2),
.nav-item:nth-child(3),
.nav-item:nth-child(4),
.nav-item:nth-child(5) {
	bottom: -2em;
	left: 0;
	transition: bottom 0.5s ease, left 0.5s ease;
}

.nav-item:nth-child(2) {
	transition-delay: 0.02s;
}

.nav-item:nth-child(3) {
	transition-delay: 0.04s;
}

.nav-item:nth-child(4) {
	transition-delay: 0.06s;
}

.nav-item:nth-child(5) {
	transition-delay: 0.08s;
}

.nav-item.active:nth-child(1) {
	bottom: 0;
	left: -7em;
}

.nav-item.active:nth-child(2) {
	bottom: 4.9em;
	left: -5em;
}

.nav-item.active:nth-child(3) {
	bottom: 7em;
	left: -0em;
}

.nav-item.active:nth-child(4) {
	bottom: 4.9em;
	left: 5em;
}

.nav-item.active:nth-child(5) {
	bottom: 0em;
	left: 7em;
}

/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {}

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

	.work_main_text div {
		display: flex;
		flex-direction: column;
	}

	.work_main_text div dd {
		margin: -0.3em 0em 0.65em 0.5em;
	}

	.works_link_nav {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: sticky;
		position: -webkit-sticky;
		/* Safari */
		bottom: 0em;
		left: 0;
		z-index: 0;
		list-style: none;
		width: 100%;
		height: 80px;
		padding: 5px 0;
		margin-top: 0px;
		background: rgba(255, 255, 255, 0.8);
		display: none;
	}

	.SP-nav-box {
		visibility: visible;
	}

	.works_link_nav li {
		margin-bottom: 0em;
	}

	.works_link_nav li a {
		/*display: block;*/
		width: 70px;
		height: 70px;
		text-align: center;
		text-decoration: none;
		font-family: 'Fredoka One';
		font-size: 1.1em;
		line-height: 1.2;
		color: #888888;
		background-color: #fff;
		border: 3px solid #70d954;
		border-radius: 20%;
		transition: 0.15s all;
	}

	.h2_title_other_Illust img {
		width: 11em;
	}

	.h2_title_other_design img {
		width: 11em;
	}

}

/**********************************
レスポンシブの記述↑
**********************************/
/**********************************
worksの記述↑
**********************************/
/**********************************
blog_topicksの記述↓
**********************************/
.blog_box_flex {
	max-width: 1200px;
	margin: 0 auto;
}

.blog_box {
	/*    padding: 1em;*/
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 2px solid lightgray;
	margin-bottom: 3em;
	transition: 0.1s all;
}

.blog_box:hover {
	border: 2px solid #70d954;
	box-shadow: 0 0 0.1em 0.01em #70d954;
}

.topick_time {
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	font-size: 0.75em;
	color: #eee;
	background: rgba(50, 50, 50, 0.5);
	padding: 0.1em 0.5em;
	border-radius: 15px;
}

.topick_flex {
	display: flex;
}

.topick_box {
	text-decoration: none;
}

.topick_box_img {
	width: 15em;
	margin-right: 2em;
}

.topick_box_img img {
	width: 15em;
}

.topick_box_text {
	/* width: calc(80% - 3.5em); */
	padding-right: 1em;
}

.topick_box_text_title {
	padding: 1em 0 0.5em;
	font-weight: normal;
	font-size: 1.3em;
	text-indent: -0.4em;
}


/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {

	.blog_box_flex {
		max-width: 700px;
		margin: 0 auto;
	}

	.blog_box_flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.blog_box {
		width: 47.5%;
	}

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

	.topick_box_img {
		width: 100%;
	}

	.topick_box_img img {
		width: 100%;
	}

	.topick_box_text {
		width: 100%;
		padding: 0em 1em 2.2em 1em;
	}

	.topick_box_text_title {
		padding: 0.5em 0 0.5em;
		font-size: 1.1em;
	}

	.topick_box_text_main_text {
		font-size: 0.9em;
	}

	.topick_box_text_main_text p {
		line-height: 1.5;
		letter-spacing: 0.07em;
	}
}

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

	.blog_box_flex {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.blog_box {
		width: 100%;
	}

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

	.topick_box_img {
		width: 100%;
	}

	.topick_box_img img {
		width: 100%;
	}

	.topick_box_text {
		width: 100%;
		padding: 0em 1em 2.2em 1em;
	}

	.topick_box_text_title {
		padding: 0.5em 0 0em;
		font-size: 0.9em;
	}

	.topick_box_text_main_text {
		display: none;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/
/**********************************
blog_topicksの記述↑
**********************************/
/**********************************
contactの記述↓
**********************************/
.contact_text_section,
.contact_button_section {
	padding: 1em 0;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
	/* border: 2px solid #70d954; */
	margin-bottom: 3em;
}

.h2_title_contact {
	margin-bottom: 1em;
	text-align: center;
	font-weight: normal;
}

.cotact_text_span {
	font-weight: bold;
	padding: 0 0.2em;
}

.contact_mail a {
	display: block;
	font-size: 1.4em;
	margin-bottom: 1em;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s;
}

.contact_mail a:hover {
	color: #70d954;
}

/**********************************
contact_ボタンの記述↓↓↓↓
**********************************/

.contact_button_box,
.order_form_section {
	padding: 2em 0;
	/* border-bottom: 4.5px dashed #70d954; */
}

.contact_button,
.submit-btn,
.end-message,
.false-message {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1.4rem;
	font-weight: 900;
	line-height: 1.5;
	position: relative;
	display: block;
	width: 100%;
	max-width: 650px;
	padding: 1rem 0rem;
	margin: 0 auto;
	margin-bottom: 2em;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #333;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.8);
	border: 2px solid #70d954;
	border-radius: 10px;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.contact_button span {
	position: relative;
	white-space: nowrap;
	z-index: 1;
}

.contact_button::before {
	position: absolute;
	top: -15.5em;
	left: -34em;
	width: 30em;
	height: 30em;
	content: '';
	-webkit-transition: all 1s ease-in-out;
	transition: all 0.8s ease;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	background: #70d954;
	z-index: 1;
}

.contact_button::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0.7em;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 20px solid #70d954;
	/* border-radius: 5px; */
	transform: translate(0, 0em) rotate(0deg) scale(1);
	z-index: 3;
	transition: 0.5s all;
	opacity: 0;
}

.contact_button:hover {
	color: #fff;
}

.contact_button:hover::before {
	left: -0em;
}

.contact_button:hover::after {
	border-left: 20px solid #fff;
	opacity: 1;
	transform: translate(0, 0) rotate(0deg) scale(1.1);
	animation: move_arrow 1.5s infinite;
}

@keyframes move_arrow {
	60% {
		left: 0.9em;
	}
}

/**********************************
contact_formの記述↓
**********************************/

.contact_ja_title {
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 2.5em;
	padding: 12.3rem 0 5.5rem 0;
	/* white-space: nowrap; */
}

.order_form_section {
	margin: 4em 0;
}


/************↓↓↓↓↓formの中身の記述↓↓↓↓**************/
.form_main_box {
	margin: 0 0 5em 0;
}

.form_entry_big_box {
	background: rgba(255, 255, 255, 0.5);
	border: 2px solid #70d954;
	border-radius: 10px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding-bottom: 1em;
	margin-bottom: 3em;
}

.entry_box_title {
	color: #fff;
	font-size: 1.6em;
	font-family: 'Kosugi Maru', sans-serif;
	padding: 0.5em 8%;
	margin: -1.5px -1.5px 1em;
	background: #70d954;
	border-radius: 10px 10px 0 0;
}

.entry_box {
	padding: 0 8% 2em 8%;
}

.entry_box_label {
	font-size: 0.85em;
	font-family: 'Kosugi Maru', sans-serif;
	color: #444;
}

/*****inputの装飾*****/

/*オートコンプリートの色を塗り替えます。*/
input:-webkit-autofill {
	box-shadow: 0 0 0 10000px #fff inset;
}

/*safariの自動角丸を無効に*/
input[type="text"],
input[type="email"],
textarea {
	-webkit-appearance: none;
	border-radius: 0;
}

/*placeholderの指定*/
::placeholder {
	color: rgba(0, 0, 0, 0.2);
	font-size: 0.8em;
}

.required::after {
	display: inline-block;
	content: "必須";
	padding: 0 0.5em;
	margin: -0.2em 0 0 1em;
	background: #d95470;
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.8em;
	color: #eee;
}

.arbitrary::after {
	display: inline-block;
	content: "任意";
	padding: 0 0.5em;
	margin: -0.2em 0 0 1em;
	background: gray;
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.8em;
	color: #eee;
}


input[type="text"],
input[type="email"] {
	width: 50%;
	min-width: 20em;
	font-size: 1.2em;
	padding: 0.3em 0 0.3em;
	border: none;
	border-bottom: 3px dashed lightgray;
	transition: 0.2s border-bottom ease;
}

input[type="text"]:focus,
input[type="email"]:focus {
	border-bottom: 3px solid #70d954;
	outline: 0;
}

.entry_textarea {
	width: 100%;
	min-height: 5.1rem;
	font-size: 1.1rem;
	font-family: Arial helvetica sans-serif;
	letter-spacing: 0.05em;
	line-height: 1.35;
	padding: 0.3em 0 0.3em;
	border: none;
	border-bottom: 3px dashed lightgray;
	transition: 0.2s border-bottom ease;
	/*↑↑↑↑all で指定してしまうとフリーズするほどバグるので気を付けよう！↑↑↑↑*/
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.entry_textarea::-webkit-scrollbar {
	display: none;
}

.entry_textarea:focus {
	border-bottom: 3px solid #70d954;
	outline: 0;
}



/*↓↓↓↓radio_button の装飾↓↓↓↓*/
/*「https://kodocode.net/design-css-radiobutton/」の一番目を参考にしています。*/
.radio_button_box {
	position: relative;
	color: #AAAAAA;
	width: 100%;
	float: left;
}

.radio_button_box input[type=radio] {
	position: absolute;
	visibility: hidden;
}

.radio_button_box dd label {
	display: block;
	position: relative;
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 1.2em;
	padding: 0.5em 2.5em 0.5em 2.5em;
	z-index: 9;
	cursor: pointer;
	transition: all 0.25s ease;
}

.radio_button_box:hover dd label {
	color: #333;
}

.radio_button_box .check {
	display: block;
	position: absolute;
	border: 4px solid #AAAAAA;
	border-radius: 100%;
	height: 30px;
	width: 30px;
	top: calc(50% - 15px);
	left: 0px;
	z-index: 5;
	transition: border .25s ease;
	-webkit-transition: border .25s ease;
}

.radio_button_box .check::before {
	display: block;
	position: absolute;
	content: "";
	border-radius: 100%;
	height: 15px;
	width: 15px;
	top: calc(50% - 7.5px);
	left: calc(50% - 7.5px);
	margin: auto;
	transition: background 0.25s ease;
}

.radio_button_box:hover .check {
	border: 4px solid #333;
}

.radio_button_box input[type=radio]:checked~dd label {
	color: #70d954;
}

.radio_button_box input[type=radio]:checked~.check {
	border: 4px solid #70d954;
}

.radio_button_box input[type=radio]:checked~.check::before {
	background: #70d954;
	animation: checked 0.4s ease forwards;
}

@keyframes checked {
	0% {
		transform: scale(0);
	}

	40% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

/*↑↑↑↑radio_button の装飾ここまで↑↑↑↑*/

.submit_message_box {
	position: relative;
	padding: 4em 0 5.5em 0;
}

.submit-btn {
	position: absolute;
	top: 0;
	border-radius: 10px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	max-width: none;
	cursor: pointer;
	overflow: hidden;
	transition: 0.5s box-shadow ease;
}

.submit-btn:hover {
	box-shadow: 0 0 8px 0px #70d954;
}

.submit-btn::before {
	position: absolute;
	top: -15.5em;
	left: -34em;
	width: 30em;
	height: 30em;
	content: '';
	-webkit-transition: all 1s ease-in-out;
	transition: all 0.8s ease;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	background: #70d954;
	z-index: 1;
}

.submit-btn:hover::before {
	animation: submit_hover 2s ease infinite;
}

@keyframes submit_hover {
	30% {
		left: -33.5em;
	}
}

.end-message {
	display: none;
	position: absolute;
	top: 0;
	max-width: none;
	border-radius: 10px;
	overflow: hidden;
}

.end-message span {
	position: relative;
	z-index: 10;
}

.pressed_submit {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	color: #fff;
	text-shadow: none;
	transition: 0.5s color ease 0.1s;
}

.pressed_submit::before {
	position: absolute;
	top: -15.5em;
	left: -34em;
	width: 30em;
	height: 30em;
	content: '';
	-webkit-transition: all 1s ease-in-out;
	transition: all 0.8s ease;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	background: #70d954;
	z-index: 1;
	animation: pressed_submit 1.5s ease 0s forwards;
}

@keyframes pressed_submit {
	100% {
		left: calc(50% - 15em);
		transform: scale(1.5) rotate(135deg);
	}
}


.false-message {
	display: none;
	position: absolute;
	top: 1.5px;
	background: #d95470;
	border: none;
	max-width: none;
	color: #eee;
	text-shadow: none;
	border-radius: 10px;
}

/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {}

@media screen and (max-width:599px) {
	.form_main_box {
		margin: 0 -10% 5em -10%;
	}

	.submit-btn,
	.end-message,
	.false-message {
		margin: 0 -10% 5em -10%;
		width: 120%;
	}

	/* .entry_box_title {
		font-size: 1.4em;
	} */

	input[type="text"],
	input[type="email"] {
		width: 100%;
		min-width: 0em;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/

/**********************************
contactの記述↑
**********************************/
/**********************************
works、WEB作品の解説ページの記述↓
**********************************/

.section_works_web {
	margin-bottom: 3em;
}

.h2_web_title {
	position: relative;
	font-family: YuGothic, 'Yu Gothic', 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
	font-size: 2em;
	margin-bottom: 1.5em;
}

.h2_web_subtitle {
	margin-left: 0.5em;
	font-size: 0.5em;
}

.web_flex {
	display: flex;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
}

.web_img_box {
	width: 40%;
	display: flex;
	flex-direction: column;
}

.web_text_table {
	width: 50%;
	margin-left: 5%;
}

.web_text_table table caption {
	text-align: left;
	font-size: 1.35em;
	margin-bottom: 2em;
	display: none;
}

.web_text_table table tr th {
	width: 7em;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
	padding-right: 1.5em;
}

.web_text_table table tr td {
	padding-bottom: 2em;
}

.table_link_padding {
	margin: 0 0.25em;
}


.view_more {
	font-size: 1.3em;
	margin: 3em 0;
	font-family: 'Fredoka One';
	font-weight: normal;
	letter-spacing: 0.1em;
}

.view_more a {
	position: relative;
	text-decoration: none;
	display: block;
	color: #888888;
	font-size: 1.3em;
	padding: 0.5em 0;
	font-weight: bold;
	transition: 0.2s all;
}

.view_more a span {
	padding-left: 0.5em;
	font-size: 0.6em;
	vertical-align: baseline;
	font-family: sans-serif;
	opacity: 0;
	transition: 0.2s all;
}

.view_more a::after {
	position: absolute;
	content: '';
	bottom: 0.4em;
	left: 0;
	width: 0;
	height: 10px;
	background: #70d954;
	transition: all 0.45s ease 0s;
}

.view_more a:hover {
	color: #333333;
}

.view_more a:hover span {
	opacity: 0.5;
}

.view_more a:hover::after {
	width: 100%;
}


/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {

	.web_text_table {
		width: 100%;
		margin-left: 0%;
	}

	.web_text_table table caption {
		text-align: left;
		font-size: 1.15em;
		margin-bottom: 1.5em;
		display: block;
		font-weight: bold;
	}

	.web_img_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 2em;
	}

	.web_img_box p {
		width: 48%;
	}

	.web_img_1mai {
		margin: 0 auto;
	}

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

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

	.web_text_table {
		width: 120%;
		margin-left: -10%;
	}

	.web_text_table table caption {
		text-align: left;
		font-size: 1.15em;
		margin-bottom: 1.5em;
		display: block;
		font-weight: bold;
	}

	.web_img_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 2em;
	}

	.web_img_box p {
		width: 100%;
	}

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

	.web_text_table table tr th {
		width: 6em;
		text-align: left;
		font-weight: normal;
		vertical-align: top;
		padding-right: 1em;
	}

	.h2_web_subtitle {
		position: absolute;
		bottom: -1em;
		left: -1em;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/
/**********************************
works、WEB作品の解説ページの記述↑
**********************************/

/**********************************
attentionページの記述↓
**********************************/
.attention a {
	text-decoration: underline;
}

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

	.attention a {
		font-size: 0.85em;
	}
}

/**********************************
attentionページの記述↑
**********************************/