@charset "utf-8";

/*
html5doctor.com Reset style sheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
    list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


/* ---------- ここから ---------- */

body {
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
html {
    font-size: 62.5%;
}
html { 
    scroll-behavior: smooth;
    color: #111111;
}
a {
    color: #B8A14A;
    transition: all .5s;
}
a:hover {
    opacity: 0.6;
}
img {
    max-width: 100%;
    height: auto;
}
h2 {
    font-size: 3rem;
    letter-spacing: .4em;
    color: #B8A14A;
    display: inline-block;
    border-bottom: 1px solid #B8A14A;
    padding-bottom: 30px;
    text-align: center;
}

/* ---------- ファーストビュー ---------- */

.main_kv {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#home {
    background-image: url(../imgs/img/kv2.webp);
    min-height: 120vh;
}

.header .logo img {
    width: 100%;
    max-width: 380px;
    height: auto;
    padding: 10px;
}

.header {
    height: 100px;
    display: flex;
    justify-content: space-between;
    padding: 0 2%;
    
}

.header .g_navi {
    margin: 28px 0;
}

.header .g_navi ul {
    display: flex;
}

.header .g_navi a{
    font-size: 1.8rem;
    font-weight: bold;
    color: #111111;
    padding: 10px;
    display: block;
    letter-spacing: .4em;
    margin: 10px;
}

.header .g_navi a:hover {
    color: #B8A14A;
}

.hmbbtn {
    position: fixed;
    top: 40px;
    right: 20px;
}

/* ---------- ハンバーガーメニュー ---------- */

.header button {
	border:none;
	background: none;
    outline: none;
}

.header .js-offcanvas {
    text-align: center;
    padding-top: 50px;
}

.header .js-offcanvas a {
    display: block;
    font-size: 1.6rem;
	padding: 20px 20px;
	text-decoration: none;
	color: #111111;
    letter-spacing: .08em;
}

.header .js-offcanvas a:hover {
	color: #B8A14A;
	opacity: 0.7;
}


/* ---------- 事業内容 ---------- */

.services {
    padding: 100px 0;
    text-align: center;
    background-image: url(../imgs/bkgr/white_00113.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.services-box {
    padding-top: 60px;
    max-width: 1250px;
    display: flex;
    justify-content: space-around;
    margin: auto;
}

.services-contents {
    width: 95%;
    margin: 0 auto;
    padding: 15px;
}
.services-contents img {
    max-width: 100px;
}

.services-contents h3 {
    margin-top: 25px;
    color: #2F6698;
    font-size: 2.4rem;
    letter-spacing: .4em;
    font-weight: normal;
}

.services-contents p {
    margin-top: 40px;
    font-size: 1.6rem;
    line-height: 1.4em;
}

/* ---------- 施工実績 ---------- */

.works {
    padding: 100px 0;
    text-align: center;
}

/* ---------- スワイパー ---------- */

.swiper-container {
    margin-top: 60px;
    padding-bottom: 100px;
    /* width: 735px;
    height: 490px; */
}

.swiper-slide {
    text-align: center;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
} 

.swiper-wrapper {
    position:relative;
}

.swiper-title {
    position:absolute;
    font-size: 1.6rem;
    bottom: -10%;
}

/* ---------- 会社理念 ---------- */

.identity {
    padding: 100px 0;
    text-align: center;
}
.identity-box {
    margin: 0 auto;
}

.identity ul {
    padding-top: 60px;
    line-height: 2em;
}

.identity li {
    font-size: 2.2rem;
    letter-spacing: .4em;
    line-height: 2em;
}

.identity p {
    font-size: 1.6rem;
    letter-spacing: .4em;
    line-height: 2em;
}

/* ---------- 会社概要 ---------- */

.company {
    padding: 0 0 100px 0;
    text-align: center;
}

.company-box {
    padding-top: 60px;
    max-width: 850px;
    margin: 0 auto;
}

.company-box ul {
    line-height: 2em;
    font-size: 1.6rem;
    text-align: left;
    letter-spacing: .4em;
    display: inline-block;
    border-bottom: 1px solid #DFDFDF;
    padding: 20px 20px;
    display: flex;
}

.company li {
    width: 90px;
    margin-right: 55px;
    text-align: justify;
    text-align-last: justify;
}

.bkgr {
    background-image: url(../imgs/bkgr/white_00113.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/* ---------- アクセス ---------- */

.access {
    padding: 100px 0;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.access-box {
    padding-top: 60px;
}

.access-box iframe {
    max-width: 1400px;
    width: 100%;
}

/* ---------- フッター ---------- */

.footer-box {
    padding: 100px 0 50px 0;
    background-image: url(../imgs/img/footer.jpg);
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.footer-box h3 {
    color: #DFDFDF;
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: .4em;
    line-height: 2em;
}

.footer-box p {
    color: #DFDFDF;
    font-size: 1.6rem;
    letter-spacing: .4em;
    line-height: 2em;
}

.footer-box a {
    color: #DFDFDF;
    border-bottom: solid 1px #DFDFDF;
}

.footer-box .f_navi ul {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
    padding: 80px 0;
}

.footer-box .f_navi a {
    color: #B8A14A;
    padding: 20px;
    letter-spacing: .4em;
    font-weight: bold;
    border-bottom: none;
}

.footer-box .copy p {
    font-size: small;
}


/* ----------  ヘッダー ハンバーガーメニュー メディアクエリ 768 ----------*/
@media (min-width: 1200px) {
    .header button {
        display: none;
    }
    .m-only {
        display: none;
    }
    .sp-only {display: none;
    }
}


/* ---------- タブレット メディアクエリ 768〜999 ---------- */
@media (min-width: 768px) and (max-width: 1200px) {
    #home {
        min-height: 90vh;
    }
    .g_navi {
        display: none;
    }
    .header {
        position:relative;
    }
    .js-hiraku-offcanvas-btn {
        position: absolute;
        right: 5%;
        top: 50%;
    }
    .services-box {
        width: 90%;
    }
    .services-contents p {
        font-size: 1.4rem;
    }
    .identity-box {
        width: 90%;
    }
    .company-box {
        width: 90%;
    }
    .m-only {
        display: none;
    }
}

/* ---------- モバイル メディアクエリ 〜767 ---------- */
@media (max-width: 767px) {
    #home {
        min-height: 80vh;
    }
    .header .logo img {
        width: 80%;
        max-width: 380px;
        height: auto;
        padding: 10px;
    }
    .g_navi {
        display: none;
    }
    .header {
        position:relative;
    }
    .js-hiraku-offcanvas-btn {
        position: absolute;
        right: 5%;
        top: 38%;
    }
    .services-box {
        width: 90%;
    }
    .swiper-container {
        padding-bottom: 80px;
    }
    .swiper-title {
        font-size: 1.2rem;
    }
    .identity-box {
        width: 90%;
    }
    .identity li {
        letter-spacing: .1em;
    }
    .identity p {
        letter-spacing: .1em;
        text-align: left;
    }
    .pc-only {
        display: none;
    }
    .company-box {
        width: 90%;
        padding-top: 50px;
    }
    .company-box ul {
        letter-spacing: .1em;
        display: block;
    }
    .services-box {
        display: block;
    }
    .services-contents {
        padding: 30px 0;
    }
    .footer-box .f_navi ul {
        display: block;
    }
    .footer-box .f_navi li {
        padding: 15px;
    }
    .access-box iframe {
        height: 400px;
    }
    .footer-box h3 {
        font-size: 1.8rem;
    }
    .footer-box p {
        font-size: 1.2rem;
    }
    .footer-box .f_navi ul {
        font-size: 1.6rem;
    }
    .footer-box .copy p {
        font-size: 1.2rem;
    }
}