@charset "UTF-8";

/*----------------------------------------------------------------------------*/
:root {
	--main-color: #1E3951;
	--main-bg-color: #FFF;

	--sub-color: #FFBC00;
	--sub-bg-color:#f3f9ff;

	--btn-cta-txt-color: #FFF;
	--btn-cta-bg-color: #FFBC00;

	--header-height: 5em;
	--header-text-color: #333;
	--header-bg-color: #FFF;
	--header-logo-size: 160;

	--footer-height: 2.5em;
	--footer-text-color: #FFF;
	--footer-bg-color: #333;

	--border-color: #ccc;
	--shadow-color: rgba(0, 0, 0, 0.3);

	--media-screen-pc: 1200;
	--media-screen-sp: 768;
	--limit-width:1200px;
	
}
/*----------------------------------------------------------------------------*/
/*
https://fontawesome.com/icons
*/

/*----------------------------------------------------------------------------*/
*{ 
	margin:0; 
	padding:0; 
	box-sizing: border-box; 
	font-size:16px; 
	color: var( --main-color ); 
	background:none;
	text-decoration: none;
	list-style-type: none;
}
img{ width:auto; height:auto; max-width:100%;}
.pc{ display: inherit; }
.sp{ display: none; }
.limit_width{
	position: relative;
	width:var( --limit-width );
	max-width:100%;
	margin:auto;
}
main .limit_width{
	width:var( --limit-width );
}
@media screen and (max-width: 1200px) {
	*{ font-size:1.333vw; }
	.limit_width{width:100%;margin:0;}
	main .limit_width{ width:100%; }
}
@media screen and (max-width: 768px) {
	*{ font-size:12px; }
	.pc{ display: none; }
	.sp{ display: inherit; }
	.limit_width{width:100%;margin:0;}
	main .limit_width{ 
		width: 100%;
		margin: auto;
	}
}

main,
section,
article{
overflow: hidden;
}

/*----------------------------------------------------------------------------*/
body, html {
}
body {
	display: flex;
	flex-direction: column;
}
main {
	display: block;
	flex: 1 0 auto;
}

/*----------------------------------------------------------------------------*/
body {
	font-family: Arial, sans-serif;
	background: var(--main-bg-color);
	min-height:100vh;
}

h1 .logo{ 
	position: relative;
	z-index: 10;
	
	margin-left:1em;
	width: calc( var( --header-logo-size ) * 1px );
}
@media screen and (max-width: 1200px) { h1 .logo{ width: calc( var( --header-logo-size ) * 100vw / var( --media-screen-pc ) ); } }
@media screen and (max-width: 768px) { 
	h1 .logo{ width: calc( 270 * var( --media-screen-sp ) / var( --media-screen-pc ) * 1px ); }
}
/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/
.cta_btn{
	display:block;
	width:fit-content;
	color: var(--btn-cta-txt-color);
	background: var(--btn-cta-bg-color);
	
	padding:.75em 2.25em;
	border-radius:2em;
	font-weight:600;
	
	box-shadow: 0em .125em .25em 0em rgba(0, 0, 0, 0.3);
}

.caution{
	font-size:.75em;
}
.sub_title{
	font-size:.75em;
}
.unit{
	font-size:.5em;
}
.note {
	vertical-align: top;
	font-size: .5em; /* サイズを少し小さくする（必要に応じて調整） */
	line-height: 1; /* 行の高さを調整 */
}
/*----------------------------------------------------------------------------*/
section{
	padding:3em 0;
	text-align:center;

}

section h2{
	font-size:2em;
	padding-bottom:1.25em;
}
section h2:after{
	content:"";
	display:block;
	width:2.75em;
	border:0.075em solid var( --sub-color );
	margin:auto;
}

@media screen and (max-width: 768px ) {
	section h2{
		font-size:1.75em;
	}
}

