@charset "utf-8";

/*-------------------------------------------------------------
±³¾°
-------------------------------------------------------------*/
.bg_line {
    width: 100%;
    position: relative;
}
.bg_line::before {
    content: "";
    width: 100%;
    aspect-ratio: 1920 / 80;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}
@media only screen and (max-width: 600px) {
    .bg_line::before {
        aspect-ratio: 1920 / 130;
        background-size: 100% 100%;
    }
}


/*-------------------------------------------------------------
MV
-------------------------------------------------------------*/
#mv {
    width: 100%;
    position: relative;
}
#mv::before {
    background-image: url("/ishinomaki/extra/i-rc2/img/bg_blue_line.png");
}
.mv_ttl {
    max-width: 90%;
    margin: 0 auto;
    padding: 120px 0 15.7vw;
    text-align: center;
    position: relative;
    z-index: 1;
}
.mv_img_area {
    width: 100%;
    aspect-ratio: 1920 / 1350;
    background: url("/ishinomaki/extra/i-rc2/img/mv_bg.png") no-repeat bottom center / cover;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 600px) {
    .mv_ttl {
        max-width: 80%;
        padding: 50px 0 20dvw;
    }
    .mv_ttl img {
        margin: 0 auto;
    }
    .mv_img_area {
        aspect-ratio: 600 / 440;
        background: url("/ishinomaki/extra/i-rc2/img/mv_bg_sp.png") no-repeat bottom center / cover;
    }
}

