@charset "utf-8";

/***************************************
 For bynow.jp
 arai@onenote.co.jp
 2025.02
***************************************/
body{
    color: #000;
}
a {
    color: #000;
    text-decoration: none;
}
p{
    line-height: 1.9;
}
p b{
    font-weight: 600;
}



.mainVisual{
    width: 100%;
    height: calc(100vh - 80px);
    height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: 45% 1fr;
    z-index: 1;
}

main{
    margin-top: 50px;
}
.mainMsg{
    display: flex;
    align-items: center;
    padding-left: 10%;
}
.mainMsg h1{
    font-size: 64px;
    font-weight: 900;
    line-height: 1.2;
}
.mainMsg h1 span{
    font-size: 16px;
    font-weight: 300;
    display: grid;
    letter-spacing: 2px;
}
a.yajirushiLink {
    padding-left: 45px;
    background-image: url(../images/yajirushi.svg);
    background-repeat: no-repeat;
    background-size: 31px 30px;
    background-position: left center;
    font-size: 13px;
    font-weight: 300;
}
.mainMsg .yajirushiLink {
    bottom: 30px;
    left: 10%;
    position: absolute;
}

.bottomMainVisual .mainMsg h1 span{
    font-size: 16px;
    font-weight: 300;
    display: inline-block;
    margin-left: 40px;
    letter-spacing: 2px;
}

.mainImg {
    margin-top: 25px;
    padding-right: 4%;
}
.mainImg img{
    max-height: 90vh;
    display: block;
    margin-left: auto;
}


section{
    padding-top: 80px;
    padding-bottom: 80px;
}


.bgF0F0F0{
    background-color: #F0F0F0;
}
.bgFFFFFF{
    background-color: #FFFFFF;
}
.bgF9F9F9{
    background-color: #F9f9f9;
}

.inner{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.mainContents.bottom section:last-child{
    padding-bottom: 200px;
}
.mainContents h2::before{
    width: 80px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    content: '';
}
.mainContents h2{
    font-size: 64px;
    padding-left: 100px;
    font-weight: 900;
    margin-bottom: 60px;
    position: relative;
    margin-left: -30px;
}

.mainContents h2.centerH2::before{
    display: none;
}
.mainContents h2.centerH2{
    text-align: center;
    padding-left: 0;
    margin-left: 0;
}

.service2c{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4%;
}
.service2c a{
    display: block;
}





.serviceBox .imgBox{
    padding: 6%;
    background-color: #FFF;
}
.serviceBox h3{
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
    margin-top: 10px;
}
.serviceBox p{
    text-align: center;
}
.serviceBox .since {
    position: relative;
    right: 0;
    font-weight: 300;
    top: 22px;
    float: right;
}


.service3c{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3%;
    row-gap: 40px;
}
.service3c a{
    display: block;
}

.service3c .serviceBox .imgBox{
    padding: 0;
    background-color: #FFF;
}
.service3c .serviceBox h3{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
    margin-top: 10px;
}
.service3c .serviceBox p{
    text-align: left;
}
.service3c .serviceBox .since {
    position: relative;
    right: 0;
    font-weight: 300;
    top: 22px;
    float: right;
}






.serviceDetail2c01{
    display: grid;
    grid-template-columns: 60% 1fr;
    column-gap: 60px;
    margin-bottom: 80px;
}

.serviceDetail2c01 .rightBox .imgBox{
    padding: 10%;
    margin-bottom: 30px;
    margin-bottom: 40px;
}
.serviceDetail2c01 .rightBox .imgBox img{
    display: block;
    padding: 10%;
    background-color: #f9f9f9;
}
.serviceDetail2c01 .rightBox .imgBox::before{
    content: "";
    position: absolute;
    height: 70%;
    border-left: #272727 solid 1px;
    left: 0;
    top: -40px;
}
.serviceDetail2c01 .rightBox p{
    line-height: 1.8;
    font-size: 16px;
    font-weight: 300;
}
.serviceDetail4c01::before{
    border-top: #272727 solid 1px;
    top: 0;
    right: 0;
    width: 65%;
    position: absolute;
    content: '';
}
.serviceDetail4c01 {
    display: grid;
    grid-template-columns: 1fr 90px 1fr 1fr 1fr;
    column-gap: 2%;
    padding-top: 40px;
}
.serviceDetail4c01 .title .tate {
    font-size: 64px;
    /* transform: rotate(90deg); */
    /* position: absolute; */
    top: 0;
    left: -100%;
    font-weight: 900;
    width: fit-content;
    white-space: nowrap;
    writing-mode: sideways-rl;
}
.serviceDetail4c01 .imgBox01{
    margin-top: 100px;
}
.serviceDetail4c01 .imgBox02{
    margin-top: 200px;
}
.serviceDetail4c01 .imgBox03{
    margin-top: 100px;
}
.serviceDetail4c01 .imgBox04{
    margin-top: 200px;
}
.serviceDetail4c01 img{
    margin-bottom: 10px;
}
.serviceDetail4c01 h4{
    font-weight: 600;
    margin-bottom: 5px;
}



.serviceDetail4c02 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2%;
    padding-top: 40px;
}
.serviceDetail4c02 .title .tate {
    font-size: 64px;
    /* transform: rotate(90deg); */
    /* position: absolute; */
    top: 0;
    left: -100%;
    font-weight: 900;
    width: fit-content;
    white-space: nowrap;
    writing-mode: sideways-rl;
}
.serviceDetail4c02 .imgBox01{
    margin-top: 100px;
}
.serviceDetail4c02 .imgBox02{
    margin-top: 200px;
}
.serviceDetail4c02 .imgBox03{
    margin-top: 100px;
}
.serviceDetail4c02 .imgBox04{
    margin-top: 200px;
}
.serviceDetail4c02 img{
    margin-bottom: 10px;
}
.serviceDetail4c02 h4{
    font-weight: 600;
    margin-bottom: 5px;
}



