@charset "utf-8";
/* =========================================================================================================================================== */
/* CSS変数                                                                                                                                      */
/* =========================================================================================================================================== */
:root {
    --webfont-yugothic :  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    --webfont-squada :  'Squada One', cursive;

    --font-size-normal    : 16px;

    --font-weight-regular : 500;
    --font-weight-bold    : 700;
    --font-weight-black   : 900;

    --width-100           : calc(100% - 45px);
    --content-width-1     : 1226px;

    --color-black1        : #000000;
    --color-gray1         : #A6A6A6;
    --color-gray2         : #B0B0B0;
    --color-gray3         : #D8D8D8;
    --color-gray4         : #656565;
    --color-green1        : #A2B6AC;
    --color-blue1         : #AEBDC3;
    --color-white1        : #ffffff;

    --zindex-header       : 100;
    --zindex-gnavi        : 200;

    --header-height       : 180px;
}
@media (max-width: 1300px){
    :root {
        --header-height       : 73px;
    }    
}


/* =========================================================================================================================================== */
/* サイト共通デザイン　                                                                                                                             */
/* =========================================================================================================================================== */
* {
    box-sizing: border-box;
}


/* ------------------------------------------------------------- */
/* 切り替え                                                        */
/* ------------------------------------------------------------- */
.pc_only   { display: block;  }
.pc_none   { display: none;   }
.pc_inline { display: inline; }
.sp_only   { display: none;   }
.sp_none   { display: block; }
@media (max-width: 1023px) {
    .pc_only   { display: none;  }
    .pc_none   { display: block; }
    .pc_inline { display: none;  }
    .sp_only   { display: none;  }
    .sp_none   { display: block; }
}
@media (max-width: 767px) {
    .pc_only   { display: none;  }
    .pc_none   { display: block; }
    .pc_inline { display: none;  }
    .sp_only   { display: block; }
    .sp_none   { display: none;  }
}


/* ------------------------------------------------------------- */
/* 全体                                                           */
/* ------------------------------------------------------------- */
html {
    font-size: 62.5%;
}
body{
    position: relative;
    margin: 0;
    font-family: var(--webfont-yugothic);
    font-size: var(--font-size-normal);
    font-size: 1.6rem; 
    font-weight: var(--font-weight-regular);
    line-height: 1.75;
    background-color: var(--color-gray1);
    color: var(--color-lightgray6);
    overflow-x: hidden;
}


/* ------------------------------------------------------------- */
/* 装飾 */
/* ------------------------------------------------------------- */
@media all {
    .mb-10 { margin-bottom: 10px !important; }
    .mb-20 { margin-bottom: 20px !important; }
    .mb-30 { margin-bottom: 30px !important; }
    .mb-50 { margin-bottom: 50px !important; }
    .mb-80 { margin-bottom: 80px !important; }
    /* text-align */
    .ta-left   { text-align: left !important;   }
    .ta-center { text-align: center !important; }
    .ta-right  { text-align: right !important;  }
}
@media (max-width: 767px) {
/*
    .mb-10 { margin-bottom: 10px !important; }
    .mb-20 { margin-bottom: 15px !important; }
    .mb-30 { margin-bottom: 20px !important; }
    .mb-50 { margin-bottom: 34px !important; }
    .mb-80 { margin-bottom: 60px !important; }
*/
}


img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}


h2 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    line-height: 30px;
}


p {
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 30px;
    font-weight: var(--font-weight-bold);
}


/* ------------------------------------------------------------- */
/* ヘッダー                                                        */
/* ------------------------------------------------------------- */
@media all {
    header {
        position: absolute;
        width: 100%;
        height: var(--header-height);
    }
    .header-inner {
        padding: 23px 54px 23px 31px;
        display: flex;
        justify-content: space-between;
    }

    header .logo {
        height: 133.05px;
    }

    header .logo figure img {
        height: 100%;
        width: auto;
    }

    header .gmenu {
        padding-top: 21px;
    }
    header .gmenu ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    header .gmenu ul li {
        padding-left: 75px;
    }

    header .gmenu ul li a {
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.1em;
        color: var(--color-white1);
        text-decoration: none;
    }

    header .gmenu ul li a:hover {
        text-decoration: underline;
    }

    header .gmenu ul li.twitter {
        padding-left: 54px;
    }
}
@media (max-width: 1260px) {
    .header-inner {
        padding: 33px 68.4px 0 20px;
    }
    
    header .logo {
        width: 100%;
        max-width: 286px;
        height: auto;
    }
    
    header .logo figure img {
        width: 100%;
        height: auto;
    }

    header .gmenu {
        position: fixed;
        width: 100%;
        max-width: 155px;
        padding: 31px 10px 2px 10px;
        right: -155px;
        top: 0;
        background-color: var(--color-white1);
        transition: right 0.5s ease;
    }
    
    header .gmenu ul {
        display: block;
    }
    
    header .gmenu ul li a {
        color: var(--color-black1);
        font-size: 20px;
        line-height: 24px;
    }
    
    header .gmenu ul li {
        padding-left: 0;
        padding-bottom: 22px;
    }
    
    header .gmenu ul li.twitter {
        display: none;
    }
    
    header.menu_open .gmenu {
        right: 0;
    }
    
    header .gmenu_btn {
        position: fixed;
        width: 68px;
        height: 57px;
        top: 0;
        right: 0;
        padding: 15.5px 19px;
        cursor: pointer;
        z-index: 100;
    }
    
    header .gmenu_btn span {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--color-white1);
        top: 0;
        bottom: 0;
        margin: auto;
    }
    
    header .gmenu_btn div {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    header .gmenu_btn span::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--color-white1);
        top: -10px;
    }
    header .gmenu_btn span::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--color-white1);
        top: 10px;
    }

    header.menu_open .gmenu_btn span {
        height: 0;
    }
    header.menu_open .gmenu_btn span::before {
        background-color: var(--color-black1);
        transform: rotate(45deg);
        top: 0;
    }
    header.menu_open .gmenu_btn span::after {
        background-color: var(--color-black1);
        transform: rotate(-45deg);
        top: 0;
    }
}