.dec {
    position: absolute;
}
.dec.kamome {
    max-width: 9.5%;
    top: -14vw;
    right: 6vw;
}
.dec.tanbo {
    max-width: 10%;
    top: 1.5vw;
    left: 44.5vw;
}
.dec.factory {
    max-width: 8.5%;
    top: 14.5vw;
    left: 8.5vw;
}
.dec.ship {
    max-width: 9.5%;
    top: 39vw;
    left: 37vw;
}
.dec.kujira {
    max-width: 9.5%;
    top: 20vw;
    right: 4.5vw;
}
.dec.gyosen {
    max-width: 16.5%;
    top: 35.5vw;
    left: 6vw;
}
.dec.diver {
    max-width: 10%;
    bottom: 6.7vw;
    left: 0;
    right: 0;
    margin: 0 auto;
}
@media only screen and (max-width: 600px) {
    .dec.diver {
        max-width: 12%;
        bottom: 11dvw;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

.dec.niwa {
    max-width: 10.5%;
    bottom: 59dvw;
    left: 5%;
}
.dec.dome {
    max-width: 7.3%;
    bottom: 49.5dvw;
    left: 32.3%;
}
.dec.shika {
    max-width: 7.5%;
    bottom: 37.5dvw;
    right: 26%;
}
.dec.toudai {
    max-width: 5.5%;
    top: 6dvw;
    right: 16.5%;
}
.dec.iwa {
    max-width: 8%;
    bottom: 25.5dvw;
    right: 18%;
}

.dec.teacher1 {
    max-width: 10.3%;
    top: -5.9dvw;
    left: 24.2%;
}
.dec.teacher2 {
    max-width: 8%;
    top: -4.8dvw;
    right: 36.5%;
}
.dec.teacher3 {
    max-width: 11%;
    top: 11.3dvw;
    left: 19%;
}
.dec.teacher4 {
    max-width: 6.6%;
    top: 7.6dvw;
    left: 40.5%;
}
.dec.teacher5 {
    max-width: 12%;
    top: 5.2dvw;
    right: 23%;
}
.dec.teacher6 {
    max-width: 19%;
    top: 23dvw;
    right: 36%;
}

.mv_img_area .show {
    width: 190px;
    max-width: 7%;
    aspect-ratio: 95 / 98;
    position: absolute;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
}
.mv_img_area .show::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url("/ishinomaki/extra/i-rc2/img/icon_show_on.svg") no-repeat center center / contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.mv_img_area .show::after {
    content: "";
    width: 100%;
    height: 100%;
    background: url("/ishinomaki/extra/i-rc2/img/icon_show_off.svg") no-repeat center center / contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 2;
}
.mv_img_area .show:hover::after {
    opacity: 0;
}
.mv_img_area .show.show1 {
    top: -8dvw;
    right: 44.4%;
}
.mv_img_area .show.show2 {
    top: 4dvw;
    left: 34.6%;
}
.mv_img_area .show.show3 {
    top: -10.5dvw;
    left: 18%;
}
.mv_img_area .show.show4 {
    top: -1dvw;
    right: 28%;
}
.mv_img_area .show.show5 {
    top: 7.2dvw;
    left: 13.2%;
}
.mv_img_area .show.show6 {
    top: 17dvw;
    right: 41%;
}

.scroll {
    width: 56px;
    height: 72px;
    position: absolute;
    bottom: 1.8vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
}
.scroll span {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #1b4e77;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    position: absolute;
    bottom: 0.5em;
    right: 0;
    margin: auto;
}
.scroll::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #1b4e77;
    animation: scrollmove 1.6s ease-in-out infinite, scrollmovehide 1.6s ease-out infinite;
    position: absolute;
    bottom: -5%;
    left: 0;
    right: 0;
    margin: auto;
}
.scroll::after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #1b4e77;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
@keyframes scrollmove {
    0% { bottom: 100%; }
    100% { bottom: -5%; }
 }
@keyframes scrollmovehide {
    0% { opacity: 0; }
    50% { opacity: 1; }
    80% { opacity: 0.9; }
    100% { opacity: 0; }
 }

@media only screen and (max-width: 1200px) {
    .scroll {
        bottom: -20px;
    }
}
@media only screen and (max-width: 600px) {
    .scroll {
        width: 8dvw;
        height: 10.7dvw;
        bottom: -2dvw;
    }
    .scroll span {
        font-size: 2dvw;
        bottom: 0.6em;
    }
    .scroll::before {
        width: 7px;
        height: 7px;
        border-radius: 2px;
    }
    .scroll::after {
        width: 1px;
    }
}


/*-------------------------------------------------------------
ISHINOMAKI CAMPUS
-------------------------------------------------------------*/
#campus {
    width: 100%;
    background: url("/ishinomaki/extra/i-rc2/img/bg_blue.jpg") repeat-y top center / 100% auto;
    padding: 120px 0 270px;
    position: relative;
    z-index: 1;
}
#campus::before {
    background-image: url("/ishinomaki/extra/i-rc2/img/bg_brown_line.png");
}
#campus::after {
    content: "";
    width: 70.3%;
    aspect-ratio: 1920 / 560;
    background: url("/ishinomaki/extra/i-rc2/img/bg_img_fish.png") no-repeat center center / contain;
    position: absolute;
    top: 30%;
    left: 1.1%;
    z-index: 1;
}
#campus .cont {
    width: 90%;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 3;
}
#campus .img_area_01 {
    width: 1000px;
    max-width: 67%;
    aspect-ratio: 1000 / 665;
    border-radius: 50px 0 0 50px;
    overflow: hidden;
    position: absolute;
    top: 260px;
    right: 0;
    z-index: 2;
}
#campus .img_area_01 img,
#campus .img_area_02 .img img,
#campus .img_area_03 .img img,
#campus .img_area_04 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#campus .dot_line {
    width: 345px;
    margin: 60px 0;
    text-align: center;
}
#campus .dot_line img {
    width: 13px;
}
#campus .txt_area {
    position: relative;
    z-index: 4;
}
#campus .txt_area p {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2.4em;
    margin: 1.3em 0.7em 9vw;
    text-shadow: 1px 1px 0 #D1E8F0, -1px -1px 0 #D1E8F0,
                        -1px 1px 0 #D1E8F0, 1px -1px 0 #D1E8F0,
                        0px 1px 0 #D1E8F0,  0-1px 0 #D1E8F0,
                        -1px 0 0 #D1E8F0, 1px 0 0 #D1E8F0;
}
#campus .img_area_02 {
    width: 650px;
    max-width: 53%;
    position: relative;
    margin-bottom: 240px;
    z-index: 3;
}
#campus .img_area_02 .img {
    width: 100%;
    aspect-ratio: 650 / 435;
    border-radius: 50px;
    overflow: hidden;
}
#campus .img_area_02 .txt {
    width: 245px;
    position: absolute;
    bottom: -145px;
    left: 260px;
    margin: auto;
}
#campus .img_area_03 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-bottom: 145px;
}
#campus .img_area_03 .img {
    width: 880px;
    max-width: 59%;
    aspect-ratio: 880 / 660;
    border-radius: 50px 0 0 50px;
    overflow: hidden;
}
#campus .img_area_03 .txt {
    width: 880px;
    max-width: 59%;
    position: absolute;
    bottom: -160px;
    right: 0;
    text-align: center;
}
#campus .img_area_03 .txt img {
    width: 240px;
}
#campus .img_area_04 {
    width: 405px;
    max-width: 33%;
    aspect-ratio: 405 / 620;
    border-radius: 50px;
    overflow: hidden;
    position: absolute;
    top: -90px;
    right: 0;
    z-index: 3;
}
#campus .img_area_05 {
    width: 510px;
    max-width: 30%;
    aspect-ratio: 510 / 825;
    border-radius: 0 50px 50px 0;
    overflow: hidden;
    position: absolute;
    bottom: 220px;
    left: 0;
    z-index: 3;
}
@media only screen and (max-width: 1200px) {
    #campus::after {
        top: 58%;
        left: 24%;
    }
    #campus .img_area_01 {
        max-width: 50%;
        border-radius: 30px 0 0 30px;
        top: 230px;
    }
    #campus .cont_ttl {
        max-width: 80%;
    }
    #campus .txt_area p {
        font-size: 15px;
    }
    #campus .img_area_02 .img {
        border-radius: 30px;
    }
    #campus .img_area_02 .txt {
        width: 170px;
        bottom: -100px;
        left: 35%;
    }
    #campus .img_area_03 .img {
        border-radius: 30px 0 0 30px;
    }
    #campus .img_area_03 .txt {
        bottom: -100px;
    }
    #campus .img_area_03 .txt img {
        width: 170px;
    }
    #campus .img_area_04 {
        border-radius: 30px;
        top: -20px;
    }
    #campus .img_area_05 {
        border-radius: 0 30px 30px 0;
    }
}
@media only screen and (max-width: 600px) {
    #campus {
        padding: 60px 0 90px;
    }
    #campus .campus_ttl {
        width: 315px;
        max-width: 90%;
        margin: 0 auto;
        line-height: 1;
    }
    #campus .img_area_01 {
        width: 335px;
        max-width: 90%;
        aspect-ratio: 335 / 220;
        border-radius: 18px;
        top: 145px;
        left: 0;
        margin: 0 auto;
    }
    #campus .dot_line {
        width: 100%;
        margin: 20px 0 225px;
    }
    #campus .dot_line img {
        width: 6px;
    }
    #campus .txt_area {
        max-width: 350px;
    }
    #campus .cont_ttl {
        width: 345px;
        max-width: 104%;
        margin-left: -2%;
    }
    #campus .txt_area p {
        font-size: 14px;
        white-space: nowrap;
        line-height: 2em;
        margin: 1.8em 0 65px;
    }
    
    #campus .img_area_02 {
        width: 180px;
        max-width: 54%;
        margin-bottom: 70px;
    }
    #campus .img_area_02 .img {
        aspect-ratio: 650 / 435;
        border-radius: 14px;
    }
    #campus .img_area_02 .txt {
        width: 125px;
        bottom: -60px;
        left: 4%;
    }
    #campus .img_area_03 {
        margin-bottom: 60px;
    }
    #campus .img_area_03 .img {
        width: 220px;
        max-width: 59%;
        aspect-ratio: 220 / 165;
        border-radius: 14px 0 0 14px;
    }
    #campus .img_area_03 .txt {
        width: 220px;
        max-width: 59%;
        bottom: -60px;
    }
    #campus .img_area_03 .txt img {
        width: 120px;
    }
    #campus .img_area_04 {
        width: 115px;
        max-width: 35%;
        aspect-ratio: 115 / 170;
        border-radius: 14px;
        top: -25px;
    }
    #campus .img_area_05 {
        width: 115px;
        max-width: 31%;
        aspect-ratio: 115 / 180;
        border-radius: 0 14px 14px 0;
        bottom: 90px;
    }
}
@media only screen and (max-width: 400px) {
    #campus .img_area_01 {
        width: 100%;
    }
    #campus .dot_line {
        margin: 20px 0 62dvw;
    }
    #campus .txt_area p {
        font-size: 3.5dvw;
    }
}

