/* 地域別トップページ用追記CSS
* --------------------------------------- */


:root {
--color-01: #e60012;
}

body::before{content:"";position:fixed;width:100%;height:100dvh;top:0;left:0;border:solid 10px var(--color-01) !important;z-index:20000 !important;pointer-events:none}

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

/*logo*/
.fixed-logo-mark-wrap{position:fixed;top:10px;left:10px;width:10%;padding:15px 20px;background-color:#fff;border-radius:0 0 10px 0;z-index:1100}
@media (max-width:1480px){
.fixed-logo-mark-wrap{width:180px;padding:10px 20px}
}
@media (max-width:1380px){
.fixed-logo-mark-wrap{width:170px}
}

@media (max-width:749px){
.fixed-contact-btn-wrap a{font-size:3vw}
}
@media (max-width:499px){
.fixed-logo-mark-wrap{top:10px;left:10px;width:90px;padding:5px 10px 0}
.fixed-contact-btn-wrap a{width:90px;height:64px;font-size:3
.6vw;padding:10px 0 0;border-radius:0}
}

/*お問い合わせ*/
.fixed-contact-btn-wrap{display:none}
@media (max-width:990px){
.fixed-contact-btn-wrap{display:block;position:fixed;top:0;right:0;z-index:1100}
.fixed-contact-btn-wrap a{display:flex;justify-content:center;align-items:center;width:160px;height:99px;font-size:2vw;font-weight:900;font-family:"Montserrat",sans-serif;color:#fff;text-align:center;transition:all 0
.2s ease-out;background:var(--color-01);border-radius:0 0 0 10px}
}
@media (orientation:landscape) and (max-width:990px){
.fixed-contact-btn-wrap a{width:160px;height:64px;font-size:2
.8vw;padding:10px 0 0;border-radius:0}
}
@media (max-width:749px){
.fixed-contact-btn-wrap a{font-size:3vw}
}
@media (max-width:499px){
.fixed-contact-btn-wrap a{width:110px;height:64px;font-size:3
.6vw;padding:10px 0 0;border-radius:0}
}

/* FV
* --------------------------------------- */

/*FV all wrap*/
.section6-header  {background: #f5f5f5}

/*FV LEFT*/
.text-left-wrapper  {display:flex;justify-content: center;align-items: center;}
.fv-wrap-inner  {padding: 18% 5% 11%}

/*会社の未来、想い、事業の本質を捉え、企業らしさを活かした独自性をデザインします。*/
.section6-leads-texts01{display:block;font-size:2.2vw;font-weight:700;font-family:"corporate-logo-ver2",sans-serif;font-style:italic;line-height:1.2;font-feature-settings:"palt";color:var(--color-01);text-align:left;margin:0 0 5%;padding:0}

/*商売繁盛 満員御礼*/
.text-right-wrap{display:block;width:100%;margin:0 0 5%}
.right-texts2{display:block;font-size:9.6vw;font-family:"corporate-logo-ver2",sans-serif;font-weight:700;font-style:italic;line-height:1;letter-spacing:-.5vw;text-align:left;color:var(--color-01);margin:0;padding:0}

/*京都で”独自性”をデザインするホームページ制作会社OKデザイン*/
.section6-texts{display:block;font-size:2vw;font-family:"corporate-logo-ver2",sans-serif;font-weight:700;font-style:italic;line-height:1.4;color:var(--color-01);text-align:left;margin:0 0 10px 0;padding:0}

/*service by 株式会社ええやん*/
.section6-s-texts{display:block;font-size:1.1vw;font-weight:400;font-style:italic;font-family:"corporate-logo-ver2",sans-serif;margin:0;padding:0}

@media (max-width: 1280px) {
.fv-wrap-inner  {padding: 23% 5% 5.5%}
}

@media (max-width: 990px) {
.fv-wrap-inner  {padding: 150px 3% 80px 3%}

.section6-leads-texts01{font-size:4.4vw;text-align:center}
.right-texts2{font-size:18vw;text-align:center}
.section6-texts{font-size:4vw !important;text-align:center;}
.section6-texts span{font-size:2.4vw}
.section6-s-texts{font-size:1.5rem;text-align:center;}
}

@media (max-width: 499px) {
.fv-wrap-inner  {padding: 110px 3% 40px 3%}

h1.section6-texts {font-size: 5.5vw !important;text-align: center;}
.section6-texts span {font-size: 1.5rem;}


}



/* 制作事例・プロジェクト事例
* --------------------------------------- */


/* 大切なお客様の声
* --------------------------------------- */


/*他社とは一味違うOKデザインです
* --------------------------------------- */


.section6-integrant-contents{position:relative;margin-top:0;margin-bottom:0 !important;margin-left:0;margin-right:0;padding-top:5%;padding-bottom:5%;background-color:var(--color-01);}
.section6-integrant-wrapper{margin-left:0;margin-right:0;margin-bottom:5%}

.service-support__title {font-size:8.4vw;font-weight:700;font-family:"corporate-logo-ver2",sans-serif;font-style:italic;letter-spacing: 1px;}

@media (max-width: 1200px) {
.section6-texts{font-size:2.4vw}
.section6-texts span{font-size:1.4vw}
}

@media (max-width: 990px) {
.sub-service__support {margin-top: 0;}
.section6-integrant-contents{padding-top:9%;padding-bottom:9%}
}

@media (max-width: 640px) {
.service-support__text {margin: 50px 10%;text-align: left;}
}


@media (max-width: 499px) {
.service-support__text {margin: 50px 7%;}
.section6-integrant-wrapper {margin-bottom: 8%;}
}


/* 対応範囲
　　クリエイティブメニュー（https://ok-design.co.jp/menu/）に追記
* --------------------------------------- */


.sub-service__support {
  margin-top: 0 !important;
}

/* ホームページ制作料金
* --------------------------------------- */

.fee-area   {padding: 130px 0;}
@media (max-width: 499px) {
.fee-area {padding: 50px 0}
}


/* 京都府内の対応エリア
* --------------------------------------- */

.service-area   {padding: 130px 0;background: #f0f0f0;}

/*ブロックの基本の文字サイズ*/
.base-text{margin-top:50px;font-family:var(--font-family-notoSansCjk);font-weight:var(--font-medium);font-size:clamp(18px,calc((21 / 1345) * 100vw),21px);line-height:calc(42 / 21);letter-spacing:-.42px;color:var(--black)}

/*ブロック*/
.area-block {display: flex;margin: 0 0 2em 15px;}
.base-text  h3{display:flex;justify-content: center;align-items: center;flex-basis: 50px;width: 50px;height: 50px;background: var(--color-01);color: #fff;font-size: 25px;font-weight: 700;z-index: 100}
.base-text  p{flex-basis: calc(100% - 50px);margin: 25px 0 10px -25px;padding: 10px 35px 15px 35px;color: #000 !important;background: #fff;z-index: 90;}

@media (max-width: 990px) {
.service-area   {padding: 80px 0 50px 0;}
}

@media (max-width: 767px) {
p.base-text {font-size: min(calc((16 / 390) * 100vw), 18px);}
}


/* 全国対応でも“お伺いしてなんぼ”の精神で。 中小企業経営のDX化、その“はじまり”をつくる。
* ------------------------------------------------------------------------- */
.service-visit  {padding-bottom: 130px;}
@media (max-width: 990px) {
.service-visit  {padding-bottom: 80px;}
}

/* TOPICS　トピックス
* --------------------------------------- */
.section6-topics-contents{position:relative;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:5%;padding-bottom:4%;background-color:var(--color-01)}
.section6-topics-titles{display:block;font-size:8.4vw;font-weight:700;font-family:"corporate-logo-ver2",sans-serif;font-style:italic;line-height:1;letter-spacing:-.2vw;text-align:center;color:#fff;margin:0 0 5%;padding:0}
.home-topics-slide-wrapper{margin-left:0;margin-right:0;margin-bottom:5%}

.topics-thumnail    {aspect-ratio:4/3;overflow: hidden;}
.post-categories    a    {color: #fff;}
.splide__slide.home-topics-slide-wrap a img {max-height: 100%;min-height: 100%;}

@media (max-width: 990px) {
.section6-topics-contents{padding-top:10%;padding-bottom:9%}
.section6-topics-titles{font-size:10.8vw;margin:0 0 8%}
.home-topics-slide-wrapper{margin-bottom:10%}
}


/* FOOTER
* --------------------------------------- */
#section6.sub-footer {margin-top: 0;border-top: 1px solid #fff;}



/* 
  Scroll UP
------------------------------------------------------------------- */
#backToTop{position:fixed;bottom:10px;right:10px;z-index:1100;display:none;justify-content:center;align-items:center;width:56px;height:50px;font-size:2rem;color:#fff;background:var(--color-01);;border-radius:8px 0 0 0;border:none;cursor:pointer}

#backToTop:hover{background:#000}
#backToTop:focus{outline:none}
@media (orientation:landscape) and (max-width:990px){
#backToTop{width:34px;height:30px;font-size:1.8rem}
}
@media (max-width:749px){
#backToTop{width:34px;height:30px;font-size:1.8rem}
}
@media (max-width:499px){
#backToTop{bottom:71px;width:34px;height:34px;border-radius:0}
}