@charset "UTF-8";

/*================================mainvisual================================*/
.mainvisual{
position: relative;
width: 100%;
max-width: 1920px;
min-width: 1280px;
aspect-ratio:1920 / 868;
margin: auto;
background: url(../images/bg-mainvisual.jpg) no-repeat top center;
background-size: 100% auto;
transition: 0.5s;
overflow: hidden;
}
.mainvisual .people{
width:48vw;
position: absolute;
bottom: 0;
left:6vw;
z-index: 1;
}
.mainvisual .catch{
width: 33vw;
position: absolute;
top: 55%;
right:12vw;
z-index: 1;
transform: translateY(-50%);
}
.mainvisual .people img,.mainvisual .catch img{
width:100%;
height: auto;
}
.main_leaf {
position: absolute;
bottom: 30px;
right: 94px;
pointer-events: none;
}
.main_leaf g {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
#leaf01{animation-delay: 0s;}
#leaf02{animation-delay: 0.3s;}
#leaf03{animation-delay: 0.6s; }
#leaf04{animation-delay: 0.9s; }
#leaf05{animation-delay: 1.1s; }
#leaf06{animation-delay: 1.4s; }
#leaf07{animation-delay: 1.7s; }
#leaf08{animation-delay: 2.0s; }
#leaf09{animation-delay: 2.3s; }
#leaf10{animation-delay: 2.6s; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity:1; }
}
.main_leaf .cls-1 {
  clip-path: url(#clippath-6);
}
.main_leaf .cls-2 {
  clip-path: url(#clippath-7);
}
.main_leaf .cls-3 {
  clip-path: url(#clippath-4);
}
.main_leaf .cls-4 {
  clip-path: url(#clippath-9);
}
.main_leaf .cls-5 {
  fill: none;
}
.main_leaf .cls-6 {
  clip-path: url(#clippath-1);
}
/*.main_leaf .cls-7 {
  isolation: isolate;
}*/
.main_leaf .cls-8 {
  clip-path: url(#clippath-5);
}
.main_leaf .cls-9 {
  clip-path: url(#clippath-8);
}
.main_leaf .cls-10 {
  clip-path: url(#clippath-3);
}
.main_leaf  .cls-11 {
  mix-blend-mode: multiply;
}
.main_leaf .cls-12 {
  clip-path: url(#clippath-2);
}
.main_leaf .cls-13 {
  clip-path: url(#clippath);
}
/*.main_leaf .cls-14 {
  opacity: .5;
}*/
/*.mainvisual g #leaf01 img {
position: absolute;
right: 165px;
top: 264px;
}
.mainvisual g #leaf02 img {
position: absolute;
right: 116px;
top: 307px;
}
.mainvisual g #leaf03 img {
position: absolute;
right: 116px;
bottom: 251px;
}
.mainvisual g #leaf04 img {
position: absolute;
right: 89px;
bottom: 211px;
}
.mainvisual g #leaf05 img {
position: absolute;
right: 175px;
bottom: 127px;
}
.mainvisual g #leaf06 img {
position: absolute;
right: 247px;
bottom: 122px;
}
.mainvisual g #leaf07 img {
position: absolute;
right: 305px;
bottom: 64px;
}
.mainvisual g #leaf08 img {
position: absolute;
right: 420px;
bottom: 77px;
}
.mainvisual g #leaf09 img {
position: absolute;
right: 422px;
bottom: 33px;
}
.mainvisual g #leaf10 img {
position: absolute;
right: 650px;
bottom: 30px;
}*/


@media  only screen and (max-width: 1280px) {
.mainvisual .people{
width:613.891px;
left:76.74px;
}
.mainvisual .catch{
width:422.062px;
right:153.48px;
}
}
@media  only screen and (min-width: 1920px) {
.mainvisual .people{
width:921.594px;
left:115.2px;
}
.mainvisual .catch{
width:633.594px;
right:230.4px;
}
}
@media  only screen and (max-width: 768px) {
.mainvisual{
position: relative;
width: 100%;
max-width: 100%;
min-width: 100%;
aspect-ratio:3 / 4;
background: url(../images/bg-mainvisual.jpg) no-repeat top center;
background-size: 200% auto;
margin-top: 80px;
}
.mainvisual .people{
width: 100vw;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.mainvisual .catch{
width: 70vw;
position: absolute;
top: 5%;
right: initial;
left: 50%;
transform: translateX(-50%);
}
.mainvisual .people img,.mainvisual .catch img{
width:100%;
height: auto;
}
.main_leaf {
position: absolute;
bottom: 118px;
right: 0px;
pointer-events: none;
width: 102%;
}
}
/*=============================== contact_area ================================*/
.contact_area{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background:#f7f5d1 url(../images/bg-contact.png) repeat top center;
margin: auto;
padding: 69px 0;
}
.contact_area .inner {
position: relative;
width: 1280px;
padding: 0 40px;
text-align: center;
margin:auto;
}
.contact_area .inner p{
color: #085752;
margin-bottom: 41px;
}
.contact_area .inner p span:nth-child(1){
display: block;
font-size:3.7rem;
font-weight: 700;
margin-bottom: 22px;
}
.contact_area .inner p span:nth-child(2){
font-size:2.5rem;
font-weight: 700;
}
.contact_area .inner .btn a{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 261px);
height: 89px;
color: #fff;
font-size: 3.5rem;
font-weight: 700;
background:#26b087 url(../images/icon/icon-arrow01.svg) no-repeat center right 40px;
border-radius: 120px;
text-decoration: none;
margin: auto;
transition: 0.3s;
}
.contact_area .inner .btn a:hover{
background:#52c495 url(../images/icon/icon-arrow01.svg) no-repeat center right 40px;
}
.contact_area.shinchan01 .inner .btn a::after{
content: "";
position: absolute;
top: -18px;
right: -159px;
width: 131px;
height: 179px;
background: url(../images/shinchan01.svg) no-repeat;
}
.contact_area.shinchan02 .inner .btn a::after{
content: "";
position: absolute;
top: -21px;
left: -132px;
width: 112px;
height: 179px;
background: url(../images/shinchan02.svg) no-repeat;
}
@media  only screen and (max-width: 768px) {
.contact_area{
width: 100%;
max-width: 100%;
min-width: 100%;
background:#f7f5d1 url(../images/bg-contact.png) repeat top center;
background-size: 12px auto;
padding: 40px 0;
}
.contact_area .inner {
width: 100%;
padding: 0 20px;
}
.contact_area .inner p{
color: #085752;
margin-bottom:130px;
}
.contact_area .inner p span:nth-child(1){
display: block;
font-size:5vw;
line-height: 1.3;
margin-bottom:10px;
}
.contact_area .inner p span:nth-child(2){
font-size:4vw;
line-height: 1.3;
}
.contact_area .inner .btn a{
width: 100%;
height: 60px;
font-size:4vw;
background:#26b087 url(../images/icon/icon-arrow01.svg) no-repeat center right 20px;
background-size: 20px auto;
border-radius: 60px;
}
.contact_area .inner .btn a:hover{
background:#52c495 url(../images/icon/icon-arrow01.svg) no-repeat center right 20px;
background-size: 20px auto;
}
.contact_area.shinchan01 .inner .btn a::after{
content: "";
position: absolute;
top: -120px;
right: initial;
left: 50%;
transform: translateX(-50%);
width: 98px;
height: 130px;
background: url(../images/shinchan01.svg) no-repeat;
background-size: auto 100%;
}
.contact_area.shinchan02 .inner .btn a::after{
content: "";
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 130px;
background: url(../images/shinchan02.svg) no-repeat;
background-size: auto 100%;
}

}

/*=============================== second_nav ================================*/
.second_nav {
display: block;
padding: 30px 0;
background-color: #e9f3e6;
}
.second_nav ul {
width: 960px;
margin: 0 auto;
display: flex;
position: relative;
justify-content: center;
}
.second_nav ul li {
width: calc(100% / 3);
height: 117px;
position: relative;
}
.second_nav ul li::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 117px;
background: url("../images/icon/nav2_line.svg")no-repeat center;
}
.second_nav ul li:last-child::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 117px;
background: url("../images/icon/nav2_line.svg")no-repeat center;
}
.second_nav ul li a{
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
color: #085752;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.1em;
text-decoration: none;
background: url("../images/icon/icon-arrow06.svg") no-repeat center bottom;
transition: 0.3s;
}
.second_nav ul li a:hover{
opacity: 0.7;
}
.second_nav ul li a .image_wrap {
align-items: center;
margin-bottom: 17px;
}
@media only screen and (max-width: 767px) {
.second_nav {
padding: 20px 0;
}
.second_nav ul {
width: 100%;
margin: 0 auto;
display: flex;
position: relative;
}
.second_nav ul li::before,
.second_nav ul li:last-child::after{
display: none;
}
.second_nav ul li:not(:last-child):after{
content: "";
width: 2px;
height: 110px;
background-image: linear-gradient(to bottom, #26b087 2px, transparent 2px);
position: absolute;
right: -1px;
top: 0;
bottom: 0;
background-size: 2px 8px;
}
.second_nav ul li a{
padding: 0 3px;
font-size: 4vw;
line-height: 1.1;
text-align: center;
}
.second_nav ul li a .image_wrap {
margin-bottom: 2px;
}
.second_nav ul li a .image_wrap img {
width: 72%;
}
.second_nav ul li a:hover{
opacity: 0.7;
}
.second_nav ul li a p{
line-height: 1.2;
}
}

/*=============================== outline ================================*/
#outline{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background:url(../images/bg-leaf-right.png) no-repeat top 700px center,url(../images/bg-loan.jpg) no-repeat top center;
margin: auto;
}
#outline .loan {
position: relative;
min-height: 1443px;
padding-top: 180px;
}
#outline .loan .inner {
position: relative;
width: 1062px;
padding: 0 40px;
margin:auto;
}
#outline .loan h2 {
position: relative;
width: 722px;
height: 281px;
background: url(../images/h2-loan.png) no-repeat;
margin:auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 15px;
}
#outline .loan h2 p{
text-align: center;
font-weight: 700;
transform: skewX(-8deg);
padding-bottom: 40px;
}
#outline .loan h2 span:nth-child(1){
width: 100%;
display: block;
color: #fff100;
font-size: 3.3rem;
margin-bottom: 12px;
}
#outline .loan h2 span:nth-child(2){
width: 100%;
display: block;
color: #fff;
font-size: 4.2rem;
}
#outline .loan .lead01{ 
color: #085752;
font-weight: 700;
line-height: 1.6;
text-align: center;
margin-bottom: 85px;
}
#outline .loan .lead01 span{ 
font-size: 3rem;
letter-spacing: 0.1em;
line-height: 1.6;
}
#outline .loan .lead01 span span:nth-of-type(1){ 
position: relative;
font-size: 3.9rem;
letter-spacing: 0.15em;
margin: 0 8px 0 16px;
background:
linear-gradient(90deg, #00a975 0%, #58b4dd 100%) center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outline .loan .lead01 span span:nth-of-type(1)::before{
position: absolute;
bottom:-16px;
left: 50%;
transform: translateX(-50%);
content: "";
display: inline-block;
width: 82%;
height: 16px;
background:#fff100;
background-size: 100% auto;
}
#outline .loan .lead01 span span:nth-of-type(2){ 
font-size: 3.6rem;
letter-spacing: 0.1em;
}
#outline .loan_box{
width: 867px;
text-align: center;
background: #26b087;
border: 3px solid #26b087;
border-radius: 27px;
margin: 0 auto 42px;
}
#outline .loan_box .wrap{
background: #fff;
padding: 35px 48px 53px;
border-radius: 0 0 25px 25px;
}
#outline .loan_box h3{
position: relative;
display: inline-flex;
align-items: center;
color: #fff;
font-weight: 700;
font-size: 3.3rem;
padding: 40px;
}
#outline .loan_box h3::before{
display: inline-block;
content: "";
width: 24px;
height: 24px;
background:url(../images/icon/icon-square.svg) no-repeat;
transform: rotate(45deg);
margin-right: 24px;
}
#outline .loan_box h3::after{
display: inline-block;
content: "";
width: 24px;
height: 24px;
background:url(../images/icon/icon-square.svg) no-repeat;
transform: rotate(45deg);
margin-left: 24px;
}

