@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

.en{ 
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.15em;
    line-height: 1;
}


/*------------------------------------------------------------------------------------
          
COMMON
									
------------------------------------------------------------------------------------*/

* { box-sizing: border-box; }
html { font-size: 62.5%; /*10px*/ }

body {
	width: 100%;
	height: auto;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.05rem;
	color: #000;
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    border: 10px solid #fff;
}

::selection {
	background: rgb(201 0 52 / 10%);
	color: #9c9c9c;
}

::-moz-selection {
	background: rgb(201 0 52 / 10%);
	color: #9c9c9c;
}

h1,h2,h3,h4,h5,h6 { font-weight: 500; margin: 0; padding: 0; }

a { transition: all 300ms ease; }
a, a:focus, a:active { color: inherit; text-decoration: none;}
li { list-style: none; }
p { line-height: 1.8; }
a.disable { pointer-events: none;}

img { display: block; width: 100%; -webkit-backface-visibility: hidden; pointer-events: none; }
figure img { display: block; }
picture { display: block; line-height: 0; }
img.fit { object-fit: cover;}

#container { width: 100%; margin: 0 auto; background-color: #fff; overflow: hidden; }
main { display:block; width: 100%; padding-bottom: 100px;}
article { width: 100%; position:relative; z-index:10;}

/* micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ = */
.cf::before,.cf::after{content: "";display: table}
.cf::after{clear: both}
.cf{zoom:1}

.pcOnly { display: block; }
.spOnly { display: none; }
.tabTo { display: block; }
.tabFrom { display: none; }
.tabNone { display: block; }