.interview2c{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6%;
}

.interviewContents a{
    display: grid;
    grid-template-columns: 60% 1fr;
    column-gap: 6%;
}
.interview2c .interviewContents:nth-child(1){
    margin-top: 100px;
}
.interview2c .interviewContents:nth-child(1) .textContents {
    margin-top: 260px;
    width: 155%;
}

.interview2c .interviewContents:nth-child(2) img {
    position: absolute;
    width: 104%;
    max-width: max-content;
}
.interview2c .interviewContents:nth-child(2) .imgBox{
    margin-left: -90px;
}

.interview2c .interviewContents:nth-child(2) {
    margin-left: -70px;
    grid-template-columns: 44% 1fr;
}
.interview2c .interviewContents:nth-child(2) .textContents{
    margin-top: 130px;
    margin-left: -80px;
}
.interview2c h3::before{
    width: 50%;
    content: '';
    border-top: solid #000 1px;
    position: absolute;
    top: 0;
    left: 0;
}
.interview2c h3{
    margin-top: 20px;
    padding-top: 10px;
    position: relative;
}
.interviewContents .imgBox{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.interviewContents a img {
    transition: .5s all;
}
.interviewContents a:hover img{
	transform:scale(1.1,1.1);
	transition:.5s all;
}
.sloganWrapper {
    text-align: center;
    width: 1070px;
    margin-left: auto;
    margin-right: auto;
}
.slogan{
    font-size: 64px;
    font-weight: 900;
    font-family: "tt-commons-pro", sans-serif;
    color: #545454;
}
section.aboutUs{
    padding-top: 100px;
    padding-bottom: 100px;
}
.sloganWrapper p{
    text-align: left;
}
.aboutUs h2,
.aboutUs p{
    color: #545454;

}
.sloganWrapper.bottom .slogan,
.sloganWrapper.bottom p{
    color: #000;

}


section{
    position: relative;
}
section::after{
    clear: both;
    content: '';
    display: block;
}
/* step circle */
/* レイアウト土台（viewBoxが正方形なので正方形に） */
/* SVGサイズにぴったり重ねる土台 */
.arcWrap {
    position: relative;
    display: inline-block;
    margin-left: -130px;
}
.arcWrap > svg{
  display:block;        /* 余白消し */
  width:100%; height:auto;
}

/* ▼ 座標系：SVGのviewBox(-100..100)を%に変換して使う */
.steps{
  --cx: 79%;   /* (58 - (-100)) / 200 = 0.79 */
  --cy: 50%;   /* (0  - (-100)) / 200 = 0.50 */
  --R : 45%;   /* 90 / 200 = 0.45 */
  --offset: 0%;/* 弧からの内外オフセット。内側に寄せたいなら -3% など */

  position:absolute; inset:0;
  margin:0; padding:0; list-style:none;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* 各LIを “角度” で置く（0°=右、時計回り） */
.steps > li{
  position:absolute;

  /* 極座標 → XY（CSSはy正方向=下なので sin は下向きが+） */
  left: calc(var(--cx) + (var(--R) + var(--offset)) * cos(var(--deg)));
  top : calc(var(--cy) + (var(--R) + var(--offset)) * sin(var(--deg)));

  transform: translate(-50%, -50%); /* ●中心基準に */
  display:flex; align-items:center; gap:.6rem; white-space:nowrap;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
  padding-left: 30px;
}

/* ●とテキスト */
.steps .dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
    box-shadow: 0 0 0 4px #fff;
    position: absolute;
    left: -25px;
    top: 17px;
}
.steps .idx{ font-weight:800;  font-size: 45px; line-height:1; }
.steps p{ margin:0; font-size:14px; line-height:1.6; }


.steps h4 {
    font-weight: 900;
    margin-bottom: 5px;
}
.steps p{
    width: 300px;
}

.steps li:nth-child(1){
    --deg: -81deg;
    transform: rotate(-33deg);
    margin-left: -43px;
}
.steps li:nth-child(2){
    --deg: 326deg;
    transform: rotate(-15deg);
    margin-left: -206px;
}
.steps li:nth-child(3) {
    --deg: 1deg;
    margin-left: -41px;
}
.steps li:nth-child(4) {
    --deg: 22deg;
    transform: rotate(11deg);
    margin-left: -243px;
}
.steps li:nth-child(5) {
    --deg: 48deg;
    transform: rotate(25deg);
    margin-left: -219px;
}

.stepBox h2 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: fit-content;
    margin-left: 60px;
    font-size: 50px;
}
.stepBox h2 em{
    position: relative;
    z-index: 1;
}
.stepBox h2::before {
    background-color: #F0F0F0;
    display: block;
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -250px;
    right: 0;
    margin: auto;
    border: none;
}
.priceSection{
    position: relative;
}
.priceSection::before{
    content: '';
    height: 100px;
    width: 1px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: -50px;
    background-color: #000;
}
.price2c{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.priceContents{
    background-color: #FFF;
    padding: 60px 6%;
}

.priceContents h3{
    text-align: center;
    font-weight: 700;
    margin-bottom: 50px;
}
.priceContents .price span{
    font-size: 32px;
    font-weight: 800;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}
.priceContents .price{
    text-align: center;
    margin-bottom: 40px;
}
.priceContents .function{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}









/* fade */
.fade {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 1s, transform 1s;
	transition-delay: 0.2s;
}
.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/* fade */
.fade01 {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 1s, transform 1s;
	transition-delay: 0.4s;
}
.fade01.active {
	opacity: 1;
	transform: translateY(0px);
}
.fade02 {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 1s, transform 1s;
	transition-delay: 0.8s;
}
.fade02.active {
	opacity: 1;
	transform: translateY(0px);
}
.fade03 {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 1s, transform 1s;
	transition-delay: 1.2s;
}
.fade03.active {
	opacity: 1;
	transform: translateY(0px);
}
.fade04 {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 1s, transform 1s;
	transition-delay: 1.6s;
}
.fade04.active {
	opacity: 1;
	transform: translateY(0px);
}


.fadeL2R {
	opacity: 0;
	transform: translateX(-25px);
	transition: opacity 1s, transform 1s;
	transition-delay: 0.2s;
}
.fadeL2R.active {
	opacity: 1;
	transform: translateY(0px);
}
.fadeR2L {
	opacity: 0;
	transform: translateX(25px);
	transition: opacity 1s, transform 1s;
	transition-delay: 0.2s;
}
.fadeR2L.active {
	opacity: 1;
	transform: translateY(0px);
}



.normalFade01 {
	opacity: 0;
	transition: opacity 1s, transform 1s;
	transition-delay: 0.8s;
}
.normalFade01.active {
	opacity: 1;
}

.normalFade02 {
	opacity: 0;
	transition: opacity 1s, transform 1s;
	transition-delay: 1s;
}
.normalFade02.active {
	opacity: 1;
}

.normalFade03 {
	opacity: 0;
	transition: opacity 1s, transform 1s;
	transition-delay: 1.2s;
}
.normalFade03.active {
	opacity: 1;
}

.normalFade04 {
	opacity: 0;
	transition: opacity 1s, transform 1s;
	transition-delay: 1.4s;
}
.normalFade04.active {
	opacity: 1;
}

.normalFade05 {
	opacity: 0;
	transition: opacity 1s, transform 1s;
	transition-delay: 1.6s;
}
.normalFade05.active {
	opacity: 1;
}









.headerBtn {
    position: absolute;
    top: 8px;
    right: 9px;
    left: auto;
    z-index: 3;
    width: 35px;
    height: 35px;
    cursor: pointer;
    padding: 5px;
    background:url(../images/menu.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.headerBtn.open{
    top: 8px;
}
#contents {
    padding-top: 0;
    margin: 0 auto;
}
.bisinessTitle {
    color: #FFFFFF;
    margin-left: 15px;
    padding-top: 13px;
    width: fit-content;
}
.logoBox{
    width: fit-content;
}

.linkList {
    position: fixed;
    top: 0;
    width: 83%;
    z-index: 1000;
    left: auto;
    background-color: #FFFFFF;
    right: -83%;
    height: 100vh;
    box-sizing: border-box;
    margin-top: 46px;
    border-right: none;
    background: rgba(255, 255, 255, 0.96);
}
#container {
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 46px;
    padding-bottom: 0;
}

.companyLinks{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding-left: 4%;
    padding-right: 4%;
}
.companyLinks ul{
    display: grid;
    grid-template-columns: 1fr 1fr;

}
.companyLinks ul li{
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    text-align: center;
    font-size: 12px;
}
.companyLinks ul li:first-child{
    border-left: 2px solid #dcdcdc;
}
.companyLinks ul li:last-child{
    border-right: 2px solid #dcdcdc;
}


div{
    position: relative;
    box-sizing: border-box;
}


.attentionBox{
    margin-left: 4%;
    margin-right: 4%;
}
.connectBrandDetailBox{
    margin-bottom: 60px;
}

.viewMoreBrandStory a{
    width: fit-content;
    padding: 9px 35px;
    background-image: url(../images/plus.svg);
    background-size: 10px;
    background-position: right 10px center;
    border: solid 1px #333;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.modaal-content-container {
    padding: 15px;
}

.brandRegFormBox{
    padding: 4%;
}

.formGroup label {
    display: block;
    text-align: left;
    margin-bottom: 9px;
}

.connectContctLead{
    background-color: #f9f9f9;
    padding: 4%;
    font-size: 16px;
}
input[type="text"], input[type="email"], select, textarea, textarea.form-control {
    height: auto;
    vertical-align: middle;
    font-size: 16px;
    font-weight: normal;
    line-height: 39px;
    color: rgb(0, 0, 0);
    margin: 0px;
    padding: 0px 15px;
    background: rgb(248, 248, 248);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(221, 221, 221);
    border-image: initial;
    border-radius: 3px;
    transition: 0.3s;
}
textarea{
    width: 100%;
    line-height: 1.4em;
    min-height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.thanksCheck{
    font-size: 20px;
    text-align: center;
}

.thanksLeadBox {
    border: 3px #dcdcdc solid;
    padding: 30px;
}
.thanksWrapper{
    padding: 4%;
}


.btn-action {
    display: block;
    background-color: #000;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFFFFF;
    line-height: 1;
    border-radius: 0;
    border: none;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}



.checkbox-3 {
    border: none;
}
.connectFollowList{
    margin-bottom: 20px;
}
.connectFollowList label {
    display: flex;
    align-items: center;
    gap: 0 1em;
    position: relative;
    max-width: 100%;
    margin-bottom: .4em;
    padding: .5em .7em;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    background-color: #434e5626;
    cursor: pointer;
    font-size: 16px;
}
.connectFollowList label span{
    font-size: 11px;
}
.connectFollowList label:has(:checked) {
    background-color: #434e56;
    color: #fff;
}

.connectFollowList label::before {
    width: 14px;
    height: 14px;
    border-radius: 1px;
    background-color: #fff;
    content: '';
}

.connectFollowList label:has(:checked)::after {
    position: absolute;
    top: 14px;
    left: 15px;
    transform: rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid #434e56;
    border-width: 0 2px 2px 0;
    content: '';
}
.
.connectFollowList input[type=checkbox] {
    display: none;
}

.brandRegFormBox h2 {
    font-size: 17px;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}

.connectContctLead {
    background-color: #f9f9f9;
    padding: 4%;
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
}
.lazyHeight{
    min-height: 100vw;
}
.connectFreeLeadText{
    text-align: center;
    margin-bottom: 10px;
}

.modaal-close {
    position: fixed;
    right: 10px;
    top: 10px;
    color: #fff;
    cursor: pointer;
    opacity: 1;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0);
    border-radius: 100%;
    -webkit-transition: all 0.2sease-in-out;
    transition: all 0.2sease-in-out;
}
.container {
    width: auto;
}
.movieBox {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
}
.movieBox iframe {
    width: 100%;
    height: 100%;
}
.movieBox video {
    width: 100%;
    height: 100%;
}

.welcomeBtn{
    text-align: center;
    margin-bottom: 40px;
    color: #777;
}

.goToMore{
    text-align: center;
    font-size: 11px;
}
.goToMore a{
    color: #777;
}










.visualMsg h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.4;
}

