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

/**********************************************************
	Common Things
**********************************************************/




.btn--gf {  } 





/**********************
	
***********************/
.fv { background: url("../img/bg_fv_sp.jpg") no-repeat 50% 0/cover; padding-top: 83vw; padding-bottom: 15.5vw; }
.fv__inner { width: calc(100% - 40px); margin-left: auto; margin-right: auto; }
.fv__ttl {  }
.fv__ttl img { width: 61.5vw; }
.fv__list { margin-top: 4.8vw; }
.fv__list img { width: 75.75vw; }
.fv__btn { display: block; margin-top: 4.8vw; }
.fv__btn img { width: 77.38vw; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.fv { background-image: url("../img/bg_fv_pc.jpg"); padding-top: 175px; padding-bottom: 150px; }
	.fv__inner { width: calc(100% - 116px); }
	.fv__ttl {  }
	.fv__ttl img { width: 527px; }
	.fv__list { margin-top: 64px; }
	.fv__list img { width: 541px; }
	.fv__btn { margin-top: 64px; }
	.fv__btn img { width: 480px; }
}
@media print, screen and (min-width:1401px) {
	.fv { padding-top: 12.5vw; padding-bottom: 10.65vw; }
	
	.fv__ttl {  }
	.fv__ttl img { width: 37.65vw; }
	.fv__list { margin-top: 4.5vw; }
	.fv__list img { width: 38.65vw; }
	.fv__btn { margin-top: 4.5vw; }
	.fv__btn img { width: 34.26vw; }
}

