@charset "utf-8";
/* CSS Document */

/* powerandit.co.jp - top
-----------------------------------------------------*/
main {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

/* ==============================================
    features
============================================== */
#features {
    margin-top: 50px;
    padding: 40px 0 100px;
    border-radius: 1.25em 1.25em 0 0;
    background: #fee7d3;
}
#features #catch,
#features .column3 div strong,
#features .column3 div span {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
}
#features #catch {
    font-size: 32px;
    font-weight: 700;
}
@media screen and (max-width: 1100px) {
    #features #catch {
        font-size: clamp(1.5rem, 0.167rem + 2.67vw, 2rem);
    }
}
@media screen and (min-width: 801px) {
    #features #catch br {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    #features {
        padding-top: clamp(1.563rem, -1.786rem + 14.29vw, 2.5rem);
        padding-bottom: clamp(3.125rem, -8.036rem + 47.62vw, 6.25rem);
    }
    #features #catch {
        font-size: clamp(1.125rem, 0.115rem + 4.62vw, 1.5rem);
    }
}

#features .column3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#features .column3 div {
    width: 380px;
    margin-top: 60px;
}
#features .column3 div a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: 194px;
    padding-left: 190px;
    border-radius: 1.125em 1.125em 0 0;
    background: url("image/top_features_location.png") no-repeat left center #fff;
    text-align: left;
}
#features .column3 div strong,
#features .column3 div span {
    font-size: 24px;
}
#features .column3 div a[href*="struc"] {
    background-image: url("image/top_features_struc.png");
}
#features .column3 div a[href*="ps"] {
    background-image: url("image/top_features_ps.png");
}
#features .column3 div a strong {
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 0.8em;
}
#features .column3 div a strong::before {
    position: absolute;
    left: 0;
    top: 9px;
    content: "";
    width: 10px;
    height: 14px;
    clip-path: polygon(40% 0%, 100% 50%, 40% 100%, 0% 100%, 60% 50%, 0% 0%);
    background: var(--point-orange);
}
#features .column3 div a p {
    font-size: 0.875em;
}
#features .column3 div a span,
#features .column3 div span::after {
    position: absolute;
    width: 95px;
    height: 90px;
    border-radius: 50px;
}
#features .column3 div a span {
    top: -30px;
    left: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--point-blue);
    color: #fff;
    pointer-events: none;
}
#features .column3 div span::after {
    top: 0.2em;
    content: "";
    display: block;
    border: 2px solid #fff;
}
@media screen and (max-width: 1240px) {
    #features .column3 div {
        width: 360px;
    }
    #features .column3 div a {
        height: 170px;
        padding-left: 165px;
        background-size: auto 100%;
    }
    #features .column3 div a span,
    #features .column3 div span::after {
        width: 80px;
        height: 75px;
        font-size: 20px;
    }
}
@media screen and (max-width: 1150px) {
    #features .column3.inner {
        display: block;
        max-width: 510px;
    }
    #features .column3 div {
        width: 100%;
        margin-top: 40px;
    }
    #features .column3 div br {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    #features .column3.inner {
        max-width: 450px;
    }
    #features .column3 div a {
        height: 150px;
        padding-left: 150px;
    }
    #features .column3 div strong {
        font-size: clamp(1.125rem, 0.966rem + 0.73vw, 1.375rem);
    }
}
@media screen and (max-width: 500px) {
    #features .column3.inner {
        max-width: 330px;
    }
    #features .column3 div br {
        display: block;
    }
    #features .column3 div a span,
    #features .column3 div span::after {
        width: 70px;
        height: 65px;
        font-size: 18px;
    }
}

