@charset "UTF-8";

:root {
    --bg-color01: #fff;
    --bg-color02: #e6e6e6;
}

.sec.sec01.under {
    padding-top: 30px;
}

@media screen and (min-width:800px) {
    footer {
        z-index: 1;
        position: relative;
    }
}

#breadcrumb {
    width: 100%;
}

@media screen and (min-width:800px) {
    #breadcrumb:not(.under) {
        background-color: var(--bg-color01);
    }
}

.mainBox {
    width: 100%;
    background-image: linear-gradient(91deg, #0b1523, #28354c);
    padding: 40px 4%;
    position:relative;
    margin-top: -28px;
}

.mainBox::after{
    content:"";
    width: 96%;
    position:absolute;
    display:block;
    height: 200px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221867%22%20height%3D%22238%22%20viewBox%3D%220%200%201867%20238%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M55.542%203.17383V234.229H0V3.17383H55.542ZM287.708%203.17383V234.229H232.166L150.439%2090.4541V234.229H94.7388V3.17383H150.439L232.166%20146.948V3.17383H287.708ZM430.054%203.17383V234.229H374.353V3.17383H430.054ZM499.561%203.17383V46.1792H306.433V3.17383H499.561ZM682.214%20191.382V234.229H559.07V191.382H682.214ZM578.906%203.17383V234.229H523.206V3.17383H578.906ZM666.345%2094.8975V136.316H559.07V94.8975H666.345ZM682.69%203.17383V46.1792H559.07V3.17383H682.69ZM705.066%203.17383H795.996C813.77%203.17383%20829.215%205.81868%20842.334%2011.1084C855.452%2016.3981%20865.556%2024.2269%20872.644%2034.5947C879.838%2044.9626%20883.435%2057.7637%20883.435%2072.998C883.435%2086.2223%20881.372%2097.2778%20877.246%20106.165C873.12%20115.051%20867.354%20122.404%20859.949%20128.223C852.649%20133.936%20844.132%20138.643%20834.399%20142.346L816.15%20152.661H739.819L739.502%20109.656H795.996C803.084%20109.656%20808.956%20108.386%20813.611%20105.847C818.266%20103.308%20821.757%2099.7111%20824.084%2095.0562C826.518%2090.2954%20827.734%2084.6354%20827.734%2078.0762C827.734%2071.4111%20826.518%2065.6982%20824.084%2060.9375C821.651%2056.1768%20818.054%2052.5269%20813.293%2049.9878C808.639%2047.4487%20802.873%2046.1792%20795.996%2046.1792H760.767V234.229H705.066V3.17383ZM831.543%20234.229L780.444%20132.031L839.478%20131.714L891.211%20231.848V234.229H831.543ZM1001.34%20179.797L1049.43%203.17383H1111.79L1033.87%20234.229H993.567L1001.34%20179.797ZM957.703%203.17383L1005.79%20179.797L1013.88%20234.229H973.096L895.654%203.17383H957.703ZM1187.96%203.17383V234.229H1132.42V3.17383H1187.96ZM1386.17%20191.382V234.229H1263.02V191.382H1386.17ZM1282.86%203.17383V234.229H1227.16V3.17383H1282.86ZM1370.3%2094.8975V136.316H1263.02V94.8975H1370.3ZM1386.65%203.17383V46.1792H1263.02V3.17383H1386.65ZM1462.34%20213.281L1508.36%203.17383H1535.82L1550.73%2021.106L1501.7%20234.229H1471.39L1462.34%20213.281ZM1450.12%203.17383L1489%20214.868L1479%20234.229H1443.93L1394.9%203.17383H1450.12ZM1575.96%20213.757L1614.53%203.17383H1669.59L1620.56%20234.229H1585.64L1575.96%20213.757ZM1555.65%203.17383L1602.78%20214.551L1593.26%20234.229H1562.95L1512.81%2020.7886L1528.36%203.17383H1555.65ZM1810.51%20172.815C1810.51%20169.218%201809.98%20165.991%201808.92%20163.135C1807.87%20160.173%201805.91%20157.422%201803.05%20154.883C1800.2%20152.344%201796.07%20149.805%201790.67%20147.266C1785.38%20144.621%201778.4%20141.87%201769.73%20139.014C1759.57%20135.628%201749.78%20131.82%201740.37%20127.588C1730.95%20123.25%201722.54%20118.225%201715.14%20112.512C1707.73%20106.694%201701.86%2099.9227%201697.52%2092.1997C1693.18%2084.3709%201691.02%2075.2726%201691.02%2064.9048C1691.02%2054.9601%201693.24%2046.0205%201697.68%2038.0859C1702.12%2030.0456%201708.31%2023.2218%201716.25%2017.6147C1724.29%2011.9019%201733.7%207.56429%201744.49%204.60205C1755.29%201.53402%201767.08%200%201779.88%200C1796.81%200%201811.73%202.96224%201824.63%208.88672C1837.65%2014.7054%201847.8%2023.0103%201855.1%2033.8013C1862.51%2044.4865%201866.21%2057.1289%201866.21%2071.7285H1810.83C1810.83%2065.9098%201809.61%2060.7788%201807.18%2056.3354C1804.85%2051.8921%201801.31%2048.4009%201796.55%2045.8618C1791.78%2043.3228%201785.81%2042.0532%201778.61%2042.0532C1771.63%2042.0532%201765.76%2043.1112%201761%2045.2271C1756.24%2047.3429%201752.64%2050.1994%201750.21%2053.7964C1747.77%2057.2876%201746.56%2061.1491%201746.56%2065.3809C1746.56%2068.8721%201747.51%2072.0459%201749.41%2074.9023C1751.42%2077.653%201754.23%2080.245%201757.82%2082.6782C1761.53%2085.1115%201765.97%2087.439%201771.15%2089.6606C1776.44%2091.8823%201782.37%2094.0511%201788.93%2096.167C1801.2%20100.081%201812.1%20104.472%201821.62%20109.338C1831.25%20114.099%201839.34%20119.548%201845.9%20125.684C1852.56%20131.714%201857.59%20138.59%201860.97%20146.313C1864.47%20154.036%201866.21%20162.764%201866.21%20172.498C1866.21%20182.865%201864.2%20192.069%201860.18%20200.11C1856.16%20208.15%201850.39%20214.974%201842.88%20220.581C1835.37%20226.082%201826.38%20230.261%201815.91%20233.118C1805.43%20235.974%201793.74%20237.402%201780.83%20237.402C1768.99%20237.402%201757.3%20235.921%201745.76%20232.959C1734.34%20229.891%201723.97%20225.236%201714.66%20218.994C1705.35%20212.646%201697.89%20204.553%201692.29%20194.714C1686.78%20184.77%201684.03%20172.974%201684.03%20159.326H1739.89C1739.89%20166.097%201740.79%20171.81%201742.59%20176.465C1744.39%20181.12%201747.03%20184.875%201750.52%20187.732C1754.02%20190.483%201758.3%20192.493%201763.38%20193.762C1768.46%20194.926%201774.28%20195.508%201780.83%20195.508C1787.92%20195.508%201793.64%20194.503%201797.97%20192.493C1802.31%20190.377%201805.49%20187.626%201807.5%20184.241C1809.51%20180.75%201810.51%20176.941%201810.51%20172.815Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.04%22%2F%3E%3C%2Fsvg%3E');
    background-size:contain;
    background-repeat: no-repeat;
    background-position:left 4% bottom 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.mainBox>.wap {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
}

.mainBox>.wap figure img {
    vertical-align: bottom;
}
    .mainBox>.wap figure {
        border-radius: 8px;
        overflow: hidden;
    }

.nameBox {
    max-width: calc(1080px + 8%);
    /* padding-right: 40px; */
}


.nameBox .int{
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-size: 74px;
        letter-spacing: 0;
        display: block;
        line-height: 1.0;
        color: #fff;
    }
  .nameBox .vol{
          font-family: "Roboto", sans-serif;
          font-weight: 700;
          font-size: 100px;
          letter-spacing: 0;
          display: block;
          line-height: 1.0;
          color: #fff;
          margin-bottom: 40px;
    }


.nameBox dl {
    padding: 25px 20px 20px 20px;
    background-color: rgb(255 255 255 / 86%);
    z-index: 1;
    position: relative;
    display: inline-block;
    min-width: 370px;
}

.nameBox dl {
    color: #111;
}

.nameBox dl dt.job {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
}

.nameBox dl dd.name {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.6;
}

.nameBox dl dd.name span {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    font-size: 16px;
    display: block;
    line-height: 1.0;
    color: #666;
}

@media screen and (min-width:800px) {
    .mainBox>.wap {
        display: flex;
        justify-content: space-between;
    }

    .mainBox>.wap .nameBox {
        order: 1;
        width: 50%;
        padding-right: 30px;
    }

    .mainBox>.wap figure {
        order: 2;
        width: 50%;
        border-radius: 8px;
        z-index: 1;
        max-width: 540px;
    }

    

    .scrollbar-text {
        display: inline-block;
        position: absolute;
        bottom: 0;
        padding: 10px 10px 80px;
        color: #fff;
        font-size: 14px;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        writing-mode: vertical-lr;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    .scrollbar {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1px;
        z-index: 2;
    }

    .scrollbar::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1px;
        height: 70px;
        background: #fff;
    }

    .scrollbar::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        animation: circlemove 3s ease-in-out infinite,
            cirlemovehide 3s ease-out infinite;
    }

    @keyframes circlemove {
        0% {
            bottom: 65px;
        }

        100% {
            bottom: 0px;
        }
    }

    @keyframes cirlemovehide {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        80% {
            opacity: 0.9;
        }

        100% {
            opacity: 0;
        }
    }

    .nameBox {
        margin: 0px 0 0 0;
    }
}

@media screen and (max-width:1080px) {
.nameBox .int{
        font-size: 7vw;
    }
  .nameBox .vol{
      font-size: 10vw;
  }

}
@media screen and (max-width:400px) {
    .nameBox .int{
        font-size: 28px;
    }

     .nameBox .vol{
         font-size: 40px;
     }
}
@media screen and (max-width:400px) {
.nameBox dl {
    min-width: auto;
    max-width:400px;
    width: 100%;
}
}

@media screen and (max-width:799px) {
    .mainBox {
        padding: 42px 4%;
        background-image: none;
        padding-bottom: 40px;
        background-color: #1a2639;
    }

    .mainBox figure {
    }

    .mainBox figure img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nameBox{
            margin-top: -100px;            
            }

    .nameBox .intBox{
        padding: 20px 30px 0 0;
        border-radius: 0 20px 0 0;
        background-color: #1a2639;
        display:inline-block;
        margin-right: 100%;
    }

     .nameBox .vol{
         margin-bottom:20px;
     }

    .nameBox dl dt.job {
        font-size: 14px;
    }

    .nameBox dl dd.name {
        font-size: 26px;
    }

    .nameBox dl dd.name span {
        font-size: 12px;
    }

    .scrollbar-text,
    .scrollbar {
        display: none;
    }
}

#container>article>section:first-of-type {
    background-color: var(--bg-color01);
}