#outline .loan_box .wrap p{
color: #085752;
font-weight: 700;
font-size: 4rem;
letter-spacing: 0.1em;
margin-bottom: 52px;
}
#outline .loan_box .wrap p > span:nth-of-type(2) {
display: inline-block;
margin: 0 16px;
-webkit-text-stroke:10px #fff;
text-stroke: 10px #fff;
paint-order: stroke;
padding: 0 16px 20px;
background: linear-gradient(transparent 70%, #fff100 40%);
letter-spacing: 0;
}
#outline .loan_box .wrap p > span:nth-of-type(2) span:nth-of-type(1){
font-size: 8rem;
}
#outline .loan_box .wrap p > span:nth-of-type(2) span:nth-of-type(2){
font-size: 4.7rem;
font-weight: 800;
padding-left: 5px;
}
#outline .loan_box .wrap dl{
display: flex;
justify-content: center;
gap: 30px 60px;
flex-wrap: wrap;
color: #085752;
font-weight: 700;
}
#outline .loan_box .wrap dl dt{
display: flex;
align-items: center;
justify-content: center;
gap:29px;
position: relative;
width: 100%;
font-size: 1.8rem;
letter-spacing: 0.2em;
margin-bottom: 10px;
}
#outline .loan_box .wrap dl dt::before{
display: inline-block;
content: "";
width: 280px;
height: 3px;
background: #26b087;
}
#outline .loan_box .wrap dl dt::after{
display: inline-block;
content: "";
width: 280px;
height: 3px;
background: #26b087;
}
#outline .loan_box .wrap dl dd{
letter-spacing: 0.2em;
font-size: 2.5rem;
padding-left: 48px;
background: url(../images/icon/icon-square.svg) no-repeat left center;
}
#outline .loan .lead02{
color: #085752;
font-weight: 700;
font-size: 3rem;
text-align: center;
letter-spacing: 0.1em;
}
#outline .loan .lead02 span{
font-size: 3.5rem;
-webkit-text-stroke:8px #fff;
text-stroke: 8px #fff;
paint-order: stroke;
margin: 0 16px;
}
#outline .loan .lead02 span:nth-of-type(1),#outline .loan .lead02 span:nth-of-type(2){
padding: 0 8px 12px;
background: linear-gradient(transparent 65%, #fff100 30%);
}
@media only screen and (max-width: 767px) {
#outline{
width: 100%;
max-width: 100%;
min-width: 100%;
background:url(../images/bg-leaf-right.png) no-repeat top 100px center,url(../images/bg-loan.jpg) no-repeat top center;
background-size: 100% auto,auto 900px;
margin: auto;
}
#outline .loan {
min-height: auto;
padding-top: 60px;
padding-bottom: 60px;
}
#outline .loan .inner {
width: 100%;
padding: 0 20px;
}
#outline .loan h2 {
position: relative;
width: 100%;
height: 36vw;
background: url(../images/h2-loan.png) no-repeat;
background-size: 100% auto;
margin-bottom: 20px;
}
#outline .loan h2 p{
transform: skewX(-8deg);
padding-bottom: 6vw;
}
#outline .loan h2 span:nth-child(1){
width: 100%;
display: block;
color: #fff100;
font-size: 5vw;
margin-bottom: 2vw;
}
#outline .loan h2 span:nth-child(2){
width: 100%;
font-size: 7vw;
}
#outline .loan .lead01{ 
line-height: 1.6;
margin-bottom: 50px;
}
#outline .loan .lead01 span{ 
font-size: 5vw;
}
#outline .loan .lead01 span span:nth-of-type(1){ 
font-size: 7vw;
margin: 0 4px 0 8px;
}
#outline .loan .lead01 span span:nth-of-type(1)::before{
position: absolute;
bottom:-10px;
width: 82%;
height: 3vw;
}
#outline .loan .lead01 span span:nth-of-type(2){ 
font-size: 7vw;
}
#outline .loan_box{
width: 100%;
border: 3px solid #26b087;
border-radius: 16px;
margin: 0 0 50px 0;
}
#outline .loan_box .wrap{
padding: 20px 20px 30px;
border-radius: 0 0 12px 12px;
}
#outline .loan_box h3{
font-size: 5vw;
padding: 16px;
}
#outline .loan_box h3::before{
content: "";
width: 16px;
height: 16px;
background:url(../images/icon/icon-square.svg) no-repeat;
background-size: 100% auto;
margin-right: 12px;
}
#outline .loan_box h3::after{
content: "";
width: 16px;
height: 16px;
background:url(../images/icon/icon-square.svg) no-repeat;
background-size: 100% auto;
margin-left: 12px;
}
#outline .loan_box .wrap p{
font-size: 6vw;
margin-bottom: 30px;
}
#outline .loan_box .wrap p > span:nth-of-type(2) {
display: block;
margin: 4px 8px 6px;
-webkit-text-stroke:8px #fff;
text-stroke: 8x #fff;
padding: 0 16px 10px;
background: linear-gradient(transparent 80%, #fff100 20%);
}
#outline .loan_box .wrap p > span:nth-of-type(2) span:nth-of-type(1){
font-size: 12vw;
}
#outline .loan_box .wrap p > span:nth-of-type(2) span:nth-of-type(2){
font-size: 8vw;
}
#outline .loan_box .wrap dl{
display: block;
}
#outline .loan_box .wrap dl dt{
gap:3vw;
width: 100%;
font-size: 5.5vw;
margin-bottom: 5vw;
}
#outline .loan_box .wrap dl dt::before{
display: inline-block;
content: "";
width: 12vw;
}
#outline .loan_box .wrap dl dt::after{
display: inline-block;
content: "";
width: 12.5vw;
}
#outline .loan_box .wrap dl dd{
text-align: left;
font-size: 4.5vw;
padding-left: 6vw;
background: url(../images/icon/icon-square.svg) no-repeat left center;
background-size: 4.5vw ;
margin-top: 3vw;
}
#outline .loan .lead02{
font-size: 5vw;
margin-bottom:0;
}
#outline .loan .lead02 span{
display: inline-block;
font-size:6vw;
-webkit-text-stroke:6px #fff;
text-stroke: 6px #fff;
paint-order: stroke;
margin: 0 1vw;
line-height: 1.3;
}
#outline .loan .lead02 span:nth-of-type(1),#outline .loan .lead02 span:nth-of-type(2){
display: inline-block;
padding: 0 8px 8px;
background: linear-gradient(transparent 70%, #fff100 30%);
}
}

