@charset "UTF-8";

/*
Theme Name: SmartLP V2
Theme URI: https://lastonemile.jp/
Author: Last One Mile / kuboichikara
Author URI: https://lastonemile.jp/
Description: SmartLP V2
Requires at least: 
Tested up to: 
Requires PHP: 
Version: 0.1
License: 
License URI: 
Text Domain: 
Tags: 
*/

@import url("./dist/bundle.css");

:root {

    /* サイトのメインカラー */
    --primary-color: #63c1de;

    /* テキストカラー */
    --basic-text-color: #333333;
    --link-text-color: var(--primary-color);
    --hover-text-color: var(--primary-color);

    --basic-border-color: #e6e6e6; /* ボーダーのカラー #e6e6e6 */

    /* マテリアルコンポーネント関連（グローバルナビ、サブナビの文字色） */
    --mdc-theme-primary: #333333;

    /* メインビジュアル */
    --mv-filter: saturate(80%) brightness(80%); /* フィルタ 60%〜80%くらい */
    --catch-color: #ffffff; /* キャッチコピー */

    /* フロントページ */
    --concept-color: #ffffff; /* コンセプト テキストカラー */
    --concept-bgcolor: var(--primary-color); /* コンセプト 背景色 */

    /* フッター */
    --footer-color: #ffffff; /* フッター 文字色 */
    --footer-bgcolor: #63c1de; /* フッター 背景色 */

}



body:not(.page-id-58) .grecaptcha-badge {
  display: none !important;
}





/*   共通のタイトル   */


.main_title {
    
    & span {
        display: block;
        text-align: center;
    }
    
    .j {
        font-size: 30px;
    }
    
    .e {
        color: var(--primary-color);
        font-size: 14px;
        font-weight: 400;
        margin-top: -5px;
    }
    
}


.page-header {
    background: var(--primary-color);
}

.page-title {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    
    color: #ffffff;
    
    
    & span {
        display: block;
    }
    
    .e {
        font-size: 14px;
        font-weight: 400;
    }
    
    .j {
        font-size: 33px;
        font-weight: 700;
        margin-top: -10px;
    }
}


/*   フロントページ   */


.front-greeting {
    
    padding: 45px 20px;
    
    @media screen and (min-width: 768px) {
        padding: 60px 30px;
    }
    
    .text {
        
        margin-top: 30px;
        
        @media screen and (min-width: 768px) {
            text-align: center;
            margin-top: 45px;
        }
    }
}

.front-menu {
    
    padding: 45px 15px;
    
    @media screen and (min-width: 768px) {
        padding: 60px 20px;
    }
    
    .items {
        
        list-style: none;
        padding: 0 20px;
        margin: 0;
        
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        
        @media screen and (min-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px 50px;
            max-width: 820px;
            margin: 0 auto;
        }
        
        & li {
            & a {
                color: #ffffff;
                display: block;
                background: var(--primary-color);
                text-align: center;
                border-radius: 9999px;
                
                position: relative;
                
                padding: 24px 20px;
                
                font-size: 18px;
                font-weight: 700;
            }
            
            & a::after {
              content: '→';
              display: flex;
              align-items: center;
              font-size: 1.2em;
              position: absolute;
              right: 30px;
              top: 50%;
              transform: translateY(-50%);
              vertical-align: middle;
              transition: transform 0.2s ease;
            }
            
            & a:hover::after {
              transform: translateY(-50%) translateX(4px);
              transition: transform 0.2s ease;
            }
            
        }
    }
    
}



/*   事業所概要ページ   */

.about-table {
    
    max-width: 720px;
    margin: 0 auto;
    padding: 45px 15px;
    
    @media screen and (min-width: 768px) {
        padding: 80px 20px;
    }
    
    & table {
        
        width: 100%;
        border-collapse: collapse;
        
        & th {
            border-top: solid 1px var(--basic-border-color);
            border-bottom: solid 1px var(--basic-border-color);
            width: 25%;
            padding: 15px 15px;
            
            @media screen and (min-width: 768px) {
                padding: 20px 30px;
            }
        }
        
        & td {
            border-top: solid 1px var(--basic-border-color);
            border-bottom: solid 1px var(--basic-border-color);
            padding: 15px 15px;
            
            @media screen and (min-width: 768px) {
                padding: 20px 30px;
            }
        } 
        
    }
}

