/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {  color: #000;  font-size: 1em;  line-height: 1.4;}
hr {  display: block;  height: 1px;  border: 0;  border-top: 1px solid #ccc;  margin: 1em 0;  padding: 0;}
audio,
canvas,
iframe,
img,
svg,
video {  vertical-align: middle;}
fieldset {  border: 0;  margin: 0;  padding: 0;}
textarea {  resize: vertical;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ------------------------------------
   common settings
 ------------------------------------ */
body{ font-size:16px; line-height:1.8; color:#000; margin:0; padding:0; word-break: break-all; 
  font-family: "Montserrat",  "Noto Sans JP",  "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
  font-optical-sizing: auto;  font-weight: 400;  font-style: normal;
}

h1,h2,h3,h4,h5,h6,p,ul,dl,ol{margin-top: 0;}
img{max-width: 100%; height: auto;}

/* link color */
a { color: inherit;}
a:hover { opacity: 0.7;}

.memo{ color:#999;}

br.br4pc{ }
br.br4sp{ display: none;}

@media (max-width: 767px) {
    br.br4pc{ display: none;}
    br.br4sp{ display: inline;}
}
/* ------------------------------------
   struct
 ------------------------------------ */
.struct { max-width: 1230px; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}
.struct1000 { max-width: 1030px;  }
.struct800 { max-width: 830px; margin-left: auto; margin-right: auto; }

.w560{ max-width: 560px; margin-left: auto; margin-right: auto;}


/* header
-------------------------------- */
header { position: relative; padding:0px;  border-bottom: 1px solid #000; }
header .inner{ display: flex; flex-wrap: wrap; justify-content: space-between;}
header h1{ flex-shrink: 0; margin: 0 ; padding: 11px 0; line-height: 1.2;}
header nav { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: flex-start; align-items: center; }
header nav ul { display: flex;flex-wrap: nowrap; margin: 0 0 0 20px; padding: 0; font-size: 16px; list-style: none;}
header nav ul li { margin: 0; }
header nav ul li.cr { background: url("../img/mark_tri_up_trq.svg") no-repeat center bottom ;}
header nav ul.nav1 li { padding: 15px 0; }
header nav ul li a{ display: block;margin: 0; padding: 10px 20px; text-decoration: none; color: #000; line-height: 1.2;}
header nav ul li.navContact a { background-color: #32b496; color: #fff;}
header nav ul li.navRecruit a { background-color: #8cd232; color: #fff;}
header nav ul.subNav { display: none;}

header .navBtn { display: none; position: absolute; top: 0; right: 0; width: 70px; height: 100%; box-sizing: border-box; padding: 0;  background-color: #32b496; cursor: pointer;}
header .navBtn div { position: relative; left:20%;  background-color: #fff; height: 2px;width: 60%;  }
    header .navBtn div.bar1 { top: 33%; }
    header .navBtn div.bar2 { top: 49%; }
    header .navBtn div.bar3 { top: 65%; }

@media (max-width: 767px) {
    header h1{ max-width: 240px; box-sizing: content-box;  padding-right: 75px;}
    header nav { display: none; }
    header .navBtn { display: block; }
}

/* ----------  spNavigation */
.spNavigation { position: fixed; top: 0; right: -800px; width: 350px; max-width: 100%; height: 100%; box-sizing: border-box; padding: 15px; overflow: auto; background-color: #32b496; z-index: 999999; color: #fff; transition: all .5s ease; }
.spNavigation.open{ display: block; right: 0;}
.spNavigation h2{ margin-bottom: 15px; padding-right: 60px;}
.spNavigation h3{ margin-bottom: 5px;}
.spNavigation ul{ margin-bottom: 25px; list-style: none; padding: 0 8px;}
.spNavigation ul li{ padding: 0;}
.spNavigation ul li:before{ content: "- "; font-weight: bold;}
.spNavigation a{ color: #fff; text-decoration: none;}

.closeBtn { position: absolute; top: 20px; right: 15px; width: 45px; height: 45px; cursor: pointer; }
.closeBtn:before,
.closeBtn:after { content: "";display: block;position: absolute;background-color: #fff; position: absolute;width: 45px;height: 2px;top: 0; right: 0;}
.closeBtn:before { transform: rotate(45deg);top: 15px;}
.closeBtn:after  { transform: rotate(135deg);top: 15px;}


/* ----------  localNav */
.localNav{  padding:15px 0;  border-bottom: 1px solid #000; }
.localNav ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none;}
.localNav ul li{ margin-right: 35px; }
.localNav ul li a{ text-decoration: none;}

/* recruitNav */
.localNav.recruitNav .inner{ display: flex;  justify-content: space-between;}
.localNav.recruitNav h2{ margin: 0; flex-shrink: 0; font-size: 28px; font-weight: 500; }
.localNav.recruitNav h2 a{ text-decoration: none;}
.localNav.recruitNav .nav{ display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;}
.localNav.recruitNav ul li{ margin-right: inherit; margin-left: 30px; }

.localNav.recruitNav ul.subNav li a{ display: block; padding: 5px 0; }

.localNav.recruitNav ul.jobInfoNav { margin-left: 30px;}
.localNav.recruitNav ul.jobInfoNav li { margin-left: 0;}
.localNav.recruitNav ul.jobInfoNav li a{ display: flex; justify-content: center; align-items: center; min-width: 120px; height: 100%; padding: 2px 5px; background-color: #00bff0; text-align: center;font-size: 15px; line-height: 1.2; color: #fff;}
    .localNav.recruitNav ul.jobInfoNav li.career a{ background-color: #468cdc;}
    .localNav.recruitNav ul.jobInfoNav li.part a{ background-color: #faaa50;}

@media (max-width: 767px) {
    .localNav{  display: none;}
}

/* main 
-------------------------------- */
/* ----- pageTtlArea */
.pageTtlArea{ padding: 80px 50px;  background: url("../img/bg_pageTtl.svg") repeat-x center; text-align: center;}
.pageTtlArea .pageTtl{ display: inline-block; margin-bottom: 0; background: url("../img/bg_pageTtl_left.svg") no-repeat left center #fff; color: #32b496; font-size: 32px; }
.pageTtlArea .pageTtl span{ display: block; padding-left: 100px ; padding-right: 100px; background: url("../img/bg_pageTtl_right.svg") no-repeat right center; }

/* ----- hn style */
.main h3{ font-size: 24px; color:#505050;}

.ctHeader{ padding: 12px 20px ; background-color: #32b496; border-radius: 50px; font-size: 24px; text-align: center; line-height: 1.4; font-weight: 500; color: #fff;}

@media (max-width: 767px) {
    .pageTtlArea{ padding: 30px 0px ;  }
    .pageTtlArea .pageTtl{ font-size: 24px; }
    .pageTtlArea .pageTtl span{ padding-left: 80px ; padding-right: 80px; }
    .ctHeader{ padding: 8px 20px ; font-size: 20px; }
    .main h3{ font-size: 20px;}
}

/* footer
-------------------------------- */
footer{ padding: 80px 0 40px;  background-color: #32b496; color: #fff;}
footer .inner{ display: flex; justify-content: space-between;}

footer .footerCompany{ }
footer .footerCompany h2{ margin-bottom: 40px;}width
footer .adderss{ font-size: 14px;}

footer .footerInfo{ margin-bottom: 40px; }
footer .footerInfo a{ text-decoration: none;}
footer .footerInfo ul { display: flex; justify-content: flex-end; margin: 0; padding: 0; list-style: none;}
footer .footerInfo ul.sNav { margin-bottom: 40px; }
footer .footerInfo ul.sNav li{ margin-right: 15px; }
footer .footerInfo ul.sNav li a{ display: block; padding: 10px 40px; background-color: #fff; color: #32b496 ;  border-radius: 100px;}
footer .footerInfo ul.mNav li{ margin-right: 15px; margin-bottom: 40px; }
footer .footerInfo .certification { display: flex; justify-content: flex-end; align-items: flex-end; font-size: 12px; text-align: right;}
footer .footerInfo .certification .num { text-align: left; }
footer .footerInfo .certification .img { margin-left: 15px; }

footer .copyright { display: flex; justify-content: space-between; flex-direction: row-reverse; font-size: 12px; font-weight: 400; }
footer .copyright p{ margin-bottom: 0; }
footer .copyright a{ text-decoration: none;}

@media (max-width: 880px) {
    footer{ padding: 40px 0 20px; }
    footer .inner{ display: block; text-align: center;}
    footer .footerInfo ul { justify-content: center; flex-wrap: wrap;}
    footer .footerInfo ul.mNav { margin-bottom: 20px; }
    footer .footerInfo ul.mNav li{ margin-bottom: 8px; }
    footer .footerInfo ul.sNav { margin-bottom: 20px; }
    footer .footerInfo ul.sNav li{ margin-bottom: 8px; }
    footer .footerInfo .certification { justify-content: center; }
    footer .copyright { display: flex; justify-content: center; flex-direction: column; text-align: center;}
    footer .copyright a{ display: block; margin-bottom: 15px; }
}

/* ------------------------------------
   HOME
 ------------------------------------ */
.keyVisual{ position: relative;}
.keyVisual .logo{ position: absolute; left: 5%; top: 10%; }
.keyVisual .logo .ttl { margin-bottom: 2%; font-size: 4.5vw; line-height: 1.2; font-weight: 700; color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,0.7); }
.keyVisual .logo .txt { width: auto; box-sizing: content-box; margin-bottom: 0;  color: #000; font-size: 1.7vw; line-height: 1.4; }
.keyVisual .logo .txt .bgTape {padding: 0.1em;background-color: #fff;background-color: rgba(255,255,255,0.50);line-height: 1.8; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.keyVisual .logo .okagesama110{ max-width: 40%; margin-left: 0;}
.keyVisual .maruyosikun{ position: absolute; right: 2%; bottom:3%; max-width: 22%; }
/* bug fix  */
.slick-slide img { width: 100%; }
@media (max-width: 767px) {
    .keyVisual .logo{ position: relative; left: inherit; top: inherit; padding: 15px; }
    .keyVisual .logo .ttl { margin-bottom: .5em; text-align: center; font-size: 40px; color: #505050; text-shadow:none; }
    .keyVisual .logo .txt { width: 100%; box-sizing: border-box; margin-bottom: 0;  color: #505050; font-size: 18px; text-align: center;}
    .keyVisual .maruyosikun{ right: 3%; top:15%; max-width: 30%; }
    .keyVisual .logo .okagesama110{ margin-left: auto; margin-right: auto; text-align: center;}
}
@media (max-width: 480px) {
    .keyVisual .logo .ttl { font-size: 8vw; }
    .keyVisual .logo .txt { font-size: 4vw; }
}

/* ----------  secInfomation */
.secInfomation{ padding: 120px 0 60px;}
.secInfomation h2{ text-align: center;}
.secInfomation .secTtlSub { display: flex; justify-content: space-between; max-width: 318px; margin-left: auto; margin-right: auto;}
.secInfomation .ttlSub { font-size: 20px; }
.secInfomation .linkTo a{ display: block; padding-left: 70px; background: url("../img/mark_arrow01_right_trq.svg") no-repeat left center ; font-size: 13px; color: #32b496; text-decoration: none;}
.secInfomation ul { padding: 0;  border-top: 1px solid #32b496; list-style: none;}
.secInfomation ul li { padding: 5px 0; border-bottom: 1px solid #32b496; }
.secInfomation ul li .cate { display: inline-block; min-width: 100px; margin: 10px 20px 10px 0; padding: 10px 10px ; background-color: #84d2c0; border-radius: 100px; text-align: center; font-size: 14px; line-height: 1.2; color: #fff;}
.secInfomation ul li .date { display: inline-block; min-width: 85px;}
.secInfomation ul li .entryTtl { display: inline-block; margin-bottom: 10px; padding-left: 10px; }
@media (max-width: 767px) {
    .secInfomation{ padding: 60px 0 30px;}
}

/* ----------  secAbout */
.secAbout{ padding: 60px 0 0;  background-color: #d6f0ea;}
.secAbout .pageTtlArea { padding: 0 50px; }
.secAbout .pageTtlArea .pageTtl{ background-color: #d6f0ea;}
.secAbout .ttlSub { margin-top: 10px; text-align: center; font-size: 20px; }

.secAbout .pointItem { min-height: 350px; position: relative; padding: 50px 0 120px;}
.secAbout .pointItem .point { padding-top: 50px; text-align: center;}
.secAbout .pointItem .txtArea .ttl { margin-bottom: 0.5em; font-size: 40px; line-height: 1.4; color: #32b496; font-weight: 700;}
.secAbout .pointItem .img { position: absolute; }
.secAbout .pointItem .img img{ display: block; border-radius: 300px; overflow: hidden;}
.secAbout .pointItem .img.img01 { width: 400px;}
.secAbout .pointItem .img.img02 { width: 200px;}

.secAbout .pointItem.leftImg .txtArea { width: 40%; margin-left: 60%; margin-left: calc( 50% + 80px ); margin-right: auto; margin-top: -105px; }
.secAbout .pointItem.leftImg .img.img01 { top: 50px; right: 65%; right: calc( 50% + 145px ); }
.secAbout .pointItem.leftImg .img.img02 { top: 275px; right: 55%; right: calc( 50% + 20px );}

.secAbout .pointItem.rightImg { background-color: #eef9fe; }
.secAbout .pointItem.rightImg .txtArea { width: 40%; margin-right: 60%; margin-right: calc( 50% + 80px ); margin-left: auto; margin-top: -105px; text-align: right;}
    .secAbout .pointItem.rightImg.point04 .txtArea { margin-top: -146px;}
.secAbout .pointItem.rightImg .txtArea .ttl { color: #54c3f1; }
.secAbout .pointItem.rightImg .img.img01 { top: 50px; left: 65%; left: calc( 50% + 145px ); }
.secAbout .pointItem.rightImg .img.img02 { top: 275px; left: 55%; left: calc( 50% + 20px ); }

@media (max-width: 767px) {
    .secAbout .pageTtlArea { padding: 0 0; }
    .secAbout .pointItem { padding: 0 0 60px;}
    .secAbout .pointItem .txtArea .ttl ,
    .secAbout .pointItem .txtArea .txt { text-align: center;}
    .secAbout .pointItem .img { position: relative; margin-left: auto; margin-right: auto;}
    .secAbout .pointItem.leftImg .txtArea { width: 100%; margin-left: inherit; margin-top: inherit; }
    .secAbout .pointItem.leftImg .img.img01 { top: inherit; right: inherit; padding-right: 70px;}
    .secAbout .pointItem.leftImg .img.img02 { top: inherit; right: inherit; margin-top: -150px; padding-left: 300px;}
    .secAbout .pointItem.rightImg .txtArea { width: 100%; margin-right: inherit; margin-top: inherit;padding-bottom: 20px; }
        .secAbout .pointItem.rightImg.point04 .txtArea { margin-top: inherit;}
    .secAbout .pointItem.rightImg .img.img01 { top: inherit; left: inherit; padding-left: 70px;}
    .secAbout .pointItem.rightImg .img.img02 { top: inherit; left: inherit; margin-top: -150px; padding-right: 300px;}
}
@media (max-width: 480px) {
    .secAbout .pointItem .img.img01 { width: 280px;}
    .secAbout .pointItem .img.img02 { width: 140px;}
    .secAbout .pointItem.leftImg .img.img02 { padding-left: 150px;}
    .secAbout .pointItem.rightImg .img.img02 { padding-right: 150px;}
}

/* ----------  secRecruit */
.secRecruit{ padding: 60px 0; background: url("../img/home_recruit_bg.png") repeat center #29B496; text-align: center;} 
.secRecruit .struct{ position: relative;} 
.secRecruit .ttl{ position: relative; max-width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 60px; z-index: 200; } 
.secRecruit .txt{ margin-bottom: 40px; color: #fff; } 
.secRecruit .link { margin-bottom: 0; } 
.secRecruit .link a{ display:block; width: 200px; height: 200px; margin-left: auto; margin-right: auto; padding-top: 100px; box-sizing: border-box; border-radius: 200px; background: url("../img/mark_arrow02_right_wht.svg") no-repeat center 46px #8CD232; font-size: 20px; line-height: 1.4; color: #fff; text-decoration: none;} 
.secRecruit .img { position: absolute; top: 100px; overflow: hidden; z-index: 100;} 
.secRecruit .img img{ border-radius: 30px; } 
    .secRecruit .img.img01 { right: 65%; right: calc( 50% + 200px ); } 
    .secRecruit .img.img02 { left: 65%; left: calc( 50% + 200px ); } 

@media (max-width: 767px) {
    .secRecruit .ttl{ margin-bottom: 30px; }
    .secRecruit .staffImg { display: flex; justify-content: center; margin-bottom: 20px;} 
    .secRecruit .img { position: relative; top: inherit; margin: 0;} 
    .secRecruit .img img{ border-radius: 10px; } 
        .secRecruit .img.img01 { right: inherit; margin-right: 5px; } 
        .secRecruit .img.img02 { left: inherit; margin-left: 5px; } 
}

/* ----------  secCompany */
.secCompany{ display: flex;}
.secCompany .img{ width: 50%; background: url("../img/home_company_bg.jpg") no-repeat right center; background-size: cover;}
.secCompany .txt{ width: 50%; box-sizing: border-box; padding: 80px ; }
.secCompany .txt h2{ margin-bottom: 40px;}
.secCompany .txt p{ margin-bottom: 40px;}
.secCompany .txt p.link{ margin-bottom: 0;}
.secCompany .txt p.link a{ display: inline-block; padding: 8px 25px 8px 95px; background: url( "../img/mark_arrow01_right_wht.svg") no-repeat 25px center #32b496; border-radius: 30px; color: #fff; text-decoration: none;}

@media (max-width: 767px) {
    .secCompany{ display: block;}
    .secCompany .img{ width: inherit; min-height: 150px; aspect-ratio: 16 / 9; }
    .secCompany .txt{ width: inherit; padding: 40px 15px ; }
    .secCompany .txt h2{ text-align: center;}
    .secCompany .txt p.link{ text-align: center;}
}

/* ------------------------------------
   Pages
 ------------------------------------ */

/* ----------  contactBtnArea */
.contactBtnArea{  }
.contactBtnArea .contactBtn a{ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-bottom: 80px; padding: 30px 40px; background-color: #54c3f1; border-radius: 24px; color: #fff; line-height: 1.4; text-decoration: none;}
.contactBtnArea .contactBtn a span{ display: block; padding-right: 30px; flex-grow: 0; flex-shrink: 0;}
.contactBtnArea .contactBtn a span.ttl{  }
.contactBtnArea .contactBtn a span.txt{ flex-grow: 2; flex-shrink: 1; font-size: 15px; }
.contactBtnArea .contactBtn a span.btn{ padding: 8px 20px;  background-color: #fff; border-radius: 8px; color: #54c3f1; flex-grow: 0; font-size: 18px; }

@media (max-width: 767px) {
    .contactBtnArea .contactBtn a{ display: block; margin-bottom: 60px; text-align: center;}
    .contactBtnArea .contactBtn a span{ padding: 0; }
    .contactBtnArea .contactBtn a span.ttl{ margin-bottom: 12px; }
    .contactBtnArea .contactBtn a span.txt{ margin-bottom: 12px; }
}

/* ----------  information */
.informationPage .secInfomation{ padding-top: 0;}

/* ページ送り CSS */
.pagenavi{padding:27px 0; font-size:14px; line-height:1;}
.pagenavi a,
.pagenavi span{ display:block;float:left;padding:8px 16px;margin-left:5px;margin-bottom:5px;
    background:#32b496;text-decoration:none;color:#FFF;transition: all 0.3s;
    border-radius:3px;  -moz-border-radius:3px; -webkit-border-radius:3px; }
.pagenavi a:hover{ opacity: 0.7;}
.pagenavi span{border:1px solid #32b496;background-color:#FFF;color:#32b496;}



/* ----------  business */
.businessSec{ padding-top: 20px; padding-bottom: 80px;}
.businessSec .businessSecTtlArea{ position: relative; margin-bottom: 60px;}
.businessSec .businessSecTtlArea .img img{ display: inline-block; border-radius: 40px; overflow: hidden;}
.businessSec .businessSecTtlArea .txt{ position: absolute; bottom: 25px; left: 40px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);}
.businessSec .businessSecTtlArea h2{ margin-bottom: 15px; font-size: 40px; line-height: 1.4; }
.businessSec .businessSecTtlArea p{ margin-bottom: 0.5em; font-size: 20px; line-height: 1.4; font-weight: 500;}

.businessSec h3{ margin-bottom: 1em; font-size: 28px; line-height: 1.4; color: #32b496; }
.businessHeatingIMG{border-radius: 30px; overflow: hidden;}

.businessSec .col3Flex { justify-content: space-between; }
.businessSec .col3Flex .boxItem { max-width: 288px; }
.businessSec .boxItem .img { border-radius: 24px; overflow: hidden;}
.businessSec .boxItem .ttl { font-size: 24px;line-height: 1.4; font-weight: 700; color: #32b496; }
.businessSec .boxItem .txt {  }

@media (max-width: 767px) {
    .businessSec{ padding-top: 0; padding-bottom: 40px;}
    .businessSec h3{ font-size: 24px; margin-bottom: .5em; }

    .businessSec .businessSecTtlArea { margin-bottom: 30px; }
    .businessSec .businessSecTtlArea h2{ margin-bottom: 10px; font-size: 30px; }
    .businessSec .businessSecTtlArea .img img{ border-radius: 20px;}
    .businessSec .businessSecTtlArea .txt{ bottom: 15px; left: 20px; }
    .businessHeatingIMG{ max-width: 60%; margin-left: auto; margin-right: auto; border-radius: 20px; }
    .businessSec .boxItem .ttl { font-size: 20px; margin-bottom: 10px; }
}
@media (max-width: 580px) {
    .businessSec .businessSecTtlArea h2{ margin-bottom: 10px; font-size: 28px; }
    .businessSec .businessSecTtlArea .img{ margin-bottom: 15px; margin-left: -15px; margin-right: -15px; }
    .businessSec .businessSecTtlArea .txt{ position:relative; bottom: inherit; left: inherit;  color: #505050; text-shadow: none;/* 1px 1px 2px rgba(0,0,0,0.3); */}
    .businessSec .col3Flex .boxItem { width: 100%; max-width: 100%; }
    .businessSec .boxItem .img { border-radius: 0; }
    .businessSec .boxItem .img img{ display: inline-block; border-radius: 15px; overflow: hidden;}
}

/* ----------  deal */
.dealSec{ padding-bottom: 60px;}
.dealSec h2{ margin-bottom: 30px;}
.dealSec .img{ margin-bottom: 30px; }
.dealSec .img img{ display: inline-block; border-radius: 30px;}
.dealSec .lead{ margin-bottom: 40px; text-align: center;}

.dealSec ul{ padding: 0; list-style: none;}
.dealSec ul li{ box-sizing: border-box ; padding: 0 15px 0 23px; background: url("../img/mark_circle_trq.png") no-repeat left top 6px; }
.dealSec ul.col2Flex li{ min-width: 50%; }

.dealSec .dealItemList { margin-bottom: 60px; }
.dealSec .dealItemList > ul{ width: 50%;}
.dealSec .dealItemList ul.subList li{  background: none; padding-left: 5px;}
.dealSec .dealItemList ul.subList li::before{ content: "-"; padding-right: 5px;}

.dealSec .col2Box .img{ width:50%; box-sizing: border-box; padding-right: 40px;}
.dealSec .col2Box .txt{ }

.dealSecCable h4{ margin-bottom: .2em; font-weight: 400;}

@media (max-width: 767px) {
    .dealSec h2{ margin-bottom: 15px;}
    .dealSec .img img{ border-radius: 15px;}
    .dealSec .lead{ margin-bottom: 20px; text-align: left;}
}
@media (max-width: 580px) {
    .dealSec .lead{ text-align: left;}
    .dealSec ul.col2Flex li{ width: 100%; }
    .dealSec .col2Box .img{ width:100%; box-sizing: border-box; padding-right: 0; text-align: center;}
    .dealSec .dealItemList > ul{ width: 100%;}

}

/* ----------  company */
.companySec{ padding-bottom: 100px;}
.companySec .col2Flex{  align-items: center;}
.companySec .txt{ width: 60%; padding-bottom: 25px ;padding-right: 40px; box-sizing: border-box;}
.companySec .img{ width: 40%; text-align: center;}
.companySec h2{ margin-bottom: 2em; border-bottom: 1px solid #32b496; color: #32b496; font-size: 24px;}

.companySec table th,
.companySec table td { padding-bottom: 30px; font-weight: 400; text-align: left; vertical-align: top;}
.companySec table th { white-space: nowrap; padding-right: 40px; }

.companySecGreeting .img img{ display: inline-block; border-radius: 24px; overflow: hidden;}
.companyPolicy .img span{ font-size: 14px; line-height: 1.4;}
.companySecHistory .img p{ margin-bottom: 30px;}

@media (max-width: 767px) {
    .companySec{ padding-bottom: 40px;}
    .companySec .txt{ width: 100%; padding-right: 0; }
    .companySec .img{ width: 100%; }
    .companySec h2{ margin-bottom: 1em; font-size: 20px;}
    .companySec table th,
    .companySec table td { padding-bottom: 15px; }
    .companySec table th { max-width: 25%; padding-right: 20px;  white-space: wrap; }
    .companySec.companySecHistory table th { white-space: nowrap; }
}

/* ----------  office */
.officeImg{margin-bottom: 80px;}
.officeImg img{ display: inline-block; border-radius: 30px; overflow: hidden;}
.officeSec { padding-bottom: 80px;   }
.officeSec h2 { margin-bottom: 1em; border-bottom: 1px solid #32b496; color: #32b496; font-size: 24px;}
.officeSec iframe { width: 100%;}

/* ----------  news Entry */
.newsEntry{}
.newsEntry .ctArea { margin-bottom: 5px;}
.newsEntry .ctArea span{display: inline-block; min-width: 100px; margin-right: 5px; margin-bottom: 5px; padding: 10px 10px ; background-color: #32b496; border-radius: 100px; text-align: center; font-size: 14px; line-height: 1.2; color: #fff;}
.newsEntry h2{ font-size: 28px; line-height: 1.4; margin-bottom: .5em; }
.newsEntry .date{  }
.entryContent{ padding: 40px 0 60px;}
.entryContent h1,
.entryContent h2,
.entryContent h3{ border-bottom: 1px solid #32b496; font-size: 24px; }
.entryContent h4{ border-left: 8px solid #32b496; padding-left: 5px; font-size: 20px; }
.entryContent h5{ font-size: 18px; }
.entryContent h1,
.entryContent h2,
.entryContent h3,
.entryContent h4,
.entryContent h5{ margin-bottom: 0.8em; color: #000; }

@media (max-width: 767px) {
    .newsEntry .ctArea span{min-width: 80px; margin-right: 5px; margin-bottom: 5px; padding: 5px 10px ; font-size: 14px; line-height: 1.2; color: #fff;}
    .newsEntry h2{ font-size: 24px; margin-bottom: .5em; }
    .entryContent h1,
    .entryContent h2,
    .entryContent h3{ font-size: 20px; }
    .entryContent h4{ font-size: 18px; }
    .entryContent h5{ font-size: 16px; }
}

/* ----------  inquiry */
.inquirySec h2{ margin-bottom: 1em; border-bottom: 1px solid #32b496; color: #32b496; font-size: 24px;}
.inquirySec ol{ margin-bottom: 5em; }
.inquirySec li{ margin-bottom: 0.5em; }
.inquiryForm { padding-bottom: 60px; }
.inquiryForm .inputItem { margin-bottom: 15px; }
.inquiryForm .must { display: inline-block; padding: 3px 10px; background-color: #ff0000; color: #fff; border-radius: 15px; font-size: 12px; line-height: 1.2;}
.inquiryForm input.full,
.inquiryForm textarea{ display: block; width: 100%; padding: 12px; box-sizing: border-box; border:1px solid  #aaa; border-radius: 3px; font-size: 16px; line-height: 1.4;}
.inquiryForm textarea { height: 10em; }

.inquiryForm .submitBtn { padding: 30px 0; text-align: center;}
.inquiryForm .submitBtn button{ display: inline-block; padding: 10px 30px; border:1px solid #32b496; background-color: #32b496; color: #fff; border-radius: 30px; font-size: 18px;}
    .inquiryForm .submitBtn button:hover{ opacity: 0.7; }

.inquiryForm .submitBtn button.submit{ font-size: 18px; }
.inquiryForm .submitBtn button.reset{ background-color: #eeeeee; }

/* ----------  recruit */
.keyVisual.recruit { position: relative; width: 100%; aspect-ratio: 16 / 9; }
/*
.keyVisual.recruit iframe{ display: block; width: 100%; aspect-ratio: 16 / 9; }
*/

.keyVisual.recruit .logo{ bottom: inherit; top: 53%; left: 3%; padding: 0.8% 1.8%; background-color: #32b496; background-color: rgba(50,180,150,0.8); border-radius: 2%;}
.keyVisual.recruit .logo .ttl { font-size: 3.5vw; font-weight: 500; line-height: 1.4; text-shadow: none; color: #fff;}
.rBnr {margin-bottom: 30px;}
.col2Flex.rHome{ flex-wrap: nowrap; justify-content: space-between;}
   .col2Flex.rHome .boxItem{ width: 49%; margin-right: 0; }


.rBnrMessageUnit{}
.rBnrMessageUnit a{display: block; padding: 70px 280px 70px 60px; background: url("/share/images/r_home_bnr_message_bg@2x.jpg") no-repeat right top; background-size: 1000px 300px ; text-decoration: none; border: 1px solid #eee; border-radius: 25px;}
.rBnrMessageUnit a img{ display: inline-block; margin:10px 30px 10px 10px; vertical-align: top;}

.rBnr2colArea{}
.rBnr2colArea a{ display: block; box-sizing: border-box; padding: 10px 30px; border: 2px solid #32b496; text-decoration: none; text-align: center; border-radius: 25px;}
.rBnr2colArea a img{ display: inline-block; box-sizing: border-box; padding: 10px;}
.movieLink01{}
.movieLink01 a{ display: block; padding: 10px 30px; border: 2px solid #32b496; text-decoration: none; text-align: center; border-radius: 25px;}
.movieLink01 a img{ display: inline-block; margin: 10px;}

@media (max-width: 920px) {
    .rBnrMessageUnit a{ padding: 50px 280px 50px 60px;}

}
@media (max-width: 767px) {
    .keyVisual.recruit { position: relative; margin-bottom: 15vw; }  
    .keyVisual.recruit .logo { position: absolute; top:100%; bottom: inherit; left: 0; right: 0; border-radius: 0; background-color: #32b496; }
    .keyVisual.recruit .logo .ttl { margin-bottom: 0; text-align: center;  }
    
    .rBnr {margin-bottom: 15px;}
    .rBnrMessageUnit a{ padding-left: 3% ; background-position: right -50px top; }

}
@media (max-width: 480px) {
    .rBnrMessageUnit a{ padding-right: 220px ; background-position: right -100px top; }
    .keyVisual.recruit { position: relative; margin-bottom: 100px; }  
    .keyVisual.recruit .logo .ttl { font-size: 5vw; }
    .rBnr2colArea a{ padding: 10px 5px; }

}


/* ----------  r_message */
.keyVisual.message{ margin-bottom: 100px;}
.keyVisual.message h1{ position: absolute; left: 10%; top: 35%; max-width: 30%;}
.keyVisual.message h1 img{ }
.keyVisual.message h1 span{ display: block; margin-top: 3%; font-size: 2vw; color: #505050;}

.col2Flex.r_messageSec { justify-content: space-between; padding: 30px 0; }
.col2Flex.r_messageSec .boxItem.txt{ width:420px; flex-shrink: 0; box-sizing: border-box; line-height: 2.5;}
.col2Flex.r_messageSec .boxItem.txt p{ margin-bottom: 2em;}
.col2Flex.r_messageSec .boxItem.txt .sign{ text-align: right;}
.col2Flex.r_messageSec .boxItem.txt strong{ font-size: 24px; font-weight: 400;}
.col2Flex.r_messageSec .boxItem.img{ width: calc( 95% - 420px ); box-sizing: border-box; padding:0 0%; text-align: left;}
.col2Flex.r_messageSec .boxItem.img img{ display: inline-block; border-radius: 25px;}
.col2Flex.r_messageSec.leftImg { flex-direction: row-reverse;}
.col2Flex.r_messageSec.rightImg .img { text-align: right;}

.companySecGreeting p{margin-bottom: 2em;}
.companySecGreeting .sign{margin-top: 60px;}
.companySecGreeting .sign strong{ font-size: 24px; font-weight: 400;}

@media (max-width: 767px) {
    .keyVisual.message{ margin-bottom: 20px;}
    .col2Flex.r_messageSec .boxItem.txt{ width: 100%; flex-shrink: 1; text-align: left;}
    .col2Flex.r_messageSec .boxItem.img{ width: 100%; text-align: center;}
    .col2Flex.r_messageSec.rightImg .img { text-align: center;}
}

/* ----------  r_interview */
.interViewTtl{ padding: 100px 0 60px; margin-bottom: 0; text-align: center;}
.interViewTtl .img{ display: inline-block; max-width: 80%;}
.interViewTtl .jp{ display: block; padding-top: 10px; font-size: 20px; color: #505050;}
.interviewLead { margin-bottom: 60px; text-align: center;}

.interviewList { padding-bottom: 60px;}
.interviewList .boxItem { margin-bottom: 1.5em; text-align: center;}
.interviewList p { margin-bottom: .8em; line-height: 1.4;}
.interviewList .img img{display: inline-block; border-radius: 20px; overflow: hidden;}
.interviewList .link { }
.interviewList .link a{ display: inline-block; padding: 8px 25px 8px 85px; border-radius: 100px; background: url("../img/mark_arrow01_right_wht_short.svg") no-repeat left 25px center #32b496; font-size: 15px; line-height: 1.2; color: #fff; text-decoration: none;}

@media (max-width: 767px) {
    
}


/* ----------  r_interview Person */

.interViewPersonTtl{ position: relative; margin-bottom: 120px;}
.interViewPersonTtl p{ margin-bottom: 0;}
.interViewPersonTtl .txt{ position: absolute; top: 30%; left: 5%; width: 30%; min-width: 350px; padding: 30px; background-color: #32b496; border-radius: 50px 0 50px 0; color: #fff;}
    .interViewPersonTtl.leftImg .txt{ left: inherit; right:5%; }

.interViewPersonTtl .txt .lead{ margin-bottom: 1.0em; font-size: 24px; line-height: 1.4;}

.interviewPersonSec{ padding-bottom: 60px; }
.interviewPersonSec p{ margin-bottom: 60px; }
.interviewPersonSec p.question{ font-size: 24px; color: #32b496;}
.interviewPersonSec p.interviewPersonImg{ margin-bottom: 80px;}
.interviewPersonSec p.interviewPersonImg img{ display: inline-block; border-radius: 30px; overflow: hidden;}

@media (max-width: 767px) {
    .interViewPersonTtl{ margin-bottom: 60px;}
    .interViewPersonTtl .txt{ position: relative; top: inherit; left: inherit; width: 90%; box-sizing: border-box; min-width: inherit; margin: -30px auto 30px; padding: 30px; border-radius: 30px ;}
        .interViewPersonTtl.leftImg .txt{ left: inherit; right:inherit; }
    .interViewPersonTtl .txt .lead{ font-size: 20px; line-height: 1.4;}
    .interviewPersonSec p{ margin-bottom: 30px; }
}

/* ----------  r_infographics */
.infographicsTtl{ padding: 100px 0 60px; margin-bottom: 0; text-align: center;}
.infographicsTtl .img{ display: inline-block; max-width: 80%;}
.infographicsTtl .jp{ display: block; padding-top: 10px; font-size: 20px; color: #505050;}

.infographicsList .boxItem { margin-bottom: 60px; padding: 30px 30px; background-color: #d6f0ea; border-radius: 30px; text-align: center;}
.col2Flex.infographicsList .boxItem { }

.col2Flex.infographicsList .boxItem{ width: 46%; box-sizing: border-box;  margin-right: 8%;}
   .col2Flex.infographicsList .boxItem:nth-child(2n){ margin-right: 0; }

.infographicsList .boxItem.w100 { width: 100%; margin-right: 0; }
.infographicsList .boxItem h2{ margin-bottom: 0; font-size: 24px; color: #32b496;}
.infographicsList .boxItem p{ margin-bottom: 0; }
.infographicsList .boxItem .txt{ max-width: 382px; margin:0 auto; text-align: left;}

@media (max-width: 767px) {
    .col2Flex.infographicsList .boxItem{ width: 100%; margin-right: 0; }
}

/* ----------  r_environment */
.environmentTtl{ max-width: 80%; padding: 100px 0 60px; margin: 0 auto; text-align: center;}
.environmentTtl .img{ display: block; margin-bottom: 0; }
.environmentTtl .jp{ display: block; padding-top: 10px; font-size: 20px; color: #505050;}

.environmentSec01 { margin-bottom: 100px;}
.environmentSec01 h2{ margin-bottom: 60px;}
.environmentSec01 .img{ margin-bottom: 60px;}
.environmentSec01 .img img{display: inline-block; border-radius: 30px; overflow: hidden; border: 1px solid #32b496;}

.environmentSec02 { margin-bottom: 60px;}
.environmentSec02 h2{ margin-bottom: 60px;}
.environmentSec02 .lead{ margin-bottom: 60px;}
.environmentSec02 .col2Flex .boxItem{ display: flex; align-items: center;}
.environmentSec02 .col2Flex .boxItem .img{ padding-right: 30px; text-align: center;}
.environmentSec02 .col2Flex .boxItem .ttl{ font-size: 24px; line-height: 1.4; color: #32b496;}
.environmentSec02 .col2Flex .boxItem .ttl .weak{ font-size: 18px;}

.environmentSec03 { margin-bottom: 100px;  }
.environmentSec03 h3 { margin-bottom: 40px; padding-bottom: 8px; border-bottom: 1px solid #32b496; text-align: center; font-size: 24px; color: #32b496; font-weight: 500; }

@media (max-width: 767px) {
    .environmentSec01 .img img{border-radius: 15px;}

    .environmentSec02 .col2Flex .boxItem .ttl{ text-align: left;}
}

/* ----------  offer list */
.offerListArea{ padding-top: 80px;}
.offerListArea .ctHeader{ }
    .offerListArea.newgrad .ctHeader{ background-color: #00bff0; }
    .offerListArea.career .ctHeader{ background-color: #468cdc; }
    .offerListArea.part .ctHeader{ background-color: #faaa50; }
.offerListSec { padding-bottom: 60px;}
.offerListSec h1 { margin-bottom: 60px;}
.offerListSec h2{ padding: 5px; border: 1px solid #999; text-align: center; font-weight: 500; font-size: 24px; line-height: 1.4;}
    .newgrad .offerListSec h2{ border-color: #00bff0; color: #00bff0; }
    .career .offerListSec h2{ border-color: #468cdc; color: #468cdc; }
    .part .offerListSec h2{ border-color: #faaa50; color: #faaa50; }

.offerListSec ul{ list-style: none; padding: 0;}
.offerListSec ul li{ margin: 0 0 15px 0; padding: 0 0 0 26px; background: url("../img/mark_tri_right_sky.svg") no-repeat left top 6px; font-size: 18px;}
    .newgrad .offerListSec ul li{ background-image: url("../img/mark_tri_right_sky.svg");}
    .career .offerListSec ul li{ background-image: url("../img/mark_tri_right_dblu.svg");}
    .part .offerListSec ul li{ background-image: url("../img/mark_tri_right_org.svg");}

.areaSec{ padding-bottom: 40px;}

.offerListArea .lead {font-size: 20px; font-weight: 700; text-align: center;}
.offerListArea .colorBackBox { margin-top: 2em; padding: 15px; background-color: #eee;}
.offerListArea .colorBackBox p:last-child { margin-bottom: 0;}
    .offerListArea.newgrad .colorBackBox { background-color: #D9F5FD;}
    .offerListArea.career .colorBackBox { background-color: #E3EEFA;}
    .offerListArea.part .colorBackBox { background-color: #FEF2E5;}

/* ----------  offer page */
.offerEntry{ padding-top: 60px;}
.offerEntry .offerTypeTtl{ margin-bottom: 60px; padding: 15px; border: 1px solid #505050; text-align: center; font-size: 28px; line-height: 1.4; font-weight: 500; color: #505050; }
    .offerEntry.newgrad .offerTypeTtl{ border-color: #00bff0; color: #00bff0; }
    .offerEntry.career .offerTypeTtl{ border-color: #468cdc; color: #468cdc; }
    .offerEntry.part .offerTypeTtl{ border-color: #faaa50; color: #faaa50; }
.offerEntry .offerItem{ margin-bottom: 60px; padding: 15px; border-bottom: 1px solid #505050; text-align: center; font-size: 24px; line-height: 1.4; font-weight: 500; }
    .offerEntry.newgrad .offerItem{ border-color: #00bff0; }
    .offerEntry.career .offerItem{ border-color: #468cdc; }
    .offerEntry.part .offerItem{ border-color: #faaa50; }
.offerEntry table{ width: 100%; border-spacing:0; }
.offerEntry th,
.offerEntry td{ padding: 30px 0; border-bottom:1px solid #505050; vertical-align: top; text-align: left;}
.offerEntry th{ padding-right: 40px; font-size: 20px; white-space: nowrap;}

.toEntryForm{ padding: 60px 0;}
.toEntryForm .submitBtn button{ display: flex; width: 100%; padding: 20px 40px; align-items: center; justify-content: space-between; background-color: #ccc; border: 0; border-radius: 20px; cursor: pointer;}
    .toEntryForm .submitBtn button:hover{ opacity: 0.7; }

    .offerEntry.newgrad .submitBtn button{ background-color: #00bff0; color: #00bff0; }
    .offerEntry.career .submitBtn button{ background-color: #468cdc; color: #468cdc; }
    .offerEntry.part .submitBtn button{ background-color: #faaa50; color: #faaa50; }

.toEntryForm .submitBtn button .entry1{ flex-grow: 0; flex-shrink: 0; }
.toEntryForm .submitBtn button .entry2{ min-height: 30px; flex-grow: 2; flex-shrink: 2; margin: auto 35px; background: url("../img/offer_entryBtn_2.svg") no-repeat right center; }
.toEntryForm .submitBtn button .entry3{ padding: 15px; flex-grow: 0; flex-shrink: 0; background-color: #fff; font-size: 16px; border-radius: 10px; }

@media (max-width: 680px) {
    .offerEntry table{  }
    .offerEntry th,
    .offerEntry td{ border: 0; display: block; padding: 0; }
    .offerEntry th{ padding: 8px 0; border-top: 1px solid #505050; /*border-bottom: 1px solid #505050;*/ font-size: 18px; white-space: normal;}
    .offerEntry td{ padding-top: 8px; padding-bottom: 30px; }
    .toEntryForm .submitBtn button .entry2{ display: none;}
}

@media (max-width: 580px) {
    .toEntryForm .submitBtn button{ padding: 5px; }
    .toEntryForm .submitBtn button .entry1{ display: none;}
    .toEntryForm .submitBtn button .entry3{ width: 100%; box-sizing: border-box; background-color: inherit; color: #fff;}
}


/* ----------  r_entryform */
form.entryForm{ display: block;margin-top: 60px; margin-bottom: 80px; background-color: #F0F0F0;}
form.entryForm .entryFormTitle{ padding: 15px; background-color: #505050; text-align: center; font-size: 28px; font-weight: 500; color: #fff; }
    form.entryForm.newgrad .entryFormTitle{ background-color: #00bff0; }
    form.entryForm.career .entryFormTitle{ background-color: #468cdc; }
    form.entryForm.part .entryFormTitle{ background-color: #faaa50; }
.entryFormBody{ margin-top: 60px; padding-left: 5px; padding-right: 5px; }
.entryFormBody .offerItem{ margin-bottom: 0.5em; font-size: 20px; font-weight: 700; line-height: 1.4; }
.entryFormBody .offerItem .weak{ font-size: 16px; }
.entryForm .inputItem { margin-bottom: 15px; }
.entryForm .must { display: inline-block; padding: 2px 8px; background-color: #A8A8A8; color: #fff; border-radius: 3px; font-size: 12px; line-height: 1.2; vertical-align:2px;}
.entryForm input.full,
.entryForm textarea{ display: block; width: 100%; padding: 15px 12px; box-sizing: border-box; border:1px solid  #aaa; border-radius: 3px; font-size: 16px;}
.entryForm textarea { height: 8em; }


.entryForm select { display: block; padding: 12px; padding: 15px 12px; box-sizing: border-box; border:1px solid  #aaa; border-radius: 3px; font-size: 16px;}

.entryForm .radioBlock { display: flex; flex-wrap: wrap; justify-content: space-between;}
.entryForm .radioBlock label { display: block; width: 49%; margin-bottom: 10px; padding: 12px; box-sizing: border-box; border:1px solid  #aaa; border-radius: 3px; background-color: #fff;}

.entryForm .col3Flex{ display: flex;  }
.entryForm .col3Flex select{ margin-right: 10px; }

.entryForm .birthday select.col3 { display: inline-block; margin-right: 5px;}



.entryForm .submitBtn { padding: 60px 0; text-align: center;}
.entryForm .submitBtn button{ display: block; width: 100%; box-sizing: border-box; padding: 16px; background-color: #32b496;  border: 0; font-size: 18px; border-radius: 15px;color: #fff; cursor: pointer;}
    .entryForm.newgrad .submitBtn button{ background-color: #00bff0;}
    .entryForm.career .submitBtn button{ background-color: #468cdc;}
    .entryForm.part .submitBtn button{ background-color: #faaa50;}
    .entryForm .submitBtn button:hover{ opacity: 0.7; }
.entryForm .offerItemAdd{ margin-bottom: 0.5em; border-bottom: 1px solid #999;font-size: 20px;}
.entryForm .offerItemAdd .weak{ font-size: 16px;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {  border: 0;  clip: rect(0, 0, 0, 0);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  white-space: nowrap;  width: 1px;  /* 1 */}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {  clip: auto;  height: auto;  margin: 0;  overflow: visible;  position: static;  white-space: inherit;  width: auto;}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {  visibility: hidden;}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {  content: "";  display: table;}
.clearfix::after { clear: both; }



/* ==========================================================================
   WordPress fix
   ========================================================================== */
@media (max-width: 767px) {
    .main .wp-block-image img { margin-left: auto; margin-right: auto;}
    .main .wp-block-image .alignright,
    .main .wp-block-image .alignleft { float: none; display: block; margin: .5em .5em 1em; text-align: center;}
}



/* ==========================================================================
   Utility classes
   ========================================================================== */

/*  web parts
-------------------------------- */

.btn01 a { display: inline-block; padding: 8px 40px ; border-radius: 100px; background-color: #32b496; line-height: 1.2;    color: #fff; text-decoration: none; }


/*  align
-------------------------------- */
.txtAlignLeft{ text-align:left !important;}
.txtAlignRight{ text-align:right !important;}
.txtAlignCenter{ text-align:center !important;}

.pcLspC{ text-align: left;}
.pcCspL{ text-align: center}
.pcRspC{ text-align: right;}

@media (max-width: 767px) {
  .pcLspC{ text-align: center;}
  .pcCspL{ text-align: left}
  .pcRspC{ text-align: center;}
}


/*  flexBox
-------------------------------- */
.col4Flex,
.col3Flex,
.col2Flex{ display: flex; flex-wrap: wrap;}

.col2Flex .boxItem{ width: 49%; box-sizing: border-box;  margin-right: 2%;}
   .col2Flex .boxItem:nth-child(2n){ margin-right: 0; }
.col3Flex .boxItem{ width: 32%; box-sizing: border-box; margin-right: 2%; }
   .col3Flex .boxItem:nth-child(3n){ margin-right: 0; }
.col4Flex .boxItem{ width: 23.5%; box-sizing: border-box; margin-right: 2%; }
   .col4Flex .boxItem:nth-child(4n){ margin-right: 0; }

@media (max-width: 767px) {
   .col2Flex .boxItem{ width: 100%; margin-right: 0; text-align: center;}
   .col3Flex .boxItem,
   .col4Flex .boxItem{ width: 49%; box-sizing: border-box;  margin-right: 2%; }
      .col3Flex .boxItem:nth-child(3n){ margin-right: 2%; }
      .col4Flex .boxItem:nth-child(4n){ margin-right: 2%; }
      .col3Flex .boxItem:nth-child(2n),
      .col4Flex .boxItem:nth-child(2n){ margin-right: 0; }
}

/*  font-size
-------------------------------- */
.font10{ font-size:10px !important;}
.font11{ font-size:11px !important;}
.font12{ font-size:12px !important;}
.font13{ font-size:13px !important;}
.font14{ font-size:14px !important;}
.font15{ font-size:15px !important;}
.font16{ font-size:16px !important;}
.font17{ font-size:17px !important;}
.font18{ font-size:18px !important;}
.font19{ font-size:19px !important;}
.font20{ font-size:20px !important;}
.font22{ font-size:22px !important;}
.font24{ font-size:24px !important;}
.font26{ font-size:26px !important;}
.font28{ font-size:28px !important;}
.font30{ font-size:30px !important;}
.font32{ font-size:32px !important;}
.font34{ font-size:34px !important;}
.font36{ font-size:36px !important;}
.font38{ font-size:38px !important;}
.font40{ font-size:40px !important;}

/*  margin
-------------------------------- */
/*top*/
.mt00{margin-top:0 !important;}
.mt05{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}
.mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;}

/*right*/
.mr00{margin-right:0 !important;}
.mr05{margin-right:5px !important;}
.mr08{margin-right:8px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr35{margin-right:35px !important;}
.mr40{margin-right:40px !important;}
.mr45{margin-right:45px !important;}
.mr50{margin-right:50px !important;}

/*bottom*/
.mb00{margin-bottom:0 !important;}
.mb05{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}
.mb90{margin-bottom:90px !important;}
.mb100{margin-bottom:100px !important;}

/*left*/
.ml00{margin-left:0 !important;}
.ml05{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml35{margin-left:35px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.ml50{margin-left:50px !important;}

/* both side */
.ms00{margin-left:0 !important; margin-right:0 !important;}
.ms05{margin-left:5px !important; margin-right:5px !important;}
.ms10{margin-left:10px !important; margin-right:10px !important;}
.ms15{margin-left:15px !important; margin-right:15px !important;}
.ms20{margin-left:20px !important; margin-right:20px !important;}
.ms25{margin-left:25px !important; margin-right:25px !important;}
.ms30{margin-left:30px !important; margin-right:30px !important;}
.ms35{margin-left:35px !important; margin-right:35px !important;}
.ms40{margin-left:40px !important; margin-right:40px !important;}
.ms45{margin-left:45px !important; margin-right:45px !important;}
.ms50{margin-left:50px !important; margin-right:50px !important;}

/*  padding
-------------------------------- */
/*top*/
.pt00{padding-top:0 !important;}
.pt05{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}
.pt60{padding-top:60px !important;}
.pt70{padding-top:70px !important;}
.pt80{padding-top:80px !important;}
.pt90{padding-top:90px !important;}
.pt100{padding-top:100px !important;}

/*right*/
.pr00{padding-right:0 !important;}
.pr05{padding-right:5px !important;}
.pr08{padding-right:8px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr25{padding-right:25px !important;}
.pr30{padding-right:30px !important;}
.pr35{padding-right:35px !important;}
.pr40{padding-right:40px !important;}
.pr45{padding-right:45px !important;}
.pr50{padding-right:50px !important;}

/*bottom*/
.pb00{padding-bottom:0 !important;}
.pb05{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb45{padding-bottom:45px !important;}
.pb50{padding-bottom:50px !important;}
.pb60{padding-bottom:60px !important;}
.pb70{padding-bottom:70px !important;}
.pb80{padding-bottom:80px !important;}
.pb90{padding-bottom:90px !important;}
.pb100{padding-bottom:100px !important;}

/*left*/
.pl00{padding-left:0 !important;}
.pl05{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl35{padding-left:35px !important;}
.pl40{padding-left:40px !important;}
.pl45{padding-left:45px !important;}
.pl50{padding-left:50px !important;}

/* both side */
.ps00{padding-left:0 !important; padding-right:0 !important;}
.ps05{padding-left:5px !important; padding-right:5px !important;}
.ps10{padding-left:10px !important; padding-right:10px !important;}
.ps15{padding-left:15px !important; padding-right:15px !important;}
.ps20{padding-left:20px !important; padding-right:20px !important;}
.ps25{padding-left:25px !important; padding-right:25px !important;}
.ps30{padding-left:30px !important; padding-right:30px !important;}
.ps35{padding-left:35px !important; padding-right:35px !important;}
.ps40{padding-left:40px !important; padding-right:40px !important;}
.ps45{padding-left:45px !important; padding-right:45px !important;}
.ps50{padding-left:50px !important; padding-right:50px !important;}