/*=============================== flow ================================*/
#flow{
max-width: 100%;
min-height: auto;
padding: 80px 0 160px;
background: #fff url(../images/bg-flow.jpg) no-repeat bottom center;
}
#flow h2{
display: block;
color: #085752;
font-size:4.5rem;
font-weight: 700;
text-align: center;
padding-bottom: 60px;
margin: 0 auto 120px;
background: url(../images/h2-flow.png) no-repeat bottom center;
background-size: 25% auto;
}
#flow h2 > span:nth-child(1){
display: block;
font-size:4rem;
}
#flow h2 > span:nth-child(2){
display: block;
font-size:5rem;
padding-top: 10px;
}
#flow ol{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 1200px;
margin: auto;
}
#flow ol li{
position: relative;
text-align: center;
width:calc((100% - 80px) / 5);
background: #fff;
border-radius: 20px;
padding: 0 0 40px;
}
#flow ol li:nth-child(6){
display: flex;
flex-wrap: wrap;
position: relative;
text-align: left;
width:654px;
height: 214px;
background: #fff;
border-radius: 20px;
padding: 0 0 40px;
margin-top: 76px;
}
#flow ol li::after{
display: block;
content: "";
width: 21px;
height: 53px;
position: absolute;
top: 60%;
right: -20px;
transform: translateY(-50%);
background: url(../images/step-arrow.svg) no-repeat left center;
}
#flow ol li:nth-child(6):after{
display: none;
}
#flow ol li img{
width: 100%;
height: auto;
border-radius: 20px 20px 0 0;
}
#flow ol li:nth-child(6) img{
width: 235px;
height: 214px;
border-radius: 20px 0 0 20px;
}
#flow ol li:nth-child(6) .wrap{
flex-grow: 1;
}
#flow ol li .ttl{
color: #085752;
font-size: 2.2rem;
font-weight: 700;
line-height: 1.3;
margin: 20px 20px 0;
}
#flow ol li .ttl span{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
height: 72px;
}
#flow ol li:nth-child(6) .ttl span{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: left;
width: 100%;
height: auto;
}
#flow ol li .ttl::after{
display: block;
content: "";
width: 45px;
height: 3px;
background: #fff100;
margin: 0 auto 20px;
}
#flow ol li:nth-child(6) .ttl::after{
display: block;
content: "";
width: 45px;
height: 3px;
background: #fff100;
margin: 8px 0 20px;
}
#flow ol li p:not(.ttl){
font-size: 1.6rem;
line-height: 1.5;
padding: 0 20px;
}
#flow ol li .step{
position: absolute;
top: -34px;
left: 50%;
transform: translateX(-50%);
width: 67px;
height: 67px;
display: block;
color: #fff;
font-size: 1.6rem;
line-height: 1;
background: #26b087;
border-radius: 50%;
border: 3px solid #fff;
padding-top: 10px;
}
#flow ol li:nth-child(6) .step{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: -118px;
transform: translateY(-50%);
width: 140px;
height: 130px;
color: #fff;
font-size: 3rem;
line-height: 1;
background: url(../images/step-fukidashi.svg) no-repeat center;
border-radius: 50%;
border: none;
padding-top: 0;
padding-right: 10px;
}
#flow ol li .step span:nth-child(2){
display: block;
font-size: 3rem;
}
#flow ol li .btn {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 40px;
}
#flow ol li:nth-child(6) .btn {
position: initial;
transform: initial;
width: 180px;
height: 40px;
margin: 20px 20px 0;
}
#flow ol li .btn a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 45px;
color: #fff;
border-radius: 45px;
margin: auto;
background: #085752 url(../images/icon/icon-arrow03.svg) no-repeat center right 16px;
background-size: 24px;
text-decoration: none;
transition: 0.3s;
}
#flow ol li .btn a:hover{
color: #fff;
background: #26b087 url(../images/icon/icon-arrow01.svg) no-repeat center right 16px;
background-size: 24px;
}
@media only screen and (max-width: 767px) {
#flow{
max-width: 100%;
min-height: auto;
padding: 60px 0 60px;
background: 
url(../images/bg-flow-sp.jpg) no-repeat bottom center,
 linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,250,244,1) 10%, rgba(245,250,244,1) 100%) ;
background-size: 100% auto;
}
#flow h2{
font-size: 5vw;
padding-bottom: 10vw;
margin: 0 auto 80px;
background: url(../images/h2-flow.png) no-repeat bottom center;
background-size: 80% auto;
}
#flow h2 > span:nth-child(1){
display: block;
font-size: 5vw;
}
#flow h2 > span:nth-child(2){
display: block;
font-size: 7vw;
padding-top: 3vw;
}
#flow ol{
display: block;
width: 100%;
}
#flow ol li{
width:80%;
border-radius: 10px;
padding: 0 0 6vw;
margin: 0 auto 60px;
}
#flow ol li:nth-child(6){
display: block;
text-align: center;
width:80%;
height: auto;
border-radius: 10px;
padding: 0 0 6vw;
margin: 0 auto;
}
#flow ol li::after{
content: "";
width: 21px;
height: 53px;
position: absolute;
top: initial;
bottom: -36px;
right: initial;
left: 50%;
transform: translateX(-50%) rotate(90deg);
background: url(../images/step-arrow.svg) no-repeat left center;
}
#flow ol li img{
width: 100%;
height: auto;
border-radius:10px 10px 0 0;
}
#flow ol li:nth-child(6) img{
width: 100%;
height: auto;
border-radius:10px 10px 0 0;
}
#flow ol li:nth-child(6) .wrap{
flex-grow: 1;
}
#flow ol li .ttl{
font-size:6vw;
margin: 5vw 0 0;
}
#flow ol li .ttl span{
width: 100%;
height: auto;
}
#flow ol li:nth-child(6) .ttl span{
justify-content: center;
width: 100%;
height: auto;
}
#flow ol li .ttl::after{
content: "";
width: 40px;
height: 3px;
margin: 8px auto 5vw;
}
#flow ol li:nth-child(6) .ttl::after{
content: "";
width: 40px;
margin: 8px auto 5vw;
}
#flow ol li p:not(.ttl){
font-size: 4.2vw;
padding: 0 20px;
}
#flow ol li .step{
position: absolute;
top: -30px;
width: 60px;
height: 60px;
font-size: 1.4rem;
padding-top: 10px;
}
#flow ol li:nth-child(6) .step{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 130px;
height: 140px;
color: #fff;
font-size: 2.8rem;
line-height: 1;
background: url(../images/step-fukidashi02.svg) no-repeat center;
border-radius: 50%;
border: none;
padding-top: 0;
padding-bottom: 10px;
padding-right: 0;
}
#flow ol li .step span:nth-child(2){
font-size: 2.6rem;
}
#flow ol li .btn {
position: initial;
transform: initial;
width: 80%;
height: 40px;
margin: 20px auto 0;
}
#flow ol li:nth-child(6) .btn {
position: initial;
transform: initial;
width: 80%;
height: 40px;
margin: 20px auto 0;
}
#flow ol li .btn a {
height: 40px;
border-radius: 40px;
margin: auto;
background: #085752 url(../images/icon/icon-arrow03.svg) no-repeat center right 12px;
background-size: 16px;
}
#flow ol li .btn a:hover{
background: #26b087 url(../images/icon/icon-arrow01.svg) no-repeat center right 12px;
background-size: 16px;
}

}
/*=============================== point01 ================================*/
#point #point01{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background:url(../images/bg-leaf-left.png) no-repeat bottom 80px center,url(../images/bg-point.jpg) no-repeat top center;
margin: auto;
padding: 120px 0;
}
#point #point01 .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#point #point01 h2{
padding-left:24px;
}
#point #point01 h2 .num{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
color: #fff;
font-weight: 700;
width: 205px;
height: 150px;
background: url(../images/bg-point-num.svg) no-repeat center;
background-size: cover;
margin:auto;
}
#point #point01 h2 .num > span{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-right:36px;
padding-bottom: 17px;
}
#point #point01 h2 .num > span :nth-child(1){
text-align: center;
width: 100%;
font-weight: 600;
font-size: 2.5rem;
}
#point #point01 h2 .num > span span:nth-child(2){
font-size:7.4rem;
letter-spacing: -2px;
line-height: 0.8;
}
#point #point01 h2 > span{
display: block;
color: #085752;
font-size:4.5rem;
font-weight: 700;
text-align: center;
padding-top: 36px;
}
#point #point01 .lead{
display: block;
color: #085752;
font-size: 2.5rem;
font-weight: 600;
text-align: center;
margin-top: 31px;
}
#point #point01 ul{
display: flex;
flex-wrap: wrap;
gap: 48px;
margin-top: 115px;
}
#point #point01 ul li {
width: calc((100% - 48px) / 2);
background: #e9f3e6;
border-radius: 20px;
padding: 43px 30px 39px;
}
#point #point01 ul li .top {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 20px;
}
#point #point01 ul li .ttl {
color: #085752;
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 17px;
line-height: 2.9rem;
}
#point #point01 ul li p {
color: #085752;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5;
}
#point #point01 ul li .btn a {
display: flex;
align-items: center;
justify-content: center;
width: calc((100% - 5px) / 2);
height: 45px;
color: #fff;
border-radius: 45px;
margin: auto;
background: #085752 url(../images/icon/icon-arrow03.svg) no-repeat center right 13px;
background-size: 24px;
text-decoration: none;
transition: 0.3s;
padding: 0 40px 0 40px;
box-sizing: border-box;
white-space: nowrap;
}
#point #point01 ul li .btn {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
#point #point01 ul li .btn a:hover{
color: #fff;
background: #26b087 url(../images/icon/icon-arrow01.svg) no-repeat center right 16px;
background-size: 24px;
}

