@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@200..700,0..1&display=swap');

/* ======================================================================================================
	variables
====================================================================================================== */
:root {
	--accent-color:#0a8;
	--accent-color2:#074;
	--title-text-color:#fff;
	--nav-bg:#ced;
	--comment-bg:#ffc;
	--table-th:#ced;
	--table-td:#ced9;
	--button-orange:#f90;
	--button-orange-shadow:#c60;
	--button-blue:#069;
	--button-blue-shadow:#037;

	--header-height:4em;
	--section-padding:3em;
}


/* ======================================================================================================
	CSS reset
====================================================================================================== */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
em ,strong ,small ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	vertical-align:baseline;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	font-size:110%;
	margin:0;
	padding:0.3em;
	font-family:inherit;
	line-height:1.6;
}
input[type="submit"] ,button {
	padding:0.5em 2em;
	font-family:inherit;
}

html ,body {
	min-height:100%;
	height:100%;
}
a {
	color:inherit;
	text-decoration:none;
	cursor:pointer;
}
a ,a:before ,a:after ,
.anchorLink {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

img {
	vertical-align:top;
	max-width:100%;
    max-height:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

ol ,ul ,li {
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}



/* ======================================================================================================
	base
====================================================================================================== */
html{
    scroll-behavior: smooth;
}

body{
	position:relative;
	font-size:20px;
	line-height:1.8;
	color:#000;
	background:#fff;
	font-family:'Noto Sans JP',sans-serif;
}

main > section {
	scroll-margin-top:10em;
	padding:var(--section-padding) 0;
}

@media screen and (min-width:800px){
	.innerFrame{
		width:1200px;
		margin:0 auto;
	}
	.innerFrame.wide{
		width:100%;
		min-width:1200px;
		max-width:1600px;
	}
}

@media screen and (max-width:799px){
	body{
		font-size:16px;
	}
	#bgLayer{
		width:480px;
		min-width:480px;
		max-width:480px;
		margin:0 auto;
	}
	main > section {
		scroll-margin-top:8em;
	}
	main > section .innerFrame:not(.noPadding) {
		padding:0 0.5em;
	}
}



/* ======================================================================================================
	common
====================================================================================================== */
.anchorLink {
	cursor:pointer;
}

@media screen and (min-width:800px){
	.dispSP{
		display:none!important;
	}
}
@media screen and (max-width:799px){
	.dispPC{
		display:none!important;
	}
}


/* ====================================================================
	flex
==================================================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.base {
	align-items:baseline;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}



/* ====================================================================
	title
==================================================================== */
.h2 {
	padding:2em 0 3em;
}
.h2 > * {
	padding:0.5em 0;
	color:var(--title-text-color);
	background:var(--accent-color);
	text-align:center;
	border-radius:0.5em;
}
.h2 > * > * {
	font-size:180%;
	font-weight:bold;
}

@media screen and (max-width:799px){
	.h2 > * > * {
		font-size:150%;
	}
}



/* ====================================================================
	Material Symbols
==================================================================== */
.symbol:not(.after):before ,
.symbol.after:after {
	content:"";
	display:block;
	font-family:'Material Symbols Outlined';
	font-variation-settings:
		'FILL' 1
		,'wght' 400
		,'GRAD' 0
		,'opsz' 24;
	z-index:10;
	font-size:120%
}
.symbol.mail:not(.after):before ,
.symbol.mail.after:after {
	content:"\e158";
}
.symbol.call:not(.after):before ,
.symbol.call.after:after {
	content:"\e0b0";
}
.symbol.circleRight:not(.after):before ,
.symbol.circleRight.after:after {
	content:"\f591";
}
.symbol.signRight:not(.after):before ,
.symbol.signRight.after:after {
	content:"\e5cc";
}
.symbol.arrowDown:not(.after):before ,
.symbol.arrowDown.after:after {
	content:"\e313";
}

.symbol.rev:not(.after):before ,
.symbol.rev.after:after {
	padding:0.2em;
	color:var(--button-orange);
	border-radius:50%;
	background:#fff;
	font-size:150%
}

.button-blue .symbol.rev:not(.after):before ,
.button-blue .symbol.rev.after:after {
	color:var(--button-blue);
}



/* ==========================================================
	button
============================================================= */
.button {
}
.button > * {
	padding:0.3em 0.5em 0.3em 1.5em;
	color:var(--title-text-color);
	background:var(--button-orange);
	border-radius:1.5em;
	gap:0.5em;
	line-height:1;
	box-shadow:0.1em 0.3em 0 var(--button-orange-shadow);
}

.button > *.icon2 {
	padding:0.3em 0.5em;
	gap:1em;
}
.button > * > .text {
	padding-bottom:0.1em;
	font-weight:bold;
}
.button > *.after:after {
	font-size:150%;
}

.button > *.button-blue {
	background:var(--button-blue);
	box-shadow:0.1em 0.3em 0 var(--button-blue-shadow);
}
.button > *.button-green {
	background:var(--accent-color);
	box-shadow:0.1em 0.3em 0 var(--accent-color2);
}


@media screen and (min-width:800px){
	.button > *:hover {
		transform:translate(0.1em,0.3em);
		box-shadow:0em 0em 0 var(--button-orange-shadow);
	}
	.button > *.button-blue:hover {
		box-shadow:0em 0em 0 var(--button-blue-shadow);
	}

}





/* ==========================================================
	pagetop button
============================================================= */
#pagetopButton {
	display:none;
    position: fixed;
    bottom: 1em;
    right: 1em;
	width:4em;
	height:4em;
	z-index: 10000;
}