/* ==============================================
    news
============================================== */
#news {
    padding: 45px 0 100px;
}
#news .btn.center {
    margin-top: 1.5em;
}
#news .btn.center a {
    display: inline-block;
    padding: 0.6em 1.5em 0.6em 2.5em;
    border-radius: 2em;
    border: 1px solid var(--point-orange);
    background: #fff;
}
#news .btn.center a::before {
    margin-left: 1em;
}
@media screen and (max-width: 480px) {
    #news {
        padding-top: clamp(1.875rem, -1.473rem + 14.29vw, 2.813rem);
        padding-bottom: clamp(3.125rem, -8.036rem + 47.62vw, 6.25rem);
    }
}

/* ==============================================
    contents
============================================== */
#contents {
    display: flex;
    justify-content: space-between;
    max-width: 970px;
    margin-bottom: 90px;
}
#contents div {
    width: 49%;
    max-width: 457px;
    background: #f2f2f2;
}
#contents div a {
    position: relative;
    display: block;
    height: 100%;
    text-align: center;
    padding-bottom: 2em;
}
#contents div a img {
    max-width: 100%;
    margin-bottom: 1.5em;
}
#contents div a p {
    margin: 1em;
    font-size: 0.875em;
    text-align: left;
}
#contents div a::after {
    position: absolute;
    left: 50%;
    bottom: 1em;
    content: "";
    width: 14px;
    height: 10px;
    margin-left: -7px;
    clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 50% 50%);;
    background: var(--point-orange);
}
@media screen and (max-width: 600px) {
    #contents {
        display: block;
        text-align: center;
    }
    #contents div {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    #contents div + div {
        margin-top: 30px;
    }
}
@media screen and (max-width: 480px) {
    #contents {
        margin-bottom: clamp(3.125rem, -5.804rem + 38.1vw, 5.625rem);
    }
}


/* ==============================================
    pickup
============================================== */
#pickup {
    margin-bottom: 40px;
}
#pickup .titBottomLine span {
    margin-top: 0;
    margin-bottom: 0.3em;
    font-size: 0.5em;
}
#pickup .titBottomLine strong {
    color: #f49140;
    font-weight: 500;
}
#pickup > p {
    display: inline-block;
    margin: 0 auto 2em;
    padding: 0 1em;
    text-align: left;
}