section p{
	padding:1.25em 1em;
/*	padding-bottom:1.25em;*/
}
@media screen and (max-width: 768px ) {
	section p {
		text-align: left;
		font-size: 1.125em;
		letter-spacing: .15em;
	}
}
article.cta_article {
	color: var(--main-bg-color);
	background: var(--main-color);
	height: 15em;
}

article.cta_article .limit_width {
	display: flex;
	align-items: flex-start;
	height: 17em;
	padding: 0 10em;
	flex-direction: column;
}

@media screen and (max-width: 768px ) {
	article.cta_article {
		height: 14em;
	}
	article.cta_article .limit_width {
		height: 16em;
		padding: 0 0 0 .5em;
	}
}

article.cta_article h3 {
	color: var(--main-bg-color);
	font-size: 1.75em;
	padding: .75em 1em;
	width: fit-content;
	letter-spacing: .25em;
	margin-left: 3em;
}
article.cta_article h3:before {
	content: "";
	display: block;
	position: relative;
	width: 1em;
	height: 1em;
	top: .5em;
	left: -.75em;
	background: url(../img/icon_hint.png) no-repeat center center;
	background-size: contain;
	transform: rotate(-45deg);
}
article.cta_article a.cta_btn {
	font-size: 1.25em;
	margin-top: .75em;
	margin-left: 9.5em;
}
@media screen and (max-width: 768px ) {
	article.cta_article h3 {
		margin-left: .5em;
		font-size: 1.5em;
	}
	article.cta_article a.cta_btn {
		font-size: 1.25em;
		margin-left: 0em;
	}
}

article.cta_article.left h3 {
	margin-left: 8em;
}
article.cta_article.left a.cta_btn {
}

article.cta_article.left .limit_width {
	align-items: center;
}

@media screen and (max-width: 768px ) {
	article.cta_article a.cta_btn {
		margin-left: 2em;
	}
	article.cta_article.left h3 {
		margin-left: 2em;
	}
	article.cta_article.left a.cta_btn {
		margin-left: 9em;
	}
}


article.cta_article img {
	width: 370px;
	position: absolute;
	bottom: 0;
	right: 5em;
}

article.cta_article.left img {
	left: 5em;
}

@media screen and (max-width: 1200px) {
	article.cta_article img{ width: calc( 340 * 100vw / var( --media-screen-pc ) ); }
}
@media screen and (max-width: 768px ) {
	article.cta_article img{ 
		margin-right: -3em;
		right: 0;
		width: calc( 280 * var( --media-screen-sp ) / var( --media-screen-pc ) * 1px );
	}
	article.cta_article.left img{ 
		margin-left: -6em;
	}
}


/*----------------------------------------------------------------------------*/
header{
	background:var( --main-bg-color );
	position: sticky;
	top: 0;
	z-index: 1;
		height: fit-content;
}
header .limit_width{
	display: flex;
	align-items: center;
}
header h1,
header nav{
	width: fit-content;
}
header h1{
/*	padding: 1.5em 0; */
}
header nav{
	margin-left:7em;
}
header nav ul.g_nav{
	display: flex;
	gap: .25em;
	margin:auto;
	align-items: center;

	font-size:.9em;
	font-weight:600;
}
header nav ul.g_nav li{
	width: fit-content;
	padding:2em 1em;
	
}
header nav ul.g_nav li.active{
	border:0.075em solid var( --sub-color );
}

.header_btns {
	display: flex;
	gap: .25em;
	position: absolute;
	top: .5em;
	right: 2em;
}

.header_btns li a {
	border-radius: 0 0 1em 1em;
	padding: 1em;
	box-shadow: 0em .125em .25em 0em var(--shadow-color);
}
.header_login{
	color: var(--main-bg-color);
	background: var(--main-color);
}
.header_contact{
	color: var(--btn-cta-txt-color);
	background: var(--btn-cta-bg-color);
}

