/* front-page */

.front-top-top .svg-box {
	width: 100%;
	aspect-ratio: 100 / 10;
	display: flex;
	justify-content: center;
	align-items: center;
}


#front-top {
	padding: 0px;
}
#front-top .inner {
	margin: 0 auto;
	padding: 0;
}




#front-top-top-text1 {
	fill: #006699;
	stroke: #ffffff;
	font-size: min( 10px, 2.5vw);
	stroke-width: min( 4px, .4vw);
	font-family: MPLUS1-Medium;
}

#front-top-top-text2 {
	fill: #442200;
	stroke: #ffffff;
	font-size: min( 36px, 9vw);
	stroke-width: min( 10px, .8vw);
	font-family: MPLUS1-ExtraBold;
}

.front-top-top .svg-box.svg-title {
	aspect-ratio: 100 / 10;
}

.front-section .h1-decoration {
	position: absolute;
	left: 0;
	top: max( -60px, -12vw);
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: min( 60px, 12vw);
	line-height: min( 60px, 12vw);
	border-radius: min(30px, 6vw);
	width: min(320px, 60vw);
	padding: 0  min(21px,3vw);
	color: #f00;
	border: min(5px, 1vw)  solid #fff;
	background-color: #ffff00;
	transform: rotate(-5deg);
	z-index: -1;
	font-size: min(18px, 6vw);
}

.decoration-img {
	background-position:  center center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: min(240px, 40vw);
	aspect-ratio: 1 / 1;
	position: absolute;
	top: max( -240px, -40vw);
	z-index: -10;
}

.decoration-img.man1 {
	background-image: url('../images/man1-min.png');
}
.decoration-img.man2 {
	background-image: url('../images/man2-min.png');
}
.decoration-img.man3 {
	background-image: url('../images/man3-min.png');
}
.decoration-img.man4 {
	background-image: url('../images/man4-min.png');
}
.decoration-img.man5 {
	background-image: url('../images/man5-min.png');
}
.decoration-img.man6 {
	background-image: url('../images/man6-min.png');
}

.front-section .h2-decoration-text {
	text-anchor: middle;
	dominant-baseline: text-before-edge;
	
	stroke: #ffffff;
	stroke-linejoin: round ;
	stroke-linecap: round;
	paint-order:stroke;
	stroke-width: min(5px, 1vw);
	stroke-linejoin:round;
	text-shadow: 0px 0px 0px rgb(255,255,255);
	fill: #f11;
	font-weight: 900;
	display: block;
}

.front-section h2 {
	width: 100%;
}
.section-h2-svg{
	font-family: MPLUS1-ExtraBold;
	font-weight: 100;
	text-anchor: middle;
	dominant-baseline: text-before-edge;
	paint-order: stroke;
	stroke: #ffffff;
	stroke-linejoin: round ;
	stroke-width: min(24px, 8vw);
	font-size: min(120px, 50vw);
	width: 100%;
	paint-order:stroke;
	
}

.parallax {
	//background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	display: block;
	width: 100vw;
	height: min( 480px, 90vw);
	margin: min( -80px, 6vw) auto min( -80px, 6vw) auto;
	z-index: -1;
}
.parallax .inner {
	height: 100%;
}
.parallax1 {
	background-image: url('../images/front-top/1.png');
	height: min( 420px, 80vw);
	margin: 0 auto min( -80px, 6vw) auto;
}
.parallax2 {
	background-image: url('../images/front-top/2.png');
}
.parallax3 {
	background-image: url('../images/front-top/3.png');
}
.parallax4 {
	background-image: url('../images/front-top/4.png');
	//background-color: red;
}
.parallax5 {
	background-image: url('../images/front-top/5.png');
}
.parallax6 {
	background-image: url('../images/front-top/5.png');
	height: min( 420px, 80vw);
	margin: min( -80px, 6vw) auto 0 auto;
}


.wave-container .inner{
	z-index: -1;
	width: 100%;
}

.section-top-svg-img {
	z-index: 1;
	max-height: 60px;
	width: 100%;
	margin: -5px auto;
}

.front-section .woman {
	position: absolute;
	bottom: 0;
	right: 5%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: min( 210px, 45vw) ;
	aspect-ratio: 1 / 1;
	display: inline;
	
	
}

.front-section .woman1 {
	background-image: url('../images/woman1.png');
	
}

.front-section .woman2 {
	background-image: url('../images/woman2.png');
}

.front-section  .woman3 {
	background-image: url('../images/woman3.png');
}   

.front-section  .woman4 {
	background-image: url('../images/woman4.png');
}

.front-section  .woman5 {
	background-image: url('../images/woman5.png');
}

.front-section  .woman6 {
	background-image: url('../images/woman6.png');
}

#front-top header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
}

#front-top header .front-top-top {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#front-top header .front-top-top p {
	height: min( 80px, calc(100vw / 10) );
	padding: min(15px, 2vw) ;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
}

#front-top .front-top-top h1 {
	margin-top: 10px;
}
#front-top-top-text {
	text-anchor: middle;
	dominant-baseline: text-before-edge;
	paint-order: stroke;
	font-weight: 900;
	fill: #006699;
	letter-spacing: 0px;
	paint-order: stroke;
	stroke: #ffffff;
	stroke-linejoin: round ;
	stroke-width: min(3px, .5vw);
	width: 100%;
	display: block;
	position: absolute;
}

