/* すべてのページに適用される設定 */

    html {
        /*　文字サイズ16px フォントをゴシック体に設定 */
        font-size: 16px;
        font-family: sans-serif;

        /* スムーズにスクロール */
        scroll-behavior: smooth;
    }

    * {
        box-sizing: border-box;
    }

    body {
        /* ページ全体の四隅のスペースをなくす */
        margin: 0 0 0 0;
    }

    main {
        padding: 0 2%;
    }

    p, li, td {
        /* p, li, td の行間の高さを1.7倍に設定 */
        line-height: 1.7;
    }

    img {
        /* すべての画像を幅に合わせて伸縮させる */
        max-width: 100%;
    }

    .link-saki {   /* ページ内リンクの位置を調整 */
        margin-top: -200px;
        padding-top: 200px;
    }
    


    /* リンク部分の文字色オレンジ、ホバー・クリック時のみ下線 */

    a:link {
        color: #F07D34;
        text-decoration: none;
    }
    a:visited {
        color: #F07D34;
        text-decoration: none;
    }
    a:hover {
        color: #F07D34;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
    }
    a:active {
        color: #F07D34;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
    }

/* すべてのページに適用 - ヘッダー */

    .header {
        /* divを横並びにして、.header-logoと.header-menuを等間隔に左右に配置 */
        display: flex;
        justify-content: space-between;

        /* ヘッダーを上部に固定 */
        position: fixed;
        width: 100%;
        height: 200px;
        top: 0;
        z-index: 999;

        background: #F3F0EA;
        padding: 10px 20px 10px 20px;
        color: #432f2f;

    }

    .header .header-menu a {
        text-decoration: none;
        color: #432f2f;
        padding: 0;
    }

    .header-menu p {   /* HPの説明文 */
        font-size: 15.5px;
        text-align: right;
        padding-top: 20px;
        margin-right: 20px;
    }

    .mobile-hp p {
        font-size: 15px;
        text-align: center;
        padding: 4px auto;
        
    }

    .nav-list, .mini-nav {
        gap: 10px 40px;
    }

    .header .header-menu a:hover {
        border-bottom: 2px solid #FD5A5F;
    }

    .nav ul {
        /* メニューボタンの・を非表示 横一列に配置 間隔を40pxに設定 */
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
    }

    .body-index .nav-index>a,
    .body-access .nav-access>a,
    .body-work .nav-work>a,
    .body-koukai .nav-koukai>a,
    .body-contact .nav-contact>a {
        border-bottom: 2px solid #FD5A5F;
    }

    /* ハンバーガーメニュー */
    .menu-btn {
        position: fixed;
        top: 15px;
        right: 20px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #725f54;
    }

    /* ハンバーガーアイコン下のテキスト */
    .menu-btn a {
        width:		36px;
        letter-spacing: -1px;
        font-size:	10px;
        padding-top: 40px;
        color:		#FFF;
        text-decoration: none;
        text-align: center;
        display:	block;
    }
    

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #fff;
        position: absolute;
    }
    
    .menu-btn span:before {
        bottom: 8px;
    }
    
    .menu-btn span:after {
        top: 8px;
    }
    
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0); /* メニューオープン時は真ん中の線を透明にする */
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* ボタンを押すとテキストが変わる */
    #menu-btn-check:checked ~ .menu-btn .menu-span {
        display: none;
    }
    #menu-btn-check ~ .menu-btn .close-span {
        display: none;
        top: 10px;
    }
    #menu-btn-check:checked ~ .menu-btn .close-span{
        display: block;
    }
    
    #menu-btn-check:checked ~ .menu-content {
        left: 0; /* メニューを画面内へ */
    }
    
    #menu-btn-check {
        display: none;
    }
    
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%; /* leftの値を変更してメニューを画面外へ */
        z-index: 80;
        background-color: #F3F0EA;
        transition: all 0.5s; /* アニメーション設定 */
    }
    .menu-content ul {
        padding: 70px 10px 0;
    }
    .menu-content ul li {
        border-bottom: solid 1px #6c3524;   /* チョコレート */
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        color: #6c3524;   /* チョコレート */
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }
    
    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #6c3524;   /* チョコレート */
        border-right: solid 2px #6c3524;   /* チョコレート */
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }

    @media (min-width: 768px) {
        .hamburger-menu {
            display: none; /* PCはハンバーガーメニューは非表示 */
        }
        .nav .mini-nav {
            display: none;
        }
        .mobile-hp p {
            display: none;  /* モバイル用HP説明文(PCでは非表示) */
        }
    }
    /* ハンバーガーメニューここまで */
    
    .air-header {
        position: relative;
        height: 200px;
    }


/* すべてのページに適用 - ヒーロー */

    

    .hero.index {
        /* 変更前　padding: 200px 0 320px 0; */
        padding: 240px 0 280px 0;
        background-image: url(../images/トップ画像\(仮\).jpg);

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        color: #fff;
        text-align: center;
        margin-top: 0;

        animation: fadeIn 3s ease 0s 1 normal;
        -webkit-animation: fadeIn 3s ease 0s 1 normal;
    }

    .hero.index p {
        /* じわっと画像が表示される */
        animation: fadeIn 1.5s ease 0s 1 normal;
        -webkit-animation: fadeIn 3s ease 3s 1 normal;

        /* 文字の縁取り */
        padding: 10px;
        color: #fff;
        font-weight: bold;
        font-size: 50px;
        text-shadow:
            3px 3px 3px #daa520, -3px -3px 3px #daa520,
           -3px 3px 3px #daa520,  3px -3px 3px #daa520;
        margin: 0;
    }

    /* じわっと画像が表示される */
    @keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
        0% {opacity: 0} /* 始め */
        100% {opacity: 1} /* 終わり */
    }
    
    /*古いブラウザ用*/
    @-webkit-keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
    }

    .sub-hero {
        padding: 120px 0 120px 0;
        background-image: url(../images/青いドア.jpg);

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        color: #fff;
        text-align: center;
        margin-top: 0;
    }

    
