@charset "UTF-8";
/***********************************************
共通パーツSTART
************************************************/

/*** main上にmargin ***/
.main {
    margin-top: 60px;
}

/*** instagramボタン ***/
.instagram-btn {
    padding: 20px 60px;
    font-size: 1.8rem;
    border: 1px solid #131313;
    border-radius: 39px;
    color: #131313;
    letter-spacing: .1rem;
    transition: .2s ease;
}

.instagram-btn:before {
    content:"";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(/img/sites/qr-quo/00_icon_instagram.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 20px;
}

.instagram-btn:hover {
    color: #FFF;
    background-color: #131313;
}


/*** pdfアイコン ***/
.pdf-download:before {
    content:"";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(/img/sites/karbopre/00_icon_pdf.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 20px;
}

.pdf-download-after:after {
    content:"";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(/img/sites/karbopre/00_icon_pdf.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-left: 20px;
}


/*** アイコン付き電話ボタン ***/
.tel-btn {
    display: block;
    padding: 20px;
    font-size: 2rem;
    font-weight: 700;
    border: 3px solid #131313;
    color: #131313;
    letter-spacing: .1rem;
    width: 80%;
    text-align: center;
}

.tel-btn::before {
    content:"";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(/img/sites/qr-quo/00_icon_tel.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 20px;
}


/*** アクセス情報 ***/
.access {
    display: grid;
    grid-template-columns: 60% 40%;
    background: #efefef;
    margin-bottom: 124px;
}

.access-map-item {
    width: 100%;
    height: 100%;
}

.access-note {
    padding: 100px 0;
    width: min(calc(100%-32px),500px);
    margin-left: 32px;
}

.access-caption {
    width: 225px;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 40px;
}

.access-address {
    margin-top: 10px;
}


/*** レセプション② ***/
.reception2-wrapper {
    border: solid 3px #7e8c8d;
}

.reception-heading-border {
    border-color: #ced4d9;
}

.reception2-heading {
    width: 60%;
    padding-left: 5%;
    padding-top: 2%;
}

.reception-item th {
    border: none;
}

.reception2-note {
    width: 40%;
    text-align: left;
    border: none;
    padding-top: 2%;
    line-height: 1.5;
}

/*** 背景・文字色 ***/
.caption-gray {
    color: #fff;
    background-color: #7e8c8d;
    width: 70%;
    padding: 10px;
}

/*** 帯付きタイトル幅調整 ***/
.caption-color-wide {
    color: #fff;
    background-color: #0067B2;
    width: 100%;
    padding: 0px 0px 20px 30px;
    /* text-align: center; */
    width: min(calc(100% - 32px), 1634px);
    margin: 0 auto 48px;
}

/*** 画像左右入れ替え ***/
.img-wrapper {
    order: 2;
}

/*** お知らせ ***/
.news-center{
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

/*** アコーディオンメニュー ***/
.accordion, .accordion_2 {
    position: relative;

}

.accordion__summary {
    position: relative;
    display: block;
    cursor: pointer;
    /* padding-right: 18px; */
    user-select: none;
}

.footer-accordion__summary {
    font-size: 1.4rem;
    cursor: pointer;
    user-select: none;
}

.accordion__summary::after, .footer-accordion__summary::after {
    position: absolute;
    bottom: 1em;
    right: 0.5em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(120%) rotate(135deg);
    border-right: 2px solid #00A755;
    border-top: 2px solid #00a755;
    content: "";
}

.footer-accordion__summary::after {
    right: -16px;
}

/* .accordion input:checked ~ .accordion__summary::after, .accordion input:checked ~ .footer-accordion__summary::after {
    content: "▲";
    font-size: 11.5px;
    color: #00A755;
    position: absolute;
    right: 0;
    top: 55%;
    transform: translateY(-50%);
}

.accordion_2 input:checked ~ .accordion__summary::after, .accordion_2 input:checked ~ .footer-accordion__summary::after {
    content: "▲";
    font-size: 11.5px;
    color: #00A755;
    position: absolute;
    right: 0;
    top: 55%;
    transform: translateY(-50%);
} */

.accordion input:checked ~ .footer-accordion__summary::after {
    right: -16px;
}

.accordion_2 input:checked ~ .footer-accordion__summary::after {
    right: -16px;
}

.accordion input {
	display: none;
}

.accordion_2 input {
	display: none;
}

.accordion__detail {
	display: none;
	background-color: rgba(0,103,178,0.9);
	text-align: left;
	padding: 18px 0;
	margin: 10px 0 10px;
    width: 100%;
    min-width: 100px;
    text-align: center;
}

.footer-accordion__detail {
    background-color: #FFF;
    z-index: 1;
    margin-left: 0;
}

.accordion input:checked ~ .accordion__detail {
	display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.accordion_2 input:checked ~ .accordion__detail {
	display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.accordion__text {
    margin-bottom: 8px;
    white-space: nowrap;
}

.accordion__text:first-child {
    margin-bottom: 15px;
}

.accordion__text__link {
    font-size: 1.6rem;
    color: #fff;
}

.nav-link {
    padding: 0 30px;
}


/*** ヘッダー ***/

.nav > ul > li + li {
    border-left: 1px solid #707070;
}

.nav-item {
    min-width: 120px;
}

.nav-list {
    gap: 0;
}


/*** フッター ***/
.footer-nav-list2{
    display: flex;
    gap: 40px;
    margin-top: 10px;
    justify-content: flex-end;
    font-size: 1.4rem;
}

.footer-contents-position {
    align-items: flex-start;
    margin-left: 25%;
}

.footer-nav-item {
    white-space: nowrap;
}

/*** フッター住所サイズ ***/
.address {
    width: 225px;
}

/*** コピーライト ***/
.copyright {
    text-align: center;
    margin: 80px 0 auto;
}

/*** 採用情報見出し調整 ***/
.blog-heading2 {
    text-align: left;
    padding-top: 0;
    margin-bottom: 0;
}

/*** 下層見出し ***/
.kasou_midasi{
    position:relative;

}

.kasou_title{
    text-align: center;
    max-width: 90%;
    width: 60%;
    position: absolute;
    top: 35rem;
    left: 25rem;
    background-color: rgba(255, 255, 255, 0.5);
}


/*** 説明文（ explanatory ）***/
.explanatory {
    margin: 0 auto;
    width: min(calc(100% - 32px), 1200px);
}

/*** メインビュー画像***/
.mv-img {
    width: 100%;
    height: auto;
}

/*** メインビューテキスト***/
.first-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.15em;
}

/*** 文字色 ***/
.accent-color {
    color: #0067B2;
}

/*** h2の文字サイズ等を変更したいときに使用（変更しない場合はコメントアウト) ***/
.secondary-heading {
    font-size: 3rem;
}

/*** h3の文字サイズ等を変更したいときに使用（変更しない場合はコメントアウト) ***/
/* .third-heading {
    font-size: 3rem;
} */

/*** h4の文字サイズ等を変更したいときに使用（変更しない場合はコメントアウト) ***/
.forth-heading {
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.5;
}

/*** 要素2つを横並び ***/
.flex-box {
    display: flex;
    justify-content: flex-start;
}

/*** 要素3つを横並びして間に線を入れる ***/
.tri-flex-box {
    display: flex;
    padding: 0;
}

.tri-flex-box .flex-text-box {
    position: relative;
    width: 33.3%;
    padding: 10px 30px;
    margin: 0;
}

.tri-flex-box .flex-text-box::before {
    content: "";
    display: block;
    height: auto;
    width: 0;
    border-right: 1px solid #9e9e9e;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.tri-flex-box .flex-text-box:first-of-type::before{
    content: none;
}



/*** ボタンホバーカラー ***/
.more-btn:hover {
    background: #0067b2;
    color: #fff;
}

/*** テキストリンクホバー ***/
.hv-blue:hover {
    color: #0094ff;
    text-decoration-color: #0094ff;
}

.hv-gray:hover {
    color: #757575;
}

/*** リンク色変更・下線 ***/
.text-link {
    color: #0067B2;
    text-decoration: underline;
    text-decoration-color: #0067B2;
}






/***********************************************
共通パーツEND
************************************************/



/***********************************************
位置・余白・文字サイズ等START
************************************************/


/*** padding ***/
.pt-0 {
    padding-top: 0;
}

.pt-20 {
    padding-top: 20px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-125 {
    padding-top: 125px;
}

.pt-150 {
    padding-top: 150px;
}

.pt-200 {
    padding-top: 200px;
}

.pt-250 {
    padding-top: 250px;
}

.pr-0 {
    padding-right: 0;
}

.pr-50 {
    padding-right: 50px;
}

.pr-100 {
    padding-right: 100px;
}

.pr-150 {
    padding-right: 150px;
}

.pr-200 {
    padding-right: 200px;
}

.pr-250 {
    padding-right: 250px;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pb-150 {
    padding-bottom: 150px;
}

.pb-200 {
    padding-bottom: 200px;
}

.pb-250 {
    padding-bottom: 250px;
}

.pl-0 {
    padding-left: 0;
}

.pl-50 {
    padding-left: 50px;
}

.pl-100 {
    padding-left: 100px;
}

.pl-150 {
    padding-left: 150px;
}

.pl-200 {
    padding-left: 200px;
}

.pl-250 {
    padding-left: 250px;
}

.p-0 {
    padding: 0;
}

/*** margin ***/
.mt-0 {
    margin-top: 0;
}

.mt-20 {
    margin-top: 20px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-125 {
    margin-top: 125px;
}

.mt-150 {
    margin-top: 150px;
}

.mt-200 {
    margin-top: 200px;
}

.mt-250 {
    margin-top: 250px;
}

.mr-0 {
    margin-right: 0;
}

.mr-50 {
    margin-right: 50px;
}

.mr-100 {
    margin-right: 100px;
}

.mr-150 {
    margin-right: 150px;
}

.mr-200 {
    margin-right: 200px;
}

.mr-250 {
    margin-right: 250px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-150 {
    margin-bottom: 150px;
}

.mb-200 {
    margin-bottom: 200px;
}

.mb-250 {
    margin-bottom: 250px;
}

.ml-0 {
    margin-left: 0;
}

.ml-50 {
    margin-left: 50px;
}

.ml-100 {
    margin-left: 100px;
}

.ml-150 {
    margin-left: 150px;
}

.ml-200 {
    margin-left: 200px;
}

.ml-250 {
    margin-left: 250px;
}

.m-0 {
    margin: 0;
}

.m-auto {
    margin: auto;
}



/*** テキスト ***/
.text-start {
    text-align: left;
}

.text-end {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-decoration-none {
    text-decoration: none;
}

.text-decoration-underline {
    text-decoration: underline;
}

.text-wrapper2 {
    margin: 0 auto 124px;
    padding-bottom: 20px;
}

/*** フォントサイズ ***/
.fs-09 {
    font-size: 0.9rem;
}

.fs-1 {
    font-size: 1rem;
}

.fs-14 {
    font-size: 1.4rem;
}

.fs-15 {
    font-size: 1.5rem;
}

.fs-30 {
    font-size: 3.0rem;
}

.fs-175 {
    font-size: 1.75rem;
}

.fs-2 {
    font-size: 2rem;
}

.fs-25 {
    font-size: 2.5rem;
}


/*** フォント太さ ***/
.fw-b {
    font-weight: bold;
}


/***　字下げ ***/
.note {
    text-indent: 0;
}

/*** 表示、非表示切り替え ***/
.d-block {
    display: block;
}

.d-grid {
    display: grid;
}

.d-inline-grid {
    display: inline-grid;
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

/*** グローバルナビ調整 ***/
.items-center {
    align-items: center;
}

.nav-list2 {
    align-items: center;
} 

.nav-item {
    text-align: center;
}

/*** フレックスコンテナー ***/
.j-content {
    justify-content: center;
}

/*** 改行禁止 ***/
.mass {
    display: inline-block;
}


/*** PC/SP表示・非表示切替 ***/
.pc-disp {
    display: block;
}

.sp-disp {
    display: none;
}


/*** 文字折り返し ***/
.ws-nowrap {
    white-space: nowrap;
}

/***********************************************
位置・余白・文字サイズ等END
************************************************/



/***********************************************
株式会社junya専用css START
************************************************/

/*** HOME ***/

/*** ヘッダー ***/
.nav-item {
    min-width: auto;
}

.nav-link {
    font-size: 1.6rem;
    padding: 0 28px;
}


/*** メインビューテキスト***/
.first-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-size: 5.8rem;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.15em;
}

/*** トップページ横並び間隔調整***/
.top-flex-box {
    display: flex;
    justify-content: flex-start;
    gap:  10px 10px;
}



/* 横並びボタン修正 */
.more-btn {
    margin-right: 10px;
    margin-top: 50px;
}

/* ボタン中央寄 */
.m-0-auto {
    margin: auto;
}

/* 下層見出し */
.kasou-first-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #46494b;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.15em;
}

/*** 人工炭酸泉装置　業務用 ***/

/* リスト */
.tansan-list {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: .3em;
}

/* 画像縦に長くテキストと並べる */
.flex-box-container {
    display: flex;
    /* width: fit-content; */
}

.set-flex {
    display: flex;
    flex-wrap: wrap;
    /* width: 67%; */
    width: 100%;
}

.set-flex .flex-text-box {
    position: relative;
    width: 50%;
    padding: 10px 30px;
    margin: 35px 0;
}

.set-flex .flex-text-box::before {
    content: "";
    display: block;
    height: auto;
    width: 0;
    border-right: 1px solid #9e9e9e;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.set-flex .flex-text-box:nth-child(3)::before, .set-flex .flex-text-box:first-of-type::before {
    content: none;
}

.flex-box-container .flex-img-box {
    width: 33%;
    padding: 10px 30px;
}


/* スペック表 */
.spec-table {
    min-width: 800px;
    text-align: center;
    margin: 0 auto;
    border-top: 1px solid #9e9e9e;
    border-bottom: 1px solid #9e9e9e;
    border-left: non;
    border-right: non;
}

.spec-table th, .spec-table td {
    padding: 20px;
    border-top: 1px solid #9e9e9e;
    border-right: 1px solid #9e9e9e;
}

.spec-table th:last-child,.spec-table td:last-child{
    border-right: 1px solid #fff;
}

.spec-table tr:nth-child(even) th,
.spec-table tr:nth-child(even) td {
background: rgba(207,207,207,0.1);
}

.color-row {
    background: rgba(0,103,178,0.1);
}


/* スペック表パターン② */
.spec-table-2 {
    min-width: 800px;
    text-align: center;
    margin: 0 auto;
    border-top: 1px solid #9e9e9e;
    border-bottom: 1px solid #9e9e9e;
    border-left: non;
    border-right: non;
}

.spec-table-2 th, .spec-table-2 td {
    padding: 20px;
    border-top: 1px solid #9e9e9e;
    border-right: 1px solid #9e9e9e;
    vertical-align: middle;
}

.spec-table-2 th:last-child,.spec-table-2 td:last-child{
    border-right: 1px solid #fff;
}

.border-r {
    border-right: 1px solid #9e9e9e!important;
}


/* 表（標準） */
.standard-table {
    min-width: 800px;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
    border-top: 1px solid #9e9e9e;
    border-bottom: 1px solid #9e9e9e;
    border-left: none;
    border-right: none;
}

.standard-table th, .standard-table td {
    padding: 20px;
    border-top: 1px solid #9e9e9e;
    text-align: left;
    line-height: 2rem;
}

.standard-table th:last-child,.standard-table td:last-child{
    border-right: 1px solid #fff;
}

.standard-table th {
    background: rgba(0,103,178,0.1);
    width: 20%;
}

/* 表（会社概要） */
.company_table {
    width: min(80%, 1000px);
    text-align: center;
    margin: 0 auto;
    border-top: 1px solid #9e9e9e;
    border-bottom: 1px solid #9e9e9e;
    border-left: none;
    border-right: none;
}

.company_table th, .company_table td {
    padding: 20px;
    border-top: 1px solid #9e9e9e;
    text-align: left;
    line-height: 2.1rem;
    vertical-align: middle;
}

.company_table th:last-child,.company_table td:last-child{
    border-right: 1px solid #fff;
}

.company_table th {
    background: rgba(0,103,178,0.1);
    width: 30%;
}

/* note幅位置調整 */
.sauna-note {
    max-width: 1000px;
    margin: 0 auto;
}


/***********************************************
株式会社junyaサイト専用css END
************************************************/