#container>article>section:first-of-type .times {
    font-size: 12px;
    width: 1080px;
    margin: 0 auto;
}

#container>article>section:first-of-type .times time {
    font-weight: 700;
}

#container>article>section h1 {
    padding: 5px 0 10px 0;
    display: block;
    font-weight: 900;
    line-height: 1.4;
    max-width: 1080px;
    margin: 0 auto 60px;
    border-bottom: 3px solid #999;
}

.contentBox {
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
}

.contentBox h2,
.contentBox h3,
.contentBox h4 {
    font-weight: 700;
}

.contentBox h2 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #111;
}

.contentBox h3 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: rgba(0, 130, 150, 0.9);
    padding-left: 25px;
    position: relative;
}

.contentBox h3::before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: rgba(0, 130, 150, 0.9);
    position: absolute;
    left: 0;
    top: 16px;
}

.contentBox {
    color: #333;
}

.contentBox>p {
    margin-bottom: 15px;
}

.contentBox p {
    font-size: 16px;
    line-height: 1.8;
}

.contentBox b {
    font-weight: 700;
}

.contentBox>figure {
    margin: 40px auto;
}

.contentBox figure {
    max-width: 512px;
    width: 100%;
    height: auto;
}

.contentBox figure img {
    max-width: 512px;
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.contentBox figure figcaption {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

#container>article>section:first-of-type {
    padding: 60px 4% 30px 4%;
    background-color: var(--bg-color01);
}

@media screen and (max-width:799px) {
    #container>article>section h1 {
        margin-bottom: 40px;
    }

    .contentBox h2 {
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 18px;
    }

    .contentBox h3 {
        font-size: 16px;
        margin-top: 15px;
        margin-bottom: 5px;
    }

    .contentBox p {
        font-size: 14px;
    }

    .contentBox h3::before {}

    .contentBox>figure {
        margin: 20px auto;
    }

    #container>article>section:first-of-type {
        padding: 40px 4% 30px 4%;
    }

}