@media screen and (max-width: 768px) {
	header{
		padding:0;
	}
	header .limit_width{
		height: 5em;
	}
	header nav {
		visibility: hidden; /* 初期状態では見えない */
		opacity: 0;
		background: var(--main-bg-color);
		width: 100%;
		height: 100vh;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		transform: translateY(-10px);
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	}

	header nav.open {
		visibility: visible; /* 開いたときに表示 */
		opacity: 1;
		transform: translateY(0);
	}

	header nav ul.g_nav {
		width: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 7em;
		display: flex
		;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	.nav_cross_btn {
		border: none;
		padding: 1.5em;
		position: absolute;
		right: 0;
	}

	header nav ul li{
		color: var(--main-color);
		background: var(--main-bg-color);
		font-size:1.5em;
		border:none;
	}
	header nav ul.g_nav li a{
		padding: 1.5em 1em;
		display: block;
	}
	header nav ul.g_nav li {
		width: 100%;
		padding: 0;
		border-top: 1px solid var(--main-color);
		text-align: center;
	}
	header nav ul.g_nav li:last-child {
		border-bottom: 1px solid var(--main-color);
	}
	header nav ul.g_nav *{
		font-size:1.25em;
	}

	.header_btns {
		display: flex;
		gap: 3.25em;
		width: 100%;
		height: fit-content;
		position: absolute;
		bottom: 12em;
		top: initial;
		right: initial;
		z-index: 2;
		flex-direction: column;
		align-items: center;
	}

	.header_btns li a {
		border-radius: 2em;
		padding: .75em 2em;
		font-weight:800;
		font-size: .9em;
	}

	.nav_cross_btn i{
		font-size:2em;
	}
}

/*----------------------------------------------------------------------------*/
section#mv{
	padding:2em 2em 2em 12em;
	color:var( --main-color );
	background:var( --sub-bg-color );
}

section#mv .limit_width {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-evenly;
	max-width:1000px;
}

section#mv p{
	text-align:left;
	font-weight:600;
}
section#mv .mv_text1{
	font-size:1.25em;
}
section#mv .mv_text2{
	font-size:1.75em;
}
section#mv .cta_btn{
	margin:1em 0;
	font-size:1.25em;
}

section#mv img{
	display:block;
	position: absolute;
	
	top:0em;
	right:1em;
}
@media screen and (max-width: 768px ) {
	section#mv .limit_width{
		align-items: center;
	}

	section#mv{
		padding:2em 1em;
	}
	section#mv p{
		text-align:center;
	}
	section#mv img{
		display:block;
		position: initial;
		
		width:100%;
	}
	
	
}
.mv_circles {
	display: flex;
	width:fit-content;
}
.mv_circle {
	display: flex;
	color: var(--main-bg-color);
	background: var(--main-color);
	border-radius: 50%;
	font-weight: 600;
	text-align: center;
	width: 8em;
	height: 8em;
	margin: .5em .25em;
	padding-top: .75em;
	box-shadow: .25em .25em 0em 0em var(--shadow-color);
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.mv_circle::before {
	content: "";
	display: block;
	position: absolute;
	width: 1.5em;
	height: 1em;
	margin-top: -4em;
	margin-bottom: 1em;
	background: url(../img/icon_hint.png) no-repeat center center;
	background-size: contain;
}

/*----------------------------------------------------------------------------*/
section#mv img{ width:512px; }
@media screen and (max-width: 1200px) {
	section#mv img{ width: calc( 500 * 100vw / var( --media-screen-pc ) ); }
}
@media screen and (max-width: 768px ) {
	section#mv img{ width: 100%; }
}

/*----------------------------------------------------------------------------*/
.concept_img{ width:640px; }
@media screen and (max-width: 1200px) {
	.concept_img{ width: calc( 640 * 100vw / var( --media-screen-pc ) ); }
}
@media screen and (max-width: 768px ) {
	.concept_img{ width: calc( 600 * var( --media-screen-sp ) / var( --media-screen-pc ) * 1px ); }
}

/*----------------------------------------------------------------------------*/
section#about{
}