.msgBox h2 {
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 20px;
    text-align: left;
    margin-top: 20px;
}


section.aboutConnect {
    padding-top: 80px;
    padding-bottom: 80px;
}


.thanksLeadBox a{
    text-decoration: underline;
}


.bottomMainVisual{
    padding-top: 200px;
    margin-bottom: 100px;
}

.bottomMainVisual.articleContents{
    padding-top: 100px;
}



.aboutBrandListBox{
    padding-top: 40px;
}

.aboutBrandListBox::before{
    width: 40%;
    border-top: #000 solid 1px;
    content: '';
    top: 0;
    left: 0;
    position: absolute;
}
.aboutBrandList{
    margin-left: 33%;
}

.aboutBrandList li{
    margin-bottom: 5px;
}
.interview3c{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3%;
}
.interview3c .interviewContents .imgBox{
    overflow: hidden;
    height: fit-content;
}
.interview3c .interviewContents a{
    display: block;
}

.corporateProfileBox table{
    table-layout: fixed;
    width: 100%;
}
.corporateProfileBox table td,
.corporateProfileBox table th{
    padding: 10px;

}
.corporateProfileBox table th{
    text-align: right;
    font-weight: 700;
}







/*-------------------------------------
 footer
-------------------------------------*/
#footer {
    position: relative;
    background: #F0F0F0;
    color: #000;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 10px;
    font-size: 10px;
}

