@charset "UTF-8";

/*-----------------------------------------
  共有初期設定  
-----------------------------------------*/
html {
    -webkit-text-size-adjust: 100%;
    /*		iphoneの文字設定の不具合等の対処*/
    overflow: auto;
}

body {
    font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /*   ここまでフォントファミリー  各OSに適したフォントを用意しておく（WinとMacの日本語対応）*/
    overflow: hidden;

    color: #555;
    letter-spacing: 0.08em;
    line-height: 1.8;
    /*ページ全体の文字色、文字間隔、行間の基本設定  */

}

li {
    list-style-type: none;
    /*   liとの装飾を削除する  */
}

a {
    text-decoration: none;
    /*   aタグの初期設定。aタグはでデフォルトで文字色と下線を持っている消 */
}

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

}

/*   imgタグを直の親要素の幅内で100%と、高さをautoに設定  ただし、親要素より画像が小の場合、原寸の大きさで表示される*/
/*   imgタグの初期設定と画像の下部の余白を消す  */
/*   画像の下部の余白を消す方法として、vertical-align:bottom これ以外にdisplay: block;もある  */
/*  共有設定  */


/*------------------------------------------
  外部下部余白共有設定  
--------------------------------------------*/

.mbt_10 {
    margin-bottom: 10px;
}

.mbt_15 {
    margin-bottom: 15px;
}

.mbt_20 {
    margin-bottom: 20px;
}

.mbt_25 {
    margin-bottom: 20px;
}

.mbt_30 {
    margin-bottom: 30px;
}

.mbt_40 {
    margin-bottom: 40px;
}

.mbt_50 {
    margin-bottom: 50px;
}

.mbt_70 {
    margin-bottom: 70px;
}

.mbt_80 {
    margin-bottom: 80px;
}

.mbt_90 {
    margin-bottom: 90px;
}

.mbt_280 {
    margin-bottom: 280px;
}


.mtp_20 {
    margin-top: 20px;
}

.mtp_40 {
    margin-top: 40px;
}

.mtp_100 {
    margin-top: 100px;
}

.mtp_120 {
    margin-top: 120px;
}

.mtp_140 {
    margin-top: 140px;
}

.mtp_160 {
    margin-top: 160px;
}

.mtp_180 {
    margin-top: 180px;
}

.bg_gray {
    background-color: #eee;
}


/*---------------------------------
見出しデザイン共有設定 
----------------------------------*/

h2 {
    font-family: 'Cormorant Garamond';
    font-weight: 400;
    font-size: 48px;
    line-height: 26px;
    letter-spacing: -0.02em;
    color: #000;
    text-align: center;
}

h3 {
    font-family: 'Cormorant Garamond';
    font-weight: 400;
    font-size: 59px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #000;
}

.h302 {
    padding-left: 90px;
    font-family: 'Cormorant Garamond';
    font-weight: 400;
    font-size: 38px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #000;
    text-align: right;
}


.eng {
    font-family: 'Cormorant Garamond';
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
    color: #000;
    text-align: center;
}


.eng_nav {
    font-family: 'Cormorant Garamond';
    font-weight: 300;
    font-size: 23px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #fff;
    text-align: center;
}


@media screen and (max-width:768px) {
    .eng_nav {
        font-family: 'Cormorant Garamond';
        font-weight: 300;
        font-size: 20px;
        line-height: 19px;
        letter-spacing: -0.02em;
        color: #fff;
        text-align: center;
    }
}

.catch {
    position: absolute;
    left: -5%;
    bottom: -8%;
}

.catchcopy {
    font-family: 'Cormorant Garamond';
    font-weight: 500;
    font-size: 21px;
    line-height: 15px;
    letter-spacing: 0.02em;
    color: #000;
}

@media screen and (max-width:768px) {
    .catchcopy {
        font-family: 'Cormorant Garamond';
        font-weight: 500;
        font-size: 17px;
        line-height: 15px;
        letter-spacing: 0.02em;
        color: #000;
    }

}


.concept_e {
    width: 600px;
    font-family: 'Cormorant Garamond';
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #000;
    text-align: center;
}

.concept_jp {
    width: 600px;

    font-family: 'Noto Serif JP';
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #000;
    text-align: center;
}