/*----------------------------------------------------------------------------*/
#reason{
	background:var( --sub-bg-color );
}

#reason ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;

	max-width: 900px;
	margin: auto;
}

#reason ul li {
	display: flex;
	background: #FFF;
	margin:0 .5em 2em;
	padding:1em .75em;
	width: 25vw;
/*	min-height: 28vw; */
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

#reason ul li h3{
	margin:.5em 0;
}
#reason ul li p {
	display:block;
	padding: .75em .75em;
	font-size: .8em; 
	text-align:left;
	height: 5em;
	background: #f4f4f4;

}

.reason_img {
	max-width: 270px;
	max-height: 210px;
	margin-bottom:.5em;
}
@media screen and (max-width: 1200px) {
	.reason_img{
		max-width: calc( 270 * 100vw / var( --media-screen-pc ) );
		max-height: calc( 210 * 100vw / var( --media-screen-pc ) );
	}
}
@media screen and (max-width: 768px ) {
	#reason ul {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
	}

	#reason ul li {
		width: 90%;
	}
	#reason ul li h3{
		font-size:1.5em;
	}
	#reason ul li p{
		width: 100%;
		padding:1em;
		font-size:1em;
	}
	.reason_img{ 
		max-width: initial;
		max-height: initial;
		width: 100%;
		height: auto;
	}
}

/*----------------------------------------------------------------------------*/
section#biz_temp{
}
section#biz_temp p{
	padding:0 1em 1em;
	text-align:center;
}
.biz_temp_imgs {
	display: block;
	padding: 2em 0;
	border-top: 1px solid #CCC;
	width: fit-content;
	margin: auto;
}
.biz_temp_img_man{ width:150px; } .biz_temp_img_mv{ width:500px; }
@media screen and (max-width: 1200px) {
	.biz_temp_img_man{ width: calc( 150 * 100vw / var( --media-screen-pc ) ); }
	.biz_temp_img_mv{ 500 * 100vw / var( --media-screen-pc ) ); }
}
@media screen and (max-width: 768px ) {
	section#biz_temp p{
		font-size:.95em;
	}
	.biz_temp_img_man{ width: calc( 80 * var( --media-screen-sp ) / var( --media-screen-pc ) * 1px ); }
	.biz_temp_img_mv{ width: calc( 320 * var( --media-screen-sp ) / var( --media-screen-pc ) * 1px ); }
}

/*----------------------------------------------------------------------------*/
section#works{
	color:var( --main-color );
	background: var(--sub-bg-color);
}

section#works ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25em;
}
section#works li{
	flex:0 0 14em;
	padding:1.25em;
	background:#FFF;
	
}
section#works img{
	border:.01em solid #DDD;
}
section#works h3{
	font-size:.95em;
	padding:1em;
}

section#works p{
	font-size:.75em;
	text-align:left;
}
@media screen and (max-width: 768px ) {
	section#works li{
		flex:0 0 90%;
	}

	section#works img{
		width:70%;
	}

	section#works h3{
		font-size:1.25em;
	}

	section#works p{
		font-size:.95em;
	}
}

/*----------------------------------------------------------------------------*/
section#plan{
}
.plan_lists{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25em;
	padding:1em;

	margin-top:1.0em;
}

.plan_lists p.sub_title{
	font-weight:600;
	padding-bottom:1em;
}

.plan_lists h3{
	font-size:1.5em;
	padding-bottom:.25em;
	position: relative;
	margin-bottom:1.5em;
}
.plan_lists h3.active{
	font-weight:600;
	width:fit-content;
	margin:auto;

	margin-bottom:1.35em;
}

.plan_lists h3.active::before{
	content: "";
	display: block;
	position: absolute;
	width: 1em;
	height: 1em;
	top: -.5em;
	left: -1em;
	background: url(../img/icon_hint.png) no-repeat center center;
	background-size: contain;
	transform: rotate(-45deg);
}