.dec.fish {
    max-width: 22%;
    top: 0;
    right: 2vw;
}
.dec.fish2 {
    max-width: 22%;
    bottom: 220px;
    left: 35%;
}
.dec.kame {
    max-width: 13.5%;
    bottom: 6.2vw;
    right: 7.3vw;
}
.dec.manbou {
    max-width: 20%;
    bottom: -270px;
    left: 0;
}
.dec.gyosen2 {
    max-width: 28.5%;
    bottom: -200px;
    left: 635px;
}
@media only screen and (max-width: 1200px) {
    .dec.fish2 {
        max-width: 30%;
        bottom: 165px;
    }
    .dec.kame {
        max-width: 20%;
        bottom: 10vw;
        right: 8vw;
    }
    .dec.gyosen2 {
        left: 38%;
    }
}
@media only screen and (max-width: 600px) {
    .dec.fish {
        width: 80px;
        right: 5dvw;
    }
    .dec.fish2 {
        max-width: 27%;
        bottom: 80px;
        left: 28%;
    }
    .dec.kame {
        max-width: 16%;
        bottom: 45px;
        right: 5%;
    }
    .dec.manbou {
        max-width: 20%;
        bottom: -120px;
        left: 10%;
    }
    .dec.gyosen2 {
        max-width: 36%;
        bottom: -50px;
        left: 39%;
        z-index: 4;
    }
}
@media only screen and (max-width: 400px) {
    .dec.fish2 {
        bottom: 50px;
        left: 27%;
    }
    .dec.kame {
        bottom: 40px;
        right: 7%;
    }
    .dec.manbou {
        bottom: -100px;
        left: 0;
    }
}


/*-------------------------------------------------------------
TEACHERS
-------------------------------------------------------------*/
#teachers {
    width: 100%;
    background: url("/ishinomaki/extra/i-rc2/img/bg_brown.jpg") repeat-y top center / 100% auto;
    padding: 100px 0 250px;
    position: relative;
    z-index: 2;
}
#teachers::before {
    background-image: url("/ishinomaki/extra/i-rc2/img/bg_green_line.png");
}
.ttl_area .cont_cp {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #1c4e77;
    margin-bottom: 0.5em;
}
.ttl_area .cont_cp_en {
    font-size: 45px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #1c4e77;
}
@media only screen and (max-width: 1200px) {
    .ttl_area .cont_cp {
        font-size: 20px;
    }
    .ttl_area .cont_cp_en {
        font-size: 40px;
    }
    .ttl_area h2 {
        font-size: 60px;
    }
}
@media only screen and (max-width: 600px) {
    #teachers {
        padding: 25px 0 140px;
    }
    .ttl_area .cont_cp {
        font-size: 15px;
        margin-bottom: 1.2em;
    }
    .ttl_area .cont_cp_en {
        font-size: 26px;
    }
}
@media only screen and (max-width: 400px) {
    .ttl_area .cont_cp_en {
        font-size: 7.5dvw;
        white-space: nowrap;
    }
}

