/*
Theme Name: RYUSHIN
Author: RYUSHIN x WD
Description: Web base style css
Version: 1.0
*/

@charset "UTF-8";

/* ========================================================================================= リセット */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー フォントサイズリセット */
html {
    text-align: justify;
    font-size: 100%;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ボディー全体の余白削除 */
body {margin: 0;padding: 0;}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー imgの設定（ボトム余白削除など） */
img, video, iframe {
    vertical-align: bottom;
    max-width: 100%;
}

/* ========================================================================================= 全体共通パーツ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 余白間 */
.mt50 {margin-top: 50px;}
.mt100 {margin-top: 100px;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー レスポンシブの横幅1000px用（コンテンツ等の箱） */
.all_contents_box {
    margin-left: 20px;
    margin-right: 20px;
}

@media (1000px <= width < 1580px) {
    .all_contents_box {
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media (1580px <= width) {
    .all_contents_box {
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 全体共通パーツ：見出し（h1 h2など） */
.all_h1 h1 {
    font-size: clamp(1rem, 0.765rem + 1.18vw, 1.5rem); /* 1〜1.5rem 320〜1000px */
    margin: 0;
    padding: 0;
}

.all_h1 p {
    font-size: clamp(1.2rem, 0.353rem + 4.24vw, 3rem); /* 1.2〜3rem 320〜1000px */
    color: #4bb198;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    margin: 0;
    padding: 0;
}

.all_h2 h2 {
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    line-height:  clamp(1rem, 0.529rem + 2.35vw, 2rem);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #4bb198;
    margin-top: 100px;
    padding-bottom: 20px;
}

.all_h2 p {
    font-size: clamp(1.2rem, 0.918rem + 1.41vw, 1.8rem); /* 1.2〜1.8rem 320〜1000px */
    color: #4bb198;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    margin: 0;
    margin-top: 20px;
    padding: 0;
}

.all_h3 h3 {
    font-size: clamp(1rem, 0.624rem + 1.88vw, 1.8rem); /* 1〜1.8rem 320〜1000px */
    line-height:  clamp(1rem, 0.529rem + 2.35vw, 2rem);
}

/* ========================================================================================= 全体共通パーツ：ボディー */
body {
    font-size: clamp(0.9rem, 0.806rem + 0.47vw, 1.1rem); /* 0.9〜1.1rem 320〜100px */
    font-family: 'Arial', 'Helvetica', sans-serif;
    color: #333;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー スマホ等メニュー表示の際のスクロールロック */
body.active {
    height: 100%;
    overflow: hidden;
}

/* ========================================================================================= 全体共通パーツ：header */
header {
    position: fixed;
    background-color: #fff;
    padding: 0;
    width: 100%;
    height: 60px;
    z-index: 100;
}

@media (700px <= width) {
    header {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー header ロゴ */
.header_logo {
    width: 150px;
    height: 20px;
    padding: 20px 20px;
}

@media (1000px <= width) {
    .header_logo {
        padding:0 40px;
        height: 20px;
    }
}

.header_logo p {margin: 0; padding: 0;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルートとお問い合わせボタン */
.header_banner {
    z-index: 100;
    position: fixed;
    bottom: 0;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
}

.header_banner_rec {background-color: #084DD2;}

.header_banner_con {background-color: #4bb198;}

.header_banner_rec:hover, .header_banner_con:hover {background-color: #333;}

.header_banner_rec p,
.header_banner_con p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.header_banner_rec a,
.header_banner_con a {
    display: block;
    color: #fff;;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
}

.header_banner_span {font-size: clamp(0.6rem, 0.506rem + 0.47vw, 0.8rem); /* 0.9〜1.1rem 320〜100px */}

@media (1000px <= width) {
    .header_banner {
        position: static;
        width: 20vw;
        min-width: 200px;
        height: 100%;
        vertical-align: middle;
        font-size: 0.8rem;
    }
    .header_banner_rec p,
    .header_banner_con p {height: 100%;}
    .header_banner_rec a,
    .header_banner_con a {
        height: 100%;
        display: grid;
        place-content: center;
        display: block;
        padding: 0;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー header メニュー */
#nav_menu {display: none;}

@media (700px <= width) {
    #nav_menu {display: inline-block;}
}

#nav_menu.panelactive {
    display: inline;
    position: fixed;
    z-index: 100;
    top: 60px;
    width: 100%;
    height: 100vh;
}

.nav_menubtn_bg {
    position: fixed;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    background-color: #333;
    top: -100vh;
}

@media (700px <= width) {
    .nav_menubtn_bg {display: none;}
}

.nav_menubtn_bg.circleactive {top: 60px;}

#nav_menu_list {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

@media (700px <= width) {
    #nav_menu_list {
        display: block;
        position: static;
        top: 0;
        width: auto;
        height: auto;
        overflow: auto;
    }
}

#nav_menu.panelactive #nav_menu_list {display: block;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー メニューのボタン */
.nav_menubtn {
    position: fixed;
    top: 12px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    background-color: #4bb198;
    padding: 10px 20px;
}

.nav_menubtn:hover {background-color: #333;}

.nav_menubtn.active {
    font-size: 0;
    background-color: #333;
}
.nav_menubtn.active:before {
    font-size: 0.8rem;
    font-weight: bold;
    content: "閉じる";
}

@media (700px <= width) {
    .nav_menubtn {display: none;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー メニューリスト レイアウト */
nav ul {font-size: 1.2rem}

nav ul {
    margin: 0 0 200px 0;
    padding: 0;
    list-style: none;
    background-color: #333;
}

nav ul li a {
    margin: 0 20px;
    padding: 20px;
    display: block;
    border-bottom: 1px solid #bbb;
    color: #eee;
    text-decoration: none;
}

nav ul li a:hover {background-color: #555;}

nav ul li a::after {
    content: ">";
    position: absolute;
    right: 40px;
    padding-top: 5px;
}

@media (700px <= width) {
    .nav_box {
        flex-grow: 2;
        text-align: right;
    }
    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: clamp(0.6rem, 0.412rem + 0.94vw, 1rem); /* 0.6〜1rem 320〜1000px */
        margin: 5px 0 0;
        background-color: #fff;
        color: #333;
    }
    nav ul li a {
        margin: 0 20px 0 0;
        padding: 5px 0;
        border: none;
        color: #333;
        position: relative;
    }
    nav ul li a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #4bb198;
        display: block;
        -webkit-transform-origin: right top;
        -ms-transform-origin: right top;
        transform-origin: right top;
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        transform: scale(0, 1);
        -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
        transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
    }
    nav ul li a:hover {
        background-color: #fff;
        color: #4bb198;
    }
    nav ul li a:hover::before {
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    nav ul li a::after {
        content: "";
    }
    .current-menu-item a,
    .current_page_parent a {
        color: #4bb198;
        font-weight: bold;
    }
}

/* ========================================================================================= 全体共通パーツ：footer */
footer {padding: 50px 0 70px;}

@media (1000px <= width) {
    footer {
        padding: 50px 0 30px;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー footer ロゴ */
.footer_logo {
    width: 150px;
    height: 20px;
    padding: 0;
}

.footer_logo p {margin: 0; padding: 0;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー footer 事業内容・住所と許可番号の配置 */
.footer_contents_box {margin-top: 50px;}

@media (700px <= width) {
    .footer_contents_box {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー footer 事業内容・住所 */
.footer_info_area p {
    font-size: 0.8rem;
    margin: 0;
}

@media (700px <= width) {
    .footer_info_area p {font-size: unset;}
}

.footer_info_area address {
    font-style: normal;
    margin-top: 20px;
}

.footer_info_area address a {color: #333;}

.footer_info_area address a:hover {color: #4bb198;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー footer 許可番号 */
.footer_permission_area {margin-top: 50px;}

@media (700px <= width) {
    .footer_permission_area {margin-top: 0;}
}

.footer_permission_area p {margin: 0; padding: 0;}

.footer_permission_area p.footer_permission_heading {
    font-weight: bold;
    margin-top: 20px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー footer 個人情報・コピーライト */
.footer_copy_area {
    text-align: right;
    margin-top: 50px;
}

.footer_copy_area a {
    color: #333;
    position: relative;
}

.footer_copy_area a:hover {color: #4bb198;}

@media (700px <= width) {
    .footer_copy_area {
        text-align: left;
        margin-top: 30px;
    }
}

/* ========================================================================================= 全体共通パーツ：SDGs */
.sdg {
    border-bottom: 1px solid #ccc;
    width: 100%;
    text-align: center;
}

.sdg p {margin: 0; padding: 40px;}

.sdg img {
    width: 40%;
    max-width: 350px;
}

/* ========================================================================================= 全体共通パーツ：リクルートバナー */
.recruit_banner {
    background-image: url(https://ryuushin.jp/img/recruit.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    width: 100%;
    position: relative;
    margin-top: 100px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 白文字タイトル */
.recruit_banner_title {padding: 40px 0 20px;}

.recruit_banner_title_jp {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    font-weight: bold;
    text-shadow: 0 0 10px #aaa;
}

.recruit_banner_title_en {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(2rem, -0.824rem + 14.12vw, 8rem); /* 2〜8rem 320〜1000px */
    font-weight: bold;
    text-shadow: 0 0 10px #aaa;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 文章 */
.recruit_banner_text {padding: 0;}

.recruit_banner_text_top {
    color: #4bb198;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    font-weight: bold;
    width: 60%;
}

.recruit_banner_text_comment {
    width: 55vw;
    text-shadow: 0 0 10px #eee;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ボタン部分 */
.recruit_banner_all_button {padding: 40px 0;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルートバナー　レスポンシブ設定 */
@media (700px <= width < 1000px) {
    .recruit_banner_title {
        padding: 0;
        position: absolute;
        bottom: 20px;
        right: 20px;
        text-align: right;
    }
    .recruit_banner_text {padding: 50px 0;}
    .recruit_banner_all_button {padding: 20px 0 90px;}
}

@media (1000px <= width) {
    .recruit_banner_box {
        padding: 100px 0;
    }
    .recruit_banner_title {padding: 0;}
    .recruit_banner_text {padding: 50px 0 70px;}
    .recruit_banner_all_button {padding: 0;}
}

/* ========================================================================================= 全体共通パーツ：実績バナー */
.works_banner_bg {
    margin-top: 100px;
    padding: 50px 0px;
    background-color: #f0f0f0;
    text-align: center;
}

.works_banner_text_box {
    margin: auto;
    width: 300px;
    position: relative;
}

.works_banner_text_title h1 {
    border-bottom: 1px solid #4bb198;
    padding-bottom: 10px;
}

.works_banner_text_button {margin-top: 30px;}

.work_banner_img {padding-top: 30px;}

.work_banner_img img {
    width: 100vw;
    height: 300px;
    object-fit: cover;
}

@media (700px <= width) {
    .works_banner_bg {
        text-align: left;
    }
    .works_banner_text_box {
        margin-left: 20px;
        margin-right: 20px;
        width: 500px;
    }
    .works_banner_text_title h1 {
        margin-left: 80px;
    }
    .works_banner_text_title p {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 2.6rem;
        left: -2.8rem;
        transform: rotate(-90deg);
    }
    .works_banner_text_button {
        margin-top: 40px;
        margin-left: 80px;
    }
    .work_banner_img {margin-left: 100px;}
}

@media (1000px <= width) {
    .works_banner_text_box {
        margin-left: 40px;
        margin-right: 40px;
    }
    .works_banner_text_title p {
        position: absolute;
        top: 3rem;
        left: -4rem;
    }
    .work_banner_img {margin-left: 120px;}
    .work_banner_img img {height: 400px;}
}

@media (1500px <= width) {
    .works_banner_text_box {
        width: 1460px;
        padding-left: 40px;
        margin: auto;
    }
    .works_banner_text_title h1 {
        width: 800px;
    }
    .works_banner_text_title p {
        position: absolute;
        top: 3rem;
        left: -1.5rem;
    }
    .work_banner_img {
        margin-left: calc((100vw - 1500px) / 2);
        padding-left: 120px;
    }
    .work_banner_img img {height: 500px;}
}

/* ========================================================================================= 全体共通パーツ：グレー背景のお問い合わせ */
.all_bottom_contents_contact_bg {
    margin-top: 100px;
    padding: 50px 0px;
    background-color: #f0f0f0;
    text-align: center;
}

.bottom__contents_contact_title {
    font-size: 1.5rem;
    font-weight: bold;
}


.all_bottom_contents_contact_title {
    padding-top: 40px;
    font-weight: bold;
}

.all_bottom_contents_contact_tel {padding-top: 10px;}

.all_bottom_contents_contact_tel a {
    font-size: clamp(1.4rem, 1.212rem + 0.94vw, 1.8rem); /* 1.4〜1.8rem 320〜1000px */
    color: #066B71;
    transition: 0.3s;
}

.all_bottom_contents_contact_tel a:hover {color: #4bb198;}

.all_bottom_contents_contact_mail {
    position: relative;
    padding-top: 10px;
}

.all_bottom_contents_contact_mail a {
    display: inline-block;
    background-color: #066B71;
    padding: 15px 60px 15px 30px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
}

.all_bottom_contents_contact_mail a:hover {background-color: #4bb198;}

.all_bottom_contents_contact_mail_icon {
    background-color: #ffe602;
    color: #000;
    font-size: 1.8rem;
    line-height: 1.8rem;
    border-radius: 50px;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: -55%;
    right: -20px;
}

.all_bottom_contents_contact_mail_icon p {
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
}

.all_bottom_contents_contact_mail_icon span {
    font-size: 0.8rem;
    line-height: 0.8rem;
}

@media (370px <= width < 700px) {
    .all_bottom_contents_contact_mail a {padding: 15px 30px;}
    .all_bottom_contents_contact_mail_icon {
        position: absolute;
        top: -45px;
        right: -50px;
    }
}

@media (700px <= width) {
    .all_bottom_contents_contact_mail a {
        padding: 30px 80px;
        font-size: clamp(1.4rem, 1.212rem + 0.94vw, 1.8rem); /* 1.4〜1.8rem 320〜1000px */;
    }
    .all_bottom_contents_contact_mail_icon {
        position: absolute;
        position: absolute;
        top: -30px;
        right: -30px;
    }
}

/* ========================================================================================= 全体共通パーツ：共通緑ボタン */
.all_button p a {
    display: inline-block;
    background-color: #066B71;
    border-radius: 25px;
    padding: 15px 47px 15px 40px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
}

.all_button p a::after {
    content: url(https://ryuushin.jp/svg/button_mark.svg);
    position: absolute;
    position: absolute;
    top: 53%;
    right: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.all_button p a:hover {
    background-color: #4bb198;
}

/* ========================================================================================= 全体共通パーツ：main ページ内メインコンテンツのボックス */
main {padding-top: 60px;}

@media (700px <= width) {
    main {padding-top: 80px;}
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// Home（トップページ） */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー トップページ ヘッダーの画像スライダー */
.index_header_img {
    position: relative;
    margin-bottom: 40px;
}

.index_header_img .swiper-slide img {
    width: 100vw;
    height: calc(100vh - 158px);
    object-fit: cover;
}

@media (700px <= width < 1000px) {
    .index_header_img {margin-bottom: 60px;}
    .index_header_img .swiper-slide img {height: calc(100vh - 198px);}
}

@media (1000px <= width) {
    .index_header_img {margin-bottom: 60px;}
    .index_header_img .swiper-slide img {height: calc(100vh - 140px);}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー トップページ 画像スライダー下ロゴマークなど */
.index_header_img_contents {
    margin: 0 20px;
}

.index_header_img_logo {
    background-color: #4bb198;
    width: 20vw;
    max-width: 120px;
    padding: 20px 20px;
    position: absolute;
    bottom: -25px;
    left: 20px;
    z-index: 2;
}

.index_header_img_contents_title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    font-weight: bold;
    text-shadow: 0 0 10px #aaa;
    position: absolute;
    bottom:  0;
    left: calc(20vw + 68px);
    z-index: 2;
}

@media (700px <= width < 1000px) {
    .index_header_img_logo {
        bottom: -40px;
        padding: 40px 20px;
    }
    .index_header_img_contents_title {
        left: 210px;
    }
}

@media (1000px <= width) {
    .index_header_img_logo {
        bottom: -60px;
        left: 40px;
        padding: 40px 20px;
    }
    .index_header_img_contents_title {
        left: 230px;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー トップページ 画像下のお知らせ */
.index_header_img_contents_news {
    display: none; /* お知らせ非表示 */
    margin: 0 20px;
}

.index_header_img_contents_news p {margin: 0; padding: 0;}

P.index_header_img_contents_news_heading {
    padding: 20px 0 10px;
    font-weight: bold;
}

P.index_header_img_contents_news_date {color: #4bb198;}

P.index_header_img_contents_news_title a {color: #333;}

P.index_header_img_contents_news_title a:hover {color: #4bb198;}

@media (700px <= width) {
    .index_header_img_contents_news {
        margin: 0;
        padding-right: 20px;
        position: absolute;
        bottom: 85px;
        left: 210px;
        font-size: 0.8rem;
    }
    .index_header_img_contents_news_box {
    display: flex;
    justify-content: center;
    }
    P.index_header_img_contents_news_heading {
        margin-right: 15px;
        padding: 0 15px 0 0;
        font-weight: normal;
        border-right: 5px solid #4bb198;
    }
    P.index_header_img_contents_news_date {
        margin-right: 15px;
        padding: 0;
        color: #333;
    }
    P.index_header_img_contents_news_title {
        width: 38vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (1000px <= width) {
    .index_header_img_contents_news {
        margin: 0;
        padding-right: 20px;
        position: absolute;
        bottom: 15px;
        left: 230px;
        font-size: unset;
    }
    P.index_header_img_contents_news_title {
        width: 45vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー トップページ 強みコメント部分  */
.index_strong_text_frame {margin-top: 100px;}

.index_strong_text_bg img {width: 100vw;}

.index_strong_text_box {margin: 0 20px;}

.index_strong_text_title h1 {
    border-bottom: 1px solid #4bb198;
    margin-top: 50px;
    padding-bottom: 10px;
}

.index_strong_text_button {margin-top: 50px;}

@media (700px <= width) {
    .index_strong_text_frame {
        margin-top: 140px;
        display: flex;
        flex-direction: row-reverse;
    }
    .index_strong_text_bg {
        width: 50%;
        margin-top:  clamp(1.2rem, 0.824rem + 1.88vw, 2rem);
    }
    .index_strong_text_bg img {
        width: 100%;
        max-height: 600px;
        object-fit: cover;
    }
    .index_strong_text_box {
        width: calc(50% - 30px);
        margin-right: 30px;
    }
    .index_strong_text_title h1 {margin-top: 0;}
}

@media (1000px <= width < 1580px) {
    .index_strong_text_frame {margin-top: 160px;}
    .index_strong_text_box {
        width: calc(50% - 60px);
        margin-left: 40px;
        margin-right: 60px;
    }
    .index_strong_text_button{margin-top: 70px;}
}

@media (1580px <= width) {
    .index_strong_text_frame {margin-top: 160px;}
    .index_strong_text_box {
        width: calc((1500px / 2) - 60px);
        margin-right: 60px;
    }
    .index_strong_text_button{margin-top: 70px;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー トップページ 強み 4つのボックス */
.index_strong_point_bg {
    margin-top: 50px;
    background-color: #4bb198;
}

.index_strong_point_frame {
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    row-gap: 10px;
}

.index_strong_point_box {
    background-color: #fff;
    font-size: clamp(1.2rem, 0.824rem + 1.88vw, 2rem); /* 1.2〜2rem 320〜1000px */
    font-weight: bold;
    padding: 50px 20px 50px;
    position: relative;
}

.isp01::before {content: "01";}
.isp02::before {content: "02";}
.isp03::before {content: "03";}
.isp04::before {content: "04";}

.isp01::after {background-image: url(https://ryuushin.jp/svg/sp_icon_01.svg);}
.isp02::after {background-image: url(https://ryuushin.jp/svg/sp_icon_02.svg);}
.isp03::after {background-image: url(https://ryuushin.jp/svg/sp_icon_03.svg);}
.isp04::after {background-image: url(https://ryuushin.jp/svg/sp_icon_04.svg);}

.isp01::before, .isp02::before, .isp03::before, .isp04::before {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    line-height: 2rem;
    color: #4bb198;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

.isp01::after, .isp02::after, .isp03::after, .isp04::after {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

@media (700px <= width) {
    .index_strong_point_frame {
        padding: 50px 0;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }
}

@media (1000px <= width) {
    .index_strong_point_box {
        padding: 50px 20px;
        display: grid;
        align-content: center;
    }
    .isp01, .isp02, .isp03, .isp04 {
        padding-left: 4.7rem;
        padding-right: 4.5rem;
    }
    .isp01::before, .isp02::before, .isp03::before, .isp04::before {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        font-size: 3rem;
        line-height: 3rem;
    }
    .isp01::after, .isp02::after, .isp03::after, .isp04::after {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー トップページ 事業内容部分 */
.index_works_text_frame {
    width: 300px;
    margin: auto;
    margin-top: 100px;
    text-align: center;

}

.index_works_text_title h1 {
    border-bottom: 1px solid #4bb198;
    padding-bottom: 10px;
}

.index_works_text_button {margin-top: 50px;}

.index_works_list_box {
    margin-top: 50px;
    display: grid;
    gap: 15px;
}

.iwl_box01 {background-image: url(https://ryuushin.jp/img/photo_work_01.jpg);}
.iwl_box02 {background-image: url(https://ryuushin.jp/img/photo_work_02.jpg);}
.iwl_box03 {background-image: url(https://ryuushin.jp/img/photo_work_03.JPG);}
.iwl_box04 {background-image: url(https://ryuushin.jp/img/photo_work_04.jpg);}
.iwl_box05 {background-image: url(https://ryuushin.jp/img/photo_work_05.JPG);}
.iwl_box06 {background-image: url(https://ryuushin.jp/img/photo_work_06.jpg);}

.index_works_list {
    background-position: center;
    background-size: cover;
    height: 250px;
}

.index_works_list_bg {
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    transition: 0.3s;
}

.index_works_list_bg p {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    color: #fff;
    font-weight: bold;
}

@media (550px <= width < 1000px) {
    .index_works_list_box {grid-template-columns: 1fr 1fr;}
    .index_works_list {height: 300px;}
}

@media (1000px <= width) {
    .index_works_list_box {grid-template-columns: 1fr 1fr 1fr;}
    .index_works_list {height: 350px;}
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// 龍進工業の強み */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 強み4つのタイトル数字とアイコン設定 */
.strength_title_box {position: relative;}

.strength_title_01::before {content: "01";}
.strength_title_02::before {content: "02";}
.strength_title_03::before {content: "03";}
.strength_title_04::before {content: "04";}

.strength_title_01::after {background-image: url(https://ryuushin.jp/svg/sp_icon_01.svg);}
.strength_title_02::after {background-image: url(https://ryuushin.jp/svg/sp_icon_02.svg);}
.strength_title_03::after {background-image: url(https://ryuushin.jp/svg/sp_icon_03.svg);}
.strength_title_04::after {background-image: url(https://ryuushin.jp/svg/sp_icon_04.svg);}

.strength_title_01::before, .strength_title_02::before, .strength_title_03::before, .strength_title_04::before {
    position: absolute;
    top: -40px;
    left: 40px;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #4bb198;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

.strength_title_01::after, .strength_title_02::after, .strength_title_03::after, .strength_title_04::after {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -40px;
    left: 0;
}

@media (1000px <= width) {
    .strength_title_box h2 {padding-left: 150px;}
    .strength_title_01::before, .strength_title_02::before, .strength_title_03::before, .strength_title_04::before {
        position: absolute;
        top: -8px;
        left: 72px;
        font-size: 3rem;
        line-height: 3rem;
    }
    .strength_title_01::after, .strength_title_02::after, .strength_title_03::after, .strength_title_04::after {
        width: 50px;
        height: 50px;
        position: absolute;
        top: -8px;
        left: 0;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 写真あり部分のフレックス（強み１と３） */
.sp_contents_box_flex_img img {width: 100%;}

@media (700px <= width) {
    .sp_contents_box_flex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .sp_contents_box_flex p {margin-top: 0px;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 強み４の証明書部分 */
.sp_proof_frame {
    margin-top: 50px;
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.sp_proof_box {text-align: center;}

.sp_proof_box img {
    width: calc(100% - 2px);
    border: 1px solid #ccc;
}

.sp_proof_box a {
    color: #333;
    transition: 0.3s;
}

.sp_proof_box a:hover {color: #4bb198;}

.sp_proof_box a::before {
    content: url(https://ryuushin.jp/img/pdf_icon.png);
    vertical-align: middle;
    padding-right: 5px;
}

@media (width < 700px) {
    .sp_proof01 {order: 1;}
    .sp_proof02 {
        order: 3;
        grid-row: 2 / 3;
        grid-column: 1 / 3;
    }
    .sp_proof03 {order: 2;}
}

@media (700px <= width) {
    .sp_proof_frame {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: none;
        height: fit-content;
    }
    .sp_proof_box img {grid-template-rows: subgrid;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 資格者 */
.qualification_box {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 30px;
}

.qualification_title {
    background-color: #4bb198;
    color: #fff;
    margin: 0;
    padding: 10px;
    text-align: center;
}

.qualification_list {
    padding-left: 25px;
    margin-bottom: 0;
    margin-top: 30px;
}

@media (600px <= width < 1200px) {
    .qualification_box {padding: 40px 40px;}
    .qualification_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

@media (1200px <= width) {
    .qualification_box {padding: 40px 60px;}
    .qualification_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
    }
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// 事業内容 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー flex指定  */
@media (700px <= width) {
    .service_contents_box_flex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 実績へのリンクボタン上マージン  */
.service_link_button {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 事業内容数字部分  */
.service_contents_box_flex h3 {
    position: relative;
    z-index: 1;
}

.service01 h3::before {content: "01";}
.service02 h3::before {content: "02";}
.service03 h3::before {content: "03";}
.service04 h3::before {content: "04";}
.service05 h3::before {content: "05";}
.service06 h3::before {content: "06";}

.service01 h3::before, .service02 h3::before, .service03 h3::before, .service04 h3::before, .service05 h3::before, .service06 h3::before {
    position: absolute;
    top: -15px;
    right: 0;
    font-size: 3rem;
    line-height: 3rem;
    color: #eee;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    z-index: -1;
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// 工事の流れ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 流れの見出し  */
.flow_title01, .flow_title02, .flow_title03, .flow_title04, .flow_title05, .flow_title06, .flow_title07, .flow_title08 {
    padding: 20px 20px;
    position: relative;
}

.flow_title01, .flow_title02, .flow_title03, .flow_title04 {background-color: #4bb198;}

.flow_title05, .flow_title08 {background-color: #c75252;}

.flow_title06, .flow_title07 {background-color: #066B71;}

.flow_title01 p, .flow_title02 p, .flow_title03 p, .flow_title04 p, .flow_title05 p, .flow_title06 p, .flow_title07 p, .flow_title08 p {
    color: #fff;
    font-size: clamp(1.2rem, 0.918rem + 1.41vw, 1.8rem); /* 1.2〜1.8rem 320〜1000px */
    margin: 0;
    margin-left: clamp(2.5rem, 1.559rem + 4.71vw, 4.5rem); /* 2.5〜4.5rem 320〜1000px */
    padding: 0;
}

.flow_title01::before {content: "01";}
.flow_title02::before {content: "02";}
.flow_title03::before {content: "03";}
.flow_title04::before {content: "04";}
.flow_title05::before {content: "05";}
.flow_title06::before {content: "06";}
.flow_title07::before {content: "07";}
.flow_title08::before {content: "08";}

.flow_title01::before, .flow_title02::before, .flow_title03::before, .flow_title04::before, .flow_title05::before, .flow_title06::before, .flow_title07::before, .flow_title08::before  {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-size: clamp(1.5rem, 0.794rem + 3.53vw, 3rem); /* 1.5〜3rem 320〜1000px */
    color: #fff;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 流れ内容  */
.flow_contents_box {
    margin-left: 20px;
    border-left: 3px solid #d0d0d0;
    padding: 20px 20px 30px;
}

.flow_contents_box p {margin: 0;}

.flow_contents_box_White {
    margin-left: 20px;
    border-left: 3px solid #fff;
    padding: 20px 20px 30px
}

@media (700px <= width) {
    .flow_contents_box {
        margin-left: 30px;
        border-left: 3px solid #d0d0d0;
        padding: 50px 20px 50px 50px;
    }
    .flow_contents_box p {margin: 0;}
    .flow_contents_box_White {
        margin-left: 30px;
        border-left: 3px solid #fff;
        padding: 50px 20px 50px 50px;
    }
}

.flow_contents_box_White p {margin: 0;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 流れ01のお問い合わせ内容  */
.flow_contents_box_contact_title {
    padding-top: 40px;
    font-weight: bold;
}

.flow_contents_box_contact_tel {padding-top: 10px;}

.flow_contents_box_contact_tel a {
    font-size: clamp(1.4rem, 1.212rem + 0.94vw, 1.8rem); /* 1.4〜1.8rem 320〜1000px */
    color: #066B71;
    transition: 0.3s;
}

.flow_contents_box_contact_tel a:hover {color: #4bb198;}

.flow_contents_box_contact_mail {
    position: relative;
    padding-top: 10px;
}

.flow_contents_box_contact_mail a {
    display: inline-block;
    background-color: #066B71;
    padding: 15px 53px 15px 30px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
}

.flow_contents_box_contact_mail a::after {
    content: url(https://ryuushin.jp/svg/button_mark.svg);
    position: absolute;
    position: absolute;
    top: 53%;
    right: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.flow_contents_box_contact_mail a:hover {background-color: #4bb198;}

.flow_contents_box_contact_mail_icon {
    background-color: #ffe602;
    color: #000;
    font-size: 1.8rem;
    line-height: 1.8rem;
    border-radius: 50px;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: -90%;
    right: -27px;
}

.flow_contents_box_contact_mail_icon p {
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
}

.flow_contents_box_contact_mail_icon span {
    font-size: 0.8rem;
    line-height: 0.8rem;
}

@media (370px <= width < 700px) {
    .flow_contents_box_contact_mail a {padding: 40px 60px 40px 120px;}
    .flow_contents_box_contact_mail_icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}

@media (700px <= width) {
    .flow_contents_box_contact_mail a {
        padding: 40px 80px 40px 150px;
        font-size: clamp(1.4rem, 1.212rem + 0.94vw, 1.8rem); /* 1.4〜1.8rem 320〜1000px */;
    }
    .flow_contents_box_contact_mail_icon {
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// 工事実績 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 工事実績パンくずリスト  */
.works_pan_list ul {
    line-height: 1.8rem;
    padding-top: 90px;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.works_pan_list ul li:nth-child(n+2)::before {
    content: "/";
    margin: 0 10px;
}

.works_pan_list a {color: #066B71; transition: 0.3s;}

.works_pan_list a:hover {color: #4bb198;}

.works_pan_list_on01 ul li:nth-child(1) a,
.works_pan_list_on02 ul li:nth-child(2) a,
.works_pan_list_on03 ul li:nth-child(3) a,
.works_pan_list_on04 ul li:nth-child(4) a,
.works_pan_list_on05 ul li:nth-child(5) a,
.works_pan_list_on06 ul li:nth-child(6) a
{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    background-color: #066B71;
    padding: 5px 5px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 工事実績　工事カテゴリタイトル  */
.works_contents_frame h3 {
    background-color: #4bb198;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    line-height:  clamp(1rem, 0.529rem + 2.35vw, 2rem);
    margin-top: 50px;
    padding: 30px 25px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 写真含めた工事ごとの箱と、工事実績工事名等名前部分  */
.works_contents_box {margin-top: 30px;}

.works_contents_name {
    color: #4bb198;
    margin: 0;
    padding: 0;
}

.works_contents_works_name {
    border-bottom: 1px solid #eee;
    margin: 0;
    padding: 0;
}

@media (800px <= width) {
    .works_contents_title {
        display: grid;
        grid-template-columns: 150px 1fr;
    }
    .works_contents_name {
        border-bottom: 1px solid #4bb198;
        padding: 0 15px 15px;
        color: #333;
    }
    .works_contents_works_name {padding: 0 15px 15px;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 工事実績写真部分  */
.works_contents_img {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.works_contents_img p {
    margin: 0;
    padding: 0;
}

.works_contents_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (800px <= width) {
    .works_contents_img {grid-template-columns: 1fr 1fr 1fr;}
}

@media (1200px <= width) {
    .works_contents_img {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-left: 150px;
    }
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// 会社情報 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 社長挨拶部分  */
.company_president_photo {
    margin: 0;
    padding: 0;
    width: 150px;
    margin: auto;
}

.company_president_photo img {padding-top: 50px;}

.company_president_comment {margin-top: 30px;}

.company_president_name_box {
    text-align: center;
    margin-top: 50px
}

.company_president_name_box span {font-size: 0.7rem;}

@media (700px <= width) {
    .company_president_box {
        display: flex;
        margin-top: 50px;
    }
    .company_president_photo {
        width: 200px;
        margin: 0;
        padding: 0;
    }
    .company_president_photo img {padding-top: 0;}
    .company_president_comment {
        margin-top: 0;
        flex: 1;
        margin-left: 40px;
    }
    .company_president_comment p {margin-top: 0;}
    .company_president_name_box {
        display: grid;
        grid-template-columns: 1fr 200px;
        gap: 30px;
        align-items: center;
        text-align: right;
    }
    .company_president_name_box span {font-size: 0.8rem;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 会社概要  */
.company_info_box {margin-top: 50px;}

.company_info_box h3 {
    background-color: #4bb198;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    line-height:  clamp(1rem, 0.529rem + 2.35vw, 2rem);
    margin-top: 50px;
    padding: 30px 25px;
}

.company_info_table {margin-top: 50px;}

.company_info_table dt {
    background-color: #eee;
    padding: 15px;
    font-weight: bold;
}

.company_info_table dd {
    margin-left: 0;
    padding: 15px;
}

@media (600px <= width) {
    .company_info_table {border-top: 1px solid #ccc;}
    .company_info_table dl {
        display: grid;
        grid-template-columns: 1fr 3fr;
    }
    .company_info_table dl {margin: 0;}
    .company_info_table dt {
        background-color: unset;
        border-bottom: 1px solid #ccc;
        padding: 20px 15px;
        text-align: center;
        place-content: center;
    }
    .company_info_table dd {
        border-bottom: 1px solid #ccc;
        padding: 20px 15px;
        place-content: center;
    }
}

.google_map {margin-top: 50px;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 沿革  */
.company_history_box {margin-top: 50px;}

.company_history_box h3 {
    background-color: #4bb198;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    line-height:  clamp(1rem, 0.529rem + 2.35vw, 2rem);
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 30px 25px;
}

.company_history_year {
    background-color: #eee;
    padding: 10px 10px;
    margin: 0;
    font-weight: bold;
}

.company_history_contents_box {
    margin-left: 20px;
    border-left: 1px solid #eee;
}

.company_history_contents {
    padding: 20px 0;
    position: relative;
}

.company_history_contents::before {
    content: "●";
    font-size: 1.5rem;
    color: #4bb198;
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.company_history_contents p {
    margin: 0 20px;
    padding-left: 10px;
    border-left: 5px solid #4bb198;
}

@media (700px <= width) {
    .company_history_year {padding: 20px 50px;}
    .company_history_contents_box {margin-left: 70px;}
    .company_history_contents p {
        margin: 0 30px;
        padding: 20px 30px;
    }
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// お知らせ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お知らせパンくずリスト  */
.information_pan_list {
    font-size: 1rem;
    color: #666;
}

.information_pan_list a {color: #666;}

.information_pan_list a:hover {color: #4bb198;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お知らせグリッド  */
@media (700px <= width) {
    .information_contents_frame {
        display: grid;
        grid-template-columns: 1fr 200px;
        gap: 40px;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お知らせのタイトルリスト：個別ページ以外の全お知らせ  */
.information_contents_box {
    margin-top: 50px;
    border-top: 1px solid #ddd;
}
.information_contents {border-bottom: 1px solid #ddd;}

.information_contents_date p {
    margin: 20px 0;
    padding: 0;
}

.information_contents_title p {
    margin: 20px 0;
    padding: 0;
    font-size: unset;
    font-weight: unset;
}

.information_contents_title p a {
    color: #666;
    transition: 0.3s;
}

.information_contents_title p a:hover {color: #4bb198;}

@media (900px <= width) {
    .information_contents {
        display: grid;
        grid-template-columns: 200px 1fr;
        place-content: center;
    }
    .information_contents_date {
        display: grid;
        place-content: center;
        margin: 20px 0;
    }
    .information_contents_title {margin: 20px 0;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お知らせのタイトルリスト：個別ページ  */
.information_contents_shingle {border-bottom: 1px solid #ddd;}

.information_contents_date_shingle p {
    margin: 20px 0;
    padding: 0;
}

.information_contents_title_shingle p {
    margin: 20px 0;
    padding: 0;
    font-size: unset;
    font-weight: unset;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ページャー：No.の部分  */
.wp-pagenavi {
    margin: 80px auto;
    text-align: center;
}

.wp-pagenavi .page {
    display: inline-block;
    text-align: center;
    width: 40px;
    line-height: 40px;
    border: solid 1px #ddd;
    border-radius: 21px;
    margin: auto 6px;
    transition: 0.3s ease-out;
}

.wp-pagenavi a {color: #777;}

.wp-pagenavi .page:hover {
    background: #13c3ac;
}

.wp-pagenavi .current {
    display: inline-block;
    text-align: center;
    width: 40px;
    line-height: 40px;
    color: #fff;
    background: #4bb198;
    border-radius: 21px;
    margin: auto 6px;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .extend,
.wp-pagenavi .first,
.wp-pagenavi .last {
    line-height: 42px;
    margin: auto 8px;
    transition: 0.3s ease-out;
}

.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover,
.wp-pagenavi .first:hover,
.wp-pagenavi .last:hover {
    color: #4bb198;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ページャー：個別ページ：前後ボタン部分  */
.information_shingle_pager {
    display: flex;
    justify-content: center;
    margin: 80px 0;
}

.next_post {padding-right: 5px;}

.previous_post {padding-left: 5px;}

.next_post a, .previous_post a {
    display: inline-block;
    background-color: #4bb198;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
    font-weight: bold;
}

.next_post a:hover, .previous_post a:hover {background-color: #066B71;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 年別リスト  */
.information_year_box {margin-top: 50px;}

.information_year_title p {
    margin: 0;
    padding: 10px 20px;
    background-color: #4bb198;
    color: #fff;
}

.information_year_box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.information_year_box li {margin-top: 5px;}

.information_year_box li a {
    background-color: #eee;
    display: block;
    padding: 10px 20px;
    color: #333;
    transition: 0.3s;
}

.information_year_box li a:hover {
    background-color: #999;
    color: #fff;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お知らせ内容：リセットと少しの装飾  */
.information_contents_main h1 {
    font-size: 1.3rem;
    border-left: 5px solid #4bb198;
    border-bottom: 1px solid #4bb198;
    padding-left: 10px;
    margin-top: 50px;
}

.information_contents_main h2 {
    font-size: 1.2rem;
    border-bottom: 3px double #4bb198;
    padding-left: 10px;
    margin-top: 50px;
}

.information_contents_main h3 {
    font-size: 1.1rem;
    border-bottom: 2px solid #4bb198;
    padding-left: 10px;
    margin-top: 50px;
}

.information_contents_main h4 {
    border-bottom: 2px dotted #4bb198;
    padding-left: 10px;
    margin-top: 50px;
}

.information_contents_main h5 {
    border-bottom: 1px dotted #4bb198;
    padding-left: 10px;
    margin-top: 50px;
}

.information_contents_main h6 {
    color: #066B71;
    font-weight: bold;
    margin-top: 50px;
}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// 個人情報保護法 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 見出しの設定  */
.privacy_policy_box h2, .privacy_policy_box h3, .privacy_policy_box h4 {margin-top: 50px;}

.privacy_policy_box ol {padding-left: 20px;}

.privacy_policy_box ol ul li {list-style: lower-alpha;}

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// お問い合わせ・お問い合わせ完了・リクルート完了・ */
.tel_big_point {margin-top: 50px;}

.tel_big_point_tel {
    margin: 0;
    font-size: clamp(1.8rem, 1.471rem + 1.65vw, 2.5rem); /* 1.8〜2.5rem 320〜1000px */
    color: #066B71;
}

.tel_big_point_tel a {
    color: #066B71;
    text-decoration: none;
    transition: 0.3s;
}

.tel_big_point_tel a:hover {color: #4bb198;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お問い合わせメールフォーム説明文内の個人情報リンク  */
.contact_text_pp {
    color: #066B71;
    transition: 0.3s;
}

.contact_text_pp:hover {color: #4bb198;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー お問い合わせ・リクルートメールフォーム  */
.main_box_contact_content {margin-top: 50px;}

.contact_mail_box {padding-bottom: 0;}

.contactform_box_title {
    display: flex;
    width: 100%;
    padding-top: 30px;
    font-weight: bold;
}

.contactform_box_title p {margin: 0px;}

.title_item01 {padding-right: 15px;}

.form-any {
    background-color: #eee;
    color: #333;
    padding: 9px 15px;
}

.form-required {
    background-color: #4bb198;
    color: #fff;
    padding: 9px 15px;
}

.wpcf7-form-control-wrap {width: 100%;}

.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    font-size: 1em;
    padding: 15px 10px 10px;
    font-family: 'Source Sans Pro',arial,sans-serif;
    border: 1px solid #ccc;
    background: #fafafa;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.contactform_coution_frame {
    width: calc(90% - 42px);
    max-width: 800px;
    margin: 50px auto 0;
    border: 1px solid #4bb198;
    padding: 20px;
    text-align: center;
}

.contactform_box_check input {width: auto;}

::placeholder {color: #4bb198;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー メールフォーム内のradioボタン部分 */
.contactform_box_radio label {
    display: block;
    width: auto;
    margin-top: 10px;
}

.contactform_box_radio label:hover {
    background-color: #eee;
    border-radius: 10px;
}

.contactform_box_radio input[type="hidden"],
.contactform_box_radio input[type="radio"] {
    appearance: none;
    display: none;
    opacity: 0;
    width: 1px;
    position: absolute;
    height: 1px;
}

.contactform_box_radio input[type="hidden"]+span,
.contactform_box_radio input[type="radio"]+span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 10px 50px;
    width: calc(100% - 100px);
    border: 1px solid #eee;
    background-color: #f8f8f8;
}

.contactform_box_radio input[type="hidden"]+span::before,
.contactform_box_radio input[type="hidden"]+span::after,
.contactform_box_radio input[type="radio"]+span::before,
.contactform_box_radio input[type="radio"]+span::after {
    position: absolute;
    content: "";
    display: block;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto 0;
    box-sizing: border-box;
}

.contactform_box_radio input[type="hidden"]+span::before,
.contactform_box_radio input[type="radio"]+span::before {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #aaa;
    left: 9px;
}

.contactform_box_radio input[type="hidden"]+span::after,
.contactform_box_radio input[type="radio"]+span::after {
    width: 8px;
    height: 8px;
    background: #ccc;
    left: 15px;
    opacity: 0;
}

.contactform_box_radio input[type="hidden"]+span::before,
.contactform_box_radio input[type="radio"]:checked+span::before {background-color: #4bb198;}

.contactform_box_radio input[type="hidden"]+span::after,
.contactform_box_radio input[type="radio"]:checked+span::after {
    opacity: 1;
    background: #4bb198;
    margin-left: 5px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 送信ボタン部分 */
div.wpcf7 .wpcf7-spinner {
    display: none;
}

.contactform_box_button {
    width: 100%;
    text-align: center;
}

.wpcf7 input[type="submit"] {
    width: 80%;
    max-width: 500px;
    margin: 30px 10% 10px;
    padding:15px;
    background-color: #4bb198;
    border: none;
    transition: 0.3s;
    color: #fff;
    font-size: 1.5rem;
    transition: 0.3s;
}

.wpcf7 input[type="submit"]:hover {background: #066B71;}

.wpcf7 input[type="button"] {
    width: 80%;
    max-width: 500px;
    margin: 30px 10% 10px;
    padding:15px;
    background-color: #666;
    border: none;
    transition: 0.3s;
    color: #fff;
    font-size: 1.5rem;
}

.wpcf7 input[type="button"]:hover {background: #084DD2;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー メールフォーム入力ミスの部分 */
.wpcf7-not-valid-tip {text-align: right;}

.wpcf7-response-output {
    background:#f5dcdf;
    color:#711d26;
    padding:20px;
    text-align: center;
}

.wpcf7 .wpcf7-not-valid {background: #f5dcdf;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー Googleメール対策：reCAP */
.reCAP {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
}

.reCAP a  {
    color: #066B71;
    transition: 0.3s;
}

.reCAP a:hover {color: #4bb198;}

.grecaptcha-badge { visibility: hidden; }

/* /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////// リクルート：メールフォームはお問い合わせと共通なため、上項目で設定 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート入りの緑画像部分  */
.recruit_page_header {
    background-image: url(https://ryuushin.jp/img/recruit.jpg);
    background-repeat: no-repeat;
    background-position: 45% 25%;
    background-size: cover;
    width: 100%;
    margin-top: 50px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート入りの緑画像部分：白文字タイトル */
.recruit_page_header_box {background-color: rgba(75,177,152,0.7);}

.recruit_page_header_title {padding: 40px 0 20px;}

.recruit_page_header_title_jp {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    font-weight: bold;
}

.recruit_page_header_title_en {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(2rem, -0.824rem + 14.12vw, 8rem); /* 2〜8rem 320〜1000px */
    font-weight: bold;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート入りの緑画像部分：文章 */
.recruit_page_header_text {padding: 0 0 40px;}

.recruit_page_header_text_top {
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    font-weight: bold;
    width: 60%;
}

.recruit_page_header_text_comment {
    width: 55vw;
    color: #fff;
    font-size: clamp(1rem, 0.765rem + 1.18vw, 1.5rem); /* 1〜1.5rem 320〜1000px */
    font-weight: bold;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート入りの緑画像部分：レスポンシブ設定 */
@media (1000px <= width) {
    .recruit_page_header_title {padding: 100px 0 0;}
    .recruit_page_header_text {padding: 100px 0;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：現場で働く仲間を募集！のあたり */
.recruit_works_header_photo {margin-top: 100px;}

.recruit_works_header_photo_box {position: relative;}

.recruit_works_header_photo_title {
    margin-left: 0;
    border-left: 5px solid #4bb198;
    padding: 60px 20px;
    position: absolute;
    top: -9%;
    color: #4bb198;
    font-size: clamp(1rem, 0.294rem + 3.53vw, 2.5rem); /* 1〜2.5rem 320〜1000px */
}
.recruit_works_header_photo_text {padding: 90px 0 0 25px;}

@media (700px <= width) {
    .recruit_works_header_photo img {
        max-height: 500px;
        object-fit: cover;
        width: calc(100% - 20px);
        margin-left: 20px;
    }
    .recruit_works_header_photo_title {
        padding: 70px 40px;
        top: -20%;
        left: 30px;
    }
    .recruit_works_header_photo_text {padding: 120px 0 0 70px;}
}

@media (1000px <= width) {
    .recruit_works_header_photo img {
        max-height: 500px;
        object-fit: cover;
        width: calc(100% - 40px);
        margin-left: 40px;
    }
}

@media (1500px <= width) {
    .recruit_works_header_photo img {
        max-height: 600px;
        object-fit: cover;
        width: calc(1500px + (100% - 1500px) /2);
        margin-left: calc((100% - 1500px) /2);
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：6枚の写真 */
.recruit_works_six_photo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 50px;
}

.recruit_works_six_photo img {
    object-fit: cover;
    aspect-ratio: 1/1;
}

@media (700px <= width) {
    .recruit_works_six_photo {
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 100px;}
}

@media (1200px <= width) {
    .recruit_works_six_photo {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：6枚写真したのPR */
.recruit_page_pr {margin-top: 50px;}

.recruit_page_pr h3 {
    color: #4bb198;
    font-size: clamp(1rem, 0.294rem + 3.53vw, 2.5rem); /* 1〜2.5rem 320〜1000px */
}

@media (900px <= width) {
    .recruit_page_pr h3 {text-align: center;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：グレーロゴ */
.recruit_page_logo_g {
    background-color: #F7F7F7;
    margin-left: 20px;
    margin-top: 50px;
    padding-right: 20px;
    max-height: 300px;
}

.recruit_page_logo_g img {
    width: calc(50vw - 40px);
    background-color: #fff;
    padding-right: 40px;
    max-height: 300px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：スキルアップ */
.recruit_page_skillup {
    position: relative;
    margin-top: 100px;
}

.recruit_page_skillup p {
    margin: 0;
    padding: 0;
    color: #4bb198;
    font-weight: bold;
    font-size: 3rem;
    position: absolute;
    top: -2.6rem;
    right: 0;
}

.recruit_page_skillup_point {
    border: 10px solid #4bb198;
    padding: 0 10px;
}

.recruit_page_skillup_point h3 {
    color: #4bb198;
    font-size: clamp(1rem, 0.294rem + 3.53vw, 2.5rem); /* 1〜2.5rem 320〜1000px */
}

.recruit_page_motivation_frame {position: relative;}

.recruit_page_motivation_box {
    text-align: center;
    background-color: #FFE602;
    padding: 15px;
    border-radius: 70px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: -25px;
    right: 5px;
    transform: rotate(-20deg);
}

.recruit_page_motivation_box p {
    border: 1px solid #4bb198;
    padding: 5px;
    border-radius: 60px;
    width: 100px;
    height: 100px;
    font-weight: bold;
    color: #4bb198;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    font-size: 0.9em;
}

.recruit_page_motivation_list {margin-top: 50px;}

.recruit_page_motivation_list h4 {
    background-color: #5F5F5F;
    border: 1px solid #5F5F5F;
    color: #fff;
    margin: 0;
    padding: 30px 20px;
}

.recruit_page_motivation_list_box {
    border: 1px solid #5F5F5F;
    padding: 10px 20px;
}

.recruit_page_motivation_list_box ul {padding-left: 20px;}

@media (700px <= width) {
    .recruit_page_skillup_point {padding: 30px 60px;}
}

@media (800px <= width) {
    .recruit_page_motivation_box {
        padding: 10px;
        border-radius: 100px;
        width: 130px;
        height: 130px;
        top: -30px;
        right: 50px;
    }
    .recruit_page_motivation_box p {
        padding: 10px;
        border-radius: 100px;
        width: 110px;
        height: 110px;
    }
    .recruit_page_motivation_list {
        display: grid;
        grid-template-columns: 1fr 2fr ;
    }
    .recruit_page_motivation_list h4 {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .recruit_page_motivation_list_box {padding: 10px 40px;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：スキルアップの文章 */
.recruit_page_skillup_text {
    border-right: 5px solid #4bb198;
    margin-top: 50px;
    padding-right: 20px;
}

.recruit_page_skillup_text h3 {
    color: #4bb198;
    font-size: clamp(1rem, 0.294rem + 3.53vw, 2.5rem); /* 1〜2.5rem 320〜1000px */
    padding-bottom: 30px;
}

@media (700px <= width) {
    .recruit_page_skillup_text {padding-right: 50px;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルート：エントリーリンク */
.recruit_page_entry_link {margin-top: 100px;}

.recruit_page_entry_link p a {
    font-size: clamp(1rem, 0.765rem + 1.18vw, 1.5rem); /* 1〜1.5rem 320〜1000px */
    display: block;
    background-color: #066B71;
    padding: 20px 50px 20px 30px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
}

.recruit_page_entry_link p a::after {
    content: url(https://ryuushin.jp/svg/button_mark.svg);
    position: absolute;
    position: absolute;
    top: 53%;
    right: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.recruit_page_entry_link p a:hover {
    background-color: #4bb198;
}

.recruit_page_entry_link span {
    font-size: clamp(0.7rem, 0.559rem + 0.71vw, 1rem); /* 0.7〜1rem 320〜1000px */
    line-height: 1rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー リクルートエントリーページ：募集概要は、会社概要のcssを利用 */
.entry_mail_box h3 {
    background-color: #4bb198;
    color: #fff;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem); /* 1〜2rem 320〜1000px */
    line-height:  clamp(1rem, 0.529rem + 2.35vw, 2rem);
    margin-top: 50px;
    padding: 30px 25px;
    text-align: center;
}

.entry_mail_box h3 span {
    font-size: clamp(0.7rem, 0.559rem + 0.71vw, 1rem); /* 0.7〜1rem 320〜1000px */
    line-height: 1rem;
}