/* ==============================================
    main-visual
============================================== */
#main-visual {
    position: relative;
    width: 100%;
    height: 587px;
    overflow: hidden;
    margin: 0 auto;
}
#main-visual div,
#main-visual p {
    position: absolute;
}
#main-visual p.main {
    top: 0;
    left: 50%;
    margin-left: -1000px;
    width: 2000px;
}
#main-visual p.main img {
    width: 100%;
}
#main-visual p.line {
    top: -270px;
    left: 50%;
    margin-left: -1150px;
    width: 2150px;
}
#main-visual p.line img {
    mask-image: url(#mask-wrap);
    mask-origin: content-box;
    mask-position: -1280px -1280px;
}
#main-visual #mask path {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-width: 650px;
    stroke-dasharray: 2280px;
}
#main-visual div {
    top: 180px;
    left: 50%;
    margin-left: -540px;
    width: 487px;
    height: 218px;
}
#main-visual div .mark_blue,
#main-visual div .mark_green {
	width: 90px;
}
#main-visual div .mark_green { top: 0; left: 25px; }
#main-visual div .mark_blue { top: 30px; left: 0; }
#main-visual div .logo {
	width: 333px;
    top: 45px;
    left: 140px;
}
#main-visual div .catch {
    left: 0;
    bottom: 0;
    font-weight: 700;
    font-size: 52px;
    color: #fff;
    white-space: nowrap;
}
@media screen and (max-width: 1400px) {
    #main-visual {
        height: 430px;
    }
    #main-visual p.main {
        width: 1540px;
        margin-left: -770px;
    }
    #main-visual p.line {
        top: -210px;
        margin-left: -870px;
        width: 1540px;
    }
    #main-visual p.line img {
        width: 1600px;
        mask-image: url(#mask-wrap2);
        mask-position: -1200px -1200px;
    }
    #main-visual #mask2 path {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
        stroke-width: 540px;
        stroke-dasharray: 2280px;
    }
    #main-visual div {
        top: 115px;
        margin-left: -420px;
        width: 420px;
        height: 175px;
    }
    #main-visual div .mark_blue,
    #main-visual div .mark_green {
        width: 70px;
    }
    #main-visual div .mark_green { top: 0; left: 25px; }
    #main-visual div .mark_blue { top: 26px; left: 0; }
    #main-visual div .logo {
        width: 270px;
        top: 35px;
        left: 110px;
    }
    #main-visual div .catch {
        font-size: 42px;
    }
}
@media screen and (max-width: 900px) {
    #main-visual {
        height: 340px;
    }
    #main-visual p.main {
        margin-left: -580px;
        width: 1160px;
    }
    #main-visual p.line {
        top: -190px;
        margin-left: -690px;
        width: 1290px;
    }
    #main-visual p.line img {
        width: 1390px;
        mask-image: url(#mask-wrap3);
        mask-origin: content-box;
        mask-position: -768px -768px;
    }
    #main-visual #mask3 path {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
        stroke-width: 466px;
        stroke-dasharray: 2000px;
    }
    #main-visual div {
        top: 100px;
        margin-left: -310px;
        width: 310px;
        height: 145px;
    }
    #main-visual div .mark_blue,
    #main-visual div .mark_green {
        width: 60px;
    }
    #main-visual div .mark_green { left: 15px; }
    #main-visual div .mark_blue { top: 19px; }
    #main-visual div .logo {
        width: 200px;
        top: 25px;
        left: 95px;
    }
    #main-visual div .catch {
        font-size: 32px;
    }
}
@media screen and (max-width: 650px) {
    #main-visual {
        height: 280px;
    }
    #main-visual p.main {
        margin-left: -480px;
        width: 960px;
    }
    #main-visual p.line {
        top: -220px;
        margin-left: -600px;
    }
    #main-visual div {
        top: 70px;
        left: 10px;
        margin-left: 0;
        width: 250px;
        height: 115px;
    }
    #main-visual div .mark_blue,
    #main-visual div .mark_green {
        width: 45px;
    }
    #main-visual div .mark_green { left: 12px; }
    #main-visual div .mark_blue { top: 15px; }
    #main-visual div .logo {
        width: 170px;
        top: 25px;
        left: 70px;
    }
    #main-visual div .catch {
        font-size: 26px;
    }
}
@keyframes fadein {
  from { opacity : 0; }
  to { opacity : 1; }
}
@keyframes line-mask {
  from { stroke-dashoffset: 2280px; }
  top {  stroke-dashoffset: 0; }
}
@keyframes mark_green {
  from { opacity : 0; transform: translate(50px, -25px); }
  to { opacity : 1; transform: none; }
}
@keyframes mark_blue {
  from { opacity : 0; transform: translate(-50px, -25px); }
  to { opacity : 1; transform: none; }
}
@keyframes catch {
  from { opacity : 0; transform: scale(1.5)}
  to { opacity : 1; transform: none; }
}

/* 動きの長さ調整 */
#main-visual .main {
    animation: fadein 2s ease both;
    animation-delay: 1s;
}
#main-visual .line {
    animation: fadein .8s ease-out both;
    animation-delay: 2.5s;
}
#main-visual #mask path {
    animation: line-mask 1.5s ease both;
    animation-delay: 2.5s;
}
#main-visual #mask2 path {
    animation: line-mask 1.5s ease both;
    animation-delay: 2.5s;
}
#main-visual #mask3 path {
    animation: line-mask 1.5s ease both;
    animation-delay: 2.5s;
}
#main-visual .mark_green {
    animation: mark_green .3s ease both;
    animation-delay: 4s;
}
#main-visual .mark_blue {
    animation: mark_blue .3s ease both;
    animation-delay: 4s;
}
#main-visual .logo {
    animation: fadein 2s ease both;
    animation-delay:5s;
}
#main-visual .catch {
    animation: catch 2.5s ease both;
    animation-delay: 6s;
}