.teacher_list {
    width: 1040px;
    max-width: 90%;
    margin: 100px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 100px 0;
}
.teacher_list li {
    width: 470px;
    max-width: 46%;
    position: relative;
}
.teacher_list li .list_ttl {
    display: flex;
    margin-bottom: 20px;
    color: #1c4e77;
}
.teacher_list li .list_ttl .nb_area {
    text-align: center;
    margin-right: 8.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.teacher_list li .list_ttl .nb_area .deco {
    font-size: 15px;
    font-weight: 600;
}
.teacher_list li .list_ttl .nb_area .nb {
    font-size: 60px;
    font-weight: 600;
    line-height: 1;
    position: relative;
    padding: 0 0 0.2em;
    margin: 0.1em 0 0;
}
.teacher_list li .list_ttl .nb_area .nb::before,
.teacher_list li .list_ttl .nb_area .nb::after {
    content: "";
    width: 100%;
    height: 100%;
    background: url(/ishinomaki/extra/i-rc2/img/dot.svg) no-repeat center center / 60% 60%;
    position: absolute;
    left: 0;
    margin: auto;
    transform: rotate(90deg);
}
.teacher_list li .list_ttl .nb_area .nb::before {
    top: -50%;
}
.teacher_list li .list_ttl .nb_area .nb::after {
    top: 50%;
}
.teacher_list li .list_ttl .ttl {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.7em;
    letter-spacing: 0;
    white-space: nowrap;
}
.teacher_list a {
    display: block;
    position: relative;
    padding-bottom: 80px;
}
.teacher_list a .img {
    width: 100%;
    aspect-ratio: 470 / 330;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
}
.teacher_list a .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}
.teacher_list a:hover .img img {
    transform: scale(1.1);
}
.teacher_list a .img::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s ease;
}
.teacher_list a:hover .img::after {
    opacity: 1;
}
.teacher_list a .name {
    width: 440px;
    max-width: 100%;
    font-size: 16px;
    display: inline-block;
    padding: 1.2em 5em 1.2em 2.5em;
    border: 5px solid #efe7ce;
    background-color: #fff;
    border-radius: 50px;
    position: absolute;
    bottom: 0;
    right: -30px;
    transition: all .2s ease;
}
.teacher_list a .name span {
    display: inline-block;
    font-size: 1.2em;
    margin-left: 0.8em;
}
.teacher_list a .name .sm {
    margin-left: 0;
    font-size: 1.1em;
    white-space: nowrap;
    letter-spacing: -0.05em;
}
.teacher_list a:hover .name {
    color: #fff;
    background-color: #1c4e77;
}
.teacher_list a .name::before,
.teacher_list a .name::after {
    content: "";
    width: 17px;
    height: 3px;
    display: inline-block;
    border-radius: 10px;
    position: absolute;
    right: 23px;
    background: #efe7ce;
}
.teacher_list a:hover .name::before,
.teacher_list a:hover .name::after {
    background: #989bb3;
}
.teacher_list a .name::before {
    top: calc(50% - 7px);
    transform: rotate(45deg);
}
.teacher_list a .name::after {
    bottom: calc(50% - 7px);
    transform: rotate(-45deg);
}
@media only screen and (max-width: 1200px) {
    .teacher_list {
        margin: 80px auto 0;
        gap: 80px 0;
    }
    .teacher_list li .list_ttl .nb_area .deco {
        font-size: 12px;
    }
    .teacher_list li .list_ttl .nb_area .nb {
        font-size: 50px;
    }
    .teacher_list li .list_ttl .ttl {
        font-size: 17px;
    }
    .teacher_list a {
        padding-bottom: 70px;
    }
    .teacher_list a .img {
        border-radius: 30px;
    }
    .teacher_list a .name {
        font-size: 12px;
    }
}
@media only screen and (max-width: 800px) {
    .teacher_list {
        max-width: 86%;
        margin: 50px auto 0;
        justify-content: center;
        gap: 50px 0;
    }
    .teacher_list li {
        width: 370px;
        max-width: 100%;
    }
}
@media only screen and (max-width: 600px) {
    .teacher_list li .list_ttl {
        margin-bottom: 15px;
    }
    .teacher_list li .list_ttl .nb_area .deco {
        font-size: 10px;
    }
    .teacher_list li .list_ttl .nb_area .nb {
        font-size: 43px;
    }
    .teacher_list li .list_ttl .ttl {
        font-size: 13px;
        line-height: 2em;
    }
    .teacher_list li .list_ttl .nb_area {
        margin-right: 7%;
    }
    .teacher_list a {
        padding-bottom: 50px;
    }
    .teacher_list a .img {
        width: 94%;
        aspect-ratio: 280 / 200;
        border-radius: 30px;
        margin: 0 auto;
    }
    .teacher_list a .name {
        font-size: 12px;
        border: 3px solid #efe7ce;
        border-radius: 35px;
        right: -5%;
        padding: 1em 4em 1em 2.5em;
    }
    .teacher_list a .name::before,
    .teacher_list a .name::after {
        width: 12px;
        height: 2px;
        right: 15px;
    }
    .teacher_list a .name::before {
        top: calc(50% - 5px);
    }
    .teacher_list a .name::after {
        bottom: calc(50% - 5px);
    }
}
@media only screen and (max-width: 360px) {
    .teacher_list a .name {
        white-space: nowrap;
    }
    .teacher_list a .name .sm {
        font-size: 1em;
    }
}

.dec_cat {
    width: 19%;
    position: absolute;
    left: -8.5%;
    bottom: 0;
    z-index: 1;
}
.dec_factory {
    width: 200px;
    max-width: 20%;
    aspect-ratio: 265 / 269;
    position: absolute;
    top: -110px;
    left: 80px;
}
.dec_niwa {
    width: 255px;
    max-width: 25%;
    aspect-ratio: 360 / 280;
    position: absolute;
    bottom: -25px;
    right: 80px;
    z-index: 3;
}
@media only screen and (max-width: 600px) {
    .dec_cat {
        width: 19%;
        left: -4.5%;
        bottom: 3%;
    }
    .dec_factory {
        width: 70px;
        top: -54px;
        left: 6%;
    }
    .dec_niwa {
        width: 110px;
        max-width: 30%;
        bottom: 40px;
        right: 5%;
    }
}