.notojp_midashi {
    font-family: 'Noto Serif JP';
    font-weight: 400;
    font-size: 15px;
    line-height: 10px;
    letter-spacing: 0.01em;
    color: #000;
    text-align: center;
}

.notojp_midashi_w {
    font-family: 'Noto Serif JP';
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.02em;
    /*    padding-left: 20px;
    */
    color: #fff;
    text-align: center;
}


@media screen and (max-width:768px) {
    .notojp_midashi_w {
        font-family: 'Noto Serif JP';
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0.02em;
        color: #fff;
        text-align: center;
    }
}


.notojp_center {
    font-family: 'Noto Serif JP';
    font-weight: 300;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0.01em;
    color: #000;
    text-align: center;
}

.notojp_left {
    font-family: 'Noto Serif JP';
    font-weight: 300;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0.01em;
    color: #000;
    text-align: left;
}

.illust {
    padding: 0 auto;
    text-align: center;
}


@media screen and (max-width:768px) {
    .concept_e {
        font-family: 'Cormorant Garamond';
        font-weight: 400;
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.01em;
        color: #000;
        text-align: center;
    }

    .concept_jp {
        font-family: 'Noto Serif JP';
        font-weight: 300;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.01em;
        color: #000;
        text-align: center;
    }
}




/*-----------------------------------------
    pc max- setting   
-----------------------------------------*/

.inner {
    max-width: 1080px;
    margin: 0 auto;
}

/*PCの情報コンテンツの最大幅の設定*/

/*-----------------------------------------
    header setting
------------------------------------------*/

.header_wrapper {
    position: relative;
    display: flex;
}

.header {
    position: relative;
    display: flex;
    height: 100px;
    margin: 0 auto;
}

.logo h1 {
    /*    position: absolute;*/
    position: relative;
    padding: 0;
    margin-top: -205px;
    z-index: 100;
    text-align: center;
}

.globalnav {
    display: none;
}



@media screen and (max-width:768px) {
    .logo h1 {
        /*        position: absolute;*/
        padding: 0;
        margin-top: -127px;
        z-index: 30;
        text-align: center;
    }

    .catchcopy {
        font-family: 'Cormorant Garamond';
        font-weight: 500;
        font-size: 21px;
        line-height: 15px;
        letter-spacing: 0.02em;
        color: #000;
    }

}



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

.global-nav {
    position: fixed;
    right: -52vw;
    /* これで隠れる */
    top: 0;
    width: 50vw;
    /* スマホに収まるくらい */
    height: 100vh;
    padding-top: 40px;
    background-color: #000;
    transition: all .3s;
    z-index: 200;
    overflow-y: auto;
    /* メニューが多くなったらスクロールできるように */
}

.hamburger {
    position: fixed;
    right: 1%;
    top: 3%;
    width: 80px;
    /* クリックしやすいようにちゃんと幅を指定する */
    height: 40px;
    /* クリックしやすいようにちゃんと高さを指定する */
    cursor: pointer;
    z-index: 300;
}

.global-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-nav__item {
    text-align: center;
    padding: 0 2px;
}

.global-nav__item a {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid #444;
    text-decoration: none;
    color: #fff;
}

.global-nav__item a:hover {
    background-color: #232323;
}

.hamburger__line {
    position: absolute;
    left: 0px;
    width: 40px;
    height: 3px;
    background-color: #000;
    transition: all .2s;
}

.hamburger__line--1 {
    top: 12px;
}

.hamburger__line--2 {
    top: 24px;
}

.hamburger__line--3 {
    top: 36px;
}

.black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0.1;
    visibility: hidden;
    transition: all .3s;
    cursor: pointer;
}

/* 表示された時用のCSS */
.nav-open .global-nav {
    right: 0;
}

.nav-open .black-bg {
    opacity: .4;
    visibility: visible;
}

.nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    background-color: #fff;
    top: 20px;
}

.nav-open .hamburger__line--2 {
    width: 0;
    background-color: #fff;
    left: 50%;
}

.nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    background-color: #fff;
    top: 20px;
}


/*-----------------------------------------
    main_image setting
------------------------------------------*/

