@charset "utf-8";

.contents-wrap { margin:978px 0 0 0; padding:0; background:transparent;}
/* home background animation */
.background {
    position: fixed;
    top: 0px;
    left: 50%;
    transform:translateX(-50%);
    width: 100%;
    max-width:1920px;
    overflow:hidden;
    height: 100%;
    z-index: -10;
}
.background li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    animation: homeBG 18s linear 0s infinite;
}
.background li:first-of-type { 
    background-image: url("../images/home_background01.jpg");
}
.background li:nth-of-type(2) {
    background-image: url("../images/home_background02.jpg");
    animation-delay: 6s;
}
.background li:nth-of-type(3) {
    background-image: url("../images/home_background03.jpg");
    animation-delay: 12s;
}
@keyframes homeBG { 
    0% {
      opacity:0;
    }
    5.5555556% {
      opacity:1;
    }
    27.777777% {
    }
    33.333333% {      
      opacity:1;
    }
    38.888889% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
}

@media screen and (max-width:1400px) {
  .contents-wrap { margin:900px 0 0 0;}
  .background.pc_only li {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: none;
    opacity: 0;
    animation: homeBG 9s linear 0s infinite ;
  }
}
@media screen and (max-width:1024px) {
  .contents-wrap { margin:75vh 0 0 0;}
  .background.sp_only li {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: none;
    opacity: 0;
    animation: homeBGsp 18s linear 0s infinite ;
  }
  .background.sp_only li {
    background-position: center center !important;
  }
  .background.sp_only li:first-of-type { 
    background-image: url("../images/home_background01-tb.jpg");
    animation-delay: 0;
  }
  .background.sp_only li:nth-of-type(2) {
    background-image: url("../images/home_background02-tb.jpg");
    animation-delay: 6s;
  }
  .background.sp_only li:nth-of-type(3) {
    background-image: url("../images/home_background03-tb.jpg");
    animation-delay: 12s;
  }
}
@media screen and (max-width:820px) {
  .contents-wrap { margin:70vh 0 0 0;}
}


@media screen and (max-width:767px) {
  .contents-wrap { margin:75vh 0 0;}
  .background.sp_only li {
    background-position: top -130px left 70% !important;
    padding-bottom: 216.53%;/* SPカクつき対策 */
    animation: homeBGsp 9s linear 0s infinite;
/*    background-image: url("../images/home_background01-sp.jpg");*/
    opacity:0/*1*/;
  }
  .background.sp_only li p { display:none;}
  .background.sp_only li:first-of-type { 
    background-image: url("../images/home_background01-sp.jpg");
  }
  .background.sp_only li:nth-of-type(2) {
    background-image: url("../images/home_background02-sp.jpg");
    animation-delay: 3s;
  }
  .background.sp_only li:nth-of-type(3) {
    background-image: url("../images/home_background03-sp.jpg");
    animation-delay: 6s;
  }
  
}
@media screen and (max-width:424px) {
  .contents-wrap { margin:70vh 0 0;}
  .background.sp_only li {
    background-size: cover;
    background-position: top 0 left 60% !important;
  }
}
@media screen and (max-width:320px) {
  .contents-wrap { margin:400px 0 0;}
}

@keyframes homeBGsp { 
    0% {
      opacity:0;
    }
    5.5555556% {
      opacity:1;
    }
    27.777777% {
    }
    33.333333% {      
      opacity:1;
    }
    38.888889% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
}
  