/* すべてのページに適用 - メイン */

    main {
        margin: 90px auto 90px auto;
        max-width: 1000px;
    }

    main h2 {
        /* <h2>の見出しの色・サイズ、マージン・ボーダー・パディングを設定 */
        margin: 60px 0 20px 0;
        border-bottom: 2px solid #253958;
        padding: 0 0 5px 0;
        color: #253958;
        font-size: 1.3rem;
    }

/* すべてのページに適用 - フッター */

/* トップへ戻るボタンの書式 */
footer .gotop {     
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 70;
}

footer .gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
footer .gotop:hover{
    opacity: 1;
}  
/* トップへ戻るボタンの書式ここまで */

    .copyright {
        margin-top: 20px;
        margin-bottom: 0;
        padding-top: 75px;
        padding-bottom: 30px;
        background-color: #F3F0EA;
        color: #432f2f;
        text-align: center;
    }

    .sns-btn {
        display: flex;
        margin-top: 0px;
        margin-bottom: 0;
        justify-content: center;
        background-color: #F3F0EA;
        padding-bottom: 60px;
        list-style: none;
    }

    .sns-btn , img {
        gap: 30px;
    }


/* 個別のスタイル */

/* index.html */

    .mobile-hp {
        margin: auto 4%;
    }

    .BASE {
        text-align: center;
        margin: 100px auto;
    }

    .banner {
        text-align: center;
    }

    .banner img {
        margin: 40px 30px;
    }

    .office-info {
        border-collapse: collapse;
    }

    .office-info th, .office-info td {
        border: 1px solid #DBDBDB;
        padding: 20px;
    }

    .form {
        text-align: center;
        margin-top: 40px;
    }

    .form iframe {
        display: inline-block;
    }

    /* access.html */

    


    /* work.html */

    .work-exp {
        padding-bottom: 40px;
    }

    .top-exp {
        background-color: #F3F0EA;
        color: #253958;
        text-align: center;
    }

    .kind {
        display: flex;  /* 横並び */
        justify-content: space-between;
    }

    .kind>p{
        width: 49%;
    }

    

        /* サブナビゲーションの設定 */
        .sub ul {
            margin: 30px 0 0 0;
            padding: 0;
            list-style-type: none;

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 40px;
        }
        .sub {
            margin: 50px 0;
        }
        .sub a:link {
            color: #253958;
            text-decoration: none;
        }
        .sub a:visited {
            color: #253958;
        }
        .sub a:hover {
            text-decoration: underline;
        }
        .sub a:active {
            text-decoration: none;
        }

        /* 小見出しの上に間隔を設定 */
        .works h2 {
            margin-top: 50px;
        }


    /* contact.html */

    .form {
        text-align: center;
    }

    /* koukai.html */

    section.score {
        border: 4px solid #F3F0EA;
        padding: 8px 24px 24px 24px;
        margin-bottom: 40px;
    }

    h3 {
        font-weight: normal;
        padding: 8px;
        border-left: 8px solid #725f54;
    }

    .score a:link {
        color: #432f2f;
        text-decoration: none;
    }
    .score a:visited {
        color: #432f2f;
        text-decoration: none;
    }
    .score a:hover {
        color: #432f2f;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
    }
    .score a:active {
        color: #432f2f;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
    }


    /* モバイル対応 */
    @media (max-width: 767.999px) {

        /* ヘッダー */
        .header-menu .nav {
            display: block;
            width: 120px;
        }

        .header-menu p {
            display: none;
        }

        .nav .nav-list {
            display: none;
        }
        .nav .mini-nav {
            margin-top: 90px;
            text-align: right;
            
            display: block;
        }
        .nav .mini-nav li {
            line-height: 2.5;
        }

        /* ヒーロー */
        
        main {
            padding: 0 4%;
        }

        /* index.html */

        

        /* access.html */

        .iframe_wrap{
            width:100%;
            height:auto;
            position:relative;
            padding-top:56.25%;
        }

        .iframe_wrap iframe{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
        }

        /* work.html */

        .kind {
            display: block;  
        }

        .kind>p{
            width: 100%;
        }

        /* contact.html */
        .form {
            width:100%;
            height:auto;
            position:relative;
            padding-top:56.25%;
        }

        .form iframe{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
        }


    }

    @media (max-width: 430px) {   /* スマホサイズ */

        /* ヘッダー */
        .header-logo img {
            width: 90%;
        }

        /* ヒーロー */
        .hero.index {
            margin-top: 0;
            padding: 10vh 0 10vh 0;

            background-repeat: repeat-y;
            /* background-size: 100%; */
            font-size: 1.2rem;
        }

        .hero.index p {
            font-size: 20px;
        }