/**********************
	Under Fv
***********************/
.under-fv { display: flex; justify-content: center; align-items: center; height: 80px; background: #fff; border-bottom: 1px solid var(--c-navy); text-align: center; }
.under-fv img { width: 260px; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.under-fv { height: 110px; }
	.under-fv img { width: 400px; }
}

/**********************
		Common
***********************/

.main-container { background: #fff; padding-bottom: 0; }
.sec { position: relative; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	
}

/**********************
	Work Project
***********************/
.sec--wopr { background: #f4f6fa; padding-bottom: 140px; }
.sec--wopr::before { position: absolute; bottom: 10vw; left: 50%; transform: translateX(-50%) rotate(-10deg); display: block; width: 200%; min-height: 240px; height: 64vw; background: #ecf3ff; content: ""; z-index: 0; }
.wopr-swiper-wrap { margin-top: 32px; }
.wopr-swiper .swiper-wrapper { transition-timing-function: linear; padding-top: 10px; padding-bottom: 10px;}
.wopr-swiper-slide { max-width: calc(100% - 80px); background: #fff; border-radius: 30px; margin: 0 10px; padding: 30px 30px 30px; box-shadow: 0px 0px 10px 0px rgba(0,74,153,0.3); }/* max-width: 610px;*/
.wopr-swiper-slide__img img { border-radius: 10px; }
.wopr-swiper-slide__inner {  }
.wopr-swiper-slide__ttl { min-height: 44px; margin-bottom: 10px; font-size: 1.6rem; font-weight: 600; line-height: 1.375; color: var(--c-navy); }
.wopr-swiper-slide__list-wrap {  }
.wopr-swiper-slide__list:not(:first-of-type) { margin-top: 10px; }
.wopr-swiper-slide__list { display: flex; justify-content: space-between; align-items: stretch; }
.wopr-swiper-slide__list__ttl { display: flex; justify-content: center; align-items: center; width: 70px; min-height: 30px; background: var(--c-navy); border-radius: 6px; margin-right: 10px; padding-bottom: 2px; font-size: 1.0rem; font-weight: 600; line-height: 1; letter-spacing: 0.025em; text-indent: 0.025em; text-align: center; color: #fff; }
.wopr-swiper-slide__list__txt { flex: 1; display: flex; align-items: center; font-size: 1.0rem; font-weight: 400; line-height: 1.7; }
@media print, screen and (max-width:680px) {
	.wopr-swiper-slide__inner { margin-top: 12px; }
}
@media print, screen and (min-width:681px) {
	.sec--wopr { padding-top: 142px; padding-bottom: 395px; }
	.sec--wopr::before { bottom: 10vw; height: 355px; }
	.wopr-swiper-wrap { margin-top: 90px; }
	.wopr-swiper-slide { display: grid; grid-template-columns: 220px auto; grid-template-rows: auto; grid-column-gap: 30px; grid-row-gap: 0px; min-width: 610px; max-width: 610px; }
	.wopr-swiper-slide__img { grid-area: 1 / 1 / 2 / 2; }
	.wopr-swiper-slide__inner { grid-area: 1 / 2 / 2 / 3; align-self: flex-end; }
	.wopr-swiper-slide__ttl { min-height: 50px; margin-bottom: 10px; font-size: 2.1rem; line-height: 1.476; }
	.wopr-swiper-slide__list__ttl { width: 84px; font-size: 1.2rem; }
	.wopr-swiper-slide__list__txt { font-size: 1.2rem; line-height: 1.41667; }
}

/**********************
		
***********************/
.navy-wrap { background: var(--c-navy); }
._skew { position: relative; left: 50%; transform: translateX(-50%) rotate(10deg); width: 200%; }
._skew__inner { position: relative; left: 50%; transform: translateX(-50%) rotate(-10deg); width: 100vw; }

.sec--wost { padding-top: 102px; }
.wost-wrap { margin-top: 51px; }
.wost { background: #fff; padding: 20px 20px 20px; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); }
.wost__ttl { display: flex; justify-content: center; align-items: center; height: 40px; background: var(--c-navy); border-radius: 10px; font-size: 2.0rem; font-weight: 700; line-height: 1; color: #fff; }
.wost__ttl__main {  }
.wost__ttl__sub { font-size: 70%; letter-spacing: 0.04em; }
.wost__txt { display: flex; justify-content: space-between; align-items: stretch; margin-top: 18px; }
.wost__txt::before { display: flex; justify-content: center; align-items: center; border: 1px solid var(--c-navy); border-radius: 6px; padding: 0 10px; font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-indent: 0.05em; text-align: center; color: var(--c-navy); content: "業務環境"; }
.wost__txt span { flex: 1; font-size: 1.8rem; font-weight: 700; line-height: 1.3; }
.wost__btn { position: relative; left: 50%; transform: translateX(-50%); display: inline-block; margin-top: 48px; text-align: center; }
.wost__btn img { width: 290px; }
@media print, screen and (max-width:680px) {
	.navy-wrap { margin-top: -20px; }
	.wost:not(:first-of-type) { margin-top: 20px; }
	.wost__ttl {  }
	.wost__ttl__main { margin-right: 5px; }
	.wost__txt { padding-left: 13px; padding-right: 13px; }
	.wost__txt span { text-align: center; }
}
@media print, screen and (min-width:681px) {
	.navy-wrap { margin-top: -110px; }
	.sec--wost { padding-bottom: 75px; }
	.wost-wrap { display: flex; justify-content: space-between; max-width: 840px; margin-top: 55px; margin-left: auto; margin-right: auto; }
	.wost { width: calc(50% - 30px); padding: 40px 40px 40px; }
	.wost__ttl { flex-direction: column; height: 72px; }
	.wost__ttl__main {  }
	.wost__ttl__sub { margin-top: 10px; }
	.wost__txt { margin-top: 24px; }
	.wost__txt::before { margin-right: 20px; font-size: 1.8rem; }
	.wost__txt span { font-size: 2.0rem; }
	.wost__btn img { width: 480px; }
}

/**********************
	User's Voice
***********************/
.usvo-outer-wrap { background: #fff; border-radius: 20px; padding: 52px 20px 20px; }
.usvo-wrap { margin-top: 40px; }
.usvo { background: #dae8f6; border-radius: 10px; padding: 18px 20px 18px; }
.usvo:not(:first-of-type) { margin-top: 20px; }
.usvo__ttl { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--c-navy); margin-bottom: 15px; padding-bottom: 17px; }
.usvo__ttl__icon { width: 40px; height: 40px; border: 1px solid var(--c-navy); border-radius: 50%; overflow: hidden; margin-right: 12px; }
.usvo__ttl__txt { flex: 1; font-size: 1.6rem; font-weight: 700; line-height: 1.5; color: var(--c-navy); }
.usvo__txt { font-size: 1.2rem; font-weight: 400; line-height: 1.667; }
@media print, screen and (max-width:680px) {
	.usvo__ttl__txt { margin-right: -5px; }
}
@media print, screen and (min-width:681px) {
	.sec--usvo { padding-top: 75px; padding-bottom: 266px; }
	.usvo-outer-wrap { padding: 104px 100px 100px; }
	.usvo-wrap { margin-top: 50px; }
	.usvo { padding: 30px 30px 28px; }
	.usvo:not(:first-of-type) { margin-top: 30px; }
	.usvo__ttl { margin-bottom: 7px; padding-bottom: 15px; }
	.usvo__ttl__icon { width: 56px; height: 56px; margin-right: 10px; }
	.usvo__ttl__txt { font-size: 2.5rem; line-height: 1.24; }
	.usvo__txt { font-size: 1.6rem; line-height: 1.8125; }
}

/**********************
	Flow
***********************/
.sec--flow { border-bottom: 1px solid var(--c-navy); padding-top: 62px; padding-bottom: 100px; }
.flow-wrap { margin-top: 32px; }
.flow {  }
.flow__icon {  }
.flow__inner {  }
.flow__ttl { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--c-navy); }
.flow__ttl sup { font-size: 60%; }
.flow__ttl ._lslesser { letter-spacing: -0.05em; }
.flow__txt { font-size: 1.3rem; font-weight: 400; line-height: 1.5; }
.flow__notice { display: block; margin-top: 5px; padding-left: 1em; text-indent: -1em; font-size: 1.0rem; line-height: 1.4; }
.flow-arrow { text-align: center; }
.flow-arrow img { width: 20px; }
.flow__btn { display: block; margin-top: 40px; text-align: center; }
.flow__btn img { width: 290px; }
@media print, screen and (max-width:680px) {
	.flow-wrap { padding-left: 10px; padding-right: 10px; }
	.flow { display: flex; justify-content: space-between; align-items: center; }
	.flow__ttl { border-bottom: 1px solid var(--c-navy); margin-bottom: 7px; padding-bottom: 10px; }
	.flow__icon { width: 138px; margin-right: 10px; }
	.flow__inner { flex: 1; }
	.flow-arrow { display: block; padding: 19px 0 17px; }
}
@media print, screen and (min-width:681px) {
	.sec--flow { padding-top: 170px; padding-bottom: 150px; }
	.flow-wrap { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; grid-column-gap: 0; grid-row-gap: 0px; margin-top: 50px; }
	.flow:nth-of-type(2) .flow__ttl { margin-left: -20px; margin-right: -20px; }
	.flow__icon { position: relative; text-align: center; }
	.flow__icon img { width: 131px; }
	.flow:not(:last-of-type) .flow__icon::before { position: absolute; top: 50%; transform: translateY(-50%); right: -13px; display: block; width: 20px; height: 30px; background: url("../img/icon_flow_arrow_pc.svg") no-repeat center/contain; content: ""; }
	.flow__inner { margin-top: 19px; text-align: center; }
	.flow__ttl { position: relative; margin-bottom: 34px; font-size: 2.0rem; }
	.flow__ttl::before { position: absolute; top: calc(100% + 11px); left: 50%; transform: translateX(-50%); display: block; width: 1px; height: 18px; background: var(--c-navy); content: ""; }
	.flow__txt { font-size: 1.4rem; line-height: 1.642; }
	.flow__notice { margin-top: 17px; margin-left: -30px; margin-right: -30px; }
	.flow-arrow { display: none; }
	.flow__btn { margin-top: 60px; }
	.flow__btn img { width: 480px; }
}

/**********************
	Operating Company
***********************/
.sec--comp { padding-top: 94px; padding-bottom: 80px; }
.comp-cont { margin-top: 44px; margin-bottom: 10px; text-align: center; }
.comp-cont__ttl { font-size: 1.8rem; font-weight: 700; line-height: 1.667; }
.comp-cont__txt { margin-top: 17px; font-size: 1.4rem; font-weight: 400; line-height: 1.714; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.sec--comp { padding-top: 146px; padding-bottom: 120px; }
	.sec--comp .main-ttl__en { margin-left: -50px; margin-right: -50px; }
	.comp-cont { margin-top: 44px; margin-bottom: 82px; }
	.comp-cont__ttl { font-size: 2.5rem; line-height: 1.6; }
	.comp-cont__txt { margin-top: 29px; font-size: 1.7rem; line-height: 1.764; }
}

/*	Logo Slide	*/
.logoSlide { position: relative; z-index: 2; } /* background-color: #ffffff; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);*/
.logoSlide .swiper-wrapper { transition-timing-function: linear;
 } 
.logoSlide .swiper-slide { width: auto; }
.logoSlide img { object-fit: cover; width: auto; height: 15rem; }
.logoSlide_pc { display: block; }
.logoSlide_sp { display: none; }

@media print, screen and (max-width:680px) {
	.logoSlide img { height: 10rem; }
}
@media print, screen and (max-width:580px) {
	.logoSlide_pc { display: none; }
	.logoSlide_sp { display: block; }
	.minusMargin { margin-top: -2rem; }
}
@media print, screen and (min-width:681px) {
	.logoSlide::before { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 2.0rem; font-weight: 700; line-height: 1; text-align: center; color: var(--c-navy); content: "［コトブックの取引先企業］"; z-index: 10; }
}



/**********************
	
***********************/
.sec--faq { background: var(--c-navy); padding-top: 98px; padding-bottom: 100px; }
.faq-wrap { border-top: 1px solid #fff; margin-top: 41px; }
.faq { border-bottom: 1px solid #fff; color: #fff; }
.faq__heading { position: relative; }
.faq__heading button { position: relative; width: 100%; padding: 26px 0 24px 40px; text-align: justify; color: #fff; transition: 0.4s; }
.faq__header__txt { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.faq__heading__icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background: #fff; border: 1px solid #fff; border-radius: 50%; }
.faq__heading__icon img { width: auto; height: 10px; }
.faq__heading button::before { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(135deg); display: block; width: 8px; height: 8px; border-right: 2px solid #fff; border-top: 2px solid #fff; content: ""; transition: .4s; transform-origin: center; }
.faq__heading button.is-opend::before { transform: translateY(-50%) rotate(315deg); }

.faq__content { margin-top: -8px; padding-bottom: 24px; }
.faq__content__inner { position: relative; padding-top: 3px; padding-left: 40px; font-size: 1.4rem; font-weight: 400; line-height: 1.714; }
.faq__content__inner::before { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background: url("../img/txt_a.svg") no-repeat center/auto 10px; border: 1px solid #fff; border-radius: 50%; content: ""; }
.faq__btn { display: block; margin-top: 48px; text-align: center; }
.faq__btn img { width: 290px; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.sec--faq { padding-top: 146px; }
	.faq-wrap { margin-top: 53px; }
.faq { position: relative; border-bottom: 1px solid #fff; color: #fff; }
	.faq::before,
	.faq:last-of-type::after { position: absolute; left: 0; display: block; width: 120px; height: 3px; background: #fff; content: ""; }
	.faq::before { top: -2px; }
	.faq:last-of-type::after { bottom: -2px; }
.faq__heading { position: relative; }
.faq__heading button { position: relative; width: 100%; padding: 47px 0 45px 112px; }
.faq__header__txt { font-size: 2.0rem; }
	.faq__heading__icon { left: 36px; width: 50px; height: 50px; }
	.faq__heading__icon img { height: 16px; }
	.faq__heading button::before { right: 40px; width: 14px; height: 14px; }

	.faq__content { margin-top: 3px; padding-bottom: 41px; }
	.faq__content__inner { padding-left: 112px; font-size: 2.0rem; line-height: 2; }
	.faq__content__inner::before { left: 36px; width: 50px; height: 50px; background-size: auto 16px; }
.faq__btn { display: block; margin-top: 48px; text-align: center; }
	
	
	.faq__btn img { width: 480px; }
}

/**********************
		
***********************/

@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	
}

/**********************
		
***********************/

@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	
}

/**********************
		
***********************/

@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	
}








/* Swiper 기본 스타일 (필수) */
.swiper {
    width: 100%;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex; /* 슬라이드를 가로로 배열 */
}

.swiper-slide {
    width: auto;
    flex-shrink: 0; /* 슬라이드가 줄어들지 않도록 */
    
    box-sizing: border-box;
}