#front-top header ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: min( 16px, calc((100vw - 30px) / 80)) 0;
	width: 100%;
	position: absolute;
	bottom: 0;
}
#front-top header ul li {
	transform: rotate(-10deg);
	margin: 0px min( 4px, calc((100vw - 30px) / 60 ));
	width: min( 180px, calc((100vw - 30px) / 6 ));
	height: min( 64px, calc((100vw - 30px) / 16 ));
	line-height: min( 60px, calc((100vw - 30px) / 17));
	padding: 0 min( 4px, .4vw);
	border: min( 4px, .5vw) solid #ffffff;
	border-radius: min( 36px, calc((100vw - 30px) / 5 ));
	font-size: min( 30px, calc((100vw - 30px) / 28 ));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: #fff;
}


#front-top header ul li:nth-child(1) {
	background-color: #7fbfff;
}

#front-top header ul li:nth-child(2) {
	background-color: #ffbf7f;
}

#front-top header ul li:nth-child(3) {
	background-color: #eee;
	color: #555;
}

#front-top header ul li:nth-child(4) {
	background-color: #606060;
}

#front-top header ul li:nth-child(5) {
	background-color: #33cc00;
}

#front-top header ul li:nth-child(6) {
	background-color: #00a3cc;
}

#front-top .front-top-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
}

#front-top .man {
	position: absolute;
	bottom: 0;
	left: 0;
	user-select: none;
	pointer-events: none;
	width: 30%;
}

#front-top .front-top-bottom .front-top-bottom-text-box {
	position: absolute;
	right: min( 10px, 1vw);
	bottom: min( 100px, 10vw);
	width: 75%;
	height: min( 180px, 18vw);
	text-align: center;
	box-shadow: 2px 2px 4px rgb(0, 0, 0,.5);
	padding: 0;
	border: min( 10px, 1vw) solid #fff;
	border-radius: min(42px, 4vw);
	background-color: #82ff6c;
	
}

#front-top-bottom-text1 {
	fill: #006699;
	stroke: #ffffff;
	font-size: min( 14px, 2.5vw);
	stroke-width: min( 3px, .3vw);
}

#front-top-bottom-text2 {
	fill: #f00;
	stroke: #ffffff;
	font-size: min( 20px, 4vw);
	stroke-width: min( 4px, .6vw);
}





@media screen and (min-width: 426px){

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

}
@media screen and (min-width: 960px){
	.parallax .woman {
		bottom: 0;
	}
}
















#front-slider {
	margin-top: 15px;
}

.lSSlideOuter {
	margin-bottom: 20px;
}
#lightSlider{
	width: 100%;
}

.lSSlideWrapper {
	
}

#lightSlider li {
	width: 100%;
	aspect-ratio: 2 / 1;
	display: flex;
	align-items: center;
	justify-content: center;

}

#lightSlider img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.lSAction {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.lSAction > a {
	opacity: 1;
	background-repeat: no-repeat;
}

.lSAction > .lSPrev {
	left: 20px !important;
}
.lSAction > .lSNext {
	right: 20px !important;
}
.lSPager {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	margin: 20px auto;
}
.lSPager li {
	display: flex;
	align-items: center;
	justify-content: center;
}


.categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	max-width: 100%;
}
.categories-list li {
	width: calc(50% - 5px);
	padding: 5px;
	border: 1px solid #ddb790;
	box-shadow: 1px 1px 3px rgba(196, 124, 31, 0.25);
	background-color: #fff;
	
}
.categories-list li img {
	width: 80%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	margin: 0 auto 10px auto;
}

.categories-list li a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 14px;
	text-align: center;
	margin-top: 10px;
}


.hikaku {
	background-color: #aaa;
	border-collapse: collapse;
	font-size:14px;
	border-spacing: 1px;
	width: 100%;
	margin-top: 15px;
}

.hikaku th ,.hikaku td {
	text-align: left;
	padding: 5px;
}

.hikaku th {
	background-color: #bfeaff;
	border-right: 1px solid #ccc;
}

.own {
	border: 3px solid #f33;
	margin: -5px;
	box-sizing: content-box;
	
}

.other {
	border-left: 3px solid #e0effa;
	border-right: 3px solid #e0effa;
}
.own th{
	color: #442200;
	font-size:16px;
}

.own td {
	background-color: #fff;
	//border-right: 5px solid #f33;
	//border-top: 5px solid #f33;
	//border-bottom: 5px solid #f33;
}

.other th, .other td{
	color: #555;
	font-size: 14px;
}


.other td {
	background-color: #f0f0f0;
}

.hikaku img {
	width: 24px;
}

.article-box article {
	text-align: left;
	border: 2px solid #fff;
	margin: 10px auto;
	padding: 10px;
}

.article-box article {
	text-align: left;
	border: 2px solid #fff;
	
	padding: 10px;
}
.article-box article h3 {
	text-align: center;
	margin: 10px auto;
}

.article-box article .main-image {
	//margin: 10px;
}

.article-box article table {
	background-color: #ddd;
	margin: 10px auto;
	width: 100%;
	max-width:768px;
}

.article-box table th, .article-box table td {
	background-color: #fff;
	height: 42px;
	line-height: 42px;
	padding: 5px 10px;
}

.article-box table th {
	width: 50%;
}

.article-box table td{ 
	text-align: right;
}

.article-box article .post-content {
	//font-size: 14px;
}

.plan-article details summary {
	//display: flex;
	//flex-wrap: nowrap;
}
.plan-article details summary .main-image {
	width: 80%;
	margin: 0 auto;
}

.article-box a {
	font-size: 18px;
	font-family: MPLUS1-ExtraBold;
	text-decoration: underline;
	margin: 0px auto;
	display: block;
	text-align: center;
}

.works-article details summary .main-image {
	display:flex;
	flex-wrap: nowrap;
	gap: 10px;
}
.works-article details summary .main-image img {
	width: calc(50% - 5px);
	margin: 0 auto;
}
.works-article .main-image .arrow {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 100;
	width: 12%;
}