.footerService2c{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.footerLinks{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1100px;
}
#footer p {
    font-size: 13px;
    font-weight: 400;
    color: #000;
    line-height: 1.3;
    margin: 10px 0 30px 0;
}
#footer a{
	color: #000;
}

#footer ul li a{
	font-size: 12px;
	color: #000;
}
#footer ul li{
	margin-bottom: 8px;
    text-align: left;
}


.footerLogo2cBox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 30px;
    text-align: left;
}


.footerLogo2cBox img{
	height: 20px;
	width: auto;
}



.footerLogo2cBox div {
    padding: 15px 15px 15px 0px;
}







/* INTERVIEW
/*-------------------------------------*/

h1.leadBigL {
    font-size: 28px;
}


#interviewContents {
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 60px;
    padding-top: 30px;
	line-height: 1.6;
}
.topicPath{
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	padding: 5px 0;
	margin-top: 63px;
}
.topicPath ul{
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.topicPath ul li{
	display: inline-block;
	margin-right: 25px;
	font-size: 12px;
	position: relative;
}
.topicPath ul li:nth-child(n+2)::before {
    content: '>';
    position: absolute;
    left: -15px;
    top: 1px;
    font-size: 9px;
}

#interviewContents h1{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

.interview2cContants {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 690px;
}
.whitepaper2cContants {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

.mainLead{
	margin-bottom: 30px;
}


#interviewContents section{
	margin-bottom: 30px;
}
#interviewContents h2{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
}
#interviewContents p{
	margin-bottom: 20px;
}