.plan_lists h3.active:after{
	content:"";
	display:block;
	position: relative;
	width:6em;
	top: -.5em;
	border: .125em solid #fcf866;
	margin:auto;
	z-index: -1;
}

.plan_lists p.numbers {
	font-family: "M PLUS 1p", serif;

	font-style: normal;
	font-size: 2em;
	font-weight: 600;

	margin-bottom: 0em;
	padding-bottom: 0;
	display: block;
	height: fit-content;
}


.plan_lists p.numbers span.unit{
	font-size:.4em;
	margin-left:.5em;
}

.plan_lists li.plan{
	padding:2em 1.5em;
	position: relative;
}
.plan_lists li.active {
	padding-top:.25em;
}
.plan_lists li.active:before {
	content: "おすすめ！";
	font-size:.85em;
	font-weight:600;
	position: relative;
	top: -2.75em;
	right: 2.05em;
	background: var(--main-color);
	color: var(--main-bg-color);
	padding: 1em 6em;
	border-radius: 1em 1em 0 0;
}

.plan_lists li.active{
	border: .25em solid var( --main-color );
	border-radius: 0 0 .5em .5em;
	box-shadow: .25em .25em .25em 0em var(--shadow-color);
}


.plan_lists li.plan:last-child{
	border-left: .125em solid #DDD;
}

.plan_lists li.plan .note {
	font-size: .75em;
}

.plan_lists h4,
.plan_lists h5{
	position: relative;
	font-size:.75em;
	padding:.25em 1em;
	border-radius:2em;
	margin:1em auto;
}

.plan_lists h4{
	background: #EEE;
	width:15em;
}

.plan_lists h5{
	background:var( --btn-cta-bg-color );
	width:fit-content;
}

.plan_lists hr{
	content:"";
	display:block;
	position: relative;

	border:none;
	border-top: .125em solid #DDD;
	
	height:.25em;

	top:-1.5em;

	margin:auto;
	z-index:-1;
}

.plan_lists li hr:last-of-type{
	top:0;
	margin-top:1.5em;
}

.plan_desc{
	margin-left:1em;
	padding: 1em .75em 0;
}
.plan_desc li{
	text-align:left;
	font-size:.75em;
	font-weight:600;
	margin:.5em 0;
	list-style-type: initial;
}
@media screen and (max-width: 768px ) {
	section#plan p{
		text-align:center;
	}
	.plan_lists *{
		font-size:1.25em;
	}
	.plan_lists li.plan .note {
		font-size: .75em;
	}

	section#plan p.caution{
		font-size:1em;
	}
	section#plan p.sub_title{
		font-size:.75em;
	}

	.plan_lists li.plan:last-child{
		border-top: .125em solid  var( --main-color );
		border-bottom: .125em solid  var( --main-color );
		border-left:none;
	}

	.plan_lists hr{
		top:-1.25em;
	}

}


dl.note{
	display:flex;
	width:75%;
	padding-left:1em;
	margin:1em auto;
	
}

dl.note dt,
dl.note dd{
	text-align:left;
	padding:.25em;
	color: #999;
	font-size:1.5em;
	line-height: 1.25;
}


/*----------------------------------------------------------------------------*/
section#option{
	font-color:#333;
}
section#option *{
	font-color:#333;
}
section#option p.caution{
	position: relative;
}

section#option p.caution:before{
	content:"※";
	position: relative;
	margin-left:-1.25em;
}

section#option img{
	position: absolute;
	top: -2.25em;
	width: 15em;
	right: 10em;
}

section#option dl {
	display: flex;
	flex-wrap: wrap;
	width: 70%;
	margin: auto;
	align-items: center;

	position: relative;
	margin-bottom:2.5em;
}

section#option dt {
	position: relative;
	width: 75%;
	height:4em;
	padding:.5em 1em;

	text-align:left;
	background:#f4f4f4;
	
	margin-bottom:.5em;
}
section#option dt p{
	font-size:.75em;

	padding:0;
}

