@charset "utf-8";
/*------------------------  clean.css  ------------------------*/



/*-----  footer調整  -----*/
#footer { margin-top: 0; }
.f_app { padding: 56px 0; background: #000; }

@media screen and (max-width: 1000px) {
 .f_app { padding: 56px 20px; }
}

@media screen and (max-width: 768px) {
 .f_app { padding: 32px 20px 40px 20px; }
}



/*-----  clean-contents  -----*/
.clean-contents { padding: 80px 2% 110px; background-color: #e7f6f6; }
.clean-contents img { vertical-align: bottom; -webkit-user-drag: none; }
.clean-contents a { text-decoration: none; opacity: 1; transition: .2s; }
.clean-contents a:hover { opacity: .6; }
.clean-contents .clean-inner { margin: 0 auto; max-width: 1000px; }

@media screen and (max-width: 768px) {
 .clean-contents { padding: 50px 6% 70px; }
 .clean-contents a:hover { opacity: 1; }
}



/*-----  clean-title  -----*/
.clean-title { margin-bottom: 30px; background-color: #fff; border: 1px solid #2ab9b9; border-radius: 24px; overflow: hidden; }

@media screen and (max-width: 768px) {
 .clean-title { margin-bottom: 20px; }
}


/*-----  clean-block  -----*/
.clean-element { padding: 65px 0 0; }
.clean-cat { display: flex; align-items: center; }
.clean-cat .ttl { height: 37px; }
.clean-cat::before, .clean-cat::after { content: ""; height: 1px; flex-grow: 1; background-color: #2ab9b9; }
.clean-cat::before { margin-right: 22px; }
.clean-cat::after { margin-left: 22px; }
.clean-table { display: flex; flex-wrap: wrap; justify-content: center; margin: 45px -7px 0; } 
.clean-table .c-block { padding: 0 7px 14px; flex-basis: calc(100%/3); }
.clean-table .c-block .c-box { height: 100%; padding: 25px 25px 30px; background-color: #fff; border: 1px solid #2ab9b9; border-radius: 24px; overflow: hidden; }
.clean-table .c-block .c-box .name { margin: 0; padding: 25px 0 12px; font-weight: 700; font-size: 20px; line-height: 1.4; }
.clean-table .c-block .c-box .txt { font-weight: 300; font-size: 15px; line-height: 1.7; }

@media screen and (max-width: 768px) {
 .clean-element { padding: 40px 0 0; }
 .clean-cat .ttl { height: 29px; }
 .clean-cat::before { margin-right: 18px; }
 .clean-cat::after { margin-left: 18px; }
 .clean-table { display: block; margin: 30px 0 0; } 
 .clean-table .c-block { padding: 0 0 16px; }
 .clean-table .c-block .c-box .name { font-size: 19px; }
}


/*-----  btn-about  -----*/
.btn-about { margin: 70px auto 0; width: 340px; }
.btn-about .btn { display: flex; justify-content: center; align-items: center; height: 58px; position: relative; padding: 0 15px; background-color: #fff; border: 1px solid #2ab9b9; font-weight: 700; font-size: 18px; line-height: 1; color: #2ab9b9; border-radius: 9999px; }

@media screen and (max-width: 768px) {
 .btn-about { margin: 40px auto 0; width: auto; }
 .btn-about .btn { height: 52px; font-size: 16px; }
}




/*----- animation -----*/
.fade-in { opacity: 0; transition: 2.2s; }
.in { opacity: 1; }

.zoom-in1 { opacity: 0; transform: scale(1.05,1.05); transition: 1.2s 0.6s; }
.zoom-in2 { opacity: 0; transform: scale(1.05,1.05); transition: 1.2s 1.0s; }
.zoom-in3 { opacity: 0; transform: scale(1.05,1.05); transition: 1.2s 1.4s; }
.in { opacity: 1; transform: scale(1,1); }

@media screen and (max-width: 768px) {
 .zoom-in1 { transition: 1.2s 0.4s; }
 .zoom-in2 { transition: 1.2s 0.4s; }
 .zoom-in3 { transition: 1.2s 0.4s; }
}