#interviewContents h2.question{
	position: relative;
	text-indent: 75px;
}
#interviewContents h2.question::before{
	width: 60px;
    height: 1px;
    content: '';
    background-color: #000000;
    position: absolute;
    top: 13px;
    left: 0;
}
#interviewContents h3{
	font-weight: bold;
	margin-bottom: 15px;
	margin-bottom: 10px;
}
.relationBox {
    display: grid;
    grid-template-columns: 1fr 180px;
    column-gap: 20px;
}
.relationBox .relationImg{
    display: flex;
    align-items: center;
}
.relationContents li{
	margin-bottom: 20px;
	border:solid 1px #dcdcdc;
	border-radius: 3px;
	padding: 15px;
	box-sizing: border-box;
}
.relationContents li a{
	color: #09005c;
}
.relationContents li a:hover{
	text-decoration: none;
}
.relationContents li a:hover img,
.relationContents li a:hover h2,
.relationContents li a:hover p{
	opacity: 0.7;
}

#interviewContents .relationContents h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0px;
    position: relative;
}
#interviewContents .relationContents h3{
	font-size: 11px;
	color: #333;
}
#interviewContents .relationContents p{
	font-size: 11px;
	color: #333;
}
.rightImg{
    float: right;
    max-width: 280px;
    margin-left: 30px;
    margin-bottom: 20px;
}