section#option dd {
	position: relative;
	width: 25%;
	height:4em;

	padding:1em 1em;

	text-align:left;
	background:#f4f4f4;

	margin-bottom:.5em;
}
section#option dd p{
	font-family: "M PLUS 1p", serif;

	font-style: normal;
	font-size:1.5em;

	padding:0;
}

@media screen and (max-width: 768px ) {
	section#option{
		width:100%;
	}
	section#option p.caution{
		width:70%;
		padding-left:3em;
	}
	section#option img{
		top: -2em;
		right: -4em;
	}

	section#option dl {
		width: 95%;
	}

	section#option dt {
		width: 100%;
		height:fit-content;
		margin-bottom:0;
	}
	section#option dt h3{
		font-size:1.5em;
	}
	section#option dt p{
		font-size:.9em;
		padding-bottom:0;
	}

	section#option dd {
		width: 100%;
		padding-top:.5em;
	}
	section#option dd p{
		padding-top:0;
		text-align:right;
		font-size: 2em;
	}

}

/*----------------------------------------------------------------------------*/
/**/
#temp_chg_btns {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75em;
	width:50%;
	margin:0 auto .75em;
}
#temp_chg_btns li {
/*	cursor: pointer; */

	border: .125em solid var(--main-color);
	border-radius: 3em;
	width: fit-content;
	font-size: .75em;
	padding: .25em 2.5em;
	font-weight: 800;

	transition: background 0.3s;
}
#temp_chg_btns li.active {
	background: var(--main-color);
	color: var(--main-bg-color);
}
@media screen and (max-width: 768px ) {
	#temp_chg_btns{
		width:100%;
	}
}
/* FAQ-----------------------------------------------------*/
section#contact p{
	font-size:.85em;
	text-align:center;
}

/* FAQ-----------------------------------------------------*/
#faq {
	color:var( --main-color );
	background:var( --sub-bg-color );
}
#faq .limit_width{
	padding: 0 10em;
}

.faq {
	text-align:left;
	background:var( --main-bg-color );
}

.faq dt {
	cursor: pointer;
	padding: 1em;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.faq dt::before {
	content: "\51"; /* FontAwesome fa-q */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: .75em;
}
.faq dt::after {
	content: "\f107"; /* FontAwesome fa-angle-down */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-left: auto;
}
.faq dt.active::after {
	content: "\f106"; /* FontAwesome fa-angle-up */
}
.faq dd {
	display: none;
	padding: 1em 1.5em;
	margin: 0;
	border-bottom: 1px solid #ddd;
	background: #f1f1f1;
	position: relative;
}
.faq dd::before {
	content: "\41"; /* FontAwesome fa-a */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: .75em;
}
@media screen and (max-width: 768px ) {
	#faq .limit_width{
		padding: 0 1em;
	}
}

/* HOVER -----------------------------------------------------*/
.hover_btns {
	display: block;
	position: fixed;
	top: 30%;
	right: -40px; /* 初期状態：画面外に隠す */
	transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
@media screen and (max-width: 768px ) {
	.hover_btns {
		display: none;
	}
}

/* 右からスライドイン */
.hover_btns.show {
	transform: translateX(-40px); /* 画面内に移動 */
}

.hover_btns li {
	width: 4em;
	height: fit-content;
	display: block;
	padding: 0;
	margin: 0;
	margin-bottom: 0.25em;
	font-size: 0.75em;
	writing-mode: vertical-rl;
}

.hover_btns li a.hover_btn {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 1em 0.5em;
	border-radius: 0;
	font-weight: normal;
	box-shadow: none;
	line-height: 2em;
	color: var(--main-bg-color);
	background: var(--main-color);
	box-shadow: -0.125em 0.125em 0.25em 0em var(--shadow-color);
}

.hover_btns li a.hover_cta {
	color: var(--btn-cta-txt-color);
	background: var(--btn-cta-bg-color);
}

/*----------------------------------------------------------------------------*/

footer{
	margin-top: 5em;
	padding-bottom: 5em;
	position: relative;
}
@media screen and (max-width: 768px) {
	footer{
		padding-bottom: 2em;
	}
}

footer nav{
	background: var(--main-color);
}

footer nav ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;

}