/*-------------------------------------------------------------
PROJECT
-------------------------------------------------------------*/
#project {
    width: 100%;
    background: url("/ishinomaki/extra/i-rc2/img/bg_green.jpg") repeat-y top center / 100% auto;
    padding: 125px 0 180px;
    position: relative;
}
.ttl_area {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.ttl_area h2 {
    font-size: 70px;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #1c4e77;
    margin-top: -0.2em;
}
.ttl_area .ttl_line {
    width: 13px;
    margin: 25px auto 30px;
}
.ttl_area .cont_ttl {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #1c4e77;
}
.ttl_area .lead {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.6em;
    margin-top: 1.3em;
}
@media only screen and (max-width: 1200px) {
    .ttl_area h2 {
        font-size: 60px;
    }
    .ttl_area .cont_ttl {
        font-size: 25px;
    }
    .ttl_area .lead {
        font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
    #project {
        padding: 25px 0 140px;
    }
    .ttl_area h2 {
        font-size: 28px;
    }
    .ttl_area .ttl_line {
        width: 6px;
        margin: 20px auto 13px;
    }
    .ttl_area .cont_ttl {
        font-size: 18px;
        white-space: nowrap;
    }
    .ttl_area .lead {
        font-size: 15px;
        line-height: 2em;
    }
}
@media only screen and (max-width: 400px) {
    .ttl_area .cont_ttl {
        font-size: 4.6dvw;
        white-space: nowrap;
    }
    .ttl_area .lead {
        font-size: 3.8dvw;
        white-space: nowrap;
    }
}

.project_list {
    width: 1170px;
    max-width: 100%;
    margin: 90px auto 0;
    display: flex;
    flex-wrap: wrap;
}
.project_list li {
    width: 390px;
    max-width: 33.3%;
    max-width: calc(100% / 3);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}
.project_list li a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
.project_list li a .box_img {
    width: 100%;
    height: 100%;
    transition: transform .2s ease;
}
.project_list li a:hover .box_img {
    transform: scale(1.1);
}
.project_list li a .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project_list li a .box_img::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s ease;
}
.project_list li a:hover .box_img::after {
    opacity: 1;
}
.project_list li a .box_txt {
    width: 100%;
    height: 38.5%;
    padding-top: 5%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("/ishinomaki/extra/i-rc2/img/project_box_bg.jpg") no-repeat center center / auto;
    text-align: center;
    transition: color .2s ease;
}
.project_list li a .box_txt.two_lines {
    padding-top: 7%;
}
.project_list li a:hover .box_txt {
    color: #fff;
}
.project_list li a .box_txt::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #b5c68b;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1;
}
.project_list li a:hover .box_txt::after {
    opacity: 1;
}
.project_list li:nth-child(2) a .box_txt { background-position: top left; }
.project_list li:nth-child(3) a .box_txt { background-position: top right; }
.project_list li:nth-child(4) a .box_txt { background-position: bottom right; }
.project_list li:nth-child(5) a .box_txt { background-position: top center; }
.project_list li:nth-child(6) a .box_txt { background-position: bottom left; }
.project_list li:nth-child(7) a .box_txt { background-position: bottom center; }
.project_list li a .box_txt p {
    font-size: 17px;
    line-height: 1.5em;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
.project_list li a .box_txt p + p {
    margin-top: 0.3em;
}
@media only screen and (max-width: 1200px) {
    .project_list {
        width: 780px;
    }
    .project_list li {
        max-width: 50%;
    }
    .project_list li a .box_txt p {
        font-size: 15px;
    }
}
@media only screen and (max-width: 600px) {
    .project_list {
        max-width: 86%;
        margin: 40px auto 0;
        justify-content: center;
        gap: 40px;
    }
    .project_list li {
        width: 315px;
        max-width: 100%;
    }
    .project_list li a .box_txt {
        padding-top: 4%;
    }
    .project_list li a .box_txt.two_lines {
        padding-top: 5%;
    }
    .project_list li a .box_txt p {
        font-size: 14px;
    }
}
@media only screen and (max-width: 360px) {
    .project_list li a .box_txt .two_lines {
        padding-top: 6%;
    }
    .project_list li a .box_txt p {
        font-size: 12px;
    }
}

.dec_shika {
    width: 210px;
    max-width: 13%;
    aspect-ratio: 210 / 280;
    position: absolute;
    top: -100px;
    left: 80px;
    z-index: 2;
}
.dec_kamometoudai {
    width: 420px;
    max-width: 20%;
    aspect-ratio: 420 / 490;
    position: absolute;
    bottom: 45px;
    right: 110px;
}
@media only screen and (max-width: 600px) {
    .dec_shika {
        width: 65px;
        max-width: 17%;
        top: -30px;
        left: 5%;
    }
    .dec_kamometoudai {
        width: 110px;
        max-width: 28%;
        bottom: 20px;
        right: 10%;
    }
}


/*-------------------------------------------------------------
ISU
-------------------------------------------------------------*/
#about_isu {
    width: 100%;
    aspect-ratio: 1920 / 560;
    background: url("/ishinomaki/extra/i-rc2/img/about_bg.jpg") no-repeat center center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#about_isu .txt_1 {
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}
#about_isu .txt_1 span {
    font-size: 0.8em;
}
#about_isu .txt_2 {
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    margin: 0.8em 0 1.2em;
}
@media only screen and (max-width: 1200px) {
    #about_isu {
        aspect-ratio: 1920 / 800;
    }
}
@media only screen and (max-width: 600px) {
    #about_isu {
        height: 180px;
        aspect-ratio: inherit;
        background: url("/ishinomaki/extra/i-rc2/img/about_bg_sp.jpg") no-repeat center center / cover;
    }
    #about_isu .txt_1 {
        font-size: 34px;
    }
    #about_isu .txt_2 {
        font-size: 17px;
    }
}


/*-------------------------------------------------------------
¥ê¥ó¥¯Ò»ÓE
-------------------------------------------------------------*/
#link_list {
    width: 1280px;
    max-width: 80%;
    margin: 0 auto;
}
#link_list .inner {
    width: 100%;
    padding: 100px 0 150px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    position: relative;
}
#link_list .inner::after {
    content: "";
    width: 265px;
    aspect-ratio: 265 / 182;
    background: url("/ishinomaki/extra/i-rc2/img/anime/kujira_anime.png") no-repeat center center / contain;
    position: absolute;
    bottom: -55px;
    right: 160px;
    z-index: 1;
}
.link_btn {
    width: 370px;
    aspect-ratio: 370 / 245;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.link_btn .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .2s ease;
    z-index: -1;
}
.link_btn .bg::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #7792a0;
    position: absolute;
    bottom: 0;
    right: 0;
    mix-blend-mode: multiply;
    z-index: 2;
    transition: background .2s ease;
}
.link_btn:hover .bg {
    transform: scale(1.1);
}
.link_btn:hover .bg::after {
    background-color: #aabec9;
}
.link_btn .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.link_btn .txt_1 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    margin-bottom: 0.9em;
}
.link_btn .txt_2 {
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}
@media only screen and (max-width: 1200px) {
    #link_list .inner::after {
        max-width: 40%;
        bottom: -40px;
        right: -5%;
    }
}
@media only screen and (max-width: 600px) {
    #link_list .inner {
        padding: 40px 0 80px;
        gap: 25px;
    }
    #link_list .inner::after {
        width: 70px;
        bottom: 15px;
        right: 0;
    }
    .link_btn .txt_1 {
        font-size: 15px;
    }
    .link_btn .txt_2 {
        font-size: 20px;
    }
}