.leftImg{
    float: left;
    max-width: 280px;
    margin-right: 30px;
    margin-bottom: 20px;
}
#interviewContents section::after{
	clear: both;
	display: block;
	content: '';
}




.flowContentsBox h3{
    margin-bottom: 30px;
}
.flowContentsList ul li::before {
    display: block;
    height: 100%;
    content: '';
    width: 5px;
    background-color: #000;
    position: absolute;
    left: 5px;
    top: 25px;
}
.flowContentsList ul li {
    padding-left: 30px;
    padding-bottom: 20px;
    position: relative;
}

.flowContentsList ul li::after {
    display: block;
    height: 15px;
    content: '';
    width: 15px;
    background-color: #000;
    position: absolute;
    left: 0px;
    border-radius: 30px;
    top: 24px;
}
.flowContentsList ul li:last-child::before{
    display: none;
}
.flowContentsList ul li:last-child{
    margin-bottom: 0;
}

.flowContentsList h4 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}
#interviewContents .flowContentsList p{
	margin-bottom: 0;
}

.flowContentsBox{
    background-color: #FFFFFF;
    padding: 40px;
}

.flowContentsText{
    padding: 20px;
    background-color: #fff;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 10% 1fr;
    column-gap: 3%;
}
.flowContentsText.block{
    display: block !important;
}

.flowContentsText .imgBoxL{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flowContentsText .imgBoxL img{
    max-width: 35px;
}


#interviewContents .container.bgF9F9F9 {
    max-width: 800px;
    padding-left: 4%;
    padding-right: 4%;
	padding-top: 60px;
	padding-bottom: 40px;
}
.whitepaper2cContants .centerImg.round{
	border-radius: 10px;
	overflow: hidden;
}