footer nav ul li{
	display: inherit;
}

footer nav ul li a{
	color: var(--main-bg-color);
	padding:1em 2em;
	margin:.25em;
}

footer .logo{
	margin: .5em 0;
}

.footer_btns{
	display: flex;
	gap: .5em;
	position: absolute;
	top: 3em;
	right: 2em;
}

.footer_btns li a {
	border-radius: 2em;
	padding: .75em 3.5em;
	font-weight:600;
	box-shadow: 0em .125em .25em 0em var(--shadow-color);
}

footer nav ul li a::after{
	content:"";
}

.footer_login{
	color: var(--main-bg-color);
	background: var(--main-color);
}
.footer_contact{
	color: var(--btn-cta-txt-color);
	background: var(--btn-cta-bg-color);
}

.footer_others {
	display: flex;
	position: relative;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 2em;
}
.footer_others li{
	font-size:.75em;
}

.footer_others li a{
	font-size:1em;
}

.footer_others li a::after{
	content:"\f08e";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-left: .75em;
}

.footer_others li:last-child{
	position: absolute;
	right: 2em;
}

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

	footer nav{
		background: var(--main-bg-color);
	}

	footer nav ul{
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	footer nav ul li{
		border-top:1px solid var( --main-color );
		width:100%;
	}
	footer nav ul li:last-child{
		border-bottom:1px solid var( --main-color );
	}
	footer nav ul li a{
		color: var(--main-color);
		width:100%;
		height:100%;
		font-size:1.25em;
		font-weight:600;
		padding:1em .75em;
	}

	footer nav ul li a::after{
		content:"\f054";
		font-family: "Font Awesome 6 Free";
		font-size:.75em;
		font-weight: 900;
		margin-left: .75em;
		position: absolute;
		padding-top: .25em;
		right: 1em;
	}

	footer .logo{
		margin: 1em auto;
		width: 70%;
		display: block;
	}

	.footer_btns{
		position: initial;
		margin: 3em auto;
		width: fit-content;
		gap: .75em;
	}

	.footer_others {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.footer_others li{
		font-size:1em;
		padding-left:1em;
	}

	.footer_others li a::after{
	}

	.footer_others li:last-child{
		position: initial;
		padding-top:1em;
	}
}

/*----------------------------------------------------------------------------*/
/* 共通（初期状態は透明） */
.animate {
	opacity: 0;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* フェードイン＋拡大 */
.fade-in-scale {
	transform: scale(0.8);
}

.fade-in-scale.show {
	opacity: 1;
	transform: scale(1);
}

/* 下から浮き上がる */
.slide-up {
	transform: translateY(50px);
}

.slide-up.show {
	opacity: 1;
	transform: translateY(0);
}

/* 上から浮き上がる */
.slide-down {
	transform: translateY(-50px);
}

.slide-down.show {
	opacity: 1;
	transform: translateY(0);
}

/* 左からカットイン */
.slide-in-left {
	transform: translateX(-50px);
}

.slide-in-left.show {
	opacity: 1;
	transform: translateX(0);
}

/* 右からカットイン */
.slide-in-right {
	transform: translateX(50px);
}

.slide-in-right.show {
	opacity: 1;
	transform: translateX(0);
}

/* アニメーションなし（常に表示） */
.no-animation {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}


pre {
	width: 80%;
	max-width: 800px;
	padding: 1em;
	margin: auto;
	text-align: left;
	white-space: pre-line;
	word-wrap: break-word;
}
section pre *{
	font-size: medium;
	margin:0;
	padding:0;
}

@media screen and (max-width: 768px) {
	pre {
		width: 100%;
	}
}