/*-------------------------------------------------------------
TEACHERS
-------------------------------------------------------------*/
.head_area {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: url("/ishinomaki/extra/i-rc2/img/teacher/head_bg.jpg") no-repeat center center / cover;
    position: relative;
    z-index: 2;
}
.head_area h2 {
    font-size: 70px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    color: #1c4e77;
    margin-bottom: 1.2em;
}
.head_area::after {
    content: "";
    width: 13px;
    height: 65px;
    background: url("/ishinomaki/extra/i-rc2/img/dot.svg") no-repeat center center / contain;
    position: absolute;
    bottom: -31px;
    left: 0;
    right: 0;
    margin: auto;
}
.t_mv {
    position: relative;
    z-index: 1;
}
.t_mv_img {
    width: 100%;
    height: 41vw;
    min-height: 570px;
    position: relative;
    z-index: 1;
}
.t_mv_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.t_mv_txt {
    width: 1030px;
    max-width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.t_mv_txt ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.t_mv_txt li {
    line-height: 1;
    color: #1c4e77;
    padding: 0.2em 0.4em 0.3em;
    background-color: #fff;
    border-radius: 100px;
}
.t_mv_txt .txt_m {
    margin-bottom: 30px;
}
.t_mv_txt .txt_m li {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.t_mv_txt .txt_m li:not(:first-child) {
    margin-top: 0.7em;
}
.t_mv_txt .txt_s li {
    font-size: 17px;
    font-weight: 600;
    padding: 0.3em 1em 0.4em;
}
.t_mv_txt .txt_s li:not(:first-child) {
    margin-top: 0.7em;
    padding: 0.2em 1em 0.3em;
}
.t_mv_txt .txt_s li span {
    font-size: 1.2em;
    margin-left: 0.5em;
}
.t_mv_txt .txt_s li span.em {
    margin-left: 0;
}
@media only screen and (max-width: 800px) {
    .t_mv_txt .txt_m li {
        font-size: 26px;
    }
}
@media only screen and (max-width: 600px) {
    .head_area {
        height: 130px;
    }
    .head_area h2 {
        font-size: 28px;
    }
    .head_area::after {
        width: 6px;
        height: 27px;
        bottom: -13px;
    }
    .t_mv_img {
        height: 260px;
        min-height: 0;
    }
    .t_mv_txt .txt_m {
        margin-bottom: 20px;
    }
    .t_mv_txt .txt_m li {
        font-size: 17px;
    }
    .t_mv_txt .txt_s li {
        font-size: 10px;
    }
}
@media only screen and (max-width: 400px) {
    .t_mv_txt .txt_m li {
        font-size: 14px;
    }
}

#faq {
    padding: 100px 0 200px;
    position: relative;
    overflow: hidden;
}
#faq::after {
    content: "";
    width: 70vw;
    aspect-ratio: 1920 / 560;
    background: url("/ishinomaki/extra/i-rc2/img/bg_img_fish.png") no-repeat center center / contain;
    position: absolute;
    z-index: -1;
}
#faq.layout_01::after,
#faq.layout_02::after,
#faq.layout_04::after,
#faq.layout_05::after {
    bottom: -0.5vw;
    right: -3.3vw;
}
#faq.layout_03::after {
    bottom: 230px;
    right: -3.3vw;
}
#faq.layout_06::after {
    bottom: -0.5vw;
    left: -8vw;
}
#faq .inner {
    width: 1030px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 70px 10%;
    position: relative;
}
#faq .txt_q {
    font-size: 25px;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #1c4e77;
    font-family: "Zen Maru Gothic", serif;
    margin-bottom: 0.8em;
    padding-left: 1.6em;
    position: relative;
}
#faq .txt_q::before {
    content: "Q.";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
    font-family: "M PLUS Rounded 1c", sans-serif;
}
#faq .txt_a {
    font-size: 17px;
    line-height: 1.8em;
    letter-spacing: 0.03em;
    font-weight: 500;
}
.c_pink { color: #cd7e9a; }
.c_green { color: #98ae66; }
.c_blue { color: #398dad; }

#faq .txt_note {
    font-size: 13px;
    line-height: 1.5em;
    padding-left: 1em;
    text-indent: -1em;
    margin-top: 0.8em;
}
#faq .txt_note_nb {
    font-size: 13px;
    line-height: 1.5em;
    padding-left: 1.8em;
    text-indent: -1.8em;
}
#faq .txt_a + .txt_note_nb {
    margin-top: 0.8em;
}

.qa_block {
    width: 100%;
    position: relative;
}
.qa_block.txt_area {
    width: 50%;
}
.img_block {
    position: relative;
}
#faq .img_block .img {
    border-radius: 50px;
    overflow: hidden;
}
#faq .img_block .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (max-width: 1200px) {
    #faq .inner {
        gap: 70px 5%;
    }
    #faq .img_block .img {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 600px) {
    #faq {
        padding: 30px 0 100px;
    }
    #faq .inner {
        gap: 40px;
    }
    .order_01 { order: 1; }
    .order_02 { order: 2; }
    .order_03 { order: 3; }
    .order_04 { order: 4; }
    .order_05 { order: 5; }
    .order_06 { order: 6; }
    .order_07 { order: 7; }
    .order_08 { order: 8; }
    .order_09 { order: 9; }
    .order_10 { order: 10; }
    #faq .txt_q {
        font-size: 17px;
    }
    #faq .txt_a {
        font-size: 14px;
    }
    #faq .txt_note,
    #faq .txt_note_nb {
        font-size: 12px;
    }
    .qa_block.txt_area {
        width: 100%;
    }
    #faq .img_block,
    #faq .img {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #faq .img_block .img {
        border-radius: 14px;
    }
}

.wide_img_area {
    width: 100%;
    aspect-ratio: 2000 / 834;
    margin: 90px 0;
}
.wide_img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (max-width: 600px) {
    .wide_img_area {
        aspect-ratio: 375 / 220;
        margin: 40px 0;
    }
}