.bk-blue { background-color: #0117c4;}
.bk-ltblue { background-color: #f3f4fc;}

.bk-green { background-color: #6cfd00;}
.bk-dpgreen { background-color: #00a63c;}
.bk-ltgreen { background-color: #eaffd6;}
.bk-ltgreen02 { background-color: #d8fad8;}
.bk-ltgreen03 { background-color: #e3f7e9;}
.bk-ltgreen04 { background-color: #e1f0ec;}

.bk-red { background-color: #ff0000;}
.bk-ltred { background-color: #ffecec;}
.bk-dpred { background-color: #e30000;}

.bk-gray { background-color: #f0f0f0;}
.bk-white { background-color: #fff;}

.haveMag { margin-bottom: 150px;}

.mt-0 { margin-top: 0 !important;}
.mb-0 { margin-bottom: 0 !important;}
.pb-0 { padding-bottom: 0 !important;}
.pt-0 { padding-top: 0 !important;}

/* FONT */
.bold { font-weight: 700;}
.fc-wt { color: #fff;}
.fc-bk { color: #000 !important;}
.fc-blue { color: #0117c4;}
.fc-red { color: #e30000;}

.inlineBlock{ display: inline-block;}
.justify { text-align: justify;}
.jap .text { text-align: justify; letter-spacing: .05rem;}
.jap .center { text-align: center !important;}
.jap .tabLeft { text-align: center ;}

.txsmall { font-size: 80%;}

.flgr_1 { flex-grow: 1;}

.opa4 { opacity: .4;}

.deco {
    position: absolute;
    top: 0;
    left: 0;
}

a.linkLine { word-break: break-all;}
a.linkLine:hover { text-decoration: underline;}

/* WIDTH */
.max1500 {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max1300 {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max1200 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max1180 {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max1080 {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max1000 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max900 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.max770 {
    max-width: 770px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

/* HEAD */
.head01 {
    font-size: 2.8rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3rem;
    line-height: 1.3;
    margin-bottom: 50px;
}
.head01 .en {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 10px;
}

.head02.en {
    font-size: 1.5rem;
    letter-spacing: .5rem;
    padding-bottom: 15px;
    margin-bottom: 35px;
    display: inline-block;
    position: relative;
}
.head02.en:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
}

.head03 {
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 50px;
}
.head03 .small {
    font-size: 2.4rem;
    letter-spacing: .05rem;
}

.head04 {
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px;
    padding: 18px 20px;
    border: 1px solid;
    border-radius: 30px;
}

.head05 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
}

.head06 {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.head07 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 30px;
}

.head08 {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 50px;
}

.head09 {
    font-size: 3.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3rem;
    line-height: 1.3;
    margin-bottom: 80px;
}
.head09 .en {
    font-size: 1.3rem;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    position: relative;
}
.head09 .en:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 15px;
    height: 1px;
}

.head10 {
    font-size: 2.8rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3rem;
    line-height: 1.3;
    margin-bottom: 40px;
    position: relative;
}
.head10 .en {
    font-size: 1.3rem;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    position: relative;
}
.head10 .en:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 15px;
    height: 1px;
}

.head11 {
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3rem;
    line-height: 1.3;
    margin-bottom: 40px;
}

/* READ */
.lead01 {
    margin-bottom: 100px;
}
.lead02 {
    margin-bottom: 70px;
}

/* TABLE */
/* table01 */
.table01 > dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(1 23 196 / 20%);
}

.table01 > dl:last-child {
    border-bottom: 1px solid rgb(1 23 196 / 20%);
}

.table01 > dl > dt {
    font-weight: 600;
    line-height: 2;
    text-align: center;
    line-height: 1.5;
    width: 18%;
    margin: 20px 0;
    padding: 12px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table01 > dl > dd {
    width: 82%;
    padding: 12px 35px 12px 50px;
    margin: 20px 0;
    line-height: 1.8;
    text-align: justify;
    letter-spacing: .05rem;
    border-left: 1px solid rgb(1 23 196 / 20%);
}

.table01 > dl > dd .tableInner:nth-child(n+2) {
    margin-top: 35px;
}

.table01 > dl > dd .title {
    color: #fff;
    border-radius: 15px;
    padding: 0 30px;
    margin-bottom: 5px;
    display: table;
}

.table01 > dl > dd .note {
    font-size: 1.2rem;
}

.table01 > dl > dd .copy {
    font-weight: 700;
    margin-bottom: 5px;
}

/* table02 */
.table02 > dl:nth-child(n+2) {
    margin-top: 30px;
}

.table02 > dl > dt {
    margin-bottom: 10px;
}

.table02 > dl > dd {
    line-height: 1.5;
}

.red .table01 > dl,
.red .table01 > dl:last-child,
.red .table01 > dl > dd {
    border-color: rgb(227 0 0 / 20%);
}

/* LIST */
ul.circle {
    padding-left: 2rem;
}

ul.circle li {
    line-height: 1.5;
    position: relative;
}

ul.circle li:nth-child(n+2) {
    margin-top: 5px;
}

ul.circle li:before {
    position: absolute;
    content: "●";
    top: 0;
    left: -20px;
}

ul.circle li .note {
    font-size: 1.2rem;
}

/* 上下曲線カテゴリ共通 */
.catBox {
    padding: 80px 0 130px;
    position: relative;
}

.lower .catBox.colorBox {
    padding: 100px 0;
}

.lower .catBox:not(.colorBox) {
    padding: 150px 0;
}

.catBox.colorBox:before,
.catBox.colorBox:after {
    content: "";
    position: absolute;
    top: -6.9vw;
    left: 0;
    background:url(../images/common/blue_bg_tb.png) top center / cover no-repeat;
    width: 100%;
    height: 7vw;
}

.catBox.colorBox:after {
    top: auto;
    bottom: -6.9vw;
    transform: scaleY(-1);
}

.catBox:not(.colorBox) {
    padding-top: 120px;
}

.catBox.colorBox.bk-ltblue:before,
.catBox.colorBox.bk-ltblue:after {
    background:url(../images/common/ltblue_bg_tb.png) top center / cover no-repeat;
}

.catBox.colorBox.bk-dpgreen:before,
.catBox.colorBox.bk-dpgreen:after {
    background:url(../images/common/green_bg_tb.png) top center / cover no-repeat;
}

.catBox.colorBox.bk-ltgreen:before,
.catBox.colorBox.bk-ltgreen:after {
    background:url(../images/common/ltgreen_bg_tb.png) top center / cover no-repeat;
}

.catBox.colorBox.bk-red:before,
.catBox.colorBox.bk-red:after {
    background:url(../images/common/red_bg_tb.png) top center / cover no-repeat;
}

.catBox.colorBox.bk-ltred:before,
.catBox.colorBox.bk-ltred:after {
    background:url(../images/common/ltred_bg_tb.png) top center / cover no-repeat;
}

.catInner {
    position: relative;
}

.catInner:before,
.catInner:after {
    content: "";
    position: absolute;
    bottom: min(-300px, -20vw);
    width: min(520px, 60%);
    height: 430px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.catInner:before {
    background-position: bottom left;
    left: 0;
}

.catInner:after {
    background-position: bottom right;
    right: 0;
}

/* 下層共通 */
.lower #mainTitle {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    /*padding-top: 530px;*/
    padding-top: max(530px, 36%);
    margin-bottom: 80px;
    position: relative;
}

.lower.blue #mainTitle {
    background-image: url(../images/common/main_img_blue.png);
}

.lower.red #mainTitle {
    background-image: url(../images/common/main_img_red.png);
}

.lower.green #mainTitle {
    background-image: url(../images/common/main_img_green.png);
}

.lower #mainTitle:before,
.lower #mainTitle:after,
.crosstalk #mv:before,
.crosstalk #mv:after,
.crosstalk .chapter .bgBox:before,
.crosstalk .chapter .bgBox:after {
    content: "";
    position: absolute;
    /*bottom: min(-110px, -7.33vw);*/
    bottom: -110px;
    width: 520px;
    height: 430px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.crosstalk #mv:before,
.crosstalk #mv:after {
    bottom: -145px;
}

.crosstalk .chapter .bgBox:before,
.crosstalk .chapter .bgBox:after {
    bottom: -150px;
}

.lower #mainTitle:before,
.crosstalk #mv:before,
.crosstalk .chapter .bgBox:before {
    background-position: bottom left;
    left: 0;
}

.lower #mainTitle:after,
.crosstalk #mv:after,
.crosstalk .chapter .bgBox:after {
    background-position: bottom right;
    right: 0;
}

.lower.blue #mainTitle:before,
.crosstalk.blue #mv:before,
.crosstalk.blue .chapter .bgBox:before {
    background-image:url(../images/common/blue_bg_left.png);
}

.lower.blue #mainTitle:after,
.crosstalk.blue #mv:after,
.crosstalk.blue .chapter .bgBox:after {
    background-image:url(../images/common/blue_bg_right.png);
}

.lower.red #mainTitle:before {
    background-image:url(../images/common/red_bg_left.png);
}

.lower.red #mainTitle:after {
    background-image:url(../images/common/red_bg_right.png);
}

.lower.green #mainTitle:before {
    background-image:url(../images/common/green_bg_left.png);
}

.lower.green #mainTitle:after {
    background-image:url(../images/common/green_bg_right.png);
}

.lower #mainTitle .mainTitleInner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: max(100px, 34%);
    display: flex;
    flex-direction: column;
}

.lower #mainTitle .title {
    font-size: 3.8rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    letter-spacing: .3rem;
    color: #fff;
}

.contBox {
    margin-bottom: 120px;
}

.innerBox {
    padding: 100px 0 120px;
}

.bk-gray.innerBox {
    position: relative;
    z-index: 2;
}

.innerBox:before,
.innerBox:after,
.interview .person:after,
.crosstalk .chapter:last-child:after {
    content: "";
    position: absolute;
    top: -6.8vw;
    left: 0;
    width: 100%;
    height: 7vw;
    z-index: 2;
}

.crosstalk .chapter:last-child:after {
    z-index: -1;
}

.bk-gray.innerBox:before,
.bk-gray.innerBox:after,
.interview .person:after {
    background:url(../images/common/gray_bg_tb.png) top center / cover no-repeat;
}

.bk-blue.innerBox:before,
.bk-blue.innerBox:after,
.crosstalk.blue .chapter:last-child:after {
    background:url(../images/common/blue_bg_tb.png) top center / cover no-repeat;
}

.bk-green.innerBox:before,
.bk-green.innerBox:after,
.bk-dpgreen.innerBox:before,
.bk-dpgreen.innerBox:after {
    background:url(../images/common/green_bg_tb.png) top center / cover no-repeat;
}

.bk-red.innerBox:before,
.bk-red.innerBox:after {
    background:url(../images/common/red_bg_tb.png) top center / cover no-repeat;
}

.bk-white.innerBox:after {
    background:url(../images/common/white_bg_tb.png) top center / cover no-repeat;
}

.bk-gray.innerBox:after,
.bk-blue.innerBox:after,
.bk-green.innerBox:after,
.bk-dpgreen.innerBox:after,
.bk-red.innerBox:after,
.bk-white.innerBox:after,
.crosstalk .chapter:last-child:after {
    top: auto;
    bottom: -6.8vw;
    transform: scaleY(-1);
}

.interview .person:after {
    top: auto;
    bottom: 0;
    z-index: -1;
}

.interview #profile,
.interview #profile,
.interview #profile,
.innerBox > .inner {
    position: relative;
}

.interview #profile:before,
.interview #profile:after,
.innerBox > .inner:before,
.innerBox > .inner:after {
    content: "";
    position: absolute;
    /*top: -280px;
    width: 520px;
    height: 430px;*/
    /*top: min(-18.66vw, -280px);
    width: min(34.66vw, 520px);
    height: min(28.66vw, 430px);*/
    top: -18.66vw;
    width: 34.66vw;
    height: 28.66vw;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.interview.red #profile:before,
.interview.red #profile:after {
    top: -16.66vw;
}

.innerBox > .inner:before,
.innerBox > .inner:after {
    /*top: min(-26.66vw, -400px);*/
    top: -26.66vw;
}

.interview #profile:before,
.innerBox > .inner:before {
    background-position: top left;
    left: 0;
}

.interview #profile:after,
.innerBox > .inner:after {
    background-position: top right;
    right: 0;
}

.interview.blue #profile:before,
.lower.blue .innerBox > .inner:before {
    background-image:url(../images/common/blue_bg_left.png);
}

.interview.blue #profile:after,
.lower.blue .innerBox > .inner:after {
    background-image:url(../images/common/blue_bg_right.png);
}

.interview.green #profile:before,
.lower.green .innerBox > .inner:before {
    background-image:url(../images/common/green_bg_left.png);
}

.interview.green #profile:after,
.lower.green .innerBox > .inner:after {
    background-image:url(../images/common/green_bg_right.png);
}

.interview.red #profile:before,
.lower.red .innerBox > .inner:before {
    background-image:url(../images/common/red_bg_left.png);
}

.interview.red #profile:after,
.lower.red .innerBox > .inner:after {
    background-image:url(../images/common/red_bg_right.png);
}


.workBoxList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.workBoxList:has(:nth-child(2):last-child),
.workBoxList:has(:nth-child(1):last-child) {
    justify-content: center;
}

.workBoxList > li {
    width: calc((100% - 40px) / 3);
    padding: 40px 50px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1px solid transparent;
}

.workBoxList.col4 > li {
    width: calc((100% - 60px) / 4);
}

.workBoxList.col2 > li {
    width: calc((100% - 20px) / 2);
}

.workBoxList > li.long {
    width:100%;
}

.workBoxList > li:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 3px;
}

.workBoxList > li .name {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.workBoxList > li .name .small {
    font-size: 80%;
    display: contents;
}

.workBoxList > li .iconBox {
    width: 85px;
    margin-bottom: 30px;
}

.workBoxList > li .logoBox {
    width: 170px;
    margin-bottom: 30px;
}

.workBoxList > li .imgBox {
    margin-bottom: 30px;
}

.workBoxList > li .imgBoxInner {
    margin-top: 30px;
}

.workBoxList > li .circle {
    align-self: flex-start;
    text-align: left;
    margin-top: 20px;
}

.workBoxList > li .text .note {
    font-size: 1.2rem;
}

.workBoxList > li .text .note.sentence {
    display: block;
    margin-top: 10px;
}

.workBoxList > li .longInnerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workBoxList > li .longInnerBox .leftBox {
    width: 38%;
}

.workBoxList > li .longInnerBox .leftBoxInner {
    display: flex;
    justify-content: space-between;
}

.workBoxList > li .longInnerBox .leftBoxInner .iconBox {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.workBoxList > li .longInnerBox .leftBoxInner .iconBox .text {
    font-size: clamp(1rem, 1.11vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
}

.workBoxList > li .longInnerBox .leftBoxInner .numberBox {
    width: 76%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.workBoxList > li .longInnerBox .leftBoxInner .numberBox .number {
    font-family: "Jost", sans-serif;
    font-size: clamp(3rem, 9vw, 15rem);
    letter-spacing: .07rem;
    line-height: 1;
}

.workBoxList > li .longInnerBox .leftBoxInner .numberBox .unit {
    font-size: clamp(3rem, 12.74vw, 3.7rem);
    font-weight: 600;
}

.workBoxList > li .longInnerBox .leftBox .note {
    font-size: clamp(1rem, 0.88vw, 1.2rem);
    font-weight: 600;
    text-align: right;
    margin-top: -25px;
}

.workBoxList > li .longInnerBox .rightBox {
    width: 56%;
    display: flex;
    justify-content: space-between;
}

.workBoxList > li .longInnerBox .rightBox .text {
    width: 50%;
}

.workBoxList > li .longInnerBox .rightBox .circle {
    width: 40%;
    margin-top: 0;
}

.iconMiniList {
    width: 100%;
    margin-top: 30px;
}

.iconMiniList > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}

.iconMiniList > li:nth-child(n+2) {
    margin-top: 10px;
}

.iconMiniList > li .imgIcon {
    width: 50px;
}

.iconMiniList > li .textBox {
    width: calc(100% - 50px);
    padding-left: 20px;
}

.iconMiniList > li .textBox .text {
    line-height: 1.5;
}

.iconMiniList2 {
    width: 100%;
    margin-top: 30px;
}

.iconMiniList > li:nth-child(n+2) {
    margin-top: 10px;
}

.iconMiniList2 {
    width: 100%;
    margin-top: 30px;
}

.iconMiniList2 > li {
    padding: 30px 30px;
}

.iconMiniList2 > li:nth-child(n+2) {
    margin-top: 10px;
}

.iconMiniList2 .lintInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iconMiniList2 .title {
    font-weight: 600;
    margin-bottom: 20px;
}

.iconMiniList2 > li .imgIcon {
    width: 65px;
}

.iconMiniList2 > li .textBox {
    width: calc(100% - 65px);
    padding-left: 30px;
}

.iconMiniList2 > li .textBox .text {
    line-height: 1.5;
}

.iconMiniList2 > li .textBox .note {
    font-size: 1.2rem;
    color: #505050;
    line-height: 1.5;
}

.iconMiniList2 > li .textBox .text + .note {
    margin-top: 10px;
}

.listArea .listAreaInner:nth-child(n+2) {
    margin-top: 100px;
}

.intList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.intList > li {
    width: 280px;
}

.intList > li .imgBox {
    margin-bottom: 20px;
    position: relative;
}

.intList > li .imgBox img {
    transition: all 300ms ease;
}

.intList > li .imgBox .arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.intList > li .profile {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

/* HOVER */
.intList > li a:hover .imgBox img {
    filter: brightness(1.2);
}



/*--------------------------------------------------------------------------- HEADER */

#overlay {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 14 183 / 80%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
}

#grandHeader {
    display: block;
    width: calc(100% - 19px);
    height: auto;
    z-index: 1000;
    position: fixed;
}

#grandHeader.fixed {
    transform: translate(0, 0);
    top: 0;
}

#grandHeader .ghInner {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

#grandHeader.fixed .ghInner {
    background-color: rgb(0 0 0 / 20%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

#grandHeader .ghInner .leftBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    height: 90px;
    padding-left: 30px;
}

#grandHeader .ghInner .leftBox .ghLogo {
    width: 174px;
    height: auto;
    line-height: 0;
    margin-right: 30px;
}

#grandHeader .ghInner .leftBox .ghLogo a:hover {
    opacity: .5;
}

#grandHeader .ghInner .leftBox .langBtn {
    display: flex;
    justify-content: space-between;
}

#grandHeader .ghInner .leftBox .langBtn a {
    font-size: 1.2rem;
    color: #606060;
    letter-spacing: .1rem;
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 12px;
}

#grandHeader .ghInner .leftBox .langBtn a:nth-child(n+2) {
    margin-left: 10px;
}

#grandHeader .ghInner .rightBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    height: 90px;
}

#grandHeader .ghInner #ghButton {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.04, 0.65, 0.35, 1);
}

#grandHeader .ghInner #ghButton .open {
    width: 100%;
    height: 100%;
    position: relative;
}

#grandHeader .ghInner #ghButton .open span {
    display: block;
    width: 20px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 600ms cubic-bezier(0.04, 0.65, 0.35, 1);
}

#grandHeader .ghInner #ghButton .open span:nth-child(1) {
    transform: translate(-50%,4px);
}

#grandHeader .ghInner #ghButton .open span:nth-child(2) {
    transform: translate(-50%,-4px);
}

#grandHeader.active .ghInner #ghButton .open span:nth-child(1) {
    transform: translate(-50%,-50%) rotate(45deg);
}