@media only screen and (max-width: 767px) {
#point #point01{
width: 100%;
max-width: 100%;
min-width: 100%;
background:url(../images/bg-leaf-right.png) no-repeat bottom center,url(../images/bg-point.jpg) no-repeat top center;
background-size: 100% auto, 200% auto;
padding: 60px 0;
}
#point #point01 .inner {
width:100%;
padding: 0 20px;
}
#point #point01 h2{
padding-left:0;
}
#point #point01 h2 .num{
display: flex;
align-items: center;
justify-content: center;
width:30vw ;
height:22vw ;
background: url(../images/bg-point-num.svg) no-repeat center;
background-size: 100% auto;
}
#point #point01 h2 .num > span{
padding-right:5vw;
padding-bottom: 14px;
}
#point #point01 h2 .num > span :nth-child(1){
width: 100%;
font-size: 3.2vw;
}
#point #point01 h2 .num > span span:nth-child(2){
font-size:10vw;
}
#point #point01 h2 > span{
font-size:7vw;
padding-top: 20px;
}
#point #point01 .lead{
font-size:4vw;
line-height: 1.5;
margin-top: 20px;
}
#point #point01 ul{
display: block;
margin-top:60px;
}
#point #point01 ul li{
width:75%;
padding: 20px;
margin:20px auto 0;
}
#point #point01 ul li figure{
width: auto;
height:auto;
margin:  0 auto 20px;
}
#point #point01 ul li figure img{
width: auto;
height: 60px;
}
#point #point01 ul li .top {
display: block;
text-align: center;
}
#point #point01 ul li .ttl{
font-size:4.5vw;
text-align: left;
margin: 0 0 10px;
}
#point #point01 ul li p{
font-size:4vw;
text-align: left;
margin-bottom: 20px;
}
#point #point01 ul li p br{
display: none;
}
#point #point01 ul li .btn a{
width: 100%;
height:32px;
border-radius: 32px;
background: #085752 url(../images/icon/icon-arrow03.svg) no-repeat center right 14px;
background-size: 14px;
}
#point #point01 ul li .btn a:hover{
background: #26b087 url(../images/icon/icon-arrow01.svg) no-repeat center right 14px;
background-size: 14px;
}
}

/*=============================== point01 ================================*/
#point .support_area{
width: 100%;
max-width: 1920px;
min-width: 1280px;
padding: 0 0 131px;
background:url(../images/bg-leaf-right.png) no-repeat bottom 80px center, url(../images/bg-support.jpg) no-repeat top 527px center;
margin: auto;
}
#point .support_area .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#point .support_area .catch{
position: relative;
height: 435px;
padding-top: 220px;
margin: auto;
background: url(../images/illust-support.png) no-repeat  bottom center;
}
#point .support_area .catch span{
display: inline-block;
padding: 45px 55px;
color: #085752;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.5;
background: #d1e9d9;
border-radius: 20px;
}
#point .support_area .catch span:nth-child(1){
position: absolute;
top: 102px;
left: 104px;
}
#point .support_area .catch span:nth-child(1)::before{
content: "";
position: absolute;
bottom: -78px;
right: 8px;
width: 64px;
height: 60px;
background: url(../images/parts-balloon.svg) no-repeat;
}
#point .support_area .catch span:nth-child(2){
position: absolute;
top: 22px;
left: 420px;
}
#point .support_area .catch span:nth-child(2)::before{
content: "";
position: absolute;
bottom: -78px;
right: 38px;
width: 64px;
height: 60px;
background: url(../images/parts-balloon.svg) no-repeat;
}
#point .support_area .catch span:nth-child(3){
position: absolute;
top: 69px;
left: 779px;
}
#point .support_area .catch span:nth-child(3)::before{
content: "";
position: absolute;
bottom: -78px;
left: 36px;
width: 64px;
height: 60px;
background: url(../images/parts-balloon.svg) no-repeat;
transform: scale(-1, 1);
}
#point .support_area h3{
letter-spacing: 0.1em;
color: #085752;
font-size: 4.5rem;
font-weight: 700;
text-align: center;
width: 1920px;
height: 325px;
padding-top: 122px;
margin-left: -360px;
margin-right: auto;
background: url(../images/h2-support.png) no-repeat top -36px center;
}
#point .support_area .lead{
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: wrap;
color: #085752;
font-weight: 700;
margin-bottom: 50px;
}
#point .support_area .lead > span{
color: #085752;
font-weight: 700;
text-align: center;
padding: 30px 20px 50px;
}
#point .support_area .lead > span span:nth-child(1){
display: block;
font-size: 2.5rem;
margin-bottom: 16px;
}
#point .support_area .lead > span span:nth-child(2){
font-size: 3.5rem;
}
#point .support_area .lead::before{
content: "";
display: inline-block;
width: 90px;
height: 112px;
background: url(../images/parts-support.svg) no-repeat  left center;
}
#point .support_area .lead::after{
content: "";
display: inline-block;
width: 90px;
height: 112px;
background: url(../images/parts-support.svg) no-repeat  left center;
transform: scale(-1, 1);
}
#point .support_area figure{
width: 725px;
margin: auto;
}

#point .support_area .wrap{
width: 890px;
color: #085752;
font-weight: 700;
padding:30px;
border: 2px solid #085752;
border-radius: 120px;
text-align: center;
margin: 65px auto 0;
background-color: #f1f9fe;
}
#point .support_area .wrap span:nth-child(1){
display: block;
font-size: 2.5rem;
margin-bottom: 16px;
}
#point .support_area .wrap span:nth-child(2){
font-size: 1.8rem;
}
@media only screen and (max-width: 767px) {
#point .support_area{
width: 100%;
max-width: 100%;
min-width:100%;
padding: 0 0 60px;
background:url(../images/bg-leaf-left.png) no-repeat bottom 80px center, url("../images/bg-support-sp.jpg") no-repeat top 135% center;
background-size: 100% auto,200% auto;
margin: auto;
}
#point .support_area .inner {
width:100%;
padding: 0 20px;
}
#point .support_area .catch{
display: flex;
align-items: center;
gap: 3vw;
width: calc(100% + 40px);
height: 50%;
padding: 6vw 2vw 32vw;
margin-left: -20px;
background: #fff url(../images/illust-support.png) no-repeat bottom center;
background-size: auto 42%;
}
#point .support_area .catch span{
width: calc((100% / 3) - 2vw);
min-height:20vw;
display: flex;
align-items: center;
justify-content: center;
padding: 3vw;
font-size: 3.6vw;
line-height: 1.3;
border-radius: 10px;
}
#point .support_area .catch span br{
display: none;
}
#point .support_area .catch span:nth-child(1){
position: relative;
top: initial;
left: initial;
}
#point .support_area .catch span:nth-child(1)::before{
content: "";
position: absolute;
bottom: -12vw;
right: 10vw;
width: 10vw;
height: 10vw;
background: url(../images/parts-balloon.svg) no-repeat;
background-size: 100% auto;
transform:initial;
}
#point .support_area .catch span:nth-child(2){
position: relative;
top: initial;
left: initial;
transform:initial;
}
#point .support_area .catch span:nth-child(2)::before{
content: "";
position: absolute;
bottom:-12vw;
right:10vw;
width: 10vw;
height: 10vw;
background: url(../images/parts-balloon.svg) no-repeat;
background-size: 100% auto;
}
#point .support_area .catch span:nth-child(3){
position: relative;
top: initial;
left: initial;
}
#point .support_area .catch span:nth-child(3)::before{
content: "";
position: absolute;
bottom:-12vw;
right:8vw;
left: initial;
width: 10vw;
height: 10vw;
background: url(../images/parts-balloon.svg) no-repeat;
background-size: 100% auto;
transform: scale(-1, 1);
}
#point .support_area h3{
font-size: 6vw;
width: calc(100% + 40px);
height: 30vw;
padding-top: 5vw;
margin: 0 0 20px -20px;
background: url(../images/h2-support.png) no-repeat bottom center;
background-size: 190% auto;
}
#point .support_area .lead{
flex-wrap: initial;
margin-bottom: 50px;
}
#point .support_area .lead > span{
padding: 0 10px;
}
#point .support_area .lead > span span:nth-child(1){
font-size: 4vw;
margin-bottom: 8px;
}
#point .support_area .lead > span span:nth-child(2){
font-size: 6vw;
line-height: 1.2;

}
#point .support_area .lead::before{
content: "";
width: 8vw;
height:9.5vw;
background: url(../images/parts-support.svg) no-repeat  left center;
background-size: 100% auto;
}
#point .support_area .lead::after{
content: "";
width: 8vw;
height: 9.5vw;
background: url(../images/parts-support.svg) no-repeat  left center;
background-size: 100% auto;
}
#point .support_area figure{
width: 100%;
margin: auto;
}
#point .support_area figure img{
width: 100%;
height: auto;
}
#point .support_area .wrap{
width: 100%;
padding:16px;
border-radius: 150px;
margin: 30px auto 0;
}
#point .support_area .wrap span:nth-child(1){
display: block;
font-size: 4.7vw;
line-height: 1.3;
margin-bottom: 8px;
}
#point .support_area .wrap span:nth-child(2){
font-size: 3.2vw;
}
}
/*=============================== point02 ================================*/
#point #point02{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background:url(../images/bg-leaf-left.png) no-repeat bottom 80px center,url(../images/bg-point.jpg) no-repeat top center;
margin: auto;
padding: 120px 0 131px;
}
#point #point02 .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#point #point02 h2{
padding-left:24px;
}
#point #point02 h2 .num{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
color: #fff;
font-weight: 700;
width: 205px;
height: 150px;
background: url(../images/bg-point-num.svg) no-repeat center;
background-size: cover;
margin:auto;
}
#point #point02 h2 .num > span{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-right:36px;
padding-bottom: 17px;
}
#point #point02 h2 .num > span :nth-child(1){
text-align: center;
width: 100%;
font-weight: 600;
font-size: 2.5rem;
}
#point #point02 h2 .num > span span:nth-child(2){
font-size:7.4rem;
letter-spacing: -2px;
line-height: 0.8;
}
#point #point02 h2 > span{
display: block;
color: #085752;
font-size:4.5rem;
font-weight: 700;
text-align: center;
padding-top: 36px;
}
#point #point02 .lead{
display: block;
color: #085752;
font-size:2.5rem;
line-height: 1.5;
font-weight: 700;
text-align: center;
margin-top: 30px;
}
#point #point02 ul {
display: flex;
flex-wrap: wrap;
gap: 50px;
margin-top: 70px;
justify-content: center;
}
#point #point02 ul li{
width: calc((100% - 50px) / 2);
background: #085752;
border-radius: 20px;
}
#point #point02 ul li a{
display: block;
text-decoration: none;
padding: 43px 30px 39px;
background: url("../images/icon/icon-arrow05.svg")no-repeat center right;
transition: 0.3s;
border-radius: 20px;
border: 2px solid #26b087;
}
#point #point02 ul li a:hover{
opacity: 0.7;	
}
#point #point02 ul li .ttl{
color: #fff;
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 17px;
}
#point #point02 ul li p{
width: 500px;
color: #fff;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.4;
}
#point #point02 .btn_tunagu{
text-align: center;
}
#point #point02 .btn_tunagu a {
display: inline-block;
width: 674px;
background: #dcede6 url(../images/icon/icon-arrow05.svg) no-repeat center right;
padding: 30px;
margin-top:100px;
text-align: center;
border: 2px solid #26b087;
border-radius: 15px;
font-size: 2.9rem;
font-weight: 700;
color: #085752;
text-decoration: none;
transition: 0.3s;
}
#point #point02 .btn_tunagu span:nth-child(1){
display: block;
margin-bottom: 10px;
}
#point #point02 .btn_tunagu span:nth-child(2){
display: block;
font-size: 4rem;
}
#point #point02 .btn_tunagu a:hover {
opacity: 0.7;
}