/*¸÷¥Ú©`¥¸¥ì¥¤¥¢¥¦¥ÈÕ{Õû*/
.layout_01 .txt_1 {
    width: 63%;
}
.layout_01 .img_1 {
    width: 480px;
    max-width: 35vw;
    position: absolute;
    top: 60px;
    left: 69.5%;
}
.layout_01 .img_2 {
    width: 640px;
    max-width: 62.5%;
    margin-bottom: 10%;
}
.layout_01 .img_3 {
    width: 400px;
    max-width: 62.5%;
    position: absolute;
    top: 73%;
    left: 90%;
}
.layout_01 .img_4 {
    width: 640px;
    max-width: 47vw;
    position: absolute;
    bottom: 21%;
    left: 54%;
}
.layout_01 .img_5 {
    width: 480px;
    max-width: 47%;
    margin: 130px 0 0;
}
@media only screen and (max-width: 600px) {
    .layout_01 .txt_1 {
        width: 100%;
    }
    .layout_01 .img_1 {
        width: 335px;
        max-width: 100%;
    }
    .layout_01 .img_2 {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
        margin: 0 auto;
    }
    .layout_01 .img_3 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
        margin: 40px auto 0;
    }
    .layout_01 .img_4 {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
    }
    .layout_01 .img_5 {
        width: 200px;
        max-width: 60%;
        aspect-ratio: 200 / 265;
        margin: 0 auto;
    }
}

.layout_02 .txt_2 {
    padding-right: 46%;
}
.layout_02 .img_1 {
    width: 480px;
    max-width: 47%;
    position: absolute;
    top: 0;
    left: 60%;
}
.layout_02 .img_2 {
    width: 100%;
}
.layout_02 .img_2 .img_child {
    width: 640px;
    max-width: 62.5%;
    margin-left: -7%;
}
.layout_02 .img_3 {
    width: 400px;
    max-width: 39%;
    position: absolute;
    top: 10%;
    right: 0;
}
.layout_02 .img_4 {
    width: 100%;
    padding-bottom: 350px;
}
.layout_02 .img_4 .img_child {
    width: 512px;
    max-width: 50%;
    margin-left: -16.5%;
}
.layout_02 .img_5 {
    width: 400px;
    max-width: 39%;
    position: absolute;
    bottom: 0;
    left: 22.5%;
}
.layout_02 .img_6 {
    width: 480px;
    max-width: 47%;
    position: absolute;
    top: 0;
    right: -16.5%;
}
@media only screen and (max-width: 600px) {
    .layout_02 .txt_2 {
        padding-right: 0;
    }
    .layout_02 .img_1 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
        margin-bottom: 40px;
    }
    .layout_02 .img_2 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
        margin: 0 auto 40px;
    }
    .layout_02 .img_3 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
    }
    .layout_02 .img_4 {
        padding-bottom: 0;
    }
    #faq.layout_02 .img_4 .img_child {
        width: 285px;
        max-width: 85.50%;
        aspect-ratio: 285 / 215;
        margin-left: 0;
    }
    #faq.layout_02 .img_5 {
        width: 225px;
        max-width: 68%;
        aspect-ratio: 225 / 170;
        margin: 30px 0 40px auto;
    }
    .layout_02 .img_6 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
    }
}

.layout_03 .img_1 {
    width: 640px;
    max-width: 62.5%;
    padding-bottom: calc(22% - 70px);
}
.layout_03 .img_2 {
    width: 384px;
    max-width: 60%;
    position: absolute;
    bottom: -70px;
    left: 100%;
}
.layout_03 .img_3 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 41%;
}
.layout_03 .img_3 .img_child {
    width: 640px;
    max-width: 62.5%;
    margin-right: -16.5%;
}
.layout_03 .img_4 {
    width: 400px;
    max-width: 39%;
    position: absolute;
    top: 10%;
    left: -16.5%;
}
.layout_03 .img_5 {
    width: 384px;
    max-width: 37.4%;
    position: absolute;
    bottom: 0;
    left: 7%;
}
@media only screen and (max-width: 600px) {
    .layout_03 .img_1 {
        width: 335px;
        max-width: 100%;
        padding-bottom: 0;
    }
    .layout_03 .img_1 .img_child {
        width: 100%;
        aspect-ratio: 335 / 250;
    }
    .layout_03 .img_2 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
        margin-top: 40px;
    }
    .layout_03 .img_3 {
        display: block;
        padding-bottom: 0;
    }
    .layout_03 .img_3 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
        margin-right: 0;
    }
    #faq.layout_03 .img_4 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
        margin: 40px auto 20px 0;
    }
    #faq.layout_03 .img_5 {
        width: 245px;
        max-width: 73%;
        aspect-ratio: 245 / 325;
        margin-right: 0;
    }
    #faq.layout_03::after {
        bottom: 0;
    }
}

.layout_04 .txt_1 {
    width: 63%;
}
.layout_04 .img_1 {
    width: 480px;
    max-width: 35vw;
    position: absolute;
    top: 60px;
    left: 69.5%;
}
.layout_04 .img_2 {
    width: 640px;
    max-width: 62.5%;
    margin-bottom: 10%;
}
.layout_04 .img_3 {
    width: 400px;
    max-width: 62.5%;
    position: absolute;
    top: 73%;
    left: 90%;
}
.layout_04 .img_4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.layout_04 .img_4 .img_child {
    width: 512px;
    max-width: 50%;
    margin-right: -16.5%;
}
.layout_04 .img_5 {
    width: 400px;
    max-width: 39%;
    margin: 50px 22.5% 0 0;
}
.layout_04 .img_6 {
    width: 480px;
    max-width: 47%;
    position: absolute;
    top: 0;
    left: -16.5%;
}
@media only screen and (max-width: 600px) {
    .layout_04 .txt_1 {
        width: 100%;
    }
    .layout_04 .img_1 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
    }
    .layout_04 .img_2 {
        width: 335px;
        max-width: 100%;
        margin: 0 auto;
    }
    .layout_04 .img_2 .img_child {
        width: 100%;
        aspect-ratio: 335 / 250;
    }
    .layout_04 .img_3 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
        margin: 40px auto 0;
    }
    .layout_04 .img_4 {
        display: block;
    }
    .layout_04 .img_4 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
        margin-right: auto;
    }
    #faq.layout_04 .img_5 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
        margin-top: 40px;
        margin-left: 0;
    }
    #faq.layout_04 .img_6 {
        width: 240px;
        max-width: 72%;
        aspect-ratio: 240 / 320;
        margin-top: 40px;
        margin-right: 0;
    }
}