#pagetopButton .anchorLink {
	width:100%;
	height:100%;
	line-height:1.2;
	font-weight:bold;
    color:#fff;
	background:var(--accent-color);
	border:2px solid #fff;
	border-radius:0.5em;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}

@media screen and (min-width:800px){
	#pagetopButton .anchorLink:hover {
		color:var(--accent-color);
		background:#fff;
		border-color:var(--accent-color);
	}
}
@media screen and (max-width:799px){
	#pagetopButton {
	    bottom: 0.2em;
    	right: 0.2em;
		width:3.5em;
		height:3.5em;
	}
}




/* ======================================================================================================
	header
====================================================================================================== */
header {
	position:sticky;
	top:0;
	left:0;
	z-index:1100;
	background:rgba(255,255,255,0.95);
	box-shadow:0 1px 0.1em var(--accent-color);
}

.header .innerFrame {
	height:var(--header-height);
	padding:0.3em;
}

.header .logo {
	width:15em;
}

@media screen and (max-width:799px){
	.header .innerFrame {
		padding:0.3em 0.5em;
	}
	.header .logo {
		width:14em;
	}
}



/* ======================================================================================================
	main > fv
====================================================================================================== */
.fv {
	padding:2em;
	background:url(images/common/1920_650.webp) 50% 50% no-repeat;
	height:32em;
}

.fv h1 {
	color:var(--accent-color);
	line-height:1.2;
}
.fv h1 > * {
	font-size:450%;
	font-weight:bold;
	text-shadow:0.03em 0.03em 0 #000;
}

.fv h1 ~ .subTitle {
	padding:1em 0;
}
.fv .subTitle > * {
	font-size:160%;
	font-weight:bold;
	text-shadow:0.05em 0.05em 0 #fff;
}

.fv h1 ~.text {
	padding:1em;
	background:rgba(255,255,255,0.7);
}
.fv h1 ~.text > * {
	font-size:120%;
	font-weight:bold;
	text-shadow:0.05em 0.05em 0 #fff;
}

.fv .button {
	width:100%;
	padding:2em 2em 0;
}
.fv .button a {
	font-size:120%;
}
.fv .button a .text {
	font-size:120%;
	font-weight:bold;
}

@media screen and (max-width:799px){
	.fv {
		height:44em;
		padding:2.5em 0.5em;
		background:url(images/common/650_650.webp) 70% 100% no-repeat;
		background-size:cover;
	}
	.fv > .flex {
		height:100%;
	}
	.fv > .flex > .flex.top {
		height:100%;
		align-items:center;
	}

	.fv h1 > * {
		font-size:300%;
	}
	.fv h1 ~ .subTitle {
		padding:1.5em 0;
	}
	.fv .subTitle > * {
		line-height:1.4;
		font-size:150%;
	}
	.fv h1 ~.text > * {
		font-size:110%;
	}
	.fv .button {
		margin-top:auto;
	}
}



/* ======================================================================================================
	nav
====================================================================================================== */
.sticky-nav {
	position:sticky;
	top:var(--header-height);
	left:0;
	z-index:1000;
	color:var(--accent-color2);
	background:var(--nav-bg);
	border-top:1px solid #999;
	box-shadow:0 1px 0.1em #000;
}

.nav-list {
	border-left:1px solid #444;
}
.nav-list > * {
	width:calc(100% / 5);
	flex-grow:1;
	border-right:1px solid #444;
}
.nav-cell a {
	padding:0.8em 0 0;
	line-height:1.2;
	font-weight:bold;
	text-align:center;
}
.nav-cell a span {
	padding-bottom:0.1em;
}