#profile {
    padding: 30px 4% 80px 4%;
    background-color: var(--bg-color01);
}

#profile h2 {
    font-family: "Roboto", sans-serif;
    max-width: 900px;
    margin: 0 auto;
    color: #9D2040;
    position: relative;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 0.05rem;
    padding: 0 40px;
}

#profile .profileBox {
    background-color: rgb(211 211 211 / 80%);
    padding: 40px;
    max-width: 840px;
    margin: -30px auto 40px auto;
    color: #333;
}


#profile .profileBox figure {
    width: 120px;
}

#profile .profileBox figure img {
    width: 120px;
    height: 170px;
    object-fit: cover;
}

#profile .profileBox>div dl dt {
    color: #111;
    line-height: 1.6;
    font-size: 14px;
}

#profile .profileBox>div dd {
    font-size: 24px;
    font-weight: 900;
    color: #111;
    line-height: 1.3;
    margin-bottom: 10px;
}

#profile .profileBox>div>p {
    line-height: 1.8;
}

#profile .profileBox>div>p:not(:last-of-type) {
    margin-bottom: 8px;
}

#profile .profileBox b {
    font-weight: 700;
}

@media screen and (min-width:800px) {
    #profile .profileBox {
        display: flex;
        gap: 20px;
    }

    #profile .profileBox>div {
        width: calc(100% - 140px);
        font-size: 14px;
    }
}