.layout_05 .txt_2 {
    padding-right: 46%;
}
.layout_05 .img_1 {
    width: 480px;
    max-width: 47%;
    position: absolute;
    top: -30px;
    left: 60%;
}
.layout_05 .img_2 {
    width: 100%;
}
.layout_05 .img_2 .img_child {
    width: 640px;
    max-width: 62.5%;
    margin-left: -7%;
}
.layout_05 .img_3 {
    width: 400px;
    max-width: 39%;
    position: absolute;
    top: 10%;
    right: 0;
}
.layout_05 .img_4 {
    width: 100%;
    padding-top: 57.5%;
}
.layout_05 .img_4 .img_child {
    width: 400px;
    max-width: 39%;
    margin-left: 8.5%;
}
.layout_05 .img_5 {
    width: 384px;
    max-width: 37.5%;
    position: absolute;
    top: 0;
    left: -9%;
}
.layout_05 .img_6 {
    width: 400px;
    max-width: 39%;
    position: absolute;
    top: 45px;
    left: 35%;
    z-index: 1;
}
.layout_05 .img_7 {
    width: 640px;
    max-width: 62.5%;
    position: absolute;
    top: 195px;
    right: -16.5%;
}
@media only screen and (max-width: 600px) {
    .layout_05 .txt_2 {
        padding-right: 0;
    }
    .layout_05 .img_1 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
        margin-bottom: 40px;
    }
    .layout_05 .img_2 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
        margin: 0 auto 40px;
    }
    .layout_05 .img_3 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
    }
    .layout_05 .img_4 {
        padding-top: 0;
    }
   .layout_05 .img_4 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
    }
    .layout_05 .img_5 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    #faq.layout_05 .img_6 {
        width: 200px;
        max-width: 60%;
        aspect-ratio: 200 / 150;
        margin-bottom: 40px;
        margin-right: 0;
    }
   .layout_05 .img_7 {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
    }
}

.layout_06 .txt_1 {
    width: 63%;
}
.layout_06 .img_1 {
    width: 480px;
    max-width: 35vw;
    position: absolute;
    top: 60px;
    left: 69.5%;
}
.layout_06 .img_2 {
    width: 640px;
    max-width: 62.5%;
    margin-bottom: 10%;
}
.layout_06 .img_3 {
    width: 400px;
    max-width: 62.5%;
    position: absolute;
    top: 57%;
    left: 90%;
}
.layout_06 .txt_2 {
    width: 63%;
}
.layout_06 .img_4 {
    width: 430px;
    max-width: 42vw;
    position: absolute;
    top: 60px;
    left: 110.5%;
}
.layout_06 .img_5 {
    width: 100%;
    padding-bottom: 310px;
}
.layout_06 .img_5 .img_child {
    width: 640px;
    max-width: 62.5%;
    margin-left: -16.5%;
}
.layout_06 .img_6 {
    width: 480px;
    max-width: 47%;
    position: absolute;
    top: 19%;
    right: 0;
}
@media only screen and (max-width: 600px) {
    .layout_06 .txt_1,
    .layout_06 .txt_2 {
        width: 100%;
    }
    .layout_06 .img_1 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
    }
    .layout_06 .img_2 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }
    .layout_06 .img_2 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
    }
    #faq.layout_06 .img_3 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 190;
        margin-top: 40px;
        margin-right: 0;
    }
    .layout_06 .img_4 {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
        margin-top: 40px;
    }
    .layout_06 .img_5 {
        padding-bottom: 0;
    }
    .layout_06 .img_5 .img_child {
        width: 335px;
        max-width: 100%;
        aspect-ratio: 335 / 250;
    }
    .layout_06 .img_6 {
        width: 250px;
        max-width: 76%;
        aspect-ratio: 250 / 335;
        margin-top: 40px;
    }
}




/*-------------------------------------------------------------
¥¢¥Ë¥á©`¥·¥ç¥ó
-------------------------------------------------------------*/
.huwa { animation: floating 1.5s linear infinite alternate; }
@keyframes floating {
    0% { transform: translate3d(0,0,0); }
    to { transform: translate3d(0,40%,0); }
}
@keyframes appear {
    0% {
        opacity: 0;
        transform: translate3d(0,-20%,0)
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
.huwa2 { animation: floating2 1.5s ease-in infinite alternate; }
@keyframes floating2 {
    0% { transform: translate3d(0,0,0); }
    to { transform: translate3d(0,20%,0); }
}
.huwa3 { animation: floating3 3s ease-in-out infinite alternate; transform: translate3d(0,-5%,0); }
@keyframes floating3 {
    0% { transform: translate3d(0,-5%,0); }
    to { transform: translate3d(0,5%,0); }
}
.huwa4 { animation: floating4 3s ease-in-out infinite alternate; transform: translate3d(0,-20%,0); }
@keyframes floating4 {
    0% { transform: translate3d(0,-20%,0); }
    to { transform: translate3d(0,20%,0); }
}

/* ¥¹¥¯¥í©`¥ë¤Ç¥Õ¥§©`¥É¥¤¥ó */
.js-fadeup {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1.5s, transform 1.5s;
}
.js-fadeup.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.js-fadein {
    opacity: 0;
    transition: opacity 1.5s;
}
.js-fadein.is-visible {
    opacity: 1;
}
.delay-0-3 { transition-delay: 0.3s; }
.delay-0-5 { transition-delay: 0.5s; }
@media only screen and (max-width: 599px) {
    .delay-0-3,
    .delay-0-5 {
        transition-delay: 0;
    }
}



/*-------------------------------------------------------------
print
-------------------------------------------------------------*/
@media print {
    .js-fadeup {
        opacity: 1;
        transform: translateY(0);
    }
    .dp_intro.is-visible,
    .js-fadein {
        opacity: 1;
    }
    #fix_link {
        position: absolute;
    }
}