@media screen and (min-width:800px){
	.nav-cell a:hover:after {
		transform:translateY(0.2em);
	}
}

@media screen and (max-width:799px){
	.nav-cell a span {
		font-size:95%;
	}
}




/* ======================================================================================================
	support
====================================================================================================== */
.service-icons {
	padding:0 2em;
}
.service-icons > * {
	width:calc(100% / 4);
	padding:1em;
	text-align:center;
}
.service-icons > * .text {
	font-size:110%;
	font-weight:bold;
}

@media screen and (min-width:800px){
	.service-icons .anchorLink:hover {
		opacity:0.8;
	}
}
@media screen and (max-width:799px){
	.service-icons {
		padding:0 1em;
	}
	.service-icons > * {
		width:calc(100% / 2);
		padding:0.5em 1em;
	}
	.service-icons .image {
		padding:0 0.5em;
	}
}



.support-notes {
	padding-top:var(--section-padding);
}
.support-notes > * {
	background:var(--comment-bg);
	padding:1em 0;
	text-align:center;
}

.support-notes h3 {
	color:var(--accent-color);
}
.support-notes h3 span {
	font-size:220%;
	font-weight:bold;
}
.support-notes p {
	padding:1em 0;
	line-height:2;
}
.support-notes p span {
	font-size:110%;
}
@media screen and (max-width:799px){
	.support-notes > * {
		padding:1em;
	}
	.support-notes p {
		text-align:left;
	}
	.support-notes p span {
		font-size:120%;
	}
}



/* ======================================================================================================
	service
====================================================================================================== */
main {
	counter-reset:cate 0;
}
.service-list > * {
	padding-bottom:2em;
}
.service-cell h3 {
	padding:0.5em;
	line-height:1;
	border:3px solid var(--accent-color2);
	border-radius:0.5em;
}

.service-cell h3 .icon {
	padding-right:1em;
}
.service-cell h3 .icon img {
	height:2.5em;
}
.service-cell h3 .text {
	margin-right:auto;
	padding-bottom:0.2em;
	font-size:180%;
	font-weight:bold;
}
.service-cell h3 .cate {
	padding-right:0.5em;
	color:var(--accent-color2);
	font-size:130%;
	font-weight:bold;
}
.service-cell h3 .cate:after {
	counter-increment:cate 1;
	content:counter(cate);
	font-size:150%;
}

.service-description {
	padding:1.5em 1em;
}
.service-description > .info {
	width:60%;
	padding:0 1em;
}
.service-description h4 {
	padding:0 0.5em;
	color:var(--accent-color2);
	border-bottom:2px solid var(--accent-color2);
}
.service-description h4 span {
	font-size:150%;
	font-weight:bold;
}
.service-description p {
	padding:0.5em 1em 1em;
}
.service-description > .image {
	width:40%;
	padding:1.5em;
}


.service-list > :nth-child(even) .service-description.flex {
	flex-direction:row-reverse;
}


main > section#support3 {
	padding:calc( var(--section-padding) * 2 ) 0 0;
}


@media screen and (max-width:799px){
	.service-description.flex {
		display:block;
		padding:1em;
	}
	.service-cell h3 .text {
		font-size:160%;
	}
	.service-description > .info {
		width:100%;
		padding:0;
	}
	.service-description h4 span {
		font-size:140%;
	}
	.service-description p span {
		font-size:110%;
	}
	.service-description > .image {
		width:100%;
		padding:1em 3em;
	}
}



/* ======================================================================================================
	cta
====================================================================================================== */
.cta {
	padding:2em 1em 0;
	color:var(--title-text-color);
	background:var(--accent-color);
}

.cta-title.flex {
	gap:2em;
}
.cta-title .image img {
	height:2.5em;
}
.cta-title .text span {
	font-size:180%;
	font-weight:bold;
}

.cta-info {
	padding:2em 0 2em 15em;
	background:url(images/common/h500x500.webp) 6em 100% no-repeat;
	background-size:15em;
	text-align:center;
}
.cta-info .text span{
	font-size:120%;
}
.cta-info .button-label {
	padding-top:1.5em;
}
.cta-info .button-label span {
	font-size:150%;
	font-weight:bold;
}
.cta-info .button.flex {
	padding-top:0.5em;
	gap:1em;
}

.cta-info .button.flex .sub {
	font-size:80%;
	font-weight:normal
}
.cta-info .button.flex .main {
	padding-top:0.2em;
}

