#introPage{position: relative; word-break:keep-all}
#introPage .bg{background: url('../img/intro/bg.jpg') center center no-repeat; background-size:cover; padding: 75px 15px 215px}
#introPage .logo img{display: block;margin: 0 auto;}
#introPage .big{font-family: var(--jalnan);}
#introPage .txt_w{margin:  50px 0; text-align: center; color: var(--black3); font-size: 1.25rem;} 
#introPage .txt_w .big{margin-bottom: 15px; font-size: 2.05em;}
#introPage .det{max-width:907px; margin:  auto; color: #666}
#introPage .det > li:not(:first-child){margin-top: 15px;}
#introPage .det > li{display: flex; background: #fff; box-shadow:3px 3px 3px rgba(0,0,0,.3); border-radius:15px}
#introPage .det .t{border-radius:15px; background: #666; color : #fff; padding: 20px 15px;display: flex;
    align-items: center;
    justify-content: center; width: 165px;  font-family: var(--jalnan);}
#introPage .det .green .t{background: var(--green)}
#introPage .det .c{padding: 20px 30px; flex:1}
#introPage .div{display: flex}
#introPage .div > li:not(:first-child){padding-left: 20px; margin-left: 20px; position: relative;}
#introPage .div > li:not(:first-child):after{position: absolute; left: 0; width: 1px; height: 18px; content: ''; background: #666; margin-top: -9px; top:50%}
#introPage .div > li{display: flex; align-items:center; gap:10px; flex-wrap:wrap}

#introPage .bot{text-align: center; transform:translateY(-50%); text-align: center;}
#introPage .bot img{display: block;margin: 0 auto;}
#introPage .bot .imgs{display: flex; margin-left: -30px;}

#introPage .imgs > li{width: calc(33.333% - 30px); margin-left: 30px; color: #fff;}
#introPage .bot a{display: flex; border:1px solid var(--green); border-radius:8px; background: #fff; overflow: hidden;flex-flow: column; height: 100%;}
#introPage .bot .txt{background: var(--green); display: flex; height: 80px; align-items:center; justify-content:center; font-size: 1.375rem; position: relative; gap:20px; padding: 0 1rem;font-family: var(--jalnan)}
#introPage .bot .brown .txt{background: #7a4603}
#introPage .bot .green2 .txt{background: #03627a}
#introPage .bot .brown a{border-color: #7a4603}
#introPage .bot .green2 a{border-color: #03627a}
#introPage .bot .img{flex:1}
#introPage .bot .cont{color: var(--black3); font-size: 1.125rem; text-align: left; display: flex; align-items:center; padding: 30px; background: url('../img/intro/b3.gif') right 18px no-repeat}
#introPage .bot .cont dt{font-size: 26px; font-weight: 700; color: #03627a; margin-bottom: 20px;}
#introPage .bot .cont dt span{box-shadow: inset 0 -17px 0 #e3eef0; }
#introPage .bot .cont dd:not(:last-child){margin-bottom: 10px;}
#introPage .bot .cont dd{position: relative; padding-left: 10px;}
#introPage .bot .cont dd:before{position: absolute; left: 0; top:.6em; width: 3px; height: 3px; background: #03627a; content: '';}

#introPage .bot .txt .flex{flex:1; width: calc(100% - 50px)}

#introPage .bot .arrow{background: #fff; border-radius:50%; position: relative; width: 26px; height: 26px;}
#introPage .bot .arrow:before{width: 6px;
    height: 6px;
    border-top: 2px solid var(--green);
    border-left: 2px solid var(--green);
    vertical-align: middle;     transform: rotate(135deg); display: block; content: ''; position: absolute; left: 50%; top:50%;    margin: -4px 0 0 -5px;}
#introPage .bot .brown .arrow:before{border-color: #7a4603}
#introPage .bot .green2 .arrow:before{border-color: #03627a}


@media (min-width:1025px){
	#introPage .bot img{    min-width: 100%;
    min-height: 100%;
    max-width: 300%;
    left: 50%;
    transform: translateX(-50%);
    position: relative;}
}
@media (max-width:1450px){
	.inner{padding-left: 15px; padding-right: 15px;}	
	#introPage .bot .imgs{margin-left: -15px;}
	#introPage .imgs > li{width: calc(33.333% - 15px); margin-left: 15px}
}

@media (max-width:1024px){
#introPage .big span{display: block;}
#introPage .det .c{padding: 20px}
#introPage .div > li{gap:5px}
#introPage .det .t{width: 115px}
#introPage .bot{transform:none; margin-top: -150px;}
#introPage .bot .imgs{margin: -15px 0 0; flex-flow:column}
#introPage .imgs > li{width: 100%; margin: 15px 0 0 0;}
}

@media (max-width:841px){
}

@media (max-width:720px){
	#introPage .det > li{flex-flow:column}
	#introPage .det .t{width: 100%; padding: 15px;}
}

@media (max-width:480px){
	#introPage .div{flex-flow:column}
	#introPage .div > li:not(:first-child):after{display: none;}
	#introPage .div > li:not(:first-child){margin: 10px 0 0; padding: 0}
	#introPage .bot .cont dt{font-size: 20px;}
	#introPage .bot .cont{padding: 1.5rem}
	#introPage .bot .cont{background: none}
	
}