/* 簡易リセットCSS */
* {
    margin: 0;
    padding: 0;
}

/*
 以下の3種類にCSSスタイルを指定できる。
 ・body, p, h1, h2 などタグ自体に指定できるもの。
 ・#about, #works など任意の文言に#をつけたもの。idと呼ばれる。
 ・.about, .works など任意の文言に.をつけたもの。classと呼ばれる。
*/

/* vw はブラウザの横幅に対する割合 1vw は横幅に対して10% */


/*
    以下はあまり気にせずそのままいつもコピペしてください。
    ブラウザごとの違いをリセットします。
*/
/*ページ内をスムーズにスクロールする*/
html {
    scroll-behavior: smooth;
}

body,
p,
h1,
h2,
h3,
h4,
ul,
a {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

/*メニューやメールのリンクを貼るさいの指定*/
a {
    text-decoration: none;
    color: #000000;
    /*色指定*/
}

/*メニューやに触ったさいの指定*/
a:hover {
    color: #fe0059;
    /*色指定*/
}

/*フォントの指定　自分の好きなフォントをgoogle web fontから選びましょう*/
.webfont {
    /* Google Webフォントのclass作成 */
    font-family: "Barlow Condensed", sans-serif;
    /*フォントの種類*/
    font-weight: 100;
    /*文字の太さ*/
    font-style: normal;
    /*フォントのスタイル。bold太字、italic斜体などがあります*/
    /* Google Webフォントのclass作成完了*/
}


/* H1 H2 H3 など見出し（タイトルなど）の指定。h1が一番大きい。h4くらいまでの指定が適度。*/
h1 {
    font-size: 12vw;
    /*フォントの大きさ*/
    line-height: 12vw;
    /*行間*/
    margin-top: -3vw;
    /*上方のマージン*/
    margin-left: 15vw;
    /*左方のマージン*/
}

h2 {
    font-size: 8vw;
    /*フォントの大きさ*/
    line-height: 8vw;
    /*行間*/
    margin-top: -1.5vw;
    /*上方のマージン*/
    margin-left: 10vw;
    /*左方のマージン*/
}

h3 {
    font-size: 4vw;
    /*フォントの大きさ*/
    line-height: 4vw;
    /*行間*/
    margin-top: 20vw;
    /*上方のマージン*/
    margin-left: 30vw;
    /*左方のマージン*/
}

/*メニューの指定*/
/*メニューの入れ物の指定*/
.globalMenu {
    margin-top: 6vw;
    /*上方マージン*/
    margin-left: 15vw;
    /*左方マージン*/
    margin-bottom: 6vw;
    /*下方マージン*/
}

/* UL LI メニューなど、情報が並ぶリストを作成する指定*/
/* UL リストの入れ物*/
.globalMenu ul {
    display: flex;
    /*内容を横並びにする指定*/
}

/* LI リスト*/
.globalMenu ul li {
    font-size: 3vw;
    /*文字の大きさ*/
    margin-right: 3vw;
    /*右方マージン*/
}

/*Key Visualの指定*/
/*key Visualの入れ物の指定*/
.kv {
    display: flex;
    /*内容を横並びにする指定*/
    flex-wrap: wrap;
}

/*Key Visualの画像の指定*/
.kv img {
    width: 50%;
    /*画像の横幅*/
}

/*aboutの指定*/
#about {
    margin-top: -50vw;
    /*上方マージン*/
}

.about {
    font-size: 2vw;
    /*文字の大きさ*/
    line-height: 3.2vw;
    /*行間*/
    margin-top: 1vw;
    /*上方のマージン*/
    margin-left: 30vw;
    /*左方のマージン*/
    letter-spacing: 0.1vw;
}



/*建物画像の指定*/
/*建物画像の入れ物のの指定*/
.build {
    margin-top: 8vw;
    /*上方マージン*/
    margin-left: 40vw;
    /*左方マージン*/
    margin-bottom: 40vw;
    /*下方マージン*/
}

/*建物１の指定*/
.build1 {
    width: 20vw;
    /*画像の横幅*/
    margin-left: 23vw;
    /*左方マージン*/
}

/*建物2の指定*/
.build2 {
    width: 22vw;
    /*画像の横幅*/
    margin-top: -20vw;
    /*上方マージン*/
    margin-left: 8vw;
    /*左方マージン*/
}

/*worksの指定*/

/*worksの入れ物の指定*/
.works {
    display: flex;
    /*内容を横並びにする*/
    flex-wrap: wrap;
    /*内容を横幅に合わせて改行する*/
    column-gap: 0;
    /*列のマージン*/
    row-gap: 0;
    /*行間のマージン*/
    width: 100%;
    /*幅*/
    margin-top: 2vw;
    /*上方マージン*/
}

.works a {
    margin: 0;
    /*全方位マージン*/
    width: 25%;
    /*画像の横幅*/
    line-height: 0;
}

.works a img {
    width: 100%;
}

/*ビデオ*/
.video-container-l {
    /*ビデオの入れ物*/
    text-align: right;
    margin-top: -10vw;
    margin-left: 25vw;

    display: flex;
    /*ビデオとキャプションを横並びに*/
    justify-content: flex-start;
    /*横並びを左側を基準に*/
    align-items: flex-start;
    /*横並びの上下揃えを上端に*/
}

.video-container-r {
    /*ビデオの入れ物*/
    margin-top: 10vw;
    margin-right: 25vw;

    display: flex;
    justify-content: flex-end;
    /*横並びを右側を基準に*/
    align-items: flex-start;
    /*横並びの上下揃えを上端に*/
}

video {
    width: 25%;
    border-color: #999999;
    border: solid;
    border: 0.1rem ridge rgba(0, 0, 0, 0.1);
    border-radius: 1vw;
    /*ビデオの横幅*/
}

/*CKONTACT*/
.contact {
    font-size: 2vw;
    line-height: 3vw;
    margin-top: 2vw;
    margin-left: 30vw;
}

.icon-mail {
    width: 2vw;
    margin-right: 1vw;
}

/*FOOTER*/
footer {
    width: 100%;
    height: 30vw;
    background-color: #eeeeee;
    margin: 0;
}

footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10vw;
    width: auto;
    height: 30vw;
}

.icon-x {
    width: 4vw;
    margin-right: 1vw;
}

.icon-instagram {
    width: 4vw;
    margin-right: 1vw;
}

a.icon:hover {
    opacity: 0.3;
}