/* ------------------------------------------------------------- */
/* フッター                                                        */
/* ------------------------------------------------------------- */
@media all {
    footer .logo {
        width: var(--widtn-100);
        max-width: 198px;
        margin: 0 auto;
        padding-bottom: 25px;
    }

    footer .info {
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.1em;
        line-height: 24px;
        color: var(--color-white1);
        padding-bottom: 27px;
    }

    footer .info a {
        text-decoration: none;
        color: var(--color-white1);
    }
    
    footer .copyright {
        font-size: 9px;
        line-height: 15px;
        letter-spacing: 0.1em;
        font-weight: var(--font-weight-bold);
        color: var(--color-white1);
        text-align: center;
        padding-bottom: 21px;
    }
}


/* ------------------------------------------------------------- */
/* トップページ                                                     */
/* ------------------------------------------------------------- */
#omoi {
    width: var(--width-100);
    max-width: var(--content-width-1);
    margin: 0 auto;
    color: var(--color-white1);
    padding-top: 34px;
    padding-bottom: 160px;
}


/* ------------------------------------------------------------- */
/* 下層ページ共通　                                                  */
/* ------------------------------------------------------------- */
@media all {
    .subpage main {
        padding-left: 42px;
        display: flex;
        justify-content: space-between;
    }
    .subpage main #content {
        padding-top: 382px;
        max-width: 483px;
        width: var(--width-100);
    }


    .subpage h1 {
        font-size: 60px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.1em;
        color: var(--color-white1);
        line-height: 76px;
        padding-bottom: 45px;
    }
    .subpage p {
        color: var(--color-white1);
        line-height: 24px;
    }
    .subpage p a {
        color: var(--color-white1);
        text-decoration: none;
    }
    .subpage p a:hover {
        text-decoration: underline;
    }


    .subpage main #keyvisual {
        padding-top: 147px;
        height: 100vh;
        /* overflow: hidden; */
        flex: 1 0 0%;
        max-width: 1199px;
    }
}
@media (max-width: 767px) {
    .subpage main {
        display: block;
        padding: 0;
    }
    .subpage main #keyvisual {
        display: none;
    }
    .subpage main #content {
        padding-top: 221px;
        max-width: none;
        margin: 0 auto;
    }
    
    .subpage h1 {
        font-size: 24px;
        line-height: 26px;
        padding-bottom: 53px;
    }
    .subpage p {
        font-size: 13px;
    }
}


/* ------------------------------------------------------------- */
/* 会社概要                                                        */
/* ------------------------------------------------------------- */
@media all {
    #company {
        background-color: var(--color-green1);
    }
    #company main #keyvisual figure {
        width: 100%;
        height: 100%;
    }
    #company main #keyvisual figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
    }
}


/* ------------------------------------------------------------- */
/* 事業概要                                                        */
/* ------------------------------------------------------------- */
@media all {
    #business {
        background-color: var(--color-blue1);
    }
    #business h2 {
        color: var(--color-white1);
    }
    #business main #keyvisual figure {
        display: flex;
        padding-top: 231px;
        padding-right: 89px;
        justify-content: space-between;
    }
    #business main #keyvisual figure img {
        width: calc((100% - 128px) / 3);
    }
}


/* ------------------------------------------------------------- */
/* お問い合わせ                                                     */
/* ------------------------------------------------------------- */
@media all {
    #contact {
        background-color: var(--color-gray2);
    }
    #contact main #content {
        max-width: 700px;
        padding-top: 305px;
    }
    
    #contact h1 {
        padding-bottom: 114px;
    }
    
    #contact p {
        font-size: 14px;
        padding-bottom: 58px;
    }
    
    #contact form .th {
        color: var(--color-white1);
        font-size: 14px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.1em;
        line-height: 15px;
        padding-bottom: 10px;
    }
    
    #contact form .td {
        width: 100%;
        padding-bottom: 30px;
    }
    
    #contact form .td input[type="text"] {
        width: 100%;
        height: 27px;
        line-height: 26px;
        border: none;
        border-bottom: solid 1px;
        color: var(--color-white1);
        background-color: transparent;
        font-size: 14px;
        letter-spacing: 0.1em;
        padding: 0;
    }
    
    #contact form .td input[type="text"]::placeholder {
        color: var(--color-gray3);
    }
    
    #contact form .td input[type="text"]:focus {
        outline: none;
    }
    
    #contact form .td label {
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.1em;
        color: var(--color-white1);
    }
    
    #contact form input[type="submit"] {
        display: block;
        width: 120px;
        height: 35px;
        -webkit-appearance: none;
        border-radius: 0;
        border: none;
        background-color: var(--color-gray4);
        color: var(--color-white1);
        font-size: 14px;
        letter-spacing: 0.1em;
        font-weight: var(--font-weight-bold);
    }


    #contact main #keyvisual figure {
        height: 100%;
    }
    #contact main #keyvisual {
        padding-right: 55px;
        padding-bottom: 48px;
        max-width: 928px;
        padding-left: 30px;
    }
    #contact main #keyvisual figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right bottom;
    }
}
@media (max-width: 767px) {
    #contact main #content {
        padding-top: 221px;
        max-width: none;
    }
    #contact h1 {
        padding-bottom: 53px;
    }
}