@media only screen and (max-width: 767px) {
#point #point02{
width: 100%;
max-width:100%;
min-width: 100%;
background:url(../images/bg-leaf-right.png) no-repeat bottom 120px center,url(../images/bg-point.jpg) no-repeat top center;
background-size: 100% auto, 200% auto;
margin: auto;
padding: 60px 0 60px;
}
#point #point02 .inner {
width:100%;
padding: 0 20px;
}
#point #point02 h2{
padding-left:0;
}
#point #point02 h2 .num{
display: flex;
align-items: center;
justify-content: center;
width:30vw ;
height:22vw ;
background: url(../images/bg-point-num.svg) no-repeat center;
background-size: 100% auto;
}
#point #point02 h2 .num > span{
padding-right:5vw;
padding-bottom: 14px;
}
#point #point02 h2 .num > span :nth-child(1){
width: 100%;
font-size: 3.2vw;
}
#point #point02 h2 .num > span span:nth-child(2){
font-size:10vw;
}
#point #point02 h2 > span{
font-size:7vw;
padding-top: 30px;
}
#point #point02 .lead{
font-size:4vw;
line-height: 1.5;
margin-top: 20px;
}
#point #point02 ul {
display: block;
gap: 50px;
margin-top: 60px;
}
#point #point02 ul li{
width: 75%;
background: #085752;
border-radius: 20px;
margin: 20px auto 0;
}
#point #point02 ul li a{
display: block;
text-decoration: none;
padding: 20px;
background: url("../images/icon/icon-arrow05.svg")no-repeat center right;
transition: 0.3s;
border-radius: 20px;
border: 2px solid #26b087;
}
#point #point02 ul li a:hover{
opacity: 0.7;	
}
#point #point02 ul li .ttl{
color: #fff;
font-size: 4.5vw;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
}
#point #point02 ul li p{
width: 90%;
color: #fff;
font-size: 4vw;
font-weight: 500;
line-height: 1.4;
}