@media screen and (max-width:799px){
	.cta {
		padding:2em 0 0;
	}
	.cta-title.flex {
		flex-direction:column;
		gap:1em;
	}
	.cta-title .text {
		text-align:center;
	}
	.cta-info {
		padding:1.5em 0 8em;
		background-position:-1em 100%;
	}
	.cta-info .button.flex {
		flex-direction:column;
		padding-top:1.5em;
		padding-left:6em;
	}
	.cta-info .button.flex > * {
		width:18em;
	}
}



/* ======================================================================================================
	advisor
====================================================================================================== */
.advisor-list {
}
.advisor-cell {
	padding:0 2em var(--section-padding);
}

.advisor-cell > .image {
	width:35%;
	padding:1em;
}

.advisor-cell > .info {
	width:65%;
	padding:0 1em;
}
.advisor-cell h3 {
	padding:0 1em 0.5em;
	line-height:1.4;
}
.advisor-cell h3 > .name{
	font-size:180%;
}
.advisor-cell .data {
	padding:0.5em 1em;
	border-top:1px solid #999;
}
.advisor-cell .data h4 {
	color:var(--accent-color2);
}
.advisor-cell .data p {
	padding-left:1em;
}


@media screen and (max-width:799px){
	.advisor-cell.flex {
		flex-wrap:wrap;
		align-items:center;
	}
	.advisor-cell > .image {
		width:45%;
		padding:0 1em 1em;
	}
	.advisor-cell > .info {
		width:55%;
	}
	.advisor-cell > .info-sp {
		width:100%;
		padding:0 1em;
	}
	.advisor-cell .data {
		padding:0.5em 0;
		border-top:0 none;
	}
	.advisor-cell .data + .data {
		border-top:1px solid #999;
	}
}




/* ======================================================================================================
	sub catch
====================================================================================================== */
.sub-catch {
	background:url(images/common/1920_500.webp) 50% 50% no-repeat;
}
.sub-catch > .flex {
	height:24em;
}

.sub-catch .info.flex {
	gap:1.5em;
	padding:2em;
	background:rgba(255,255,255,0.8);
	text-align:center;
}
.sub-catch .logo img {
	width:35em;
}
.sub-catch .text span {
	font-size:160%;
	font-weight:bold;
}



/* ======================================================================================================
	company
====================================================================================================== */
.company .content {
	padding:0 2em;
}
.company-table {
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}
.company-table th {
	padding:0.5em 2em;
	background:var(--table-th);
	text-align:right;
}
.company-table td {
	padding:0.5em 1.5em;
	background:var(--table-td);
}

@media screen and (max-width:799px){
	.company .content {
		padding:0 1em;
	}
	.company-table th ,
	.company-table td {
		padding:0.5em 1em;
	}
}


/* ======================================================================================================
	footer
====================================================================================================== */
.footer {
	padding:var(--section-padding) 0;
	color:var(--title-text-color);
	background:var(--accent-color);
	text-align:center;
}

.footer .logo img {
	height:5em;
}

.footer .info {
	padding-top:1em;
}

.copyright {
	padding:1em 0;
	text-align:center;
}
.copyright > * {
	color:#444;
	font-size:90%;
}








/* ======================================================================================================
	form
====================================================================================================== */
.contact .content {
	width:800px;
	max-width:100%;
	margin:0 auto;
	padding-bottom:var(--section-padding);
}

.contact#thanks .content p + p {
	padding-top:0.3em;
}

.contact#thanks .button {
	padding-bottom:var(--section-padding);
}
.contact#thanks .button a {
	width:20em;
}

.contact dl{
	width:100%;
}
.contact dt{
}
.contact dd{
	padding:0.5em 0 1.5em 2em;
}


@media screen and (max-width:799px){
	.contact#thanks .content {
		padding:0 1.5em 2em;
	}
	.contact#thanks .content p {
		font-size:110%;
	}
	.contact#thanks .content p + p {
		padding-top:0.5em;
	}
	.contact#thanks .button > * {
		font-size:120%;
	}

	.contact dl {
		padding:0 1.5em;
		font-size:120%;
	}
}




