/* container */
.intro_wrap {padding:80px 0 240px;background:#fff}
.intro_container {position:relative;width:calc(100% - 80px);max-width:1160px;margin:0 auto;box-shadow:none}

/* GO!GO! Cat */
.intro_container .intro_top {display:flex;}
.intro_container .intro_top:before {content:'';flex-shrink:0;display:block;width:636px;height:525px;background:url('/about/images/img_intro_top.png') center / contain no-repeat}
.intro_container .intro_top .intro_text:after {content:'';margin-top:auto;display:block;width:440px;height:200px;background:url('/about/images/img_top.png') center / 100% no-repeat}
.intro_container .intro_top .intro_text {display:flex;flex-wrap:wrap;margin-left:80px;}
.intro_container .intro_top .intro_text .tit {width:100%;color:#15599C;font-size:60px;font-weight:900}

.intro_container .tit {position:relative;margin-bottom:60px;font-size:40px;z-index:1}
.intro_container .tit span {color:#15599C;font-size:40px;}
.intro_container .txt {position:relative;width:100%;font-size:24px;}
.intro_container .intro_center {text-align:center}
.intro_container [class^="intro_"] {position:relative}
.intro_container [class^="intro_"] + [class^="intro_"] {margin-top: 200px;}

/* プロロってどんな猫? */
.intro_container .intro_con {position:relative;display:flex;align-items:center;justify-content:space-between}
.intro_container .intro_con .con_box {position:relative;}
.intro_container .intro_con:before {content:'';position:absolute;top:0;left:-100px;display:block;width:200px;height:200px;border-radius:50%;background:#FED600;opacity:0.3}
.intro_container .intro_con:after {content:'';display:block;width:330px;height:324px;background:url('/about/images/img_con.png') center / 100% no-repeat}

/* プロロの趣味 */
.intro_container .intro_hobby .tit {text-align:center}
.intro_container .intro_hobby .hobby_box {display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.intro_container .intro_hobby .hobby_box:before {content:'';display:block;margin-right:200px;width:300px;height:380px;background:url('/about/images/img_hobby.png') center / 100% no-repeat}
.intro_container .intro_hobby .hobby_list {width:calc(100% - 400px)}
.intro_container .intro_hobby .hobby_list li {}
.intro_container .intro_hobby .hobby_list li+li {margin-top:40px}
.intro_container .intro_hobby .hobby_list li strong {position:relative;display:block;color:#016BB9;margin-bottom:16px;padding-bottom:8px;font-size:28px;}
.intro_container .intro_hobby .hobby_list li strong:before {content:'';position:absolute;left:0;bottom:5px;width:200px;height:5px;background:#016BB9;border-top-left-radius: 24px;border-top-right-radius: 24px;}
.intro_container .intro_hobby .hobby_list li strong:after {content:'';position:absolute;left:0;bottom:0;width:100%;height:5px;background:#016BB9}
.intro_container .intro_hobby .hobby_list li p {font-size:24px;}

/* プロロの特技 */
.intro_container .intro_point {padding:100px 0;background:url('/about/images/img_map.png') center bottom / 740px no-repeat}
.intro_container .intro_point:before {content:'';position:absolute;top:120px;left:160px;display:block;width:150px;height:90px;background:url('/about/images/img_heart.png') center / contain no-repeat}
.intro_container .intro_point:after {content:'';position:absolute;top:-100px;right:160px;display:block;width:256px;height:256px;background:url('/about/images/img_point.png') center / contain no-repeat}

/* プロロの性格 */
.intro_container .intro_person .person_list {position:relative;display:flex;flex-wrap:wrap;gap:80px}
.intro_container .intro_person .person_list:before {content:'';position:absolute;top:50%;left:50%;display:block;width:200px;height:200px;background:url('/about/images/img_person.png') center / contain no-repeat;transform:translate(-50%, -50%)}
.intro_container .intro_person .person_list li {width:calc(50% - 40px)}
.intro_container .intro_person .person_list li strong {display:inline-flex;align-items:center;justify-content:center;color:#15599C;font-size:24px;padding:4px 8px;border:1px solid #15599C;border-radius:4px}
.intro_container .intro_person .person_list li p {margin-top:34px;font-size:24px}

/* プロロの夢 */
.intro_container .intro_dream {position:relative;margin-top:260px}
.intro_container .intro_dream:before {content:'';position:absolute;top:50%;left:50%;display:block;width:883px;height:891px;background:url('/about/images/img_dream_bg.png') center / 100% no-repeat;transform: translate(-50%, -50%);z-index:1}
.intro_container .intro_dream .txt {position:relative;display:flex;align-items:center;justify-content:center;gap:0 50px;z-index:2}
.intro_container .intro_dream .txt_box {position:relative;display:flex;align-items:center;justify-content:center;z-index:1}
.intro_container .intro_dream .txt_box:before {content:'';display:block;width:440px;height:320px;margin-right:40px;background:url('/about/images/img_dream.png') center / 100% no-repeat}

@media screen and (max-width: 1260px) {
    .intro_wrap {padding:60px 0 100px}
    .intro_container {max-width:calc(880px - 80px)}
    .intro_container [class^="intro_"] + [class^="intro_"] {margin-top:100px;}
    .intro_container .tit {font-size:28px;}
    .intro_container .tit span {font-size:28px}
    .intro_container .txt {font-size:20px}

    .intro_container .intro_top:before {width:354px;height:351px}
    .intro_container .intro_top .intro_text .tit {font-size:40px;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px  1px 0 #fff, 1px  1px 0 #fff;}
    .intro_container .intro_top .intro_text .txt {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px  1px 0 #fff, 1px  1px 0 #fff;}
    .intro_container .intro_top .intro_text:after {width:100%;margin-top:40px;}
    .intro_container .intro_con:after {width:220px;height:300px;}

    .intro_container .intro_hobby .hobby_box:before {width:200px;margin:0}
    .intro_container .intro_hobby .hobby_list {width:calc(100% - 300px)}
    .intro_container .intro_hobby .hobby_list li strong {font-size:22px;}
    .intro_container .intro_hobby .hobby_list li p {font-size:20px}

    .intro_container .intro_point:after {top:-34px;right:80px;width:190px;height:190px}
    .intro_container .intro_point:before {right:80px;width:120px;}

    .intro_container .intro_person .person_list:before {width:100px;}
    .intro_container .intro_person .person_list li strong {font-size:20px;}
    .intro_container .intro_person .person_list li p {font-size:20px}

    .intro_container .intro_dream:before {width:700px;}
    .intro_container .intro_dream .tit {margin-top:160px;}
    .intro_container .intro_dream .txt:before {width:348px}
}


@media screen and (max-width: 880px) {
    .intro_container {max-width:calc(880px - 80px)}
    .intro_container [class^="intro_"] + [class^="intro_"] {margin-top:100px;}
    .intro_container .tit {font-size:22px;}
    .intro_container .tit span {font-size:22px}
    .intro_container .txt {font-size:16px}
    .intro_container .intro_top {background:url('/about/images/img_intro_top.png') top right / 200px no-repeat}
    .intro_container .intro_top:before {content:none}
    .intro_container .intro_top .intro_text{margin:0;}
    .intro_container .intro_top .intro_text .tit {font-size:40px}
    .intro_container .intro_top .intro_text:after {width:100%;}
    .intro_container .intro_con:after {width:180px;height:180px;}

    .intro_container .intro_hobby .hobby_box:before {position:absolute;top:36px;left:auto;right:0;width:80px;height:86px;margin:0;transform: scaleX(-1)}
    .intro_container .intro_hobby .hobby_list {width:100%}
    .intro_container .intro_hobby .hobby_list li+li {margin-top:22px}
    .intro_container .intro_hobby .hobby_list li strong {font-size:18px;}
    .intro_container .intro_hobby .hobby_list li strong:before {bottom:2px;width:140px;}
    .intro_container .intro_hobby .hobby_list li p {font-size:16px}

    .intro_container .intro_point {padding:80px 0;background-size:100%}
    .intro_container .intro_point:after {top:40px;right:-40px;width:120px;height:100px}
    .intro_container .intro_point:before {top:94px;left:0;width:80px;}

    .intro_container .intro_person .person_list:before {width:100px;}
    .intro_container .intro_person .person_list li strong {font-size:16px;}
    .intro_container .intro_person .person_list li p {font-size:16px}

    .intro_container .intro_dream .tit {margin-top:100px;}
    .intro_container .intro_dream .txt {flex-wrap:wrap;}
    .intro_container .intro_dream .txt_box {flex-wrap:wrap;}
    .intro_container .intro_dream .txt_box:before {width:200px;height:146px;margin-bottom:28px;}
    .intro_container .intro_dream:before {width:280px;height:280px;background-position: top 40px center}
}