.whitePaperTopContents{
	background-color: #FFF;
	padding: 4%;
	margin-bottom: 50px;
	border-radius: 5px;
}
.whitePaperTopContents .relationImg{
	border-radius: 3px;
	overflow: hidden;
}
.whitePaperTopContents ul li{
	text-align: left;
}
.whitePaperTopContents ul li a {
	text-decoration: none;
}
.whitePaperTopContents ul li a .whitePaperTopBox{
	
	display: grid;
	grid-template-columns: 33% 1fr;
	column-gap: 4%;
}
.whitePaperTopContents ul li h2{
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 10px;
}

#interviewContents section{
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 40px;
}

.thanksBox{
    max-width: 800px;
    margin-bottom: 120px;
    margin-left: auto;
    margin-right: auto;
}
.thanksBox h1{
    font-size: 28px;
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0px;
    font-weight: 800;
    margin-bottom: 30px;
    font-family: inherit;
    text-align: center;
}
.thanksBox h2{
    font-size: 20px;
}
.contactFormBox {
    padding: 50px 60px 50px 60px;
    margin: 0 auto;
    margin-bottom: 30px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, .1);
    border: transparent;
    max-width: 1000px;
    margin-bottom: 120px;
}

.contactFormBox h1 {
    font-size: 28px;
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0px;
    font-weight: 800;
    margin-bottom: 30px;
    font-family: inherit;
    text-align: center;
}
.formGroup {
    margin-bottom: 20px;
}

.formGroup label {
    display: block;
    text-align: left;
    margin-bottom: 9px;
}

input[type="text"],
input[type="email"],
select,
textarea,
textarea.form-control {
	height: auto;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #F8F8F8;
    border: 1px solid #DDDDDD;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
    color: #000000;
	border-radius: 5px;
    width: 100%;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
select{
	-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	background: url(../images/select_arrow.png) left 10px center no-repeat;
    background-size: 15px, 15px;
    padding-left: 38px;
}

input[type="text"]:focus,
textarea:focus,
textarea.form-control:focus {
	outline: 0;
	background: #FFFFFF;
    border: 1px solid #111;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

input[type="text"]:-moz-placeholder, textarea:-moz-placeholder, textarea.form-control:-moz-placeholder { color: #888; }
input[type="text"]:-ms-input-placeholder, textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }
input[type="text"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }

.formGroup input[type="text"].formSonotaText {
    padding: 10px;
    display: inline-block;
    margin-left: 10px;
    width: 200px;
    font-size: 15px;
    height: auto;
    line-height: 1em;
}

.brandRegFormBox textarea {
    field-sizing: content;
}

textarea {
    width: 100%;
    line-height: 1.4em;
    min-height: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.formGroup label {
    display: block;
    text-align: left;
    margin-bottom: 9px;
    font-weight: 600;
}
.formGroup label.fwNormal{
    font-weight: normal;
}

.sectionYajirushiLinkBox{
    position: relative;
    float: right;
    margin-top: 40px;
}
#footer .footerCvsBtn{
    position: absolute;
    top: -20px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
#footer .footerCvsBtn a {
    display: inline-block;
    padding: 12px 60px;
    text-align: center;
    color: #FFF;
    font-weight: 600;
    background-color: #000;
    color: #FFF;
    font-size: 16px;
}

section .footerCvsBtn{
    position: relative;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
section .footerCvsBtn a {
    display: inline-block;
    padding: 12px 60px;
    text-align: center;
    color: #FFF;
    font-weight: 600;
    background-color: #000;
    color: #FFF;
    font-size: 16px;
}


.mvCvsBtn{
    margin-top: 30px;
}
.mvCvsBtn a {
    display: inline-block;
    padding: 12px 60px;
    text-align: center;
    color: #FFF;
    font-weight: 600;
    background-color: #000;
    color: #FFF;
    font-size: 16px;
}