.about-logodesign {
    
    background: #f8f8f8;
    padding: 45px 20px;
    
    @media screen and (min-width: 768px) {
        padding: 60px 30px;
    }
    
    .stack {
        
        max-width: 900px;
        margin: 30px auto 0 auto;
        
        @media screen and (min-width: 768px) {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 45px;
            
            margin: 45px auto 0 auto;
        }
        
        .image {
            max-width: 300px;
            margin: 0 auto;
        }
        
        .text {
            margin-top: 30px;
            @media screen and (min-width: 768px) {
                margin-top: 0;
            }
        }
    }
    
}

.about-profile {
    
    padding: 45px 20px;
    
    @media screen and (min-width: 768px) {
        padding: 60px 30px;
    }
    
    .stack {
        
        max-width: 900px;
        margin: 30px auto 0 auto;
        
        @media screen and (min-width: 768px) {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 45px;
            
            margin: 45px auto 0 auto;
        }
        
        .image {
            max-width: 300px;
            margin: 0 auto;
        }
        
        .text {
            margin-top: 30px;
            @media screen and (min-width: 768px) {
                margin-top: 0;
            }
            
            & span {
                font-size: 20px;
                font-weight: 500;
            }
        }
    }
    
    
    .stack_02 {
        
        max-width: 900px;
        margin: 30px auto 0 auto;
        
        @media screen and (min-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 45px;
            
            margin: 45px auto 0 auto;
        }
        
        .title {
            font-size: 22px;
            padding-bottom: 12px;
            border-bottom: solid 1px var(--basic-border-color);
        }
        
        .keireki_table {
            & table {
                
                & th {
                    font-weight: 400;
                    padding-right: 10px;
                }
              
            }
        }
        
    }
    
}


/*   取扱い業務   */

