/* style.css */
/* 全体の設定 */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.nist {
    --nav-bg: #4CAF50;
    --accent-color: #2196F3;
    --gray: #333;
    --white: #fff;
    --nav-active-bg: #a5c5ff;
    --footer-bg: #a6d1ff;
    --footer-hover-bg: #5b98db;
    --h3-dot: rgb(96 159 195 / 80%);
    --h2-gradation-start: rgb(162 236 66);
    --h2-gradation-end: rgb(50 195 50);
    --h2-gradation: 180deg,var(--h2-gradation-start) 0%, var(--h2-gradation-end) 100%;
    --table--th: #a5b4c8;
    --h2-color: #1a73e8;
}
	
body {font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;font-size:15px;line-height:1.6;color:var(--gray);min-height:100vh;margin:0;display:flex;flex-direction:column;font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

main {flex:1;margin-top:12.8em;}
main.top{margin:0;}
main.error{align-self:center;align-content:center;color:var(--gray);font-size:125%;}


/* ヘッダー */
header {
	background:var(--white);box-shadow:0 2px 4px rgba(0,0,0,0.1);position:fixed;width:100%;top:0;z-index:1000;
	.logo{display:flex;align-items:center;text-decoration:none;color:var(--gray);}
	.logo img{height:70px;width:70px;}
	.header-copy{display:flex;}
	.header-top {display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;}
	.tel{font-size:16px;}

}


.main-nav {display:flex;justify-content:center;list-style:none;background:var(--nav-bg);padding:0 5%;
	a {color:var(--white);text-decoration:none;padding:1rem 2rem;display:block;transition:background 0.3s;}
	a:hover {background:#45a049;}
	.nav-list {display:flex;list-style:none;margin:0;padding:0;}
	.nav-list > li {position:relative;}
	.nav-list > li > a {display:block;padding:1rem 2rem;color:var(--white);text-decoration:none;transition:background 0.3s;}
	.has-submenu .submenu {
		position:absolute;top:100%;left:0;background:var(--white);min-width:200px;box-shadow:0 2px 5px rgba(0,0,0,0.2);
		z-index:1000;display:block;height:0;overflow:hidden;transition:.3s;
		li {list-style:none;}
		a {display:block;padding:0.8rem 1.5rem;color:var(--gray);text-decoration:none;transition:background 0.3s;}
		a:hover {background:#f5f5f5;}
	}
	.has-submenu.active .submenu {height:auto;}

	.has-submenu::before,.has-submenu::after{
		content:"";position:absolute;top:50%;width:1.5px;height:8px;background-color:var(--white);transition:.5s;pointer-events:none;}
	.has-submenu::before{transform:translateY(-50%) rotate(-45deg);right:15px;}
	.has-submenu::after{transform:translateY(-50%) rotate(45deg);right:10px;}
}



.hamburger-menu {
	display:none;position:absolute;top:22px;right:15px;z-index:1000;background:none;border:none;cursor:pointer;padding:10px;
	span {display:block;width:25px;height:3px;background-color:var(--gray);margin:5px 0;transition:all 0.4s;}
}

/* メインビジュアル */
.main-visual {
    height:calc( 100vh - 12em);position:relative;margin-top:12em;height: calc(100svh - 12em);overflow: hidden;
	.slider {
	height:100%;position:relative;width:100%;
	.background {
		position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:
		center;opacity:0; z-index:0;transform:scale(1);transform:translateY(-15%);
	    transition:transform 1.6s,opacity 1.2s ease-in-out, z-index 1s;
		.caption {filter:brightness(0.4) blur(150px);transform:rotateX(95deg);transition:1.6s;display:flex;
			justify-content:center;align-items:center;position:absolute;color:black;}
		.F-c{font-size:min(6vw, 40px);padding:3em 3.5em 0 1.5em;;left:2em;color:var(--accent-color);}
		.B-c{font-size:min(4.9vw, 28px);bottom:107px;padding-right:2.2em;right:1em;text-align:right;color:green;transition-delay:0.98s;line-height:1.5; }
		}
	.background.active {
		opacity:1;z-index:1;transform:scale(1.1);transform:translateY(0);
		.caption{filter:brightness(1) blur(0);transform:rotateX(0);}
		}		
	}
	#myNavi {
		display:flex;position:absolute;bottom:0;z-index:1;right:0;background-color:#0606067a;
		background:url('../img/filmouter2.png');padding:16px 0px;height:102px;opacity:0.85;

		div {width:100%;aspect-ratio:3/2;overflow:hidden;margin:0 6px;background:#000000;cursor:pointer;}
		img {
			border-radius:2px;filter:invert(76%) sepia(109%) saturate(154%) hue-rotate(-150deg) brightness(49%) contrast(109%);
			opacity:0.6;width:108px;height:72px;object-fit:cover;transition:1s;
		}
		.active img{filter:none;opacity:1;}
	}
}

.catch-copy {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;color:var(--white);}
/* 装飾 */
h1,h2,h3,h4{color:var(--accent-color);}

h1 {font-size:36px;}
h2 {
    font-size: min(4.4vw, 34px);
    position: relative;
    top: -190px;
    margin: 0 auto;
    line-height: 1;
    /* background: #ffffffad; */
    padding: .5em 1.5em;
    display: table;
    min-width: 50%;
    text-align: center;
    border-radius: 20px;
    box-shadow: inset 0px 0px 42px 27px #ffffff;text-shadow:1px 1px 2px var(--white),-1px 1px 2px var(--white),-1px -1px 2px var(--white),1px -1px 2px var(--white)!important;;
}
.top h2 {
    top: 0;
    margin: 2em 0;
    background: #fff;
    min-width: auto;
    border-radius: 20px;
    box-shadow: inset 0px 0px 33px 2px var(--nav-bg);
}
/*
h2:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-image: linear-gradient(var(--h2-gradation));
    box-shadow: 0px 2px 8px -1px #0000007d;
}*/
h3 {
    font-size: min(4.5vw, 22px);
    padding-bottom: 8px;
    border-bottom: 1px dotted var(--accent-color);
    margin: 2em;
}
h4 {font-size: min(3.8vw, 19px);;padding-bottom:8px;margin:3em 0 15px 15px;}

.shadow{text-shadow:1px 1px 2px var(--white),-1px 1px 2px var(--white),-1px -1px 2px var(--white),1px -1px 2px var(--white)!important;;}

/* CTAボタン */
.cta-button {display:inline-block;padding:.8rem 2rem;background:var(--accent-color);color:var(--white);text-decoration:none;border-radius:30px;transition:background 0.3s;margin-top:0.5em;white-space:nowrap;}
.cta-button:hover {background:#1976D2;}
.blog-wrap{padding:0px 5% 5rem;
	p{padding: .5em 1em;}
	.blog{display: grid;gap: 1em;align-items: start;grid-template-columns: 70px auto;}
	.blog-title{font-size: 21px;text-decoration: none;border-bottom: 3px solid var(--nav-bg);padding-bottom: 5px;display: block;}
	/*.alignnone {wisth:100%;}*/
	
}
.tel {
    font-size: 24px;
    font-weight: bold;
    color: #4d8ac3;
}
.blog-wrap.top{padding:0;
	.description{padding: .5em 0;
            display: block;
            margin: 1em 0 0 3em;}
	.blog{display:grid;gap:1em;font-family:Roboto;color:var(--gray);transition:0.3s;padding:.5em;
		border-bottom:5px dotted var(--nav-bg);grid-template-columns:70px 1fr;align-items:center;}
	.blog-title {font-size: 14px;border: none;}
	.blog-next {float:right;}
	h3{font-size:85%;}
}
	
.date {display:grid;gap:5px;text-align:center;line-height:1;padding-bottom:.5em;}
.y {font-size:.8em;}
.m {font-size:1.3em;}

.page-banner{width:100%;height: 434px;object-fit: cover;object-position: 50% 22%;}

section{
	padding:0rem 5% 5rem;
	 img{width:100%;height:auto;box-shadow:0px 0px 13px -2px #999;border-radius:4px;}
	.feature-cards {display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;padding:2rem 0;
		.title {text-align: center;min-height: 1em;}
		}
	.service-cards,.news-card{display:grid;grid-template-columns:repeat(auto-fit, minmax(45%, 1fr));gap:2rem;padding:2rem 0;}
	.news-card-wrap{box-shadow:0px 0px 7px -2px #999;padding:.5em;
        border-radius: 4px;
		h3{margin:.5em;}
	}
	.support{
		#support{padding:2em;max-width:1080px;margin:0 auto;width:100%;}
		.support-wrap{display:grid;gap:5px;}
		#support div >label{background:var(--footer-bg);display:flex;justify-content:center;align-items:center;color:#000;border-radius: 8px;padding: 10px;}
		.labelcheck input {margin-right:.5em;transform:scale(1.5);z-index:1;position:relative;}
		input:hover,#support textarea:hover,#support .box-agree .labelcheck:hover,.support-button:hover{background:#f1f8ff;color:#111;}
		.labelcheck input.etc_text {margin-left:.5em;transform:scale(1);;width:20em;}
		#support .box-agree .labelcheck{padding:2em;background:#FEFFEB;border:1px solid var(--footer-bg);}
		input,textarea{border:1px solid var(--footer-bg);padding:1em;background:#FEFFEB;font-size:1.2em;}
		.support-button{display:block;background:var(--h2-color);color:var(--white);margin:3em auto;width:20em;padding:1.5em;border-radius:3em;transition:0.3s all;border:1px solid var(--h2-color);}
		.support-button span{position:relative;display:block;}
		.support-button span:after {position:absolute;content:"";right:0px;top:50%;width:10px;height:10px;margin-top:-5px;border-left:1px solid var(--white);border-top:1px solid var(--white);transform:rotate(135deg);}
		.support-button:hover span:after{border-color:#111;}
		.button-wrap{display:grid;grid-template-columns:1fr 1fr;}
		.back-button span:after {left:0px;transform:rotate(315deg);}

		#privacypolicy{
			font-size:14px;dl{padding:0em 2em 3em;}dt{color:#1a73e8;display:block;text-align:left;font-size:1.3em;margin:1em;
			padding-top:1em;border-bottom:4px dotted var(--h3-dot);line-height:1.9em;}
			dd{padding:1em 2em;}
		}
		span,.support-wrap p{text-indent:1em;}
		.center{text-align:center;}
		.support-wrap div{display:grid;grid-template-columns:9em 1fr;gap:1em;padding:1em 0;}
		.support-wrap div p{display:grid;}
		.mail-complete {word-break:break-word;border:1px solid var(--gray);padding:1em;margin:2em;}
	}

	ul {list-style:none;padding:0;
		ul {margin-left:2em;
			li {border-left:2px solid #5BA9DD;}
			}
		b{color:#1b78c1;padding-left:2em;}
	}

	li {padding:15px;margin-left:2em; border-bottom: 4px solid #88c8f238;;background:var(--white)fff;/*box-shadow:2px 2px 14px  -8px #3767eb;*/}
	li:hover {background:#f5f9fc;}
	
	p.end {padding: 11px;border-bottom: 5px solid #888;display: inline-flex;align-items: center;}
	p.end:last-child{margin-bottom:4em;}
	p.end:before {content:'※';color:red;font-weight:800;font-size:125%;padding-right:.5em;}
	.left{justify-self:flex-end;}
	.red{color:}
	.news {display:grid;gap:1em;font-family:Roboto;color:var(--gray);transition:0.3s;padding:.5em;
		border-bottom:5px dotted var(--nav-bg);grid-template-columns:70px 1fr;align-items:center;
		p {padding:.5em 0;display:block;margin:1em 0 0 3em;}
	}
	.title,dt {font-weight:800;font-size:110%;background:#2b90ff30;padding:.5em;min-height: 4em;}
	
	.auto-fit-320,.auto-fit-160{
		ul {padding: 0;border: 1px solid #99999975;border-radius: 8px;border-left: 3px solid #5ba9ddb5;box-shadow: 1px 1px 22px -6px #5ba9ddb5;border-top: 3px solid #5ba9ddb5;}
		li {margin: 0;}
	}
	.auto-fit-320{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));gap:20px;margin:4em 0 8em;
	}
	.items-middle{justify-items:center;}
	.investigation{gap:2em;
		.title{min-height:6em;}
		.investigation-news{;box-shadow:2px 2px 14px  -8px rgb(0 0 0 / 56%);border-radius:4px;padding:5px;}
		p{padding:0;}
	}
	.auto-fit-160{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));gap:20px;margin:4em 0 8em;
		span{box-shadow:2px 2px 14px  -8px rgb(0 0 0 / 56%);border-radius:4px;align-content:center;min-height:3em;padding:3px;}
	}
	
	.admin{font-size:14px;margin-left:2em;color:#666;}
	.policy{
		margin-top:6em;
		dl{display:grid;gap:3em;}
		dt{padding:1em;border-radius:8px;}
		dd{padding:1em 2em;}
	}
	.faq-container {padding: 20px;
		details {width: 90%;max-width: 800px;margin:2em auto;background: #ffffff;border-radius: 8px;box-shadow:0 2px 4px #5ba9dd66;}
		summary {padding: 1rem;cursor: pointer;font-weight: bold;position: relative;background: #f8f9fa;border-radius: 8px;}
		summary:hover {background: #e9ecef;}
		summary::-webkit-details-marker {display: none;}
		summary::after {content: '+';position: absolute;right: 1rem;transition: transform 0.3s ease;}
		details[open] summary::after {transform: rotate(45deg);}
		.answer {padding: 1rem;border-top: 1px solid #eee;line-height: 1.6;animation: fadeIn1 0.5s ease-in-out;}
	}

	.check,.list,.circle{background:#f8f9fa;padding:0 1em;margin:3em;}
	.check{
		li{padding:.5em;border-bottom:1px solid #d78383;display:grid;grid-template-columns:2.5em auto;align-items:center;}
		li:before {content:'\2713';color:red;margin-right:10px;font-size:1.4em;}
		li:last-of-type {border-bottom:none;}
	}
	.notice-box {background: #f8f9fa;display:grid;padding: 15px;border-radius: 6px;margin-top: 20px;}
	.flow-item {
		position: relative;background: #fff;padding: 2em 3em;margin-bottom: 5em;
		h3 {color: #2c3e50;font-size: 1.2em;}	
		p{margin-left: 3em;}
		.step {
			display: inline-block;background: #3498db;color: #fff;padding: 5px 15px;border-radius: 20px;font-weight: bold;
			margin-bottom: 10px;font-size: 120%;box-shadow:2px 2px 10px -1px #666666a1;
		}
		.details {
			background: #f8f9fa;padding: 15px;margin-top: 10px;border-radius: 5px;
			ul {padding-left:2em;}
			li {margin: 5px 0;}	
			}
	}

	.flow-item:not(:last-child):after {
		content: "▼";color: #6ab96e;position: absolute;bottom: -29px;left: 50%;transform: translateX(-50%);text-shadow: 2px 5px 11px #66666663;font-size: 44px;}
		
	.slideshow-container {
		max-width: 100%;overflow: hidden;position: relative;padding: 20px;background: rgba(255, 255, 255, 0.8);

		.slide-wrapper {display: flex;transition: transform 0.5s ease;gap: 20px;}
		.slide {flex: 0 0 auto;width:210px;padding: 10px;box-sizing: border-box;text-align:center;}
		.slide img {width:200px;height: 200px;object-fit: cover;transition: transform 0.3s ease;}
		.slide img:hover {transform: scale(1.05);}
		.title{min-height:1em;}
		/* ナビゲーションボタン */
		.nav-button {position: absolute;top: 50%;;background: rgba(255,255,255,0.8);color:var(--accent-color);
			border: none;padding: 10px;cursor: pointer;border-radius: 50%;box-shadow: 0 2px 5px rgba(0,0,0,0.2);transform: rotate(90deg) translateY(-50%);}
		.prev {left: -10px;}
		.next {right: 20px;}
        .zoom-slide-up {opacity:1;transform:scale(0.0);animation:zoomIn 1.8s ease forwards;transition-delay:0.98s;}
	}
	.sitemap{display: flex;gap: 2em;padding: 2em;flex-wrap: wrap;
		a {padding: 1em;border-radius: 8px;box-shadow: 1px 1px 9px -2px #5ba9ddb5;display: block;text-decoration: none;min-width:9em;}
	}

}
footer{
	background:#f5f5f5;padding:50px 0 30px;color:var(--gray);
	.footer-content {max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;padding:0 20px;
		.footer-nav {display: flex;gap: 20px;margin-bottom: 30px;flex-wrap: wrap;justify-content: center;
			a {color: var(--nav-bg);text-decoration: none;font-size: 14px;min-width: 11em;text-align: center;border: 1px solid;padding: 5px;border-radius: 6px;background: #fff;}
			a:hover {text-decoration:underline;}
			}	
		.sns-icons {display:flex;gap:15px;margin-bottom:30px;
			a {width:36px;height:36px;background:var(--nav-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;}
		}
	}	
	.footer-bottom {border-top:1px solid #ddd;padding-top:20px;text-align:center;font-size:12px;}
}

#pagetop {
	position: fixed;right: 20px;bottom: -100px;width: 50px;height: 50px;background-color: rgba(0, 0, 0, 0.45);
	border-radius: 50%;cursor: pointer;transition: all 0.5s ease;z-index: 1000;
	&::before {content: '';position: absolute;top: 50%;left: 50%;width: 12px;height: 12px;border-top: 2px solid #fff;
		border-left: 2px solid #fff;transform: translate(-50%, -30%) rotate(45deg);}
	&:hover {background-color: rgba(0, 0, 0, 0.9);transform: translateY(-5px);}
}

#pagetop.fixed {bottom: 20px;}



@media (max-width:1000px) {
.nav-list > li > a {padding:1rem 3vw;}
.page-banner{object-position: 50% 48%;}
}
@media (max-width:768px) {
	h1 {font-size:4.5vw;}
	h2{padding:1.1em;top: -150px;margin: 0 auto -3em;box-shadow: inset 0px 0px 35px 16px #ffffff;}
	h3{margin: 1em;}
	.page-banner {height: 211px;}
	header {
		background-image: linear-gradient(178deg, rgba(245, 245, 245, 0), rgba(99, 211, 102, 1));
		.logo {text-align:left;}
		.header-top {
			display: block;text-align: center;transition: .3s;
			.contact-info {display: flex;justify-content: space-between;align-items: center;}
			.cta-button {margin-left: auto;}
		}
	}
	header.fixed {transform: translateY(-71px);height: 134px;
		.header-top:first-child{transform: translateY(58px) scale(.9);padding:8px 0;}
		.hamburger-menu,.main-nav{transform: translateY(58px);}
		.header-copy,.contact-info{display:none;}
		
	}
	main{margin-top:12.4em;}
	.main-nav {
		background:#ffffffe6;justify-content:flex-start;position:fixed;top:0;right:-100%;width:80%;height:100vh;padding:80px 20px;flex-direction:column;
		transition:right 0.5s ease-in-out;overflow-y:auto;z-index:999;
		a {border:1px solid var(--white);}
		li{background:var(--nav-bg);color:var(--white);}
		.nav-list {flex-direction:column;}
		.has-submenu .submenu {text-indent:1.5em;width:100%;position:static;;
			li{background:#53cd58;background:#dedede;}
		}
		.has-submenu::before,.has-submenu::after{top:2em;}
		.has-submenu::before{right:35px;}
		.has-submenu::after{right:30px;}
		.has-submenu.active::before{transform:translateY(-50%) rotate(-135deg);transition:.5s;}
		.has-submenu.active::after{transform:translateY(-50%) rotate(135deg);transition:.5s;}
		

	}
	.main-nav.active {right:0;}
	.main-visual {
		.slider {
		    .background {
		        .F-c {padding:2em 1em;left:0;}
		        .B-c {padding:1em;right:0}
		    }
		}
		#myNavi{width:100%;}
	}

	.hamburger-menu {display:block;}
	.hamburger-menu.active span:nth-child(1) {transform:rotate(45deg) translate(5px, 5px);}
	.hamburger-menu.active span:nth-child(2) {opacity:0;}
	.hamburger-menu.active span:nth-child(3) {transform:rotate(-45deg) translate(7px, -7px);}

	section{font-size:14px;
		.support .labelcheck input.etc_text { width:auto;}
		.support .labelcheck input {transform: scale(1);}
		.support #support {padding:0;}
		.support input, .support textarea {max-width:87vw;}
		.support .support-wrap div {grid-template-columns:6.2em auto;max-width:90vw;}
		.flow-item {padding: 2em 0em;
			.details{padding: 4px;}
			 }
		.check{margin: 1em;
			li{margin-left: 0;}
			}
		p.end {border-bottom: 2px solid #888;display: flex;}
		.faq-container {padding: 20px 0;}
    	.service-cards, .news-card {grid-template-columns:auto;
			h3{margin:1em;}
			.blog-wrap.top {padding: 0 1em;}
		}
	}
	
	.blog-wrap {
 	   .blog {grid-template-columns: auto;}
	}
	.slideshow-container {max-width: 100%;padding: 10px;}
}

/* アニメーション 
.fade-in {opacity:0;transform:translateY(20px);transition:opacity 0.8s, transform 0.8s;}
.fade-in.visible {opacity:1;transform:translateY(0);}
*/
/* フェードインアニメーション */
@keyframes fadeIn1 {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}

.fade-in {opacity:0;animation:fadeIn 0.8s ease forwards;}
@keyframes fadeIn {from {opacity:0;}to {opacity:1;}}

.zoom-in {opacity:0;transform:scale(0.95);animation:zoomIn 1.8s ease forwards;transition-delay:0.98s;}
@keyframes zoomIn {from {opacity:0;transform:scale(0.95);}to {opacity:1;transform:scale(1);}}

.slide-up {opacity:0;transform:translateY(40px);animation:slideUp 0.8s ease forwards;}
@keyframes slideUp {from {opacity:0;transform:translateY(20px);}to {opacity:1;transform:translateY(0);}}

.zoom-slide-up {opacity:0;transform:scale(0.8) translateY(30px);animation:zoomSlideUp 1s ease forwards;}
@keyframes zoomSlideUp {0% {opacity:0;transform:scale(0.96) translateY(30px);}100% {opacity:1;transform:scale(1) translateY(0);}}

@keyframes fade {0% { opacity: 0; }20% { opacity: 1; }80% { opacity: 1; }100% { opacity: 0; }}