@charset "utf-8";
/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}

/* /_/ 全デバイス共通とスマートフォン向け /_/ */

body{
    width: 100%;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color: #fff;
    color: #7e5329;
}

/* Links */
a:link {
	color: #bb0303;
	text-decoration: none;
}

a:visited {
	color: #8d2346;
	}

a:hover, a:active {
	color: #ff8989;
}

/* コンテナ */


/* ヘッダー */
#header {
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 1em;
    margin-top: 20px;
    display: flex;
}
.title {
    flex-grow: 3;
}
.title img {
    width: 100%;
    max-width: 265px;
}
.s_nav01 {
    flex-grow: 1;
}
.s_nav02 {
    flex-grow: 1;
}


/* グローバルナビゲーション */
#globalnav {
    width: 100%;
    margin-top: 40px;
    margin-left: 5%;
    text-align: center;
    font-size: 0.9em;
    display: flex;
    flex-wrap: wrap;
}
.gnav01 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #e9e9e9;
}
.gnav02 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #fbfbfb;
}
.gnav03 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #e9e9e9;
}
.gnav04 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #fbfbfb;
}
.gnav05 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #e9e9e9;
}
.gnav06 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #fbfbfb;
}
.gnav07 {
    width: 30%;
    height: 30px;
    padding-top: 10px;
    background-color: #e9e9e9;
}

/* コンテンツ */
div#contents {
    margin-top: 10px;
}

/* main */

main {
  overflow-x: hidden;
}

main#works {
    width: 100%;
    margin-top: 40px;
}
#works h2 {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}
#works p.explanation {
    text-align: center;
    font-size: 0.8em;
    margin: 10px 0 10px 0;
}
#works ul.worksmenu {
    position: relative;
    left: 20%;
    width: 60%;
    margin-top: 10px;
    margin-bottom: 10px;
}
#works ul.worksmenu li.menu {
    float: left;
    width: 50%;
}
#works ul.worksmenu li.menu img {
    display: block;
    width: 95%;
    margin: 0 auto 10px 0;
    box-shadow: 2px 2px 4px #c5a98e;
}
figure {
    position: relative;
    overflow: hidden;
    width: 95%;
}
figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .6);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
}
figcaption h3 {
    margin-top: 65%;
    margin-left: 25%;
    font-size: 1em;
}
figure:hover figcaption {
    opacity: 1;
}
#works .artwork {
    position: relative;
    left: 15%;
    width: 80%;
    margin-top: 10px;
    margin-bottom: 20px; 
}
#works .artwork img {
    display: block;
    width: 95%;
    margin: 0 auto 10px 0;
    box-shadow: 4px 4px 8px #c5a98e;  
}
#works .artwork h3 {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}
#works .artwork h4 {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    font-size: 0.9em;
}
#works .artwork p {
    padding: 10px 30px 10px 20px;
    font-size: 0.8em;
}
#works .artworkbook img {
    display: block;
    width: 80%;
    margin: 0 auto;
    box-shadow: 4px 4px 8px #c5a98e;  
}

/* article */


/* aside */


/* information */
#information {
    width: 100%;
}
#information ul.link {
    width: 90%;
    margin-left: 20%;
    margin-top: 20px;
}
#information ul.link li {
    height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#information ul.link li img {
    float: left;
    width: 200px;
    margin-right: 5px;
    padding: 1px;
    border: 1px solid #7e5329;
}
#information ul.link li p {
    font-size: 0.8em;
    padding-top: 15px;
}
#sns {
    width: 100%;
    height: 30px;
    text-align: center;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    column-gap: 10px;
}
#sns.sns01 {
    flex-grow: 1;
}
#sns.sns02 {
    flex-grow: 1;
}
#sns.sns03 {
    flex-grow: 1;
}

/* topics */


/* footer */
#footernav {
    width: 30%;
    height: 30px;
    text-align: center;
    font-size: 1em;
    padding-top: 20px;
    margin: 0 auto;
    display: flex;
}
#footernav.s_nav01 {
    flex-grow: 1;
}
#footernav.s_nav02 {
    flex-grow: 1;
}
footer p {
    width: 80%;
    text-align: center;
    font-size: 0.6em;
    margin-top: 30px;
    margin: 0 auto;
    padding-bottom: 20px;
}


/* /_/ PC及び大型タブレット向け：769px〜960px /_/ */





/* /_/ PC向け：961px以上では固定 /_/ */
@media only screen and (min-width: 960px) {
    #header {
        max-width: 960px;
        margin: 0 auto;
        text-align: left;    
        padding: 20px 10px 40px 20px;
    }
    nav#globalnav {
		max-width: 960px;
	}

    div#contents {
        max-width: 960px;
        margin: 0 auto;
    }
    main#works {
        width: 95%;
        margin-top: 40px;
    }
    #works ul.worksmenu {
        position: relative;
        left: 15%;
        width: 80%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #works ul.worksmenu li.menu {
        float: left;
        width: 33%;
    }
    #works ul.worksmenu li.menu img {
        display: block;
        width: 95%;
        margin: 0 auto 10px 0;
    }
    figcaption h3 {
        margin-top: 70%;
        margin-left: 30%;
        font-size: 1.5em;
    }
    #globalnav {
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
        font-size: 0.9em;
        display: flex;
        flex-wrap: nowrap;
    }
    .gnav01 {
        height: 30px;
        padding-top: 10px;
        background-color: #e9e9e9;
    }
    .gnav02 { 
        height: 30px;
        padding-top: 10px;
        background-color: #fbfbfb;
    }
    .gnav03 {
        height: 30px;
        padding-top: 10px;
        background-color: #e9e9e9;
    }
    .gnav04 {
        height: 30px;
        padding-top: 10px;
        background-color: #fbfbfb;
    }
    .gnav05 {
        height: 30px;
        padding-top: 10px;
        background-color: #e9e9e9;
    }
    .gnav06 {
        height: 30px;
        padding-top: 10px;
        background-color: #fbfbfb;
    }
    #footernav {
        max-width: 200px;  
    }