#grandHeader.active .ghInner #ghButton .open span:nth-child(2) {
    transform: translate(-50%,-50%) rotate(-45deg);
}

#grandHeader .ghInner #ghButton .close {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#grandHeader.active .ghInner #ghButton .close {
    height: 100%;
}

#grandHeader .ghInner .mypageHeader {
    display: flex;
    margin-right: 35px;
}

#grandHeader .ghInner .mypageHeader .btnList {
    height: 90px;
    display: flex;
}

#grandHeader .ghInner .mypageHeader .btnList:nth-child(n+2) {
    margin-left: 25px;
}

#grandHeader .ghInner .mypageHeader a {
    font-size: 1.4rem;
    color: #fff;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ホバーで下層表示 */
#grandHeader .ghInner .mypageHeader .has-submenu {
    position: relative;
}

#grandHeader .ghInner .mypageHeader .has-submenu .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40px);
    position: absolute;
    top: 100%;
    left: -45px;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    width: 160px;
    z-index: 101;
    transition: all 0.5s ease;
}

#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner {
    position: relative;
}

#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -33px;
    left: 0;
    right: 0;
    margin: auto;
    border-bottom: 16px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner li {
    margin-right: 0;
}

#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner li a {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000;
    padding: 0;
    display: flex;
    align-items: center;
}

#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner li:nth-child(n+2) a {
    margin-top: 10px;
}

#grandHeader .ghInner .mypageHeader .has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: -15px;
}

/* HOVER */
#grandHeader .ghInner #ghButton:hover {
    background-color: #000187;
}

#grandHeader .ghInner #ghButton:hover .open span {
    background-color: #fff;
}

#grandHeader .ghInner #ghButton:hover .open span:nth-child(1) {
    transform: translate(-50%, 2px);
}

#grandHeader .ghInner #ghButton:hover .open span:nth-child(2) {
    transform: translate(-50%, -2px);
}
#grandHeader .ghInner .leftBox .langBtn a:hover {
    opacity: .7;
}



/*--------------------------------------------------------------------------- GH NAV */

#ghNav {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: scroll;
    z-index: 1500;
    visibility: hidden;
    opacity: 0;
    transition: all 300ms cubic-bezier(0.04, 0.65, 0.35, 1);
}

#ghNav.active {
    visibility: visible;
    opacity: 1;
}

#ghNav .ghNavInner {
    width: 100%;
    max-width: 1500px;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 240px 150px;
    margin: 0 auto;
}

#ghNav .ghNavInner .ghNavList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#ghNav .ghNavInner .ghNavList li {
    width: 30%;
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid rgb(255 255 255 / 50%);
}

/* 3つ並び中、最後の列が2つの時、左寄せにする */
#ghNav .ghNavInner .ghNavList:after {
    content: "";
    display: block;
    width: 30%;
    height: 0;
}

/*#ghNav .ghNavInner .ghNavList li:not(.wide) dl dt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem;
    color: rgb(255 255 255 / 70%);
}*/

#ghNav .ghNavInner .ghNavList li dl dt {
    display: flex;
    align-items: baseline;
    font-size: 1.6rem;
    color: rgb(255 255 255 / 70%);
}

#ghNav .ghNavInner .ghNavList li.wide dl dt a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem;
    color: rgb(255 255 255 / 70%);
}

#ghNav .ghNavInner .ghNavList li dl dt span {
    display: block;
    font-size: 1.1rem;
    color: rgb(255 255 255 / 70%);
    margin-left: 15px;
}

#ghNav .ghNavInner .ghNavList li dl dd a {
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

#ghNav .ghNavInner .ghNavList li dl dd a:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 5px;
    height: 8px;
    background: url(../images/common/arrow_wt.svg) center / contain no-repeat;
    transition: all 300ms ease;
}

#ghNav .ghNavInner .ghNavList li dl dd.listTop a:after {
    width: 5px;
    height: 8px;
    background: url(../images/common/arrow_sankaku_wt.svg) center / contain no-repeat;
}

#ghNav .ghNavInner .ghNavList li.wide dl dt a:hover,
#ghNav .ghNavInner .ghNavList li dl dd a:hover {
    color: #c3fd00;
}

#ghNav .ghNavInner .ghNavList li dl dd a:hover:after {
    transform: translate(5px, -50%);
}

#ghNav .ghNavInner .ghNavList li dl dd:first-of-type a {
    margin-top: 20px;
}

#ghNav .ghNavInner .ghNavList li dl dd:last-child a {
    margin-bottom: 0;
}

/* 第2階層 */
#ghNav .ghNavInner .ghNavList li dl dd.layer {
    margin-left: 20px;
}

/* バーガー内ボタン */
#ghNav .ghNavInner .mypageHeader {
    display: flex;
    justify-content: center;
}

#ghNav .ghNavInner .mypageHeader p:nth-child(n+2) {
    margin-left: 50px;
}

#ghNav .ghNavInner .mypageHeader p a {
    display: flex;
    align-items: center;
}



/*--------------------------------------------------------------------------- NAV CLOSE */

.navClose {
    width: 80px;
    height: 80px;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1600;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.04, 0.65, 0.35, 1);
}

.navClose span {
    width: 30px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 300ms cubic-bezier(0.04, 0.65, 0.35, 1);
}

.navClose span:nth-child(1) { transform: translate(0,0) rotate(-135deg); }
.navClose span:nth-child(2) { transform: translate(0,0) rotate(135deg); }

.navClose:hover { background-color: #000187; }
.navClose:hover span { background-color: #fff; }



/*--------------------------------------------------------------------------- FOOTER */

#footer {
    width: 100%;
    height: auto;
    padding-top: 100px;
}

.footerInner /*{ width: 100%; margin: 0 auto; }*/
.footerLogo { max-width: 230px; margin: 0 auto 60px; }
.footerLogo a { display: block; line-height: initial; transition: all 300ms ease; margin-bottom: 25px; }

.footerLogo p {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

#footer .copyright {
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: .1rem;
    color: #afafaf;
    text-align: center;
    padding: 30px 0 60px;
}

.footerLinkList {
    max-width: 1500px;
    margin: 0 auto;
    display:flex;
    flex-wrap: wrap;
}

.footerLinkList .innerList { display:block; }

.footerLinkList .inner_ft {
    width: calc((100% - 100px) / 3);
    letter-spacing:.1rem;
    padding-bottom: 50px;
    margin-right: 50px;
    border-bottom: 1px solid rgb(80 80 80 / 20%);
}
.footerLinkList .inner_ft:nth-child(3n) {
    margin-right: 0;
}
.footerLinkList .inner_ft:nth-child(n+4) {
    margin-top: 40px;
}
.footerLinkList li a,
.footerLinkList li.inner_ft p {
    display:block;
    line-height:1.4;
    font-size:1.6rem;
    color: rgb(80 80 80 / 60%);
    transition: all 300ms ease;
}

.footerLinkList li.inner_ft ul li {
    position:relative;
    margin-bottom: 10px;
}
.footerLinkList li.inner_ft ul li:last-child { margin-bottom:0; }
.footerLinkList li.inner_ft ul li a {
    font-size:1.5rem;
    color: #505050;
    padding-left: 20px;
    position:relative;
}
.footerLinkList li.inner_ft ul li a:before {
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width:5px;
    height:8px;
    background:url(../images/common/arrow_gray.svg) center / contain no-repeat;
    transition: all 300ms ease;
}
.footerLinkList li.inner_ft ul li.listTop a:before {
    width: 5px;
    height: 8px;
    background: url(../images/common/arrow_sankaku_gray.svg) center / contain no-repeat;
}
.footerLinkList li.inner_ft:after { width:0; height:0; left:0; }
.footerLinkList li.inner_ft p { margin-bottom:20px; }
.footerLinkList li.inner_ft ul li:after { content:none; }

/* 第2階層 */
.footerLinkList li.inner_ft ul li.layer {
    margin-left: 20px;
}

/* HOVER */
.footerLinkList li.inner_ft ul li a:hover:before { transform: translate(5px, -50%); }
.footerLogo a:hover { opacity:.5; }

/* ボタンで隠す_追加 */
.footerLinkList li.inner_ft .title {
    position:relative;
    display: flex;
    align-items: baseline;
}
.footerLinkList li.inner_ft .title .title_en {
    font-size: 1.1rem;
    margin-left: 15px;
}

.footerLinkList li.inner_ft .title a { pointer-events:none; }



/*--------------------------------------------------------------------------- ENTRY */

.entryBox {
    position: relative;
}

.entryBox:before,
.entryBox:after {
    content: "";
    position: absolute;
    top: -6.8vw;
    left: 0;
    background:url(../images/common/blue_bg_tb.png) top center / cover no-repeat;
    width: 100%;
    height: 7vw;
}

.entryBox:after {
    top: auto;
    bottom: -6.8vw;
    transform: scaleY(-1);
}

.entryBox .entryBoxInner {
    padding-top: 180px;
}

.entryBox .entryBoxInner .imgBox {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    margin: auto;
    width: clamp(210px, 18%, 280px);
}

.entryBox .entryBoxInner .btn {
    text-align: center;
    padding-bottom: 70px;
}

.entryBox .entryBoxInner .btn a {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .7rem;
}



/*--------------------------------------------------------------------------- PAGE-TOP */

#pageTop {
    width: 48px;
    height: 48px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}

#pageTop img { width:10%; display:block; margin:auto; position:absolute; top:0; bottom:0; right:0; left:0; }
#pageTop.fixed { opacity:1; visibility:visible; }
#pageTop a { display:block; width:100%; height:100%; overflow:hidden; }
#pageTop:hover { transform: scale(1.15); }




/*--------------------------------------------------------------------------- ボタン */

.arrow {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e30000;
    transition: .3s;
    margin-left: 15px;
    flex-shrink: 0;
}