@media screen and (max-width:799px) {
    #profile .profileBox figure {
        margin: 0 auto 20px;
    }

    #profile .profileBox {
        padding: 40px 4%;
    }

    #profile h2 {
        padding: 0 4%;
    }
}

#profile .profileBox>div>p a {
    color: rgb(0, 113, 188);
    text-decoration: underline;
}

#profile .profileBox>div>p a:hover {
    text-decoration: none;
}

#profile .profileBox>div dd span {
    font-size: 13px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.05rem;
    line-height: 1.3;
}

#profile .profileBox .ico-map::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=utf8,%3C!--%20Generator%3A%20Adobe%20Illustrator%2015.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22512px%22%20height%3D%22512px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%2032px%3B%20height%3A%2032px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M256%2C0C159.969%2C0%2C82.125%2C77.859%2C82.125%2C173.906C82.125%2C269.938%2C236.797%2C512%2C256%2C512%20c19.219%2C0%2C173.875-242.063%2C173.875-338.094C429.875%2C77.859%2C352.031%2C0%2C256%2C0z%20M256%2C240.406c-36.719%2C0-66.5-29.781-66.5-66.5%20c0-36.75%2C29.781-66.531%2C66.5-66.531s66.516%2C29.781%2C66.516%2C66.531C322.516%2C210.625%2C292.719%2C240.406%2C256%2C240.406z%22%20style%3D%22fill%3A%20rgb(153%2C%20153%2C%20153)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-bottom: -2px;
}



.snsList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.snsList a {
    display: block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
    border-radius: 5px;
}

.snsList a:hover {
    opacity: 0.5;
}

.snsList a.facebook {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M20%200a4%204%200%200%201%204%204v16a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h16zm-4%207.28V4.5h-2.29c-2.1%200-3.42%201.6-3.42%203.89v1.67H8v2.77h2.29v6.67h2.85v-6.67h2.29l.57-2.77h-2.86V8.94c0-1.1.58-1.66%201.72-1.66H16z%22%2F%3E%3C%2Fsvg%3E');
}

.snsList a.instagram {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M20%200a4%204%200%200%201%204%204v16a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h16zm-4.89%204.5H8.9C6.33%204.5%204.6%206.15%204.5%208.66V15.09c0%201.3.42%202.41%201.27%203.23a4.34%204.34%200%200%200%202.88%201.17l.27.01h6.16c1.3%200%202.4-.42%203.18-1.18a4.25%204.25%200%200%200%201.23-2.95l.01-.26V8.9c0-1.28-.42-2.36-1.21-3.15a4.24%204.24%200%200%200-2.92-1.23l-.26-.01zm-6.2%201.4h6.24c.9%200%201.66.26%202.2.8.47.5.77%201.18.81%201.97V15.1c0%20.94-.32%201.7-.87%202.21-.5.47-1.17.74-1.98.78H8.92c-.91%200-1.67-.26-2.21-.78-.5-.5-.77-1.17-.81-2V8.88c0-.9.26-1.66.8-2.2a2.98%202.98%200%200%201%202-.78h6.45-6.23zM12%208.1a3.88%203.88%200%200%200%200%207.74%203.88%203.88%200%200%200%200-7.74zm0%201.39a2.5%202.5%200%200%201%202.48%202.48A2.5%202.5%200%200%201%2012%2014.45a2.5%202.5%200%200%201-2.48-2.48A2.5%202.5%200%200%201%2012%209.49zm4.02-2.36a.88.88%200%201%200%200%201.76.88.88%200%200%200%200-1.76z%22%2F%3E%3C%2Fsvg%3E');
}