.home-kv-text { font-size:5rem; line-height:1.75; color:#fff; position:absolute; top:242px; left:157px;}
@media screen and (max-width:1400px) {
  .home-kv-text { font-size:3.6rem; top:130px; left:88px;}
}
@media screen and (max-width:1023px) {
  .home-kv-text { font-size:3.2rem; top:130px; left:32px;}
}
@media screen and (max-width:767px) {
  .home-kv-text { font-size:2.7rem; top:130px; left:32px;}
}


.background-text { max-width:86%; font-size:3rem;}
.background-text li { animation: homeBGtext 18s linear 0s infinite; opacity:0; position:absolute; top:500px; left:0; background:rgba(255,255,255,.5); padding:14px 20px 14px 157px; color:#333;}
.background-text li:nth-of-type(2) { animation-delay: 6s;}
.background-text li:nth-of-type(3) { animation-delay: 12s;}
@keyframes homeBGtext { 
    0% {
      opacity:0;
    }
    5.5555556% {
      opacity:1;
    }
    27.777777% {
    }
    33.333333% {      
      opacity:1;
    }
    38.888889% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
}
/*.bg01text { color:#333;}
.bg02text { color:#203192;}
.bg03text { color:#0C6323;}*/
@media screen and (max-width:1400px) {
  .background-text { font-size:2.4rem;}
  .background-text li { top:460px; padding:14px 20px 14px 88px;}
}
@media screen and (max-width:1023px) {
  .background-text { font-size:2.2rem;}
  .background-text li { top:500px; padding:14px 20px 14px 32px;}
}
@media screen and (max-width:767px) {
  .background-text { display:none;}
}


.home-topics { position:relative; width:100%; background:transparent; margin-bottom:90px; margin-left:4.5833333333%/*88px*/;}
.home-topics-box { margin-top:330px; padding-top:350px; padding-bottom:50px; background:#f7f7f7;}
.home-projects { margin-left:4.5833333333%/*88px*/;}
.home-projects-box { background:#f7f7f7; padding:66px 0 122px;}

.home-feature { position:absolute; top:-306px; left:calc(240px - 88px); width:1438px; display:flex; justify-content:space-between; flex-flow:row wrap;  animation:homeFeature .8s; margin:0 auto;}
.home-feature .home-feature-box { display:flex; flex-direction:column; flex: 0 0 446px; text-decoration:none; background:#fff; transition:all .2s; color:#595858; position:relative;}
.home-feature .home-feature-box:hover,
.home-feature .home-feature-box:hover img { opacity:1;}
.home-feature .home-feature-box:hover { top:-10px; box-shadow:0 0 30px rgba(255,255,255,1); transition:all .2s;}
.home-feature .home-feature-box.no-link:hover { top:0; box-shadow:none;}
.home-feature .home-feature-box > a { position:absolute; top:0; left:0; display:block; width:100%; height:100%;}

.feature-img { position:relative; width:100%; background:#fff;}
.feature-img::before { position:absolute; top:0; left:0; content:"FEATURE"; font-size:1.6rem; line-height:30px; text-align:center; display:block; width:160px; color:#fff; background:#3e6eb3;}

.feature-bg { width:100%; position:relative; z-index:0; background:linear-gradient(-57deg, #1e1e50, #1e1e50 30%, #383864 30%); padding:24px 40px; font-size:1.8rem; font-weight:500; flex:1 auto; display:flex; flex-direction:column; overflow:hidden;}
.feature-data { line-height:1;}
.feature-data .feature-category { display:inline-block; vertical-align:middle; width:12em /* 168px */; margin-right:18px; text-align:center; background:#fff; border:1px solid #595858; line-height:30px;}
.feature-data .feature-date { display:inline-block; vertical-align:middle; line-height:30px; font-size:1.6rem; color:#fff; font-weight:400;}
.feature-title { margin:14px 0; color:#fff; min-height:3.5em; position:relative;}
.feature-title::after { content:""; position:absolute; bottom:-12px; left:0; width:calc(446px - 40px); height:1px; background:rgba(255,255,255,.5);}
.feature-content { margin:20px 0; color:#fff; position:relative; flex-grow:1;}
.feature-pcbutton { margin-top: auto; display:block !important; padding:8px 0 10px; text-align:center; border-radius:2px; border:1px solid #fff; position:relative; line-height:1; color:#fff;}
.feature-pcbutton::before { position:absolute; content:""; top:50%; left: 26px; transform: translateY(-50%); border: 6px solid transparent; border-left: 10px solid #fff; margin-top: 1px; transition: all .3s;}
.feature-link { display:none;}
@keyframes homeFeature {
from {
    opacity: 0;
    transform: translateY(400px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@media screen and (max-width:1680px) {
  .home-feature { top:-300px; left:6%; width:78.4934497816%; max-width:1438px;}
  .home-feature .home-feature-box { flex: 0 0 32%; text-decoration:none; background:#fff; transition:all .2s; color:#595858; position:relative;}
  .home-topics-box { padding-top:440px;}
}
@media screen and (max-width:1400px) {
  .home-feature { top:-280px; left:2%; width:90%;}
  .home-feature .home-feature-box { flex:0 0 32.8%;}
  .home-feature .home-feature-box:hover { box-shadow:0 0 10px rgba(255,255,255,1); transition:all .2s;}
  .home-topics-box { margin-top:0; padding:440px 0 50px; background:#f7f7f7;}
  .feature-bg a.sp_only { display:none;}
  .feature-bg { font-size:1.6rem;}
}
@media screen and (max-width:1024px) {
  .home-topics,
  .home-projects { margin:0 !important;}
  .home-topics-box { margin-top:330px; padding:0 0 30px;}
  .home-projects-box { margin-top:130px; padding:0 0 30px;}
  .home-feature { display:block; animation:none; position:static; width:100%;}
  .home-feature .home-feature-box { display:block; width:100%; margin-bottom:26px;}
  .home-feature .home-feature-box:hover { box-shadow:none; top:0;}
  .home-feature .home-feature-box > a { display:none;}
  .feature-img::before { font-size:1.4rem; width:8em;}
  .feature-bg { font-size:1.4rem; padding:24px 30px;}
  .feature-category { font-size:1.3rem; line-height:26px;}
  .feature-date { font-size:1.3rem;}
  .feature-title { height:inherit;}
  .feature-title::after { width:130%;}
  .feature-bg a.sp_only { display:block; width:180px; margin:0 auto; border:1px solid #fff; border-radius:2px; font-size:1.3rem; line-height:36px; text-align:center; color:#fff; text-decoration:none;}
  .feature-bg a.sp_only span { position:relative; padding:0 0 0 1.6em;}
  .feature-bg a.sp_only span::before { position:absolute; content:""; top:50%; left:0; transform:translateY(-50%); border:6px solid transparent; border-left:8px solid #fff; margin-top:1px;}
  .feature-pcbutton {display:none !important;}
}
@media screen and (max-width:375px) {
  .home-topics,
  .home-projects { margin:0 !important;}
  .home-topics-box { margin-top:0; padding:0 0 30px;}
  .home-projects-box { margin-top:0; padding:0 0 30px;}
  .home-feature { display:block; animation:none; position:static; width:100%;}
  .home-feature .home-feature-box { display:block; width:100%; margin-bottom:26px;}
  .home-feature .home-feature-box:hover { box-shadow:none;}
  .home-feature .home-feature-box > a { display:none;}
  .feature-img::before { font-size:1.4rem; width:8em;}
  .feature-bg { font-size:1.4rem; padding:24px 30px;}
  .feature-category { font-size:1.3rem; line-height:26px;}
  .feature-date { font-size:1.3rem;}
  .feature-title::after { width:130%;}
  .feature-bg a.sp_only { display:block; width:180px; margin:0 auto; border:1px solid #fff; border-radius:2px; font-size:1.3rem; line-height:36px; text-align:center; color:#fff; text-decoration:none;}
  .feature-bg a.sp_only span { position:relative; padding:0 0 0 1.6em;}
  .feature-bg a.sp_only span::before { position:absolute; content:""; top:50%; left:0; transform:translateY(-50%); border:6px solid transparent; border-left:8px solid #fff; margin-top:1px;}
}

.home-topics-box > h2,
.home-projects-box > h2 { font-size:4.5rem; font-weight:400; color:#251e1c; margin-left:80px; display:inline-block; vertical-align:top;}
.home-topics-box > h2 span,
.home-projects-box > h2 span { display:block; font-size:2.1rem; margin-bottom:60px;}

@media screen and (max-width:1024px) {
  .home-topics-box > h2,
  .home-projects-box > h2 { width:100%; font-size:2.3rem; margin:0 !important; display:block !important; text-align:center; padding:26px 0;}
  .home-topics-box > h2 span,
  .home-projects-box > h2 span { font-size:1.2rem; margin-bottom:0 !important;}
}

.home-topics-list { display:inline-block; width:67.7947598253%; max-width:1242px; margin-left:68px;}
.home-topics-list li { padding:24px 0; font-size:1.8rem; line-height:1.4; border-bottom:1px solid rgba(89,88,88,.25); transition:all .2s;}
.home-topics-list li span { padding:0 38px;}
.home-topics-list li .topics-category { display:inline-block; width:12em; text-align:center; border:1px solid rgba(89,88,88,.25); background:#fff; padding:1px; font-weight:500;}
.home-topics-list li .topics-title { display:inline-block; vertical-align:top; width:calc(100% - 183px - 12em);}
.home-topics-list li > a { color:#595858; text-decoration:none;}
.home-topics-list li:hover > a { opacity:1; color:#333;}
.home-topics-list li:hover { background:#fff; transition:all .2s; cursor:pointer;}
.home-topics-list li.no-link:hover { background:transparent; cursor:default;}

.button-more { width:100%; text-align:center; margin:0 auto; margin-left:-2.22916666666%;}
.button-more a { display:block; width:308px; margin:50px auto 0; font-size:2rem; line-height:2.3; background:#595858; color:#fff; text-align:center; text-decoration:none; border-radius:2px;}
.button-more a span { position:relative; padding:0 0 0 1em; line-height:1;}
.button-more a span::before { position:absolute; content:""; top:50%; left:0; transform:translateY(-50%); border:6px solid transparent; border-left:10px solid #fff; margin-top:1px;}



@media screen and (max-width:1200px) {
  .home-topics-list { display:block; width:84% !important; margin:0 auto !important;}
  .home-topics-box > h2 span,
  .home-projects-box > h2 span { margin-bottom:30px;}
  .button-more { margin:0 !important;}
  .button-more a { width:180px; margin:30px auto 0; font-size:1.4rem;/* アルファベット */ line-height:36px;}
  .button-more a span { position:relative; padding:0 0 0 1.6em;}
  .button-more a span::before { position:absolute; content:""; top:50%; left:0; transform:translateY(-50%); border:6px solid transparent; border-left:8px solid #fff;}

}
@media screen and (max-width:1023px) {
  .home-topics-list { width:100% !important;}
  .home-topics-list li { padding:16px 0; margin:0 30px; font-size:1.4rem; line-height:1.5;}
  .home-topics-list li span { padding:0 !important;}
  .home-topics-list li .topics-date { margin-right:1em;}
  .home-topics-list li .topics-category { padding:3px 0;}
  .home-topics-list li .topics-title { display:block !important; width:100%; margin-top:1em;}
}

.home-text { position:relative; font-size:4.5rem; height:4em; margin-bottom:90px;}
.home-text-background { position:absolute; top:0; left:50%; transform: translateX(-50%); width:26em; height:1.6em; background:#555; opacity:.5;}
.home-text-background:first-of-type { top:10px; left:calc(50% - .3em);}
.home-text-background:nth-of-type(2) { top:calc(10px + 2em); left:calc(50% - .3em);}
.home-text-background:nth-of-type(3) { display:none;}
.home-text-textbox { position:absolute; top:0; left:50%; transform:translateX(-50%); width:26em; height:54px;}
.home-text-textbox p { text-align:center; color:#fff; line-height:2;}

@media screen and (max-width:1400px) {
  .home-text { font-size:3.6rem; height:6em;}
  .home-text-background { width:calc(19em + 1.9em); left:50% !important;}
  .home-text-background:first-of-type { width:calc(16em + 1.6em);}
  .home-text-background:nth-of-type(3) { display:block; top:calc(10px + 4em); width:calc(15em + 1.5em); left:calc(50% - .3em) !important;}
}
@media screen and (max-width:1023px) {
  .home-text { font-size:1.7rem; margin:100px auto;}
  .home-text-background:first-of-type { top:5px;}
  .home-text-background:nth-of-type(2) { top:calc(5px + 2em);}
  .home-text-background:nth-of-type(3) { top:calc(5px + 4em);}
}
@media screen and (max-width:320px) {
  .home-text { font-size:1.5rem;}
}

/* projects */
.accordion { width:100%; max-width:1662px; margin:auto auto auto 170px;}

.accordion-title { padding-left:60px;}
.accordion-title.pj01 { background:#e6b300;}
.accordion-title.pj02 { background:#a0be50;}
.accordion-title.pj03 { background:#70af5a;}
.accordion-title.pj04 { background:#68b6d3;}
.accordion-title.pj05 { background:#6c78b5;}
.accordion-title.pj06 { background:#9774ac;}
.accordion-title.pj07 { background:#d06c49;}
.accordion-title.pj08 { background:#dc950f;}
.accordion-title:hover { opacity:.8;}

.accordion-title > span:first-of-type { width:84.0199750312%; max-width:1346px; display:block; font-size:4.2rem; line-height:1; padding:34px 0 34px 84px; color:#fff; position:relative;}
.accordion-title > span:first-of-type::before { content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:64px; height:60px; background-size:contain;}
.accordion-title.pj01 > span:first-of-type::before { background:url("../images/home_projects_no01.svg") no-repeat;}
.accordion-title.pj02 > span:first-of-type::before { background:url("../images/home_projects_no02.svg") no-repeat;}
.accordion-title.pj03 > span:first-of-type::before { background:url("../images/home_projects_no03.svg") no-repeat;}
.accordion-title.pj04 > span:first-of-type::before { background:url("../images/home_projects_no04.svg") no-repeat;}
.accordion-title.pj05 > span:first-of-type::before { background:url("../images/home_projects_no05.svg") no-repeat;}
.accordion-title.pj06 > span:first-of-type::before { background:url("../images/home_projects_no06.svg") no-repeat;}
.accordion-title.pj07 > span:first-of-type::before { background:url("../images/home_projects_no07.svg") no-repeat;}
.accordion-title.pj08 > span:first-of-type::before { background:url("../images/home_projects_no08.svg") no-repeat;}
.accordion-title .accordion-icon::before,
.accordion-title .accordion-icon::after { background:#fff;}

/* アコーディオン中：背景色 20% */
.accordion-item { display:none; border:none; background:#fdf0cc /* #f8e9b6 */;}
.accordion-item.pj02 { background:#e9f2da;}
.accordion-item.pj03 { background:#d9efdd;}
.accordion-item.pj04 { background:#cff1f6;}
.accordion-item.pj05 { background:#e1e4f1;}
.accordion-item.pj06 { background:#ede3ef;}
.accordion-item.pj07 { background:#fbe2da;}
.accordion-item.pj08 { background:#fceacc;}







.accordion-item > ul { width:79.4223826714%; max-width:1320px; margin:46px auto 46px 86px; display:flex; justify-content:space-between; align-items:flex-start;}
.accordion-item > ul li:first-of-type { width:36.3636363636%; max-width:480px;}
.accordion-item > ul li:first-of-type p { font-size:1.8rem; margin-bottom:60px;}
.accordion-item > ul li:last-of-type { width:59.5454545454%; max-width:786px;}
@media screen and (max-width:1400px) {
  .accordion { margin:auto auto auto 88px;}
  .accordion-title > span:first-of-type { width:85%; display:block; font-size:3.6rem;}
  .accordion-title > span:first-of-type::before { width:58px; height:54px;}
  .accordion-item > ul { width:80%; margin:26px auto 26px 66px;}
  .accordion-item > ul li:first-of-type { width:45%;}
  .accordion-item > ul li:first-of-type p { font-size:1.8rem; margin-bottom:30px;}
  .accordion-item > ul li:last-of-type { width:50%;}
}
@media screen and (max-width:1023px) {
  .accordion { margin:0;}
  .accordion-title { padding-left:30px;}
  .accordion-title > span:first-of-type { width:90%; font-size:2rem; padding:17px 0 17px 42px;}
  .accordion-title > span:first-of-type::before { width:32px; height:30px;}
  .accordion-item > ul { width:85%; margin:23px auto; display:flex; flex-direction:column;}
  .accordion-item > ul li:first-of-type { width:100%; order:2; max-width:100% !important;}
  .accordion-item > ul li:first-of-type p { font-size:1.4rem; margin-bottom:30px;}
  .accordion-item > ul li:first-of-type a { margin-bottom:30px;}
  .accordion-item > ul li:last-of-type { width:100%; max-width:100% !important; order:1; margin-bottom:10px;}
}
@media screen and (max-width:425px) {
  .accordion-title { padding-left:0;}
  .accordion-title > span:first-of-type { width:82%; margin:0 auto 0 7%; padding:17px 0 17px 42px;}

}

.home-projects-button { display:block; padding:0 0 0 52px; font-size:1.8rem; line-height:50px; color:#595858; border:1px solid rgba(89,88,88,.75); border-radius:2px; text-decoration:none; position:relative; transition:all .3s; background:transparent;}
.home-projects-button::before { position:absolute; content:""; top:50%; left:26px; transform:translateY(-50%); border:6px solid transparent; border-left:10px solid #595858; margin-top:1px; transition:all .3s;}

.home-projects-button:hover::before { border-left:10px solid #fff; transition:all .3s;}
.accordion-item .home-projects-button:hover { color:#fff; transition:all .3s; opacity:1;}
.accordion-item.pj01 .home-projects-button:hover { background:#e6b300; border:1px solid #e6b300;}
.accordion-item.pj02 .home-projects-button:hover { background:#a0be50; border:1px solid #a0be50;}
.accordion-item.pj03 .home-projects-button:hover { background:#70af5a; border:1px solid #70af5a;}
.accordion-item.pj04 .home-projects-button:hover { background:#68b6d3; border:1px solid #68b6d3;}
.accordion-item.pj05 .home-projects-button:hover { background:#6c78b5; border:1px solid #6c78b5;}
.accordion-item.pj06 .home-projects-button:hover { background:#9774ac; border:1px solid #9774ac;}
.accordion-item.pj07 .home-projects-button:hover { background:#d06c49; border:1px solid #d06c49;}
.accordion-item.pj08 .home-projects-button:hover { background:#dc950f; border:1px solid #dc950f;}

@media screen and (max-width:1023px) {
  .home-projects-button { font-size:1.4rem; line-height:36px;}
  .home-projects-button::before { left:34px; border-left:9px solid #fff;}
  .accordion-item .home-projects-button { color:#fff;}
  .accordion-item.pj01 .home-projects-button { background:#e6b300; border:1px solid #e6b300;}
  .accordion-item.pj02 .home-projects-button { background:#a0be50; border:1px solid #a0be50;}
  .accordion-item.pj03 .home-projects-button { background:#70af5a; border:1px solid #70af5a;}
  .accordion-item.pj04 .home-projects-button { background:#68b6d3; border:1px solid #68b6d3;}
  .accordion-item.pj05 .home-projects-button { background:#6c78b5; border:1px solid #6c78b5;}
  .accordion-item.pj06 .home-projects-button { background:#9774ac; border:1px solid #9774ac;}
  .accordion-item.pj07 .home-projects-button { background:#d06c49; border:1px solid #d06c49;}
  .accordion-item.pj08 .home-projects-button { background:#dc950f; border:1px solid #dc950f;}
}

.home-buttons { width:100%; margin:0 auto; padding-bottom:calc(288px - 203px + 86px); position:relative; background:#fff; padding-top:86px; z-index:2;}
.home-buttons-bgcolor { background:#ddeceb; position:absolute; top:203px; left:0; width:100%; height:288px; z-index:3;}
.home-buttons-box { display:flex; justify-content:space-between; width:76.7467248908%; max-width:1406px; margin:0 auto;}
.home-buttons-box li { width:46.6571834992%; max-width:656px; text-align:center; position:relative; z-index:10;
  background-color:#f7f7f7;
  border:solid 50px;
	border-image-source:url("../images/home_button_background.svg");
	border-image-slice:50;
	border-image-width:1;
	border-image-outset:0;
	border-image-repeat:repeat;
}
.home-buttons-box > li p:first-of-type { text-align:center; font-size:3.2rem; margin-bottom:20px;}
.home-buttons-box > li p:first-of-type span { position:relative;}
.home-buttons-box > li p:first-of-type span::before { content:"●"; width:32px; height:32px; color:#aa8b6b; margin-left:-6px;}
.home-buttons-box > li p:first-of-type span::after { content:""; position:absolute; top:50%; left:10px; transform:translateY(-50%) rotate(45deg) skew(-10deg, -10deg); width:8px; height:8px; border:1px solid #fff; border-bottom:transparent; border-left:transparent; margin:2px 0 0 -6px;}
.home-buttons-box > li p:last-of-type { padding:0 20px 20px; font-size:1.6rem; flex-grow:1;}
.home-buttons-box > li a { position:absolute; top:0; left:0; display:block; width:100%; height:100%;}

.home-buttons-box li:hover { cursor:pointer; background:#fff; box-shadow:0 0 20px rgba(104,142,138,.4); transition:all .2s;}
/* ボタン1個 */
.home-buttons-bgcolor.btn-one { height:200px;}
.home-buttons-box.btn-one { display:block;}
.home-buttons-box.btn-one li { width:90%; max-width:1265px; margin:0 auto;}

@media screen and (max-width:1400px) {
  .home-buttons-bgcolor { height:360px;}
  .home-buttons-box li { text-align:left;}
  .home-buttons-bgcolor.btn-one { height:240px;}
}
@media screen and (max-width:1200px) {
  .home-buttons-bgcolor { height:430px;}
  .home-buttons-bgcolor.btn-one { height:430px;}
}

@media screen and (max-width:1023px) {
  .home-buttons { padding-bottom:3em; padding-top:2em;}
  .home-buttons-bgcolor,
  .home-buttons-bgcolor.btn-one { top:0; left:0; height:100%; padding-bottom:2em;}
  .home-buttons-box { flex-direction:column; width:86%;}
  .home-buttons-box li,
  .home-buttons-box.btn-one li { width:100%; margin:0 auto;}
  .home-buttons-box > li p:first-of-type { font-size:2.2rem; margin-bottom:20px;}
  .home-buttons-box > li p:first-of-type span::before { width:22px; height:22px; margin-left:-5px;}
  .home-buttons-box > li p:first-of-type span::after { left:5px; margin:1px 0 0 -6px;}
  .home-buttons-box > li p:last-of-type { padding:0; font-size:1.4rem;}
}

/* 250422追記：FEATUREの概要説明が長いとき ※研究助成テーマ等：終わったら隠す */
@media screen and (min-width: 1025px) and (max-width: 1144px) {
  .home-topics-box { padding: 49% 0 50px;}
}
@media screen and (min-width: 1145px) and (max-width: 1400px) {
  .home-topics-box { padding: 400px 0 50px;}
}
@media screen and (min-width: 1401px) and (max-width: 1440px) {
  .home-topics-box { padding: 520px 0 50px;}
}
@media screen and (min-width: 1441px) and (max-width: 1633px) {
  .home-topics-box { padding: 460px 0 50px;}
}
@media screen and (min-width: 1634px) and (max-width: 1679px) {
  .home-topics-box { padding: 410px 0 50px;}
}
@media screen and (min-width: 1680px) {
  .home-topics-box { padding-top: 380px;}
}