#point #point02 .btn_tunagu a {
width: 100%;
margin-top: 45px;
font-size: 1.8rem;
padding: 23px;
}
#point #point02 .btn_tunagu span:nth-child(1){
display: block;
margin-bottom: 10px;
}
#point #point02 .btn_tunagu span:nth-child(2){
display: block;
font-size: 7vw;
}
}
/*=============================== point03 ================================*/
#point #point03{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background:url(../images/bg-leaf-right.png) no-repeat bottom center,#fff url(../images/bg-point.jpg) no-repeat top center;
background-size:auto 686px,auto ;
margin: auto;
padding: 120px 0 0;
}
#point #point03 .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#point #point03 h2{
padding-left:24px;
}
#point #point03 h2 .num{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
color: #fff;
font-weight: 700;
width: 205px;
height: 150px;
background: url(../images/bg-point-num.svg) no-repeat center;
background-size: cover;
margin:auto;
}
#point #point03 h2 .num > span{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-right:36px;
padding-bottom: 17px;
}
#point #point03 h2 .num > span :nth-child(1){
text-align: center;
width: 100%;
font-weight: 600;
font-size: 2.5rem;
}
#point #point03 h2 .num > span span:nth-child(2){
font-size:7.4rem;
letter-spacing: -2px;
line-height: 0.8;
}
#point #point03 h2 > span{
display: block;
color: #085752;
font-size:4.5rem;
font-weight: 700;
text-align: center;
padding-top: 36px;
}
#point #point03 .lead{
display: block;
color: #085752;
font-size:2.5rem;
font-weight: 700;
line-height: 1.7;
text-align: center;
margin-top: 30px;
margin-bottom: 115px;
}
#point #point03 .lead span {
padding: 0 8px;
margin: 0 7px;
background: linear-gradient(transparent 77%, #fff100 30%);
font-size: 2.8rem;
font-weight: 700;
letter-spacing:0.2rem;
}
@media only screen and (max-width: 767px) {
#point #point03{
width: 100%;
max-width:  100%;
min-width:  100%;
background:url(../images/bg-leaf-right.png) no-repeat top 10vw center,#fff url(../images/bg-point.jpg) no-repeat top center;
background-size:100% auto,200% auto ;
padding: 60px 0 0;
}
#point #point03 .inner {
width:  100%;
padding: 0 20px;
}
#point #point03 h2{
padding-left:0;
}
#point #point03 h2 .num{
display: flex;
align-items: center;
justify-content: center;
width:30vw ;
height:22vw ;
background: url(../images/bg-point-num.svg) no-repeat center;
background-size: 100% auto;
}
#point #point03 h2 .num > span{
padding-right:5vw;
padding-bottom: 14px;
}
#point #point03 h2 .num > span :nth-child(1){
width: 100%;
font-size: 3.2vw;
}
#point #point03 h2 .num > span span:nth-child(2){
font-size:10vw;
}
#point #point03 h2 > span{
font-size:7vw;
line-height: 1.5;
padding-top: 30px;
}
#point #point03 .lead{
font-size:4vw;
margin-top: 0;
margin-top: 20px;
margin-bottom: 8px;
line-height: 1.5;
text-align: center;
}
#point #point03 .lead br{
display: none;
}
#point #point03 .lead span {
font-size: 1.8rem;
letter-spacing: normal;
}
}
/*=============================== plan ================================*/
#point .plan{
width: 100%;
max-width: 1920px;
min-width: 1280px;
margin: auto;
padding: 0 0 131px;
background: url(../images/bg-leaf-right2.png) no-repeat top 570px center, url(../images/bg-leaf-left.png) no-repeat bottom 80px center, linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 464px, rgba(237,236,224,1) 464px, rgba(237,236,224,1) 100%);
}
#point .plan .catch{
position: relative;
height: 368px;
padding-top: 220px;
background:url(../images/illust-plan.png) no-repeat bottom center;
}
#point .plan .catch span{
display: inline-block;
padding: 35px 0;
width: calc((100% / 3) - 27px);
color: #085752;
font-size: 2.5rem;
font-weight: 700;
text-align: center;
line-height: 1.5;
background: #d1e9d9;
border-radius: 20px;
}
#point .plan .catch span:nth-child(1){
position: absolute;
top: 0;
left: 0;
}
#point .plan .catch span:nth-child(1)::before{
content: "";
position: absolute;
bottom: -78px;
right: 50px;
width: 64px;
height: 60px;
background: url(../images/parts-balloon.svg) no-repeat;
transform: scale(-1, 1);
}
#point .plan .catch span:nth-child(2){
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#point .plan .catch span:nth-child(2)::before{
content: "";
position: absolute;
bottom: -78px;
right: 50px;
width: 64px;
height: 60px;
background: url(../images/parts-balloon.svg) no-repeat;
transform: scale(-1, 1);
}
#point .plan .catch span:nth-child(3){
position: absolute;
top: 0;
right: 0;
}
#point .plan .catch span:nth-child(3)::before{
content: "";
position: absolute;
bottom: -78px;
right: 50px;
width: 64px;
height: 60px;
background: url(../images/parts-balloon.svg) no-repeat;
transform: scale(-1, 1);
}
#point .plan h3{
letter-spacing: 0.1em;
color: #085752;
font-size: 4.5rem;
font-weight: 700;
text-align: center;
width: 1920px;
height: 380px;
padding-top: 148px;
margin-left: -360px;
margin-right: auto;
background: url(../images/h2-support.png) no-repeat top -25px center;
}
#point .plan .lead2{
display: block;
color: #085752;
font-weight: 700;
text-align: center;
margin-bottom:100px;
}
#point .plan .lead2 > span:nth-of-type(1){
display: inline-block;
font-size:3rem;
padding-bottom: 8px;
margin-bottom: 4px;
background: url(../images/line-dot01.svg) repeat-x left bottom;
}
#point .plan .lead2 > span:nth-of-type(1) span{
font-size:4.2rem;
}
#point .plan .lead2 > span:nth-of-type(2){
position: relative;
font-size:4.3rem;
line-height: 1;
letter-spacing: 0.1em;
background: linear-gradient(transparent 70%, #fff100 40%);
}
#point .plan .lead2 > span:nth-of-type(2) span{
font-size:7.6rem;
}
#point .plan .lead2 > span:nth-of-type(2)::after{
position: absolute;
top: -30px;
right: -40px;
content: "";
width:66px ;
height: 52px;
background: url(../images/partd-plan-lead.svg);
}
#point .plan ul{
display: flex;
flex-wrap: wrap;
gap: 32px 20px;
}
#point .plan ul li:not(.col1){
width: calc((100% - 20px) / 2);
border: 3px solid #26b087;
background: #dcede6;
border-radius: 15px;
}
#point .plan ul li:nth-child(3),
#point .plan ul li:nth-child(4),
#point .plan ul li:nth-child(5),
#point .plan ul li:nth-child(8){
border: none;
}
#point .plan ul li:not(.col1) a{
display: block;
border: 3px solid #26b087;
border-radius: 15px;
width: 100%;
padding: 0;
text-decoration: none;
transition: 0.3s;
}
#point .plan ul li a:hover{
opacity: 0.7;
}
#point .plan ul li .num{
color: #fff;
font-weight: 500;
width: 100%;
height: 100px;
background: #26b087;
border-radius: 10px 10px 0 0;
}
#point .plan ul li:nth-child(3) .num,
#point .plan ul li:nth-child(4) .num,
#point .plan ul li:nth-child(5) .num,
#point .plan ul li:nth-child(8) .num{
color: #fff;
font-weight: 500;
width: 100%;
height: 100px;
background: #26b087 url(../images/icon/icon-arrow05-08.svg) no-repeat center right;
border-radius: 10px 10px 0 0;
}
#point .plan ul li:not(.col1) .num > span{
display: flex;
align-items: center;
padding-top: 4px;
padding-left: 32px;
}
#point .plan ul li .num > span span:nth-child(1){
display: inline-block;
font-size:1.5rem ;
margin-top: 12px;
margin-right: 12px;
font-weight: 700;
}
#point .plan ul li .num > span span:nth-child(2){
display: inline-block;
font-size:7.3rem ;
}
#point .plan ul li.col1{
width:100%;
}
#point .plan ul li.col1 a{
border: 3px solid #26b087;
background: #dcede6 url(../images/icon/icon-arrow05.svg) no-repeat center right;
border-radius: 15px;
display: flex;
align-items: center;
text-decoration: none;
transition: 0.3s;
}
#point .plan ul li.col1 .num {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
width: 160px;
height: 272px;
border-radius: 10px 0 0 10px;
}
#point .plan ul li.col1 .num > span span:nth-child(1){
display: inline-block;
width: 100%;
font-size:1.5rem ;
}
#point .plan ul li.col1 .num > span span:nth-child(2){
display: inline-block;
font-size:7.3rem ;
}
#point .plan ul li .wrap {
position: relative;
color: #085752;
width: 100%;
height: 210px;
padding: 28px 32px 0 32px;
}
#point .plan ul li .wrap figure{
position: absolute;
right: 30px;
bottom: 30px;
}
#point .plan ul li.col1 .wrap {
width: 532px;
height: 272px;
padding: 36px 40px 0 40px;
border-radius: 0 0 10px 10px;
}
#point .plan ul li .wrap h4{
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 18px;
}
#point .plan ul li .wrap p{
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
margin-bottom: 16px;
}
#point .plan ul li .wrap .tx_s{
font-size: 1.6rem;
font-weight: 600;
line-height: 1.8;
}
#point .plan ul li.col1 figure{
margin: auto;
}
#point .plan .coming_soon{
position: relative;
height: 165px;
display:flex;
align-items: center;
justify-content: center;
margin-top: 55px;
}
#point .plan .coming_soon::before{
content: "";
width: 22px;
height: 166px;
background: url(../images/parts-comingsoon.svg) no-repeat;
}
#point .plan .coming_soon::after{
content: "";
width: 22px;
height: 166px;
background: url(../images/parts-comingsoon.svg) no-repeat;
transform: scale(-1 , 1);
}
#point .plan .coming_soon > span{
display: inline-block;
color: #085752;
text-align: center;
padding: 0 60px;
}
#point .plan .coming_soon > span span:nth-child(1){
display: block;
font-size: 5rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
#point .plan .coming_soon > span span:nth-child(2){
display: inline-block;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
@media only screen and (max-width: 767px) {
#point .plan{
width: 100%;
max-width: 100%;
min-width:100%;
padding: 0 0 60px;
background: url(../images/bg-leaf-right2.png) no-repeat top 70vw center, 
url(../images/bg-leaf-left.png) no-repeat bottom 5vw center, 
linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50vw, rgba(237,236,224,1) 50vw, rgba(237,236,224,1) 100%);
background-size: 100% auto;
}
#point .plan .catch{
display: flex;
gap: 3vw;
width: calc(100% + 40px);
height: 50%;
padding: 6vw 2vw 32vw;
margin-left: -20px;
background: #fff url(../images/illust-plan-sp.png) no-repeat bottom center;
background-size:83% auto;
}
#point .plan .catch span{
display: flex;
align-items: center;
justify-content: center;
text-align: left;
width: calc((100% / 3) - 2vw);
padding: 3vw;
font-size: 3.6vw;
line-height: 1.3;
border-radius: 10px;
}
#point .plan .catch span br{
display: none;
}
#point .plan .catch span:nth-child(1){
position: relative;
top: initial;
left: initial;
}
#point .plan .catch span:nth-child(1)::before{
content: "";
position: absolute;
bottom: -12vw;
right:8vw;
width: 10vw;
height: 10vw;
background: url(../images/parts-balloon.svg) no-repeat;
background-size: 73% auto;
transform:initial;
}
#point .plan .catch span:nth-child(2){
position: relative;
top: initial;
left: initial;
transform:initial;
}
#point .plan .catch span:nth-child(2)::before{
content: "";
position: absolute;
bottom:-12vw;
right:8vw;
width: 10vw;
height: 10vw;
background: url(../images/parts-balloon.svg) no-repeat;
background-size: 73% auto;
}
#point .plan .catch span:nth-child(3){
position: relative;
top: initial;
right: initial;
}
#point .plan .catch span:nth-child(3)::before{
content: "";
position: absolute;
bottom:-12vw;
right:8vw;
width: 10vw;
height: 10vw;
background: url(../images/parts-balloon.svg) no-repeat;
background-size: 73% auto;
transform: inherit;
transform: scale(-1, 1);
}
#point .plan h3{
font-size: 6vw;
width: calc(100% + 40px);
height: 30vw;
padding-top: 5vw;
margin: 0 0 0 -20px;
background: url(../images/h2-support.png) no-repeat bottom center;
background-size: 190% auto;
}
#point .plan .lead2{
margin-top: 4vw;
margin-bottom:15vw;
letter-spacing: 0.1em;
}
#point .plan .lead2 > span:nth-of-type(1){
display: block;
font-size: 4.4vw;
padding-bottom: 8px;
margin-bottom: 0;
}
#point .plan .lead2 > span:nth-of-type(1) span{
font-size:6vw;
}
#point .plan .lead2 > span:nth-of-type(2){
margin-left: -5vw;
font-size: 5.6vw;
background: linear-gradient(transparent 70%, #fff100 40%);
}
#point .plan .lead2 > span:nth-of-type(2) span{
font-size:11vw;
}
#point .plan .lead2 > span:nth-of-type(2)::after{
position: absolute;
top: -5vw;
right: -9vw;
content: "";
width:10vw ;
height:10vw;
background: url(../images/partd-plan-lead.svg) no-repeat;
background-size: 100% auto;
}
#point .plan ul{
display: block;
}
#point .plan ul li{
margin-bottom: 10px;
}
#point .plan ul li:not(.col1){
width:100%;
border-radius: 15px;
}
#point .plan ul li:nth-child(3),
#point .plan ul li:nth-child(4),
#point .plan ul li:nth-child(5),
#point .plan ul li:nth-child(8){
border: none;
}
#point .plan ul li:not(.col1) a{
display: block;
border: 3px solid #26b087;
border-radius: 15px;
width: 100%;
padding: 0;
}
#point .plan ul li .num{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
padding: 4px 0 8px;
}
#point .plan ul li:nth-child(3) .num,
#point .plan ul li:nth-child(4) .num,
#point .plan ul li:nth-child(5) .num,
#point .plan ul li:nth-child(8) .num{
color: #fff;
font-weight: 500;
width: 100%;
height: 100px;
background: #26b087 url(../images/icon/icon-arrow05-08.svg) no-repeat center right;
border-radius: 10px 10px 0 0;
}
#point .plan ul li:not(.col1) .num > span{
display: block;
padding-top: 4px;
padding-left: 0;
}
#point .plan ul li .num > span span:nth-child(1){
width: 100%;
font-size:3vw ;
margin: 4px 0 0 0;
}
#point .plan ul li .num > span span:nth-child(2){
font-size:12vw ;
}
#point .plan ul li.col1{
width:100%;
}
#point .plan ul li.col1 a{
display: block;
}
#point .plan ul li.col1 .num {
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
padding: 4px 0 8px;
}
#point .plan ul li.col1 .num > span span:nth-child(1){
width: 100%;
font-size:3vw ;
}
#point .plan ul li.col1 .num > span span:nth-child(2){
font-size:12vw ;
}
#point .plan ul li .wrap {
width: 100%;
height: auto;
padding: 16px 28px;
}
#point .plan ul li.col1 figure{
width: 80%;
position: initial!important;
padding: 16px 0;
}
#point .plan ul li.col1:nth-child(2) figure{
width: 40%;
position: initial!important;
padding: 16px 0;
margin: auto;
}
#point .plan ul li figure{
width: 40%;
position: initial!important;
padding: 16px 0;
margin: auto;
}
#point .plan ul li figure img{
width: 100%;
height: auto;
}
#point .plan ul li:nth-child(5) figure img{
width: 70%;
margin: auto;
display: block;
}
#point .plan ul li.col1 .wrap {
width: 100%;
height: auto;
padding: 16px 28px;
border-radius: 0 0 10px 10px;
}
#point .plan ul li .wrap h4{
font-size: 5vw;
margin-bottom: 8px;
}
#point .plan ul li .wrap p{
font-size: 4vw;
line-height: 1.3;
margin-bottom: 8px;
}
#point .plan ul li .wrap .tx_s{
font-size: 3.6vw;
line-height: 1.5;
}
#point .plan .coming_soon{
height: auto;
margin-top:40px;
}
#point .plan .coming_soon::before{
content: "";
width: 16px;
height: 120px;
background: url(../images/parts-comingsoon.svg) no-repeat;
background-size: 100% auto;
}
#point .plan .coming_soon::after{
content: "";
width: 16px;
height: 120px;
background: url(../images/parts-comingsoon.svg) no-repeat;
background-size: 100% auto;
transform: scale(-1 , 1);
}
#point .plan .coming_soon > span{
display: inline-block;
color: #085752;
text-align: center;
padding: 0 6vw;
}
#point .plan .coming_soon > span span:nth-child(1){
font-size:6.8vw;
margin-bottom: 16px;
}
#point .plan .coming_soon > span span:nth-child(2){
display: inline-block;
font-size: 5vw;
line-height: 1.3;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
}