.snsList a.youtube {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M20%200a4%204%200%200%201%204%204v16a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h16zm-7.7%207h-.6l-1.1.01c-1.48.03-3.7.1-4.46.29-.65.16-1.15.65-1.33%201.26-.18.64-.25%201.7-.29%202.46l-.02.82v.75c.03.76.1%202.09.31%202.85.18.61.68%201.1%201.33%201.26.74.19%202.87.26%204.34.29l1.41.01h1.16c1.45-.03%204-.09%204.81-.3a1.84%201.84%200%200%200%201.33-1.26c.2-.75.28-2.05.3-2.82v-.93c0-.67-.06-2.26-.3-3.13a1.84%201.84%200%200%200-1.33-1.26%2025.9%2025.9%200%200%200-3.88-.28L12.3%207zM10.46%209.9L14.39%2012l-3.92%202.11V9.89z%22%2F%3E%3C%2Fsvg%3E');
}

.snsList a.tumblr {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M20%200a4%204%200%200%201%204%204v16a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h16zm-7.38%205H10.6c-.1.72-.26%201.32-.5%201.78-.25.47-.57.87-.97%201.2-.35.3-.9.53-1.4.7l-.22.07v1.99h1.95v4.9c0%20.65.07%201.14.2%201.47.14.34.39.66.74.96a4.49%204.49%200%200%200%202.83.93%207.28%207.28%200%200%200%202.98-.63l.3-.13v-2.21c-.72.46-1.44.69-2.17.69-.4%200-.76-.1-1.08-.28a1.3%201.3%200%200%201-.55-.6%203.14%203.14%200%200%201-.08-.92v-4.18h3.32v-2.5h-3.32V5z%22%2F%3E%3C%2Fsvg%3E');
}

.snsList a.linkedin {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M20%200a4%204%200%200%201%204%204v16a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h16zM8.95%209.4H6.16v8.1h2.8V9.4zm6.84-.19c-1.32%200-2%20.63-2.38%201.16l-.13.18V9.4h-2.79l.01.49V17.5h2.78v-4.52a1.52%201.52%200%200%201%201.52-1.64c.96%200%201.37.66%201.41%201.66v4.5H19v-4.64c0-2.49-1.37-3.65-3.2-3.65zM7.58%205.5C6.62%205.5%206%206.1%206%206.9c0%20.73.54%201.32%201.38%201.4h.18c.97%200%201.57-.62%201.57-1.4-.01-.8-.6-1.4-1.55-1.4z%22%2F%3E%3C%2Fsvg%3E');
}

.snsList a.tiktok {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M20%200c2.2091%200%204%201.7909%204%204v16c0%202.2091-1.7909%204-4%204H4c-2.2091%200-4-1.7909-4-4V4c0-2.2091%201.7909-4%204-4Zm-4.8377%204h-2.7508v10.9209a2.3324%202.3324%200%200%201-3.0455%202.2209%202.3324%202.3324%200%200%201%201.4129-4.4459V9.8862a5.0812%205.0812%200%200%200-5.7481%205.5912%205.0805%205.0805%200%200%200%203.802%204.3668%205.0818%205.0818%200%200%200%205.423-2.0286c.5899-.8501.9062-1.86.9065-2.8947V9.3345A6.5666%206.5666%200%200%200%2019%2010.5614V7.83a3.796%203.796%200%200%201-2.0944-.6295%203.8188%203.8188%200%200%201-1.6852-2.5075%203.7856%203.7856%200%200%201-.058-.693Z%22%20%2F%3E%3C%2Fsvg%3E');
}

.snsList a.tw {
    background-color: #666;
    border-radius: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2228px%22%20height%3D%2228px%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20color%3D%22%23d3d3d3%22%3E%3Cpath%20d%3D%22M16.8198%2020.7684L3.75317%203.96836C3.44664%203.57425%203.72749%203%204.22678%203H6.70655C6.8917%203%207.06649%203.08548%207.18016%203.23164L20.2468%2020.0316C20.5534%2020.4258%2020.2725%2021%2019.7732%2021H17.2935C17.1083%2021%2016.9335%2020.9145%2016.8198%2020.7684Z%22%20stroke%3D%22%23d3d3d3%22%20stroke-width%3D%221.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20%203L4%2021%22%20stroke%3D%22%23d3d3d3%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    background-size: 20px
}