.services {
    
    .stack_01 {
        
        padding: 45px 20px 30px 20px;
        max-width: 720px;
        margin: 0 auto;
        
        @media screen and (min-width: 768px) {
            padding: 60px 30px 30px 30px;
        }
        
        .title {
            
            text-align: center;
            margin-bottom: 40px;
            
            & h2 {
                font-size: 30px;
                padding-bottom: 0;
                margin-bottom: 10px;
            }
            .title-underline {
                display: block;
                margin: 0 auto;
                padding-top: 0;
            }
        }
        
        .image {
            margin-bottom: 45px;
        }
    }
    
    .stack_02 {
        
        background: #f8f8f8;
        
        .lists {
            
            .list {
                background: #fff;
                padding: 15px 30px 20px 30px;
                
                .sub_title {
                    position: relative;
                    padding-left: 20px;
                }
                .sub_title::before {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 0.6em;
                  width: 10px;
                  height: 10px;
                  background-color: var(--primary-color);
                  border-radius: 50%;
                }
            }
        }
        
        .lists_a {
            
            max-width: 340px;
            margin: 0 auto;
            
            padding: 30px 20px 30px 20px;
            
            @media screen and (min-width: 768px) {
                max-width: 720px;
                padding: 45px 30px 45px 30px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
        }
        
        .lists_b {
            max-width: 340px;
            margin: 0 auto;
            
            padding: 30px 20px 30px 20px;
        }
    }
}


/*   ご依頼の流れ   */


.flow {
    
    max-width: 720px;
    margin: 0 auto;
    padding: 45px 15px;
    
    @media screen and (min-width: 768px) {
        padding: 80px 20px 40px 20px;
    }
    
    .items {
        margin-top: 45px;
    }
    
    .item {
        border-left: solid 1px var(--primary-color);
        margin: 0;
        
        .title {
            margin: 0;
            padding: 0 0 12px 0;
            
            display: flex;
            justify-content: flex-start;
            align-items: center;
            
            position: relative;
            top: -3px;
            
            & span {
                font-size: 14px;
                display: block;
                width: 26px;
                height: 26px;
                color: #ffffff;
                background-color: var(--primary-color);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: -13px;
                margin-right: 15px;
            }
        }
        
        & p {
            margin: 0;
            padding: 0 20px 30px 30px;
        }
    }
    
}



/*   問い合わせフォーム   */

.contact {
    
    background: #f8f8f8;
    
    .required {
        color: red;
    }
    
    .inner {
        
        max-width: 720px;
        margin: 0 auto;
        padding: 45px 15px;
        
        @media screen and (min-width: 768px) {
            padding: 45px 20px 80px 20px;
        }
        
        .text {
            margin-top: 45px;
        }
        
        .contact-form {
            
            font-size: 14px;
            
            margin-top: 30px;
            margin-bottom: 30px;
            
            .form-row {
                
              padding: 12px 0;
              
              @media screen and (min-width: 768px) {
                display: flex;
                align-items: center;
                border-top: solid 1px var(--basic-border-color);
                padding: 16px 0;
              }
              
            }
            
            .form-row.last {
                
              @media screen and (min-width: 768px) {
                border-bottom: solid 1px var(--basic-border-color);
              }
              
            }
            
            .form-label {
              width: 240px;
              font-weight: bold;
              @media screen and (max-width: 767px) {
                margin-bottom: 10px;
              }
            }
            
            .form-field {
              flex: 1;
              min-width: 0;
            }
            
            
            .form-field input[type="text"],
            .form-field input[type="email"],
            .form-field input[type="tel"],
            .form-field input[type="url"],
            .form-field textarea {
              width: 100%;
              padding: 0.5em;
              border: 1px solid #ccc;
              border-radius: 4px;
              font-size: 1rem;
              box-sizing: border-box;
            }
            
            
            /* 共通スタイルの抽出：チェックボックスのラッパー */
            .form-field.checkboxes,
            .wpcf7-acceptance .wpcf7-form-control {
              display: flex;
              flex-wrap: wrap;
              gap: 0.5em 1em; /* 上下・左右の間隔 */
            }
            
            /* 各項目（リストアイテム） */
            .form-field.checkboxes .wpcf7-list-item,
            .wpcf7-acceptance .wpcf7-list-item {
              display: inline-flex;
              align-items: center;
              gap: 0.3em;
              font-size: 1rem;
              line-height: 1.5;
            }
            
            /* チェックボックス本体 */
            .form-field.checkboxes input[type="checkbox"],
            .wpcf7-acceptance input[type="checkbox"] {
              width: 16px;
              height: 16px;
              accent-color: var(--primary-color);
              cursor: pointer;
            }
            
            /* ラベルのテキスト */
            .form-field.checkboxes .wpcf7-list-item-label,
            .wpcf7-acceptance .wpcf7-list-item-label {
              cursor: pointer;
            }

            
            .wpcf7-list-item {
                margin: 0 20px 0 0;
                padding: 5px 0;
            }
            
            .form-field.full {
                
            }
            
            input.wpcf7-submit {
            display: block;
              padding: 1em 5em;
              font-size: 1rem;
              border: none;
              background-color: var(--primary-color);
              color: white;
              border-radius: 4px;
              cursor: pointer;
              margin: 30px auto 20px auto;
            }
            
            input.wpcf7-submit:hover {
              background-color: var(--primary-color);
            }


            
        }
    }
    
}


/*   プライバシーポリシー   */


.privacy_policy {
    
    max-width: 720px;
    margin: 0 auto;
    padding: 45px 15px;
    
    @media screen and (min-width: 768px) {
        padding: 80px 20px;
    }
    
    .text_01 {
        margin: 45px 0;
    }
    
    .text_02 {
        & h2 {
            font-size: 14px;
            margin-top: 34px;
        }
    }
}