/*=============================== case ================================*/
#case{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background: url(../images/bg-leaf-right.png) no-repeat top 340px center, url(../images/bg-point.jpg) no-repeat top center;
margin: auto;
padding: 131px 0;
}
#case .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#case h2{
text-align: center;
margin-bottom: 115px;
}
#case h2 a{
transition: 0.3s;
text-decoration: none;
}
#case h2 a:hover{
opacity: 0.7;
}
#case h2 span:nth-child(1){
display: block;
color: #26b087;
font-size: 3.4rem;
font-weight: 700;
margin-bottom: 16px;
}
#case h2 span:nth-child(2){
position: relative;
z-index: 2;
display: block;
color: #085752;
font-size: 4.5rem;
font-weight: 700;
padding-bottom: 8px;
}
#case ul{
display: flex;
flex-wrap: wrap;
gap: 50px;
justify-content: center;
}
#case ul li{
flex: 0 1 calc(50% - 25px);
box-sizing: border-box;
}
#case ul a{
display: block;
text-align: left;
text-decoration: none;
overflow: hidden;
transition: 0.3s;
}
#case ul a figure{
border: 1px solid #26b087;
border-radius: 20px;
margin-bottom: 24px;
overflow: hidden;
}
#case ul a figure img{
width: 100%;
height: auto;
transition: 0.3s;
}
#case ul a:hover img{
transform: scale(1.05);
}
#case ul a .shop{
display: block;
text-align: left;
color: #085752;
font-size: 1.7rem;
font-weight: 700;
padding-bottom: 8px;
}
#case ul a .wrap{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 18px;
}
#case ul a .establishment{
display: inline-block;
color: #085752;
font-size: 1.7rem;
font-weight: 700;
}
#case ul a .name{
display: inline-block;
color: #085752;
font-size: 1.8rem;
font-weight: 700;
}
#case ul a p{
display: inline-block;
width: 100%;
color: #085752;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
padding-top: 18px;
border-top: 2px solid #085752;
padding-bottom: 48px;
}
#case ul a .btn{
width: 220px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: #085752;
border: 1px solid #085752;
border-radius: 48px;
background: #fff url(../images/icon/icon-arrow04.svg) no-repeat center right 16px;
background-size: 24px;
margin: auto;
transition: 0.3s;
}
#case ul a:hover .btn{
width: 220px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border: 1px solid #085752;
background: #085752 url(../images/icon/icon-arrow03.svg) no-repeat center right 16px;
    background-size: 24px;
border-radius: 48px;
margin: auto;
}
@media only screen and (max-width: 767px) {
#case{
width: 100%;
max-width: 100%;
min-width:100%;
background: url(../images/bg-leaf-right.png) no-repeat top 340px center, url(../images/bg-point.jpg) no-repeat top center;
background-size: 100% auto, 200% auto;
margin: auto;
padding: 60px 0;
}
#case .inner {
width:100%;
padding: 0 20px;
}
#case h2{
margin-bottom: 0;
}
#case h2 span:nth-child(1){
font-size: 4vw;
margin-bottom: 8px;
}
#case h2 span:nth-child(2){
font-size: 7vw;
padding-bottom: 0;
}
#case ul{
display: block;
}
#case ul li{
margin-top: 50px;
}
#case ul a{
display: block;
text-align: left;
text-decoration: none;
overflow: hidden;
transition: 0.3s;
}
#case ul a figure{
border-radius: 16px;
margin-bottom: 16px;
}
#case ul a .shop{
font-size: 5vw;
padding-bottom: 8px;
}
#case ul a .wrap{
display: block;
padding-bottom: 18px;
}
#case ul a .establishment{
display: block;
padding-bottom: 8px;
font-size: 4vw;
}
#case ul a .name{
display: block;
font-size: 5vw;
}
#case ul a p{
font-size: 4vw;
padding-top: 18px;
padding-bottom: 24px;
}
#case ul a .btn{
width: 60%;
height: 8vw;
font-size: 4vw;
border-radius: 20vw;
background: #fff url(../images/icon/icon-arrow04.svg) no-repeat center right 2vw;
background-size: 4vw;
}
#case ul a:hover .btn{
width: 60%;
height: 8vw;
font-size: 4vw;
background: #085752 url(../images/icon/icon-arrow03.svg) no-repeat center right 8px;
background-size: 4vw;
border-radius: 20vw;
}
}



/*=============================== events ================================*/
#events{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background: url(../images/bg-leaf-left.png) no-repeat bottom 80px center, url(../images/bg-point.jpg) no-repeat top center;
margin: auto;
padding: 131px 0;
}
#events .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#events h2{
text-align: center;
margin-bottom: 30px;
}
#events h2 a{
transition: 0.3s;
text-decoration: none;
}
#events h2 a:hover{
opacity: 0.7;
}
#events h2 span:nth-child(1){
display: block;
color: #26b087;
font-size: 3.4rem;
font-weight: 700;
margin-bottom: 16px;
}
#events h2 span:nth-child(2){
position: relative;
z-index: 2;
display: block;
color: #085752;
font-size: 4.5rem;
font-weight: 700;
padding-bottom: 8px;
}
#events .lead {
display: block;
color: #085752;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.7;
text-align: center;
margin-top: 30px;
margin-bottom: 115px;
}
#events ul{
display: flex;
gap: 50px;
align-items: stretch;
}
#events ul li{
flex: 1;
display: flex;
text-align: left;
text-decoration: none;
overflow: hidden;
transition: 0.3s;
flex-direction: column;
}
#events ul li figure{
border: 1px solid #26b087;
border-radius: 20px;
margin-bottom: 24px;
overflow: hidden;
}
#events ul li figure img{
width: 100%;
height: auto;
}
#events ul li .wrap{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 18px;
}
#events ul li .establishment{
display: inline-block;
color: #085752;
font-size: 1.7rem;
font-weight: 700;
}
#events ul li .name{
display: inline-block;
color: #085752;
font-size: 1.8rem;
font-weight: 700;
}
#events ul li p{
display: inline-block;
color: #085752;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
padding-top: 18px;
border-top: 2px solid #085752;
padding-bottom: 48px;
}
@media only screen and (max-width: 767px) {
#events{
width: 100%;
max-width: 100%;
min-width:100%;
background: url(../images/bg-leaf-right.png) no-repeat top 340px center, url(../images/bg-point.jpg) no-repeat top center;
background-size: 100% auto, 200% auto;
margin: auto;
padding: 60px 0;
}
#events .inner {
width:100%;
padding: 0 20px;
}
#events h2{
margin-bottom: 0;
}
#events h2 span:nth-child(1){
font-size: 4vw;
margin-bottom: 8px;
}
#events h2 span:nth-child(2){
font-size: 7vw;
padding-bottom: 0;
}
#events .lead {
font-size: 4vw;
line-height: 1.5;
margin: 20px 0 60px;
}
#events ul{
display: block;
}
#events ul li{
margin-top: 50px;
display: block;
text-align: left;
text-decoration: none;
overflow: hidden;
transition: 0.3s;
}
#events ul li figure{
border-radius: 16px;
margin-bottom: 16px;
}
#events ul li .wrap{
display: block;
padding-bottom: 18px;
}
#events ul li .establishment{
display: block;
padding-bottom: 8px;
font-size: 4vw;
}
#events ul li .name{
display: block;
font-size: 5vw;
}
#events ul li p{
font-size: 4vw;
padding-top: 18px;
padding-bottom: 24px;
}
}




/*=============================== faq ================================*/
#faq{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background: url(../images/bg-leaf-right.png) no-repeat bottom 80px center, url(../images/bg-point.jpg) no-repeat top center;