#Other {
    padding: 80px 4%;
    background-color: var(--bg-color02);
}

#Other .title-wrap {
    max-width: 1080px;
    margin: 0 auto 40px;
}

#Other .InterviewsList {
    max-width: 910px;
    margin: 0 auto 40px;
}

@media screen and (min-width:980px) {
    #Other .dots-box {
        display: none;
    }
}

@media screen and (max-width:980px) {
    #Other .slick-list.draggable {
        padding: 0 !important;
    }

    #Other .dots-box {
        margin: 0 auto 40px;
    }

    #Other .wap {
        margin: 0 calc(50% - 50vw);
        width: 100vw;
    }

    #Other .dots-wrap {
        display: flex;
        justify-content: center;
    }

    #Other .dots-wrap li {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background-color: #999;
        border-radius: 50%;
        cursor: pointer;
    }

    #Other .dots-wrap li:hover,
    #Other .dots-wrap li.slick-active {
        background-color: #aa003e;
    }

    #Other .dots-wrap li button {
        display: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        padding: 0;
        border: none;
        background-color: transparent;
    }
}

#Other .title-wrap .h-line:before {
    left: 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.InterviewsList a {
    width: 260px !important;
    display: inline-block;
    margin: 0 20px;
    vertical-align: top;
}


.InterviewsList a figure {
    display: inline-block;
    overflow: hidden;
    width: 260px;
    height: 350px;
    margin-bottom: 8px;
    position: relative;
}

.InterviewsList a figure img {
    display: block;
    transition-duration: .5s;
    width: 260px;
    height: 350px;
    object-fit: cover;
}

.InterviewsList a:hover figure img {
    transform: scale(1.2);
}

.InterviewsList a figure figcaption {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    display: flex;
    flex-flow: column;
    height: 350px;
    width: 100%;
    text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.75);
}

.InterviewsList a figure::before {
    content: "";
    display: block;
    width: 100%;
    height: 350px;
    position: absolute;
    background-color: #666;
    opacity: 0.3;
    left: 0;
    top: 0;
}

.InterviewsList a:hover figure::before {
    opacity: 0;
}

.InterviewsList a figure figcaption span {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    line-height: 1;
    font-size: 38px;
    display: block;
    margin-bottom: auto;
    opacity: 0.6;
    letter-spacing: 0;
    z-index: 1;
}

.InterviewsList a figure figcaption span::before {
    content: "#";
    font-size: 38px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    z-index: 1;
}

.InterviewsList a figure figcaption .job {
    font-size: 14px;
    font-weight: 700;
    z-index: 1;

}

.InterviewsList a figure figcaption .Name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    z-index: 1;

}

.InterviewsList a figure figcaption .Name::after {
    content: attr(eName);
    display: block;
    font-size: 12px;
    margin-top: 8px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    z-index: 1;
}

.InterviewsList a time {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    line-height: 1;
    color: rgb(102, 102, 102);
    margin-bottom: 8px;
}

.InterviewsList a h3 {
    color: rgb(0, 0, 0);
    line-height: 1.8;
    font-weight: 700;
}

#Other .slick-list.draggable {
    padding: 0 !important;
}

#Other .dots-wrap {
    display: flex;
    justify-content: center;
}

#Other .dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #999;
    border-radius: 50%;
    cursor: pointer;
}

#Other .dots-wrap li:hover,
#Other .dots-wrap li.slick-active {
    background-color: #aa003e;
}

#Other .dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.interview-date {
    margin: 40px auto;
    max-width: 1080px;
    color: #666;
}

/* 一覧用 */
.InterviewsList.under {
    margin: 0 auto;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
}

.InterviewsList.under a {
    align-items: flex-start;
    margin: 0;
}

.InterviewsList.under a:hover {
    text-decoration: none !important;
}


.not404 {
    padding: 80px 4%;
    text-align: center;
}

.not404 .title-wrap {
    margin-bottom: 20px;
}

.mb40 {
    margin-bottom: 40px;
}

.text12 {
    font-size: 12px;
}

.text14 {
    font-size: 14px;
}

.contentBox .textB {
    font-weight: 700;
}