.arrow:after {
    position: absolute;
    content: "";
    background: url(../images/common/arrow_wt.svg) center center / contain no-repeat;
    width: 6px;
    height: 10px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.btn a,
a .btn,
.btnBox a,
.btnBox {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
}

.btnBox a,
.btnBox {
    padding: 20px 30px 20px 35px;
    justify-content: space-between;
}

.btnBox02Area {
    margin-top: 50px;
}

.btnBox02 {
    display: inline-block;
}

.btnBox02:nth-child(n+2) {
    margin-top: 20px;
}

.btnBox02 a {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    border: 1px solid;
    border-radius: 22px;
    padding: 6px 20px;
    justify-content: space-between;
}

.btnBox02.big a {
    border-radius: 34px;
    padding: 20px 30px;
    position: relative;
}

.btnBox02.big.pdf {
    width: 100%;
}

.btnBox02.big.pdf a .group {
    display: flex;
    align-items: center;
}

.btnBox02.big.pdf a .small {
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 15px;
}

.btnBox02.big.pdf a .station {
    display: flex;
    margin-left: 30px;
}

.btnBox02.big.pdf a .station li {
    font-size: 1.2rem;
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px;
}

.btnBox02.big.pdf a .station li:nth-child(n+2) {
    margin-left: 10px;
}

.btnBox02.big.pdf a:after {
    position: absolute;
    content: "";
    background: url(../images/common/pdf_icon.svg) center center / contain no-repeat;
    width: 20px;
    height: 27px;
    top: 0;
    bottom: 0;
    right: 30px;
    margin: auto;
}

.btnBox02.big.pdf a:hover:after {
    background: url(../images/common/pdf_icon_wt.svg) center center / contain no-repeat;
}

/*.btn a.external .arrow:after {
    position: absolute;
    content: "";
    background: url(../images/common/external_link.svg) center center / contain no-repeat;
    width: 12px;
    height: 12px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}*/

.btnBox02Area.col2 {
    display: flex;
    justify-content: center;
}

.btnBox02Area.col2 .btnBox02 {
    width: calc((100% - 30px) / 2);
}

.btnBox02Area.col2 .btnBox02:nth-child(n+2) {
    margin-left: 30px;
}

.btnBox02Area.high .btnBox02.big a {
    font-size: 2rem;
    border-radius: 50px;
    padding: 39px 30px;
}

.btnBox02Area.high .btnBox02:nth-child(n+2) {
    margin-top: 0;
}

.btnBox02Area.col1 {
    display: block;
    text-align: center;
}

.btnBox02Area.high .btnBox02.big a {
    padding: 39px 50px;
}

/* btnBox03 */
.btnBox03 {
    width: 380px;
    margin: 0 auto;
}

.btnBox03 a {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 16px 30px;
    justify-content: space-between;
}


/* ヘッダー */
#grandHeader .mypageHeader .arrow {
    width: 15px;
    height: 15px;
    background-color: #c3fd00;
    margin-left: 5px;
}

#grandHeader .mypageHeader .arrow:after {
    background: url(../images/common/arrow_blue.svg) center center / contain no-repeat;
    width: 4px;
    height: 8px;
}

/* HOVER */
a:hover .arrow {
    transform: translateX(10px);
}

a.notMove:hover .arrow {
    transform: translateX(0);
}



/*--------------------------------------------------------------------------- アコーディオン */

.accordionArea .accordionbox {
    position: relative;
}

.accordionArea .accordionbox:nth-child(n+2) {
    margin-top: 100px;
}

.accordionbox h3 {
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 30px;
}

.accordionbox dl {
    padding: 30px 0;
    border-bottom: 1px solid;
}

.red .accordionbox dl {
    border-color: rgb(227 0 0 / 20%);
}

.accordionbox dl:first-of-type {
    border-top: 1px solid;
}

.red .accordionbox dl:first-of-type {
    border-color: rgb(227 0 0 / 20%);
}

.accordionlist dt {
    display: block;
    padding: 0 50px 0 30px;
    margin: 0 35px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.accordionlist dt:before {
    content: 'Q';
    position: absolute;
    top: 3px;
    left: 0;
    font-weight: 600;
}

.accordionlist dt .title {
    line-height: 1.5;
}

.accordionlist dd {
    display: none;
    padding: 35px 35px 35px 65px;
    margin-top: 30px;
    position: relative;
    text-align: justify;
    font-weight: 400;
    line-height: 1.5;
}

.red .accordionlist dd {
    background-color: #fff0f0;
}

.accordionlist dd:before {
    content: 'A';
    position: absolute;
    top: 35px;
    left: 35px;
    text-align: center;
    font-weight: 500;
}

.accordion_icon,
.accordion_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.accordion_icon {
    position: absolute;
    width: 15px;
    height: auto;
    top: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
}

.accordion_icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e30000;
}

.accordion_icon span:nth-of-type(1) {
    top: 50%;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.accordion_icon span:nth-of-type(2) {
    top: 50%;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.accordion_icon.active span:nth-of-type(1) {
    display:none;
}

.accordion_icon.active span:nth-of-type(2) {
    top: 50%;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}






/*--------------------------------------------------------------------------- anchorLink */

.anchorLink {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 150px;
    margin-top: -20px;
    position: relative;
    z-index: 1;
}

.anchorLink li {
    text-align: center;
    margin-top: 20px;
}

.anchorLink li a {
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-left: 1px solid #bcbcbc;
}

.anchorLink li:first-child a {
    border-left: none;
}

.anchorLink li a .arrow:after {
    transform: rotate(90deg);
}

/* HOVER */
.anchorLink li a:hover .arrow {
    transform: translate(0, 5px);
}



/*--------------------------------------------------------------------------- 色分け */

/* white */
.btnBox02 a:hover,
.interview .schedule .head01 span,
.interview .person .head01 span,
.interview #intTitle .intTitleInner .textBox,
.interview #profile .profileInner .profileBox .title,
#about .tour .btnBox02 a {
    color: #fff !important;
}

.blue .btnBox02 a:hover .arrow,
.btnBox02.skyblue a:hover .arrow,
.red .btnBox02 a:hover .arrow,
#index .slideArea .someSlideInner .textBox .arrow,
#index #about .linkBox ul li .arrow,
.entryBox .entryBoxInner .btn .arrow,
#index #work .btnBox .arrow,
#index #education .btnBox .arrow,
#index #crosstalk .crosstalkList .global .textBox .btnBox .arrow,
#index #crosstalk .crosstalkList .woman .textBox .btnBox .arrow,
#index #crosstalk .crosstalkList .young .textBox .btnBox .arrow,
.anotherLink > li a:hover .arrow,
.workBoxList > li.white,
.blue .workBoxList > li.white,
#about .tour .btnBox02 a .arrow,
.intTopList .intTopListInner .textBox .arrow,
.btnBox03 .arrow,
.intList > li .imgBox .arrow {
    background-color: #fff;
}

.btnBox02.big.pdf a .station li {
    border: 1px solid #fff;
}

.blue .btnBox02 a .arrow:after,
#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner li a .arrow:after {
    background-image: url(../images/common/arrow_wt.svg);
}

/* blue */
.blue .table01 > dl > dt,
.blue .table02 > dl > dt,
.blue ul.circle li:before,
.blue .head01 span,
.blue .head02.en,
.blue .btnBox02 a,
.footerLinkList li.inner_ft ul li a:hover,
.blue.work .workBox .title,
.blue.work .workBox .jobBox .title,
.blue .workBoxList > li .name,
.blue.crosstalk .mvInner .mvTitle,
.blue.crosstalk .conversation dd,
.blue .head08 {
    color: #0117c4;
}

.blue .head02.en:after,
.btnBox02 a:hover,
#index #work .btnBox,
#index .slideArea .someSlideInner.blue a .part,
#index .slideArea .someSlideInner.blue .textBox,
#index #crosstalk .crosstalkList .global .textBox .btnBox,
.intTopList .intTopListInner.blue a .part,
.intTopList .intTopListInner.blue .textBox,
.blue .btnBox02 a .arrow,
.blue .btnBox02.big.pdf a .station li,
.blue .anotherLink > li.hit a,
.blue .anotherLink > li a:hover,
.blue.work .workBox:before,
.blue .workBoxList > li:before,
.blue .anchorLink li a .arrow,
#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner .blue .arrow,
#ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > .blue .arrow {
    background-color: #0117c4;
}

.blue .btnBox02 a:hover .arrow:after,
#index .slideArea .someSlideInner.blue .textBox .arrow:after,
#index #about .linkBox ul li .arrow:after,
.entryBox .entryBoxInner .btn .arrow:after,
#ghNav .ghNavInner .mypageHeader p a .arrow:after,
#index #work .btnBox .arrow:after,
#index #ghNav .ghNavInner .mypageHeader p a .arrow:after,
#index #crosstalk .crosstalkList li .textBox .btnBox .arrow:after,
.blue .anotherLink > li a:hover .arrow:after,
#ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > .yelgreen .arrow:after,
#about .tour .btnBox02 a .arrow:after,
.intTopList .intTopListInner.blue .textBox .arrow:after,
.blue .intList > li .imgBox .arrow:after {
    background-image: url(../images/common/arrow_blue.svg);
}

/* deep-blue */
#index #work .textBox:hover .btnBox,
#index #work .btnBox a:hover,
#index #crosstalk .crosstalkList .global .textBox .btnBox a:hover,
#index #crosstalk .crosstalkList .global .textBox:hover .btnBox {
    background-color: #000187;
}

/* sky-blue */
.btnBox02.skyblue a {
    color: #2156fe;
}

.btnBox02.skyblue a .arrow,
.btnBox02.skyblue a:hover {
    background-color: #2156fe;
}

.btnBox02.skyblue a:hover .arrow:after {
    background-image: url(../images/common/arrow_skyblue.svg);
}

/* light-blue */
.blue .workBoxList > li {
    background-color: #f3f4fc;
}

/* green */
#index .slideArea .someSlideInner.green a .part,
#index .slideArea .someSlideInner.green .textBox,
#index #education .btnBox,
#index #crosstalk .crosstalkList .young .textBox .btnBox,
.intTopList .intTopListInner.green a .part,
.intTopList .intTopListInner.green .textBox {
    background-color: #6cfd00;
}

#index .slideArea .someSlideInner.green .textBox .arrow:after,
#index #education .btnBox .arrow:after,
#index #crosstalk .crosstalkList .young .textBox .btnBox .arrow:after,
.intTopList .intTopListInner.green .textBox .arrow:after,
.green .btnBox03 .arrow:after {
    background-image: url(../images/common/arrow_green.svg);
}

/* yellow-green */
#ghNav .ghNavInner .mypageHeader p a .arrow,
#ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > .yelgreen .arrow {
    background-color: #c3fd00;
}

/* deep-green */
.green .head01 span,
.green .head02.en,
.green .head09 .en,
.green .head10 .en  {
    color: #00b200;
}

.green .head02.en:after,
.green .head09 .en:after,
.green .head10 .en:after,
#index #education .btnBox a:hover,
#index #education .textBox:hover .btnBox,
#index #crosstalk .crosstalkList .young .textBox .btnBox a:hover,
#index #crosstalk .crosstalkList .young .textBox:hover .btnBox {
    background-color: #00b200;
}

/* ltgreen02 */
.bk-ltgreen02 ul.circle li:before,
.bk-ltgreen02 .head05 {
    color: #00a63c;
}
.bk-ltgreen02.trainingBox .trainingBoxInner .titleBox:before,
.bk-ltgreen02.trainingBox .trainingBoxInner .textBoxArea .textBox .textBoxInner .tag,
#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner .ltgreen02 .arrow,
#ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > .ltgreen02 .arrow,
.green .btnBox03 a,
.green .projectBnrbox .textBox,
.green .projectBnrbox .btn .arrow {
    background-color: #00a63c;
}