margin: auto;
padding: 120px 0;
}
#faq .inner {
position: relative;
width: 1280px;
padding: 0 40px;
margin:auto;
}
#faq h2{
color: #085752;
font-weight: 700;
margin-bottom: 65px;
text-align: center;
}
#faq h2 span:nth-of-type(1){
display: block;
font-size: 2.5rem;
padding-bottom: 11px;
margin-top:16px;
}
#faq h2 span:nth-of-type(2){
display: block;
font-size: 4.5rem;
}

#faq #accordion{
width: 100%;
border-bottom: 4px solid #d1e9d9;
}
/*
#faq #accordion .open{
background: #f8f8f8;
}
*/
#faq #accordion .ttl a{
color: #085752;
pointer-events: none;
text-decoration: none;
}
#faq #accordion *{
position: relative;
border-bottom: none;
display: block;
}
#faq #accordion *.open i {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 20px;
height: 20px;
background: url(../images/icon/icon-faq-arrow.svg) no-repeat center;
background-size: 20px;
margin: auto;
transform: rotate(0deg);
}
#faq #accordion * i {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 20px;
height: 20px;
background: url(../images/icon/icon-faq-arrow.svg) no-repeat center;
background-size: 20px;
margin: auto;
transition: 0.5s;
transform: rotate(180deg);
}
#faq dl{
border-bottom: 4px solid #d1e9d9;
}
#faq dt a{
position: relative;
color: #085752;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.5;
border-top: 4px solid #d1e9d9;
padding: 40px 140px 40px;
background: url(../images/icon/icon-q.svg) no-repeat top 34px left 50px;
}
#faq dd .wrap{
display: block;
min-height: 100px;
color: #085752;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.7;
padding:20px 140px 40px;
background: url(../images/icon/icon-a.svg) no-repeat top 20px left 50px;
}
@media only screen and (max-width: 767px) {
#faq{
width: 100%;
max-width: 100%;
min-width: 100%;
background: url(../images/bg-leaf-left.png) no-repeat top 30vw left, url(../images/bg-point.jpg) no-repeat top center;
background-size: 100% auto, 200% auto;
margin: auto;
padding: 60px 0;
}
#faq .inner {
width: 100%;
padding: 0 20px;
}
#faq h2{
margin-bottom: 50px;
}
#faq h2 span:nth-of-type(1){
display: block;
font-size: 4vw;
padding-bottom: 8px;
margin-top:11px;
}
#faq h2 span:nth-of-type(2){
font-size: 7vw;
}
#faq h2 img{
width: 64%;
height: auto;
}
#faq #accordion{
width: 100%;
border-bottom: 3px solid #d1e9d9;
}
#faq #accordion *.open i {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 12px;
width: 12px;
height: 12px;
background: url(../images/icon/icon-faq-arrow.svg) no-repeat center;
background-size: 16px;
transform: rotate(0deg);
}
#faq #accordion * i {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 12px;
width: 12px;
height: 12px;
background: url(../images/icon/icon-faq-arrow.svg) no-repeat center;
background-size: 16px;
transform: rotate(180deg);
}
#faq dl{
border-bottom: 3px solid #d1e9d9;
}
#faq dt a{
font-size: 4vw;
line-height: 1.5;
border-top: 3px solid #d1e9d9;
padding: 20px 40px 20px 60px;
background: url(../images/icon/icon-q.svg) no-repeat top 20px left 20px;
background-size: 24px auto;
}
#faq dd .wrap{
min-height: 100px;
font-size: 4vw;
padding: 20px 40px 20px 60px;
background: url(../images/icon/icon-a.svg) no-repeat top 20px left 20px;
background-size: 24px auto;
}
}
/*=============================== shop_info ================================*/
#shop_info{
width: 100%;
max-width: 1920px;
min-width: 1280px;
background: #d1e9d9 url(../images/bg-shop-info.jpg) no-repeat top center;
margin: auto;
padding: 100px 0;
}
#shop_info .inner {
position: relative;
width: 1280px;
padding: 0 40px;
text-align: center;
margin:auto;
}
#shop_info h2{
position: relative;
color: #085752;
font-weight: 700;
font-size: 4.6rem;
margin-bottom: 220px;
padding-top: 59px;
-webkit-text-stroke:12px #fff;
text-stroke: 12px #fff;
paint-order: stroke;
letter-spacing: 0.05em;
}
#shop_info h2::before{
position: absolute;
top: -216px;
left: 19px;
content: "";
width: 199px;
height: 299px;
background: url(../images/shinchan03.svg) no-repeat;
}
#shop_info .lead{
color: #085752;
font-weight: 700;
margin-bottom: 358px;
}
#shop_info .lead span:nth-child(1){
display: block;
font-size: 3.6rem;
margin-bottom: 20px;
}
#shop_info .lead span:nth-child(2){
position: relative;
z-index: 2;
display: block;
font-size: 3.6rem;
padding-bottom: 8px;
}
#shop_info .lead span:nth-child(2) span{
position: relative;
display: inline-block;
font-size: 4.6rem;
letter-spacing: 0.1em;
padding:0 8px 12px;
background: linear-gradient(transparent 65%, #fff100 30%);
}
#shop_info .lead span:nth-child(3){
font-size: 3.6rem;
padding-bottom: 12px;
background: url(../images/line-dot01.svg) repeat-x left bottom;
}
#shop_info .inner p{
display: inline-block;
color: #085752;
font-size: 2.5rem;
font-weight: 700;
padding-bottom: 12px;
background: url(../images/line-dot01.svg) repeat-x left bottom;
margin-bottom: 50px;
}
#shop_info .inner ul.area_list{
display: flex;
gap: 50px;
margin-bottom: 68px;
}
#shop_info .inner ul.area_list li{
width: calc(100% / 5);
}
#shop_info .inner ul.area_list li a{
position: relative;
display: block;
width:100%;
line-height: 1.3;
color: #085752;
font-weight: 700;
background: #fff;
border-radius: 12px;
text-decoration: none;
padding: 20px 0;
transition: 0.3s;
}
#shop_info .inner ul.area_list li a::after{
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
content: "";
width: 40px;
height: 40px;
background: url(../images/icon/icon-arrow04.svg) no-repeat;
background-size: 100% auto;
}
#shop_info .inner ul.area_list li a:hover{
opacity: 0.7;
}
#shop_info .inner ul.area_list li a span:nth-child(1){
display: block;
font-size: 3.5rem;
line-height: 1;
margin-bottom: 4px;
}
#shop_info .inner ul.area_list li a span:nth-child(2){
display: block;
font-size: 1.6rem;
}
#shop_info .inner ul.banner{
display: flex;
gap: 30px;
}
#shop_info .inner ul.banner li{
width: calc(100% / 4);
}
#shop_info .inner ul.banner li a img{
width: 100%;
height: auto;
border-radius: 12px;
transition: 0.3s;
}
#shop_info .inner ul.banner li a:hover img{
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
#shop_info{
width: 100%;
max-width: 100%;
min-width: 100%;
background: #d1e9d9 url(../images/bg-shop-info-sp.jpg) no-repeat top center;
background-size: 280% auto;
padding: 14vw 0;
}
#shop_info .inner {
width: 100%;
padding: 0 20px;
}
#shop_info h2{
position: relative;
color: #085752;
font-weight: 700;
font-size: 8vw;
margin-bottom:25vw;
-webkit-text-stroke:1.4vw #fff;
text-stroke: 1.4vw #fff;
paint-order: stroke;
letter-spacing: 0.05em;
}
#shop_info h2::before{
display: none;
}
#shop_info h2::after{
position: absolute;
top: -33vw;
left: 50%;
transform: translateX(-50%);
content: "";
width: 21vw;
height: 32vw;
background: url(../images/shinchan03.svg) no-repeat;
background-size: 100% auto;
}
#shop_info .lead{
margin-bottom: 38vw;
}
#shop_info .lead span:nth-child(1){
display: block;
font-size: 5vw;
margin-bottom: 2vw;
}
#shop_info .lead span:nth-child(2){
position: relative;
z-index: 2;
display: block;
font-size: 6.5vw;
padding-bottom: 0;
}
#shop_info .lead span:nth-child(2) span{
position: relative;
display: inline-block;
font-size: 6.5vw;
padding:0 8px 4px;
background: linear-gradient(transparent 65%, #fff100 35%);
}
#shop_info .lead span:nth-child(3){
font-size: 5vw;
line-height: 2.4;
padding-bottom: 2vw;
}
#shop_info .inner p{
display: inline-block;
color: #085752;
font-size: 5vw;
line-height: 1.5;
padding-bottom: 12px;
margin-bottom: 20px;
}
#shop_info .inner ul.area_list{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom:50px;
}
#shop_info .inner ul.area_list li{
width: calc((100% - 20px ) / 3);
}
#shop_info .inner ul.area_list li a{
width:100%;
border-radius: 10px;
padding: 10px 0 42px;
}
#shop_info .inner ul.area_list li a::after{
position: absolute;
right: initial;
left: 50%;
top:initial;
bottom:10px;
transform: translateX(-50%);
content: "";
width: 24px;
height: 24px;
}
#shop_info .inner ul.area_list li a span:nth-child(1){
display: block;
font-size: 6vw;
}
#shop_info .inner ul.area_list li a span:nth-child(2){
font-size: 4vw;
}
#shop_info .inner ul.banner{
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
#shop_info .inner ul.banner li{
width: calc((100% - 10px ) / 2);
}
#shop_info .inner ul.banner li a img{
border-radius: 8px;
}
}