/* ====================================================================
	form - optional / required
==================================================================== */
.optional,
.required{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.optional:before,
.required:before{
	content:attr(data-text);
	margin-right:0.5em;
	padding:0 0.5em 0.1em;
	background:#f00;
	border-radius:0.3em;
	color:#fff;
	font-size:80%;
	font-weight:500;
}
.optional:before{
	background-color:#06f;
}

@media screen and (max-width:799px){
	.required{
		justify-content:flex-start;
	}

	.optional:before,
	.required:before{
		margin-right:0.3em;
		padding:0.1em 0.3em 0.2em;
	}
	span.check > label {
		font-size:85%;
	}
}



/* ====================================================================
	form - field
==================================================================== */
input ,textarea{
	width:100%;
	-webkit-appearance:none; 
	appearance:none;
	border-radius:0.5em;
	font-size:90%;
}
input[type='radio'] ,input[type='checkbox']{
	width:1em;
	height:1em;
	-webkit-appearance:auto; 
	appearance:auto;
}

input:not([type="submit"]){
	border:2px solid #999;
	padding:0.3em 0.5em;
}

.textarea-text{
	padding:2.5em 5em !important;
}

textarea{
	resize:none;
	height:8em;
	padding:0.5em;
	border:2px solid #999;
}

span.check {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
span.check > label {
	padding-left:0.3em;
}


@media screen and (max-width:799px){
	input[type="submit"]{
		width:auto;
		padding:0.5em 1em;
	}

	input:focus ,textarea:focus{
		border:solid 2px #000000;
		outline:none;
		background-color:#99e5ff;
	}

}



/* ====================================================================
	form - check button
==================================================================== */
span.check {
	position:relative;
	display:block;
}
span.check input {
	position:absolute;
	top:50%;
	left:0.5em;
	width:1em;
	height:1em;
	transform:translateY(-50%);
	z-index:2;
}
span.check input + label {
	position:relative;
	padding:0.2em 0.5em 0.2em 1.8em;
	border-radius:0.3em;
	transition:all 0.1s ease;
	-webkit-transition:all 0.1s ease;
	cursor:pointer;
}
span.check input:checked {
}
span.check input:checked + label {
	color:#fff;
	background:#06f;
}





/* ====================================================================
	form - button
==================================================================== */
.formButton{
	padding-top:2em;
	padding-left:1em;
	display:flex;
	justify-content:center;
	text-align:center;
}

input[type="submit"] ,
.formButton a {
	position:relative;
	z-index:2;
	width:auto;
	padding:0.5em 2em 0.6em;
	font-size:110%;
	line-height:1;
	text-indent:0.3em;
	letter-spacing:0.3em;
	color:#fff;
	background-color:#06f;
	border:2px solid #06f;
	border-radius:0.3em;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	cursor:pointer;
}
.formButton a{
	font-size:100%;
	text-indent:0.1em;
	letter-spacing:0.1em;
	border-radius:0.5em;
}

@media screen and (min-width:800px){
	.formButtonFrame {
		position:relative;
		display:inline-block;
		color:#06f;
		background:#fff;
		border:2px solid #06f;
		border-radius:0.3em;
		cursor:pointer;
		transition:background 0.3s ease;
		-webkit-transition:background 0.3s ease;
	}
	.formButtonFrame:hover {
		color:#fff;
		background:#06f;
	}

	input[type="submit"] ,
	.formButton a {
		color:inherit;
		background:transparent;
		border:0 none;
	}

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


/* ====================================================================
	form - error
==================================================================== */
.error {
	margin:0.3em 0 0.5em;
	display:block;
	padding:0.2em 2em;
	color:#f00;
	border:3px solid #f00;
	background:rgba(255,255,255,0.6);
	border-radius:0.3em;
	font-size:90%;
	font-weight:bold;
}


/* ====================================================================
	form - confirm
==================================================================== */
.status2 #form-table {
	line-height:1.4;
}

@media screen and (max-width:799px){
	.status2 dd.form-5 {
		font-size:90%;
	}
}


/* ====================================================================
	form - customize
==================================================================== */
.field-group.flex {
	display:flex;
	justify-content:center;
	gap:0.3em;
}

.form-5 .field-group.flex {
	justify-content:flex-start;
	flex-wrap:wrap;
}
.form-5 .field-group.flex > .check {
	width:calc(50% - 1em);
}


#privacyBox {
	margin-bottom:1em;
	height:12em;
	padding:0.5em;
	font-size:65%;
	line-height:1.4;
	color:#333;
	background:rgba(255,255,255,0.9);
	border:2px solid #999;
	border-radius:0.5em 0 0 0.5em;
	overflow:auto;
}
#privacyBox > h2{
	font-weight:bold;
}
#privacyBox > div{
	padding-left:1em;
	padding-bottom:0.5em;
}
#privacyBox dt{
}

.status2 #privacyBox {
	display:none;
}

@media screen and (max-width:799px){
	.form-5 .field-group.flex {
		font-size:110%;
	}
	.form-5 .field-group.flex > .check {
		width:calc(100% - 1em);
	}
}