/* ltgreen03 */
.bk-ltgreen03 ul.circle li:before,
.bk-ltgreen03 .head05,
.bk-ltgreen03.trainingBox .trainingBoxInner .titleBox .sub span {
    color: #00b231;
}
.bk-ltgreen03.trainingBox .trainingBoxInner .titleBox:before,
.bk-ltgreen03.trainingBox .trainingBoxInner .textBoxArea .textBox .textBoxInner .tag {
    background-color: #00b231;
}

/* ltgreen04 */
.workBoxList > li.bk-ltgreen04 .name {
    color: #017f62;
}
.workBoxList > li.bk-ltgreen04:before {
    background-color: #017f62;
}

/* red */
#index .slideArea .someSlideInner.red .textBox .arrow:after,
#index #crosstalk .crosstalkList .woman .textBox .btnBox .arrow:after,
.red .btnBox02 a:hover .arrow:after,
.intTopList .intTopListInner.red .textBox .arrow:after {
    background-image: url(../images/common/arrow_red.svg);
}

/* deep-red */
.red a.linkLine,
.red .head01 span,
.red .head02.en,
.red .btnBox02 a,
.red .accordionbox h3,
.red .accordionlist dt:before,
.red .anchorLink li a:hover,
.red .flowList02 > dl > dd .title,
.red .table01 > dl > dt,
.red .table01 > dl > dd .copy,
.red .workBoxList > li .name,
.red ul.circle li:before,
.red .iconMiniList2 .title {
    color: #e30000;
}

.red .head02.en:after,
#index .slideArea .someSlideInner.red a .part,
#index .slideArea .someSlideInner.red .textBox,
#index #crosstalk .crosstalkList .woman .textBox .btnBox,
.intTopList .intTopListInner.red a .part,
.intTopList .intTopListInner.red .textBox,
.red .table01 > dl > dd .title,
.red .btnBox02 a:hover,
.red .flowList02:after,
.red .getList li .number,
#grandHeader .ghInner .mypageHeader .has-submenu .submenuInner .red .arrow,
#ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > .red .arrow,
.red .workBoxList > li:before {
    background-color: #e30000;
}

.red .workBoxList.line > li {
    border-color: rgb(227 0 0 / 20%);
}

.red .iconMiniList > li,
.red .iconMiniList2 > li {
    background-color: #fff8f8;
}

/* deep-red2 */
#index #crosstalk .crosstalkList .woman .textBox .btnBox a:hover,
#index #crosstalk .crosstalkList .woman .textBox:hover .btnBox {
    background-color: #a10000;
}

/* light-red */
.light-red.btnBox02 a {
    color: #ff3919;
}

.light-red.btnBox02 a .arrow,
.light-red.btnBox02 a:hover {
    background-color: #ff3919;
}






/*--------------------------------------------------------------------------- ANIMATION */

/*.out { opacity:0; transform: translateY(50px); }
.in { opacity:1; transform: translateY(0); transition: all 2s ease; }*/

.out.slidein {
    opacity: 0;
}

.in.slidein {
    animation: slidein 1.2s ease forwards;
}

@keyframes slidein{
    0%{ transform: translateY(50px); opacity: 0; }
    100%{  transform: translateY(0);opacity: 1;}
}

#aaa {
    animation-delay: 1s;
}


/* スライドイン 下から */
.slideInDown,
.interview #profile .profileInner .profileBox .textBox .itemBox dl {
    opacity: 0;
}

