@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*-----------------*/
/* 
--------------------------------------------------------- */
/* VWはSPのみ利用
--------------------------------------------------------- */
.eye-skill-ttl { position: relative; display: block; font-size: 3rem; }
@media (max-width: 750px) { .eye-skill-ttl { display: block; } }
.eye-skill-ttl .eye-skill--img { position: relative; }
.eye-skill-ttl .eye-skill--img img { width: 100%; height: auto; vertical-align: top; }
.eye-skill-ttl .ttl-box { position: absolute; display: flex; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); max-width: 1240px; width: 100%; }
@media (max-width: 750px) { .eye-skill-ttl .ttl-box { position: static; display: block; max-width: 100%; width: 100%; transform: none; transform: none; -webkit-transform: none; -ms-transform: none; } }
.eye-skill-ttl .ttl-box li { display: flex; align-items: center; height: 280px; }
@media (max-width: 750px) { .eye-skill-ttl .ttl-box li { display: block; width: 100%; height: auto !important; } }
.eye-skill-ttl .ttl-box .ttl-box--cat { background: #FF9900; color: #FFF; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: auto; font-weight: 500; font-family: ryo-text-plusn, serif; letter-spacing: .4rem; width: 25%; font-size: 5rem; }
@media (max-width: 750px) { .eye-skill-ttl .ttl-box .ttl-box--cat { font-size: 4rem; width: 100%; display: block; } }
.eye-skill-ttl .ttl-box .ttl-box--cat span { display: block; text-align: center; }
.eye-skill-ttl .ttl-box .ttl-box--text { background: rgba(255, 153, 0, 0.5); width: auto; padding: 0 40px 0 60px; width: 75%; color: #FFF; box-sizing: border-box; font-size: 2.3rem; font-weight:bold;}
@media (max-width: 750px) { .eye-skill-ttl .ttl-box .ttl-box--text { width: 100%; font-size: 2rem; padding: 1.3333333333vw 1.3333333333vw 1.3333333333vw 1.3333333333vw; 
    text-align: center; font-size: 2.3rem; font-weight:bold;} }
.eye-skill-ttl .ttl-box .ttl-box--text span { color: #FFF; }

.skill__con { padding-top: 100px; padding-bottom: 80px; }
@media (max-width: 750px) { .skill__con { padding-top: 3.3333333333vw; padding-bottom: 0vw; width: 90%; margin: 0 auto; } }

.skill-box { padding-bottom: 110px; }
@media (max-width: 750px) { .skill-box { padding-bottom: 6.6666666667vw; } }
.skill-box h2 { color: #FF9900; font-weight: 400; font-size: 3rem; padding-bottom: 0.5em; }
@media (max-width: 750px) { .skill-box h2 { font-size: 4vw; padding-bottom: 0em; } }
.skill-box p { font-size: 1.7rem; line-height: 2.4em; width: 80%; margin: 0 auto;}
.skill-box ul li span { display: block; }
.skill-box .f-img-A { padding: 1.5em 0 40px 0; display: flex; flex-wrap: nowrap; width:95%; margin:0 auto;}
@media (max-width: 750px) { .skill-box .f-img-A { padding: 2.6666666667vw 0 2.6666666667vw 0; display: block; } }
.skill-box .f-img-A li { padding-right: 40px; font-size: 1.7rem; line-height: 2.4em; }
@media (max-width: 750px) { .skill-box .f-img-A li { width: 100%; line-height: 1em; padding-right: 0px; padding-bottom: 2.6666666667vw; } }
@media (max-width: 750px) { .skill-box .f-img-A li img { width: 100%; height: auto; } }
.skill-box .f-img-A li span { display: block; font-size: 1.4rem; }
.skill-box .f-img-A img { max-width: 480px; height: auto; }
@media (max-width: 750px) { .skill-box .f-img-A img { max-width: 100%; height: auto; width: 100%; } }
.skill-box .f-img-S { display: flex; flex-wrap: nowrap; }
@media (max-width: 750px) { .skill-box .f-img-S { display: block; } }
.skill-box .f-img-S li { padding-right: 20px; font-size: 1.5rem; }
@media (max-width: 750px) { .skill-box .f-img-S li { padding-bottom: 1.5em; padding-right: 0px; } }
.skill-box .f-img-S li:last-child { padding-right: 0px; }
.skill-box .f-img-S li span { display: block; font-size: 1.4rem; }
.skill-box .f-img-S img { max-width: 300px; height: auto; }
@media (max-width: 750px) { .skill-box .f-img-S img { height: auto; width: 100%; } }
.skill-box .f-img-E { padding: 15px 0 20px 0; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; }
@media (max-width: 750px) { .skill-box .f-img-E { padding: 2vw 0 2vw 0; display: block; } }
@media (max-width: 750px) { .skill-box .f-img-E li { width: 100%; } }
.skill-box .f-img-E .l-img img { max-width: 530px; height: auto; }
@media (max-width: 750px) { .skill-box .f-img-E .l-img img { max-width: 100%; width: 100%; height: auto; } }
.skill-box .f-img-E .y-img img { max-width: 650px; height: auto; }
@media (max-width: 750px) { .skill-box .f-img-E .y-img img { max-width: 100%; width: 100%; height: auto; } }
.skill-box .f-img-T { padding: 15px 0 20px 0; display: flex; flex-wrap: nowrap; /*コレ*/ align-items: flex-end; }
@media (max-width: 750px) { .skill-box .f-img-T { padding: 2vw 0 2vw 0; display: block; } }
.skill-box .f-img-T li img { max-width: 100%; width: 100%; height: auto; }
.skill-box .f-img-T .l-img img { max-width: 530px; height: auto; }
@media (max-width: 750px) { .skill-box .f-img-T .l-img img { max-width: 100%; width: 100%; height: auto; } }
.skill-box .bd-line { border-bottom: solid 1px #000; border-top: solid 1px #000; display: inline-block; padding: 1.5em 1.5em; font-weight: 400; font-size: 2rem; }
.skill-box .skill-s-img { display: block; padding: 50px 0 35px 0; }
@media (max-width: 750px) { .skill-box .skill-s-img { padding: 5.3333333333vw 0 5.3333333333vw 0; } }
.skill-box .skill-s-img img { max-width: 600px; height: auto; }
@media (max-width: 750px) { .skill-box .skill-s-img img { max-width: 100%; width: 100%; height: auto; } }

.mente { text-align: center; padding: 5em 0; }

.tbl--block span { font-size: 2rem; line-height: 2.2em; }
@media (max-width: 750px) { .tbl--block { overflow-x: scroll; } }
.tbl--block table { font-size: 1.5rem; border-collapse: collapse; }
@media (max-width: 750px) { .tbl--block table { white-space: nowrap; } }
.tbl--block table th { border: 1px solid #000; background: #CDCDCD; text-align: center; padding: 1em 1em 1em 1em; }
.tbl--block table td { border: 1px solid #000; background: #ffffff; padding: 1em 1em 1em 1em; }

.dl-equip { font-size: 1.5rem; padding-bottom: 1em; }
.dl-equip dd { padding-left: 1.5em; }
@media (max-width: 750px) { .dl-equip dd { padding-left: 0em; padding-bottom: 2vw; } }

.f-img-def { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.f-img-def li { width: 48%; }
.f-img-def li img { width: 100%; max-width: 600px; height: auto; }