.hero_01 {
    position: relative;
    margin: 0 auto;
    width: 85%;
    height: 400px;
    /*
    width: 90vh;
    height: 60vh;
*/
    background-image: url(../img/hero_01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background: transparent;


}



.hero_02 {
    /*    position: relative;*/
    margin: 0 auto;
    width: 100%;
    height: 500px;
    background-color: #fff;
    background-image: url(../img/hero_02.jpg);
    background-size: cover;
    background: transparent;
}


.hero_03 {
    /*    position: relative;*/
    margin: 0 auto;
    width: 100%;
    height: 500px;
    background-color: #fff;
    background-image: url(../img/hero_03.jpg);
    /*    background-size: cover;*/
    background: transparent;

}


.map {
    /*    position: relative;*/
    margin: 0 auto;
    width: 100%;
    height: 450px;
    background-color: #fff;
    background-image: url(../img/map.gif);
    background-size: cover;
}





@media screen and (min-width:768px) {}




/*-----------------------------------------
    wrapper setting
------------------------------------------*/

.wrapper {
    padding: 20px;
}


@media screen and (min-width:960px) {
    .wrapper {
        padding: 0;
    }
}






/*-----------------------------------------
    wrapper setting
------------------------------------------*/

.wrapper {
    padding: 20px;
}


@media screen and (min-width:980px) {
    .wrapper {
        padding: 0;
    }
}


/*-----------------------------------------
    2column setting
------------------------------------------*/
/*
.photomenu {
    position: relative;
    margin: 0 0 0 auto;
    width: 782px;
    height: 400px;
    background-color: #fff;
    background-image: url(../img/menu_a.jpg);
    background-size: cover;
}*/


.wrap_all_01 {
    width: 100%;
    background-image: url(../img/menu_a.jpg);
    background-size: 750px;
    background-repeat: no-repeat;
    background-position: right top;
}

.wrap_all_02 {
    width: 100%;
    background-image: url(../img/menu_b.jpg);
    background-size: 750px;
    background-repeat: no-repeat;
    background-position: left top;
}

.wrap_all_03 {
    width: 100%;
    background-image: url(../img/menu_c.jpg);
    background-size: 750px;
    background-repeat: no-repeat;
    background-position: right top;
}


.column_photo_block {
    position: relative;
}



.stamp {
    display: none;
}


.column_text_block_a {
    display: block;
    padding-top: 220px;
    color: #000;
    text-align: left;
}

.column_text_block_b {
    display: block;
    padding-top: 170px;
    color: #000;
    text-align: right;
}



.column_text_block a::before {
    font-weight: normal;
    /*    fontawesom 疑似要素の1設定の方法*/
    padding-right: 5px;
    color: #000;

}

@media screen and (min-width:768px) {


    .stamp {
        display: block;
        position: absolute;
        right: 10%;
        /*        right: 200px;*/
        top: 360px;
        width: 238px;
        height: 150px;

        /*        display: block;*/
    }

    .column {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* 子要素、水平方向の揃えの親要素設定  */
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        /*  水平方向の揃えのオプション 両端揃え*/
    }


    .column_photo_block {
        width: 782px;
    }

    .column_text_block_a {
        padding-top: 190px;
        padding-left: 30px;
        width: 550px;
    }

    .column_text_block_b {
        padding-top: 140px;
        padding-right: 30px;
        width: 550px;
    }


    .column:nth-child(2n+1) {
        /*	.column:nth-child(2n+1) .column_photo_block {*/
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }


}






/*------------------------
    map setting
------------------------*/


.undermap_all {
    background-color: #eee;
}


.undermap_txt ul li {
    padding-left: 30px;
    color: #000;
    font-family: 'Cormorant Garamond';
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.01em;
    text-align: left;
}

.undermap_txt span {
    color: #000;
    font-family: 'Cormorant Garamond';
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-align: left;
}


@media screen and (min-width:786px) {

    .undermap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* 子要素、水平方向の揃えの親要素設定  */
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        /*  水平方向の揃えのオプション */
        height: 150px;
        /* 高さ指定 */
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        /* heightの垂直中央揃えのオプション  */
    }

    .undermap_txt {
        width: 80%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .undermap_txt ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .undermap_txt li {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

}




/*------------------------
    footer setting
------------------------*/

.footer {
    background-color: #000;
    height: 15vh;
    text-align: center;

}


.inner_footer p {
    color: #fff;
    font-family: 'Cormorant Garamond';
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-align: center;
}