.in.slideInDown,
.in.circleList .slideInDown,
.flowList02.in > dl > dd,
.getList.in li,
.flowList.in li,
.workBoxList.in > li {
    animation: slideInDown 1.5s ease forwards;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl.in {
    animation: slideInDown 1s ease forwards;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl:nth-child(2).in {
    animation-delay: .2s;
}

.roadmapBox > dl > dd .titleBox.in.slideInDown,
.roadmapBox > dl > dd .circle.in.slideInDown,
.roadmapBox > dl > dd .note.in.slideInDown {
    animation-duration: 1s;
    animation-delay: .5s;
}

@keyframes slideInDown {
    0% { transform: translate(0,50px); opacity: 0;}
    100% { transform: translate(0,0); opacity: 1;}
}

/* スライドイン 右から */
.animRight {
    opacity: 0;
}
#index .in.chara_01,
#company .in.chara_01,
.in.animRight {
    animation: lightSpeedInRight .8s ease forwards;
    animation-delay: .3s;
}
@keyframes lightSpeedInRight {
    0% {
        transform: translate3d(100%, 0, 0) skewX(10deg);
        opacity: 0;
    }
    60% {
        transform: translate3d(0, 0, 0) skewX(-5deg);
        opacity: 1;
    }
    80% {
        transform: translate3d(0, 0, 0) skewX(2deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        opacity: 1;
    }
}

/* スライドイン 下→上 */
.animUp {
    opacity: 0;
}
#index #interview .in.chara_02,
.in.animUp {
    animation: lightSpeedInUp .8s ease forwards;
    animation-delay: .7s;
}
.mv .mv_chara.in.animUp {
    animation-duration: .6s;
}
.mv .mv_chara01.in.animUp {
    animation-delay: 4.7s;
}
.mv .mv_chara03.in.animUp {
    animation-delay: 4.9s;
}
.mv .mv_chara02.in.animUp {
    animation-delay: 5.1s;
}
/*.mv .mv_chara01.in.animUp {
    animation-delay: 3.7s;
}
.mv .mv_chara03.in.animUp {
    animation-delay: 3.9s;
}
.mv .mv_chara02.in.animUp {
    animation-delay: 4.1s;
}*/
@keyframes lightSpeedInUp {
    0% {
        transform: translate3d(0, 100%, 0) skewX(10deg);
        opacity: 0;
    }
    60% {
        transform: translate3d(0, 0, 0) skewX(-5deg);
        opacity: 1;
    }
    80% {
        transform: translate3d(0, 0, 0) skewX(2deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        opacity: 1;
    }
}

/* スライドイン 上→下 */
.animDown {
    opacity: 0;
}
#index #crosstalk .in.chara_03,
#index #crosstalk .in.chara_04,
#index #crosstalk .in.chara_05,
#index #crosstalk .in.chara_06,
#index #crosstalk .in.chara_07,
.interview.blue .in.chara_02,
.interview.green .in.chara_02,
.interview.red .in.chara_02,
.in.animDown {
    animation: lightSpeedInDown .8s ease forwards;
    animation-delay: .4s;
}
@keyframes lightSpeedInDown {
    0% {
        transform: translate3d(0, -50%, 0) skewX(10deg);
        opacity: 0;
    }
    60% {
        transform: translate3d(0, 0, 0) skewX(-5deg);
        opacity: 1;
    }
    80% {
        transform: translate3d(0, 0, 0) skewX(2deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        opacity: 1;
    }
}

/* スライドイン 左から */
.animLeft {
    opacity: 0;
}
.interview.blue .in.chara_01,
.interview.green .in.chara_01,
.interview.red .in.chara_01,
.in.animLeft {
    animation: lightSpeedInLeft .8s ease forwards;
    animation-delay: .1s;
}
@keyframes lightSpeedInLeft {
    0% {
        transform: translate3d(-100%, 0, 0) skewX(10deg);
        opacity: 0;
    }
    60% {
        transform: translate3d(0, 0, 0) skewX(-5deg);
        opacity: 1;
    }
    80% {
        transform: translate3d(0, 0, 0) skewX(2deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        opacity: 1;
    }
}

/* left_right */
.clip01 {
    clip-path: inset(0 100% 0 0);
}
.in.clip01 {
    animation: clip01 1s ease forwards;
}

.mv .mv_title.in.clip01 {
    animation-duration: .4s;
    animation-delay: 5.4s;
}
/*.mv .mv_title.in.clip01 {
    animation-duration: .4s;
    animation-delay: 4.4s;
}*/

.interview #intTitle .intTitleInner .textBox.in.clip01 {
    animation-delay: .6s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox dd.in.clip01 {
    animation-duration: .8s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox > dl:nth-child(1) dd.in.clip01 {
    animation-delay: .2s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox > dl:nth-child(2) dd.in.clip01 {
    animation-delay: .4s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox > dl:nth-child(3) dd.in.clip01 {
    animation-delay: .6s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox > dl:nth-child(4) dd.in.clip01 {
    animation-delay: .7s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox > dl:nth-child(5) dd.in.clip01 {
    animation-delay: .8s;
}
.interview #profile .profileInner .profileBox .textBox .levelBox > dl:nth-child(6) dd.in.clip01 {
    animation-delay: 1.0s;
}

.crosstalk .diamond.in.clip01 {
    animation-delay: .5s;
}

@keyframes clip01 {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* right_left */
.clip02 {
    clip-path: inset(0 0 0 100%);
}
.in.clip02 {
    animation: clip02 1s ease forwards;
}
.interview #intTitle .intTitleInner .mainImg.in.clip02 {
    animation-delay: .3s;
}

@keyframes clip02 {
    0% { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0); }
}

/*.jp_titlen {
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 450ms cubic-bezier(0.32, 0.08, 0.24, 1) 350ms;
}

.jp_title {
    clip-path: inset(0 0 0 0);
}*/


/* 上下ふわふわ */
.interview .person .pushBox .push_arrow {
    animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

/* ポンっと出る */
.pon {
    opacity: 0;
}

.in.pon {
    animation: pon 0.6s ease forwards;
}

#educationIndex .roadmapBox > dl > dt.in.pon {
    animation-delay: .3s;
}

@keyframes pon {
  0% { transform: scale(0.8); opacity: 0;}
  50% { transform: scale(1.1); opacity: 1;}
  100% { transform: scale(1); opacity: 1;}
}



.delay02{ animation-delay: 0.2s !important;}
.delay04{ animation-delay: 0.4s!important;}
.delay06{ animation-delay: 0.6s!important;}
.delay08{ animation-delay: 0.8s !important;}
.delay10{ animation-delay: 1s !important;}
.delay12{ animation-delay: 1.2s!important;}
.delay14{ animation-delay: 1.4s!important;}
.delay16{ animation-delay: 1.6s!important;}
.delay18{ animation-delay: 1.8s!important;}
.delay20{ animation-delay: 2.0s!important;}

.clip01.delay02{ transition-delay: 0.2s !important;}
.clip01.delay04{ transition-delay: 0.4s !important;}
.clip01.delay06{ transition-delay: 0.6s !important;}
.clip01.delay08{ transition-delay: 0.8s !important;}
.clip01.delay10{ transition-delay: 1s !important;}





/*--------------------------------------------------------------------------- 下層リンク */

.otherArea {
    padding: 120px 0;
}

.otherArea .title {
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: .8rem;
    margin-bottom: 30px;
}

.interview .otherArea .profile {
    font-size: min(1.4rem, 0.75vw);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    letter-spacing: .05rem;
    margin-top: 20px;
}

.otherArea .otherAreaList {
    display: flex;
    justify-content: center;
    margin-top: 90px;
}

.otherArea .otherAreaList > li {
    width: calc((100% - 40px) / 2);
}

.otherArea .otherAreaList > li:nth-child(n+2) {
    margin-left: 40px;
}

.otherArea .otherAreaList > li.comingsoon {
    height: clamp(220px, 15vw, 270px);
    font-size: 2rem;
    color: #fff;
    background-color: rgb(0 0 0 / 20%);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/*--------------------------------------------------------------------------- スライダー */

.someSlideBox {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.slideArea {
    width: 82%;
    max-width: 1230px;
    margin: 0 auto;
}

.slideArea .slick-list {
    overflow: visible;
}

.slideArea .slick-track {
    display: flex;
}

.slideArea .someSlideInner {
    width: 100%;
    /*max-width: 360px;
    margin: 0 25px;*/
    /*padding: 0 1.2vw;*/
    max-width: 410px;
    padding: 0 25px;
}

.slideArea .slide-arrow {
    width: 45px;
    height: 45px;
    position: absolute;
    top: -50%;
    z-index: 10;
    transform: translate(0,-50%);
    transition: all 600ms cubic-bezier(0.075, 0.85, 0.165, 1);
    cursor: pointer;
}

.slideArea .slide-arrow.slick-disabled {
    opacity: .3;
    cursor: default;
}

.slideArea .slide-arrow.next-arrow {
    right: -15%;
}

.slideArea .slide-arrow.prev-arrow {
    left: -15%;
}

/* スライダー内リンクボタン */

.linkInner a {
    display: block;
    position: relative;
}

.linkInner figure {
    position: relative;
    display: block;
    transition: all 300ms ease;
    overflow: hidden;
}

.linkInner figure img {
    transition: all 300ms ease;
    overflow: hidden;
}

/* TOP_インタビュー */
#index .someSlideBox {
    padding-bottom: 90px;
    z-index: 2;
}

#index .slideArea .slide-arrow {
    top: auto;
    bottom: -90px;
    transform: translate(0,0);
}

#index .slideArea .slide-arrow.next-arrow {
    right: calc((100% - 120px) / 2);
}

#index .slideArea .slide-arrow.prev-arrow {
    left: calc((100% - 120px) / 2);
}

#index .slideArea .someSlideInner a {
    position: relative;
}

#index .slideArea .someSlideInner a .part {
    position: absolute;
    top: min(67px, 4.3vw);
    left: 0;
    font-weight: 600;
    color: #fff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /*background-color: #ffeb00;*/
    padding: 20px 5px;
    font-size: min(1.5rem, 1vw);
}

#index .slideArea .someSlideInner.change a .part {
    /*background-color: #02ff9c;*/
}

#index .slideArea .someSlideInner .textBox {
    /*background-color: #6cfd00;*/
    color: #fff;
    padding: 50px 30px 50px 45px;
    position: relative;
    transition: all 300ms ease;
}

#index .slideArea .someSlideInner .textBox .name {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}

#index .slideArea .someSlideInner .textBox .profile {
    line-height: 1.5;
}

#index .slideArea .someSlideInner .textBox .arrow {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

/* インタビュー_下層リンク */
.interview .otherArea .slideArea {
    width: 65%;
    max-width: 960px;
}

.interview .otherArea .slideArea .slick-list {
    overflow: hidden;
}

.interview .otherArea .slideArea .someSlideInner {
    max-width: 330px;
    padding: 0 20px;
}

/*.interview .otherArea .someSlideInner .slideImg {
  position: relative;
}*/

.interview .otherArea .slideArea .slide-arrow {
    width: 36px;
    height: 36px;
    top: 50%;
    /*transform: translateY(-50%);*/
    transform: translateY(-80%);
}

.interview .otherArea .slideArea .slide-arrow.next-arrow {
    right: .2%;
}

.interview .otherArea .slideArea .slide-arrow.prev-arrow {
    left: .2%;
}

/* HOVER */
/*.linkInner:hover figure img { transform:scale(1.1,1.1); }*/
/*.linkInner:hover figure img { opacity: .8; }*/
.linkInner:hover figure img { filter: brightness(1.2); }

a:hover .arrowSmall, .gmap:hover .arrowSmall, .linkBtn:hover .arrowSmall { background-color:#fff; }
#someSlide_b a:hover .arrowSmall, .branchAreaInner li a:hover .arrowSmall { border:1px solid #fff; }
a:hover .arrowSmall:before, .gmap:hover .arrowSmall:before, .linkBtn:hover .arrowSmall:before { background:url(../images/common/arrow-red-small.svg) left top / contain no-repeat; }


/* オフィスツアー */
.bigSlider .slider {
    margin-bottom: 30px;
}

.bigSlider .slider-img {
    padding: 0 8px;
}

.bigSlider .slider-img img {
    height: auto;
    width: 100%;
    border-radius: 15px;
}

.bigSlider .slider .slick-slide {
    position: relative;
    overflow: hidden;
}

.bigSlider .slider .slick-slide:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 16px);
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.bigSlider .slider .slick-center:after {
    opacity: 1;
}

.bigSlider .slider-img .caption {
    position: absolute;
    width: calc(100% - (3.07vw * 2));
    max-width: calc(100% - (40px * 2));
    bottom: min(2.3vw, 30px);
    left: min(3.07vw, 40px);
    font-size: min(1.15vw, 1.5rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    z-index: 1;
}

/* 小窓 */
.bigSlider .thumbnail .slick-slide {
    width: min(6.9vw, 90px) !important;
    margin: 0 4px;
}

.bigSlider .thumbnail .slick-slide:hover {
    cursor: pointer;
}

.bigSlider .thumbnail .slick-track {
    transform: unset !important;
}

.bigSlider .thumbnail-img {
    position: relative;
    transition: all 0.3s ease;
}

.bigSlider .thumbnail-img:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(70 62 59 / 50%);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
    border-radius: 5px;
}

.bigSlider .thumbnail .slick-current .thumbnail-img:before {
    opacity: 0;
}

.bigSlider .thumbnail-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 5px;
}

.bigSlider .thumbnail .slick-current .thumbnail-img {
    opacity: 1;
}

/* HOVER */
.bigSlider .thumbnail-img:hover:before {
    opacity: 0;
}

/* 矢印 */
.bigSlider .slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(4.5%, 55px);
    height: auto;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bigSlider .slider .prev-arrow {
    left: 150px;
}

.bigSlider .slider .next-arrow {
    right: 150px;
}


/*--------------------------------------------------------------------------- SP時スワイプ画像 */

.spOverflow {
    position: relative;
}

.spOverflow .inner {
    position: relative;
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 40%;
}


/*--------------------------------------------------------------------------- メンバー */

.member {
    position: relative;
    z-index: 3;
}

.memberBox {
    display: flex;
    margin-bottom: 150px;
}

.memberBox li {
    width: calc((100% - 40px) / 3);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.memberBox li:nth-child(n+2) {
    margin-left: 20px;
}

.memberBox li .imgBox {
    margin-bottom: 30px;
}

.memberBox li .textBox .part {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.memberBox li .textBox .name {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .1rem;
    margin-bottom: 10px;
}

.memberBox li .textBox .profile {
    font-size: 1.2rem;
    line-height: 1.5;
    opacity: .8;
}

.project .memberBox li .textBox .profile {
    opacity: .5;
}


/*--------------------------------------------------------------------------- 追従バナー */

.following_bnr {
    position: fixed;
    z-index: 100;
    right: 60px;
    bottom: 30px;
    width: clamp(150px, 12%, 215px);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease,
        transform 0.3s ease;
        /*transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
}

.following_bnr.fixed {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

.following_bnr a {
    display: block;
    overflow: hidden;
}

.following_bnr.hide {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
}

.following_bnr:hover {
    transform: scale(1.15);
}





/*------------------------------------------------------------------------------------

1500px以上

------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 1500px) {

    .interview.blue #profile:before,
    .interview.blue #profile:after,
    .innerBox > .inner:before,
    .innerBox > .inner:after {
        top: -280px;
        width: 520px;
        height: 430px;
    }

    .innerBox > .inner:before,
    .innerBox > .inner:after {
        top: -400px;
    }

}





/*------------------------------------------------------------------------------------

1200px以下

------------------------------------------------------------------------------------*/

@media print, screen and (max-width: 1200px) {

    #ghNav .ghNavInner {
        padding: 200px 50px;
    }

    #index .slideArea .someSlideInner a .part {
        top: 4vw;
    }

}





/*------------------------------------------------------------------------------------

900px以上

------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 900px) {

    #index .slideArea .slide-arrow:hover,
    .bigSlider .slider .slick-arrow:hover {
        opacity: .5;
    }

}





/*------------------------------------------------------------------------------------

TAB 用

------------------------------------------------------------------------------------*/

@media print, screen and (max-width: 900px) {

    .tabTo { display: block !important;}
    .tabFrom { display: block !important;}
    .tabNone { display: none !important;}

    .tabLeft { text-align: justify !important;}

    /* 下層共通 */
    .lower #mainTitle:before,
    .lower #mainTitle:after,
    .crosstalk #mv:before,
    .crosstalk #mv:after,
    .crosstalk .chapter .bgBox:before,
    .crosstalk .chapter .bgBox:after/*,
    .interview.blue #profile:before,
    .interview.blue #profile:after,
    .innerBox > .inner:before,
    .innerBox > .inner:after*/ {
        bottom: -15px;
        width: 300px;
        height: 270px;
    }

    .crosstalk #mv:before,
    .crosstalk #mv:after,
    .crosstalk .chapter .bgBox:before,
    .crosstalk .chapter .bgBox:after {
        bottom: -85px;
    }

    /*.interview.blue #profile:before,
    .interview.blue #profile:after {
        bottom: -15px;
    }

    .innerBox > .inner:before,
    .innerBox > .inner:after {
        bottom: -15px;
    }*/

    .innerBox > .inner:before,
    .innerBox > .inner:after {
        top: -36vw;
    }

    #ghNav .ghNavInner {
        padding: 120px 50px 150px;
    }

    #ghNav .ghNavInner .ghNavList {
        display: block;
    }

    #ghNav .ghNavInner .ghNavList li {
        width: 100%;
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .footerLinkList li.inner_ft .title .title_en {
        display: none;
    }

    #index .slideArea .someSlideInner a .part {
        /*top: 5.5vw;
        padding: 15px 5px;
        font-size: 1rem;*/
        top: 6vw;
        padding: 1vw 0.33vw;
        font-size: 1.2vw;
    }

    .btnBox02Area.col2 {
        display: block;
    }

    .btnBox02Area.col2 .btnBox02 {
        width: 100%;
    }

    .btnBox02Area.col2 .btnBox02:nth-child(n+2) {
        margin-left: 0;
    }

    .btnBox02Area.high .btnBox02:nth-child(n+2) {
        margin-top: 20px;
    }

    .workBoxList {
        display: block;
    }

    .workBoxList > li,
    .workBoxList.col4 > li,
    .workBoxList.col2 > li {
        width: 100%;
    }

    .workBoxList > li:nth-child(n+2) {
        margin-top: 20px;
    }

    .workBoxList > li .imgBox {
        width: max(50%, 200px);
    }

    .workBoxList > li .longInnerBox {
        display: block;
    }

    .workBoxList > li .longInnerBox .leftBox {
        width: 42%;
        margin: 0 auto 20px;
    }

    .workBoxList > li .longInnerBox .leftBoxInner {
        justify-content: center;
    }

    .workBoxList > li .longInnerBox .leftBoxInner .numberBox {
        width: auto;
    }

    .workBoxList > li .longInnerBox .rightBox {
        width: 100%;
        display: block;
    }

    .workBoxList > li .longInnerBox .rightBox .text {
        width: 100%;
        margin-bottom: 20px;
    }

    .workBoxList > li .longInnerBox .rightBox .circle {
        width: 100%;
    }

    .workBoxList > li .longInnerBox .leftBoxInner .iconBox {
        width: 50px;
    }

    .workBoxList > li .longInnerBox .leftBoxInner .numberBox .unit {
        font-size: 2.2rem;
    }

    .workBoxList > li .longInnerBox .leftBox .note {
        margin-top: -10px;
    }


    /*--------------------------------------------------------------------------- エントリー＆マイページ */

    #ghNav .ghNavInner .mypageHeaderSP > ul {
        margin-bottom: 50px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li {
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li:nth-child(n+2) {
        margin-top: 30px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .title {
        /*font-size: 2rem;*/
        color: rgb(80 80 80 / 60%);
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 30px;
        position: relative;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .title:after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 1px;
        background-color: rgb(80 80 80 / 60%);
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > li:nth-child(n+2) {
        margin-left: 40px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > li a {
        display: flex;
        align-items: center;
    }





    /*--------------------------------------------------------------------------- anchorLink */

    .anchorLink {
        gap: 20px 40px;
    }

    .anchorLink li {
        width: calc((100% - 40px) / 2);
        border-bottom: 1px solid #bcbcbc;
        padding-bottom: 15px;
    }

    .anchorLink li.long {
        width: 100%;
    }

    .anchorLink li a {
        padding: 5px 10px;
        border-left: none;
    }

    /*.anchorLink li:nth-child(odd) a {
        border-left: none;
    }*/

    .anchorLink li a .arrow {
        position: absolute;
        right: 0;
        /*top: 50%;
        transform: translateY(-50%);*/
        top: 0;
        bottom: 0;
        margin: auto;
    }


    /*--------------------------------------------------------------------------- 下層リンク */

    .interview .otherArea .profile {
        font-size: 1.1vw;
    }


    /*--------------------------------------------------------------------------- スライダー */

    /* オフィスツアー */
    .bigSlider .slider-img {
        padding: 0 5px;
    }

    .bigSlider .slider .slick-slide:after {
        width: calc(100% - 10px);
    }

    .bigSlider .slider .prev-arrow {
        left: 40px;
    }

    .bigSlider .slider .next-arrow {
        right: 40px;
    }


    /*--------------------------------------------------------------------------- メンバー */

    .memberBox {
        display: block;
    }

    .memberBox li {
        width: 100%;
        flex-direction: unset;
        align-items: center;
        justify-content: center;
    }

    .memberBox li:nth-child(n+2) {
        margin-left: 0;
        margin-top: 20px;
    }

    .memberBox li .imgBox {
        margin-bottom: 0;
        margin-right: 30px;
        width: 200px;
    }

    .memberBox li .textBox {
        width: calc(100% - 230px);
        max-width: 250px;
    }
    

}





/*------------------------------------------------------------------------------------

SP 用

------------------------------------------------------------------------------------*/


@media print, screen and (max-width: 600px) {

    body {
        font-size: 1.4rem;
        letter-spacing: 0.15rem;
        border: 5px solid #fff;
    }

    .pcOnly { display: none !important; }
    .spOnly { display: block !important; }

    .haveMag { margin-bottom: 75px;}

    /* HEAD */
    .head01 {
        font-size: 2.4rem;
        margin-bottom: 30px;
    }
    .head01 span {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .head02.en {
        font-size: 1.2rem;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .head03 {
        font-size: 2.4rem;
        margin-bottom: 25px;
    }
    .head03 .small {
        font-size: 2rem;
    }

    .head04 {
        font-size: 1.6rem;
        margin-bottom: 25px;
        padding: 14px 20px;
    }

    .head06 {
        font-size: 1.8rem;
    }

    .head08 {
        font-size: 2.4rem;
        margin-bottom: 25px;
    }

    .head09 {
        font-size: 2.4rem;
        margin-bottom: 60px;
    }
    .head09 .en {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .head10 {
        font-size: 2.4rem;
        margin-bottom: 30px;
    }
    .head10 .en {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .head11 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .interview .head01 {
        margin-bottom: 40px;
        line-height: 1.2;
    }

    /* READ */
    .lead01 {
        margin-bottom: 50px;
    }
    .lead02 {
        margin-bottom: 30px;
    }

    /* TABLE */
    .table01 > dl {
        display: block;
        padding: 20px 0;
    }

    .table01 > dl > dt {
        width: 100%;
        margin: 0 0 5px;
        padding: 0;
        display: block;
        text-align: left;
    }

    .table01 > dl > dd {
        width: 100%;
        padding: 0;
        margin: 0;
        border-left: none;
    }

    /* 上下曲線カテゴリ共通 */
    .catBox {
        padding: 60px 0 75px;
    }

    .catBox:not(.colorBox) {
        padding-top: 80px;
    }

    .lower .catBox.colorBox {
        padding: 50px 0;
    }

    .lower .catBox:not(.colorBox) {
        padding: 50px 0;
    }

    /* 下層共通 */
    .lower #mainTitle {
        background-size: 700px;
        padding-top: 220px;
        margin-bottom: 75px;
    }

    .lower #mainTitle:before,
    .lower #mainTitle:after,
    .crosstalk #mv:before,
    .crosstalk #mv:after,
    .crosstalk .chapter .bgBox:before,
    .crosstalk .chapter .bgBox:after,
    .interview.blue #profile:before,
    .interview #profile:before,
    .interview #profile:after,
    .innerBox > .inner:before,
    .innerBox > .inner:after {
        bottom: -45px;
        width: 170px;
        height: 150px;
    }

    .crosstalk .chapter .bgBox:before,
    .crosstalk .chapter .bgBox:after {
        bottom: -50px;
    }

    .interview #profile:before,
    .interview #profile:after {
        top: -90px;
        bottom: auto;
    }

    .innerBox > .inner:before,
    .innerBox > .inner:after {
        top: -145px;
        bottom: auto;
    }

    .lower #mainTitle .mainTitleInner {
        top: max(50px, 40%);
    }

    .lower #mainTitle .title {
        font-size: 2.2rem;
    }

    .contBox {
        margin-bottom: 60px;
    }

    .innerBox {
        padding: 60px 0 70px;
    }

    /*.innerBox > .inner:before,
    .innerBox > .inner:after {
        top: max(-33vw, -170px);
    }*/

    .workBoxList > li {
        padding: 40px 30px 30px;
    }

    .workBoxList > li:before {
        width: 50px;
    }

    .workBoxList > li .name {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }

    .listArea .listAreaInner:nth-child(n+2) {
        margin-top: 50px;
    }

    .workBoxList > li .logoBox {
        width: 85px;
    }

    .workBoxList > li .longInnerBox .leftBox {
        width: 100%;
    }

    .workBoxList > li .longInnerBox .leftBoxInner .numberBox .number {
        font-size: 85px;
    }

    .iconMiniList > li {
        padding: 15px 20px;
    }

    .iconMiniList2 .lintInner {
        display: block;
    }

    .iconMiniList2 > li .imgIcon {
        margin: 0 auto 20px;
    }

    .iconMiniList2 > li .textBox {
        width: 100%;
        padding-left: 0;
    }


    /*--------------------------------------------------------------------------- HEADER */

    /* overlay / header 挙動 */
    #grandHeader { width: calc(100% - 10px);}
    /*#grandHeader.fixed { transform: translate(0, -60px); }*/
    /*#grandHeader .ghInner { height: 90px; }*/
    #grandHeader .ghInner .leftBox {
        height: 45px;
        padding-left: 15px;
    }
    #grandHeader .ghInner .leftBox .ghLogo { width:104px; margin-right:15px; }
    #grandHeader .ghInner .leftBox .langBtn a { font-size:1rem; }
    #grandHeader .ghInner .rightBox { height: 45px; }
    #grandHeader .ghInner #ghButton {
        width: 45px;
        height: 45px;
        border-bottom-left-radius: 5px;
    }
    #grandHeader .ghInner #ghButton .open span { width:10px; }
    #grandHeader .ghInner #ghButton .open span:nth-child(1) { transform: translate(-50%,2px); }
    #grandHeader .ghInner #ghButton .open span:nth-child(2) { transform: translate(-50%,-2px); }

    /* GH NAV - SP表示調整 */
    #ghNav { height: 100vh; padding-top: 0; }
    #ghNav .ghNavInner .ghNavList li dl dt { font-size: 1.4rem; }
    #ghNav .ghNavInner .ghNavList li dl dd a {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    #ghNav .ghNavInner {
        padding: 75px 50px 150px;
    }

    .navClose { width:45px; height: 45px; border-bottom-left-radius: 5px; }
    .navClose span { width:15px; }


    /*--------------------------------------------------------------------------- FOOTER */

    #footer { padding-top: 75px; }
    .footerInner { width: 80%; }
    .footerInner .footerLogo { max-width:155px; margin:0 auto 30px; }
    .footerLogo p { font-size: 1.1rem;}
    .footerLogo a { margin-bottom: 18px;}
    .footerLinkList { display: block; }
    .footerLinkList li { margin-bottom:50px; }

    .footerLinkList li.inner_ft .title .acBtn { width:10px; height:10px; position:absolute; right:5px; top:calc(50% - 5px); display:block; }
    .footerLinkList li.inner_ft .title .acBtn::before,
    .footerLinkList li.inner_ft .title .acBtn::after {
        content: "";
        display: block;
        position: absolute;
        width: 35%;
        height: 1px;
        background: #505050;
        left: 35%;
        top: 50%;
        transition: .5s;
    }
    .footerLinkList li.inner_ft .title .acBtn::after { transform: rotate(90deg); }
    .footerLinkList li.inner_ft .title.active .acBtn::after { transform: rotate(0deg); }

    .footerLinkList li.inner_ft .title {
        margin-bottom: 25px;
    }

    .footerLinkList .inner_ft {
        width: 100%;
        margin-bottom: 25px;
        margin-right: 0;
        padding-bottom: 0;
    }
    .footerLinkList li.inner_ft p { margin-bottom: 0; color: #505050; }

    .footerLinkList li a,
    .footerLinkList li.inner_ft p,
    .footerLinkList li.inner_ft ul li a {
        font-size:1.4rem;
        line-height:1.4;
    }

    .footerLinkList li.inner_ft ul li { margin-bottom:10px; }
    .footerLinkList li.inner_ft .title .acBtn {
        width: 22px;
        height: 22px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #e7e7e7;
        border-radius: 50%;
    }
    .footerLinkList .inner_ft:nth-child(n+4) { margin-top: 0;}
    .footerLinkList .inner_ft:last-child { margin-bottom: 0;}
    .footerLinkList .innerList { display:none; }
    .footerLinkList .title.active + .innerList {
        display:block !important;
        padding-bottom: 30px;
    }

    #footer .copyright { padding: 30px 0; }

    .entryBox .entryBoxInner {
        padding-top: 120px;
    }

    .entryBox .entryBoxInner .imgBox {
        top: -70px;
        width: 170px;
    }

    .entryBox .entryBoxInner .btn {
        padding-bottom: 60px;
    }

    .entryBox .entryBoxInner .btn a {
        font-size: 1.6rem;
        letter-spacing: .6rem;
    }

    /* pageTop & btn - SP */
    #pageTop { width:40px; height:40px; right:20px; bottom:90px; }
    #pageTop img { width:10%; }

    /* indexボタン - SP */
    .indexBtn { margin-top:40px; }
    .indexBtnInner { width:25px; height:15px; }


    /*--------------------------------------------------------------------------- エントリー＆マイページ */

    #ghNav .ghNavInner .mypageHeaderSP > ul > li {
        padding: 25px 20px;
        margin: -10px -10px 0px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li:nth-child(n+2) {
        margin-top: 15px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .title {
        margin-bottom: 15px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > li:nth-child(n+2) {
        margin-left: 20px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > li .submenuInnerSP > li {
        margin: 10px 10px 0px;
    }

    #ghNav .ghNavInner .mypageHeaderSP > ul > .mypage .submenuInnerSP > li {
        margin: 0;
    }



    /*--------------------------------------------------------------------------- 下層リンク */

    .otherArea {
        padding: 80px 0 40px;
    }

    .interview .otherArea .profile {
        font-size: 1.1rem;
    }

    .otherArea .otherAreaList {
        display: block;
        margin-top: 50px;
    }

    .otherArea .otherAreaList > li {
        width: 100%;
    }

    .otherArea .otherAreaList > li:nth-child(n+2) {
        margin-left: 0;
        margin-top: 20px;
    }

    .otherArea .otherAreaList > li.comingsoon {
        height: 180px;
        font-size: 1.8rem;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }


    /*--------------------------------------------------------------------------- スライダー */
    .slideArea { width:75%; }
    .slideArea .someSlideInner { padding: 0 3vw; }
    .slideArea .slide-arrow { width:45px; height:45px; }
    .slideArea .slide-arrow.next-arrow { right: -15%; }
    .slideArea .slide-arrow.prev-arrow { left: -15%; }
    #index .slideArea .someSlideInner a .part {
        top: 11.8vw;
        padding: 4vw 1.33vw;
        font-size: 3.2vw;
    }

    /* オフィスツアー */
    .bigSlidebox.max1200 {
        width: 95%;
    }

    .bigSlider .slider .slick-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bigSlider .slider-img .caption {
        position: static;
        font-size: 1rem;
        line-height: 1.2;
        color: #000;
        margin-top: 20px;
        width: 100%;
        max-width: 100%;
    }

    .bigSlider .slider .slick-slide:after {
        content: none;
    }

    .bigSlider .slider .slick-arrow {
        /*width: 36px;*/
        width: min(9.6vw, 50px);
        /*top: 19.2vw;*/
        top: 24vw;
        transform: translateY(0);
    }

    .bigSlider .slider .prev-arrow {
        left: -8px;
    }

    .bigSlider .slider .next-arrow {
        right: -8px;
    }

    .bigSlider .thumbnail .slick-track {
        transform: unset !important;
        width: 100% !important;
        display: flex;
        flex-flow: row wrap;
        margin-left: -6px;
        margin-top: -8px;
    }

    .bigSlider .thumbnail .slick-slide {
        display: block!important;
        float: none !important;
        flex: 0 0 calc(16.6% - 6px); 
        box-sizing: border-box;
        margin: 0;
        margin-left: 6px;
        margin-top: 8px;
      }





    /*--------------------------------------------------------------------------- ボタン */

    .arrow {
        width: 22px;
        height: 22px;
    }

    .arrow:after {
        width: 4px;
        height: 7px;
    }

    .btn a,
    a .btn,
    .btnBox a,
    .btnBox {
        font-size: 1.4rem;
    }

    .btnBox a {
        font-size: 1.4rem;
        padding: 14px 20px;
    }

    .btnBox02 a {
        font-size: 1.4rem;
    }

    .btnBox02.big.pdf a {
        flex-direction: column;
        align-items: flex-start;
    }

    .btnBox02.big.pdf a .group {
        align-items: flex-start;
        flex-direction: column;
    }

    .btnBox02.big.pdf a .small {
        margin: 10px 0;
    }

    .btnBox02.big.pdf a .station {
        margin-left: 0;
    }

    .btnBox02.big.pdf a .station li {
        font-size: 1rem;
    }

    .btnBox02.big.pdf a .station li:nth-child(n+2) {
        margin-left: 5px;
    }

    .btnBox02Area.high .btnBox02.big a {
        font-size: 1.4rem;
        text-align: left;
        line-height: 1.2;
        border-radius: 40px;
        padding: 20px 30px;
    }

    .btnBox02Area.col1 .btnBox02 {
        width: 100%;
    }

    /* btnBox03 */
    .btnBox03 {
        width: 90%;
    }

    .btnBox03 a {
        font-size: 1.4rem;
        padding: 12px 20px;
    }

    /*--------------------------------------------------------------------------- アコーディオン */

    .accordionArea .accordionbox:nth-child(n+2) {
        margin-top: 50px;
    }

    .accordionbox dl {
        padding: 25px 0;
    }

    .accordionlist dt {
        padding: 0 30px 0 25px;
        margin: 0;
    }

    .accordionlist dd {
        padding: 25px 25px 25px 55px;
        margin-top: 25px;
    }

    .accordionlist dd:before {
        top: 25px;
        left: 25px;
    }

    /*--------------------------------------------------------------------------- anchorLink */

    .anchorLink {
        margin-bottom: 75px;
        gap: 0 10px;
    }

    .anchorLink li {
        width: calc((100% - 10px) / 2);
        padding-bottom: 10px;
    }

    .anchorLink li a {
        font-size: 1.2rem;
        letter-spacing: 0;
        justify-content: flex-start;
        text-align: left;
    }

    /*.anchorLink li {
        width: 100%;
        margin-top: 10px;
    }

    .anchorLink li a {
        border-left: none;
    }*/

    /*--------------------------------------------------------------------------- SP時スワイプ画像 */

    .spOverflow{
        overflow-x: scroll;
        width: 100%;
        padding: 0 10px 20px;
    }
    .spOverflow .inr{
        width: 600px;
        opacity: 0.3;
        transition: .4s;
        position: relative;
        padding: 30px 20px;
    }
    .spOverflow.touched .inr,
    .spOverflow.touched img{
        opacity: 1;
    }
    .howToScroll.is-ua-sp{
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .howToScroll.is-ua-sp .howToScrollInr {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgb(250 248 245 / 70%);
        z-index: 1;
    }
    .howToScroll.is-ua-sp .howToScrollInr::after{
        content: "";
        display: block;
        width: 70%;
        height: 100%;
        position: absolute;
        left: 15%;
        top: 0;
        z-index: 2;
        background: url("../images/common/icon_swipe.svg")center center / 60% auto no-repeat;
        animation: slide 1500ms linear infinite;
        transition: all 300ms;
    }
    .howToScroll.is-ua-sp.delete,
    .howToScroll.is-ua-sp .howToScrollInr.delete {
        animation: none;
        transition: .3s;
        opacity: 0;
        visibility: hidden;
    }

    @keyframes slide {
        0% { transform: translateX(10px); opacity: 0;}
        3% { transform: translateX(10px); opacity: 1;}
        100% { transform: translateX(-10px); opacity: 0; }
    }


    .bk-blue .howToScroll.is-ua-sp .howToScrollInr {
        background-color: rgb(1 23 196 / 70%);
    }
    .bk-dpgreen .howToScroll.is-ua-sp .howToScrollInr {
        background-color: rgb(0 230 0 / 70%);
    }
    .bk-red .howToScroll.is-ua-sp .howToScrollInr {
        background-color: rgb(255 0 0 / 70%);
    }
    .bk-blue .howToScroll.is-ua-sp .howToScrollInr::after,
    .bk-dpgreen .howToScroll.is-ua-sp .howToScrollInr::after,
    .bk-red .howToScroll.is-ua-sp .howToScrollInr::after{
        background: url("../images/common/icon_swipe_wt.svg")center center / 60% auto no-repeat;
    }


    /*--------------------------------------------------------------------------- メンバー */

    .memberBox {
        margin-bottom: 75px;
    }

    .memberBox li .imgBox {
        margin-right: 20px;
        width: 45%;
    }

    .memberBox li .textBox {
        width: 45%;
    }

    .memberBox li .textBox .part {
        font-size: 1.2rem;
    }

    .memberBox li .textBox .name {
        font-size: 1.6rem;
    }

    .memberBox li .textBox .profile {
        font-size: 1rem;
    }


    /*--------------------------------------------------------------------------- 追従バナー */

    .following_bnr {
        right: 15px;
        bottom: 10px;
        width: min(30%, 150px);
    }

}