@charset "UTF-8";
/* CSS Document */

/*===============================================================================
===============================================================================

contents.css（共通パーツ、各カテゴリートップ、本文内設定、お知らせ、印刷用）

===============================================================================
==============================================================================*/


/* 共通パーツ
-------------------------------------------------------------------------------------------------------- */

/* List */
.list-disc { padding: 0 0 0 20px; }
.list-disc li { list-style-type: disc; }

/* Box */
.box-line-gray {
	border: solid 1px #CCC;
	padding: 10px;
}
.box-line-red {
	border: solid 1px #CC0000;
	padding: 10px;
}
.box-gray {
	background-color: #EEE;
	padding: 10px;
}
.box-mgray {
	background-color: #999;
	padding: 10px;
}
.box-white {
	background-color: #FFF;
	padding: 10px;
}

/* Line */
.line_b30 {
	margin: 0 0 30px 0;
	padding: 0 0 30px 0;
	border-bottom: solid 1px #CCC;
}

/* Table */
.table {
	border: solid 1px #DDD;
}
table .head {
	background-color: #F5F5F5;
}

/* 画像100% */
.img-100w img {
    max-width: 100%;
}

a {
    text-decoration: underline;
    color: #111;
}
a:hover {
    text-decoration: none;
    color: #111;
}


br.sp-br {
    display: none;
}

@media screen and (max-width:787px) {
	br.pc-br {
		display: none;
	}
    br.sp-br {
		display: block;
    }
}



/* トップページ
-------------------------------------------------------------------------------------------------------- */
.main-image {
	background-color: #f5f5f5;
}

@media screen and (max-width:787px) {
	.main-image .container {
		padding: 0;
	}
}



/* 下層ページ
-------------------------------------------------------------------------------------------------------- */

/* Main Visual
----------------------------------------------------------- */
body#contents section#main-visual {
    max-width: 1600px;
    margin: 0 auto;
}
body#contents section#main-visual img {
    max-width: 100%;
}


/* Contents
----------------------------------------------------------- */
body#contents .contents-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;
}
body#contents .contents-inner .read {
    margin-bottom: 2.6em;
}
body#contents .contents-inner .tag {
    color: #448239;
    border: 2px solid #448239;
    display: inline-block;
    padding: 8px 15px;
    line-height: 1;
    font-weight: bold;
    margin: 0 0 0.5em;
}
body#contents .contents-inner .ttl {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.3em;
}
body#contents .contents-inner .txt {
    margin-bottom: 1em;
    font-size: 1.2em;
    text-align: center;
}

/* Deatail */
body#contents .contents-inner .detail {
    background: #f5f5f5;
    padding: 50px;
    font-size: 1.1em;
    max-width: 768px;
    margin: 0 auto 2.6em;
}
body#contents .contents-inner .detail ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body#contents .contents-inner .detail ul li {
    margin-bottom: 0.8em;;
}
body#contents .contents-inner .detail ul li:last-child {
    margin-bottom: 0;
}

/* Image */
body#contents .contents-inner .area-img p {
    margin-bottom: 40px;
}
body#contents .contents-inner .area-img p img {
    max-width: 100%;
}
body#contents .contents-inner .area-img p:last-child {
    margin-bottom: 60px;
}

/* Btn Back */
body#contents .contents-inner .btn-back {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
body#contents .contents-inner .btn-back a {
    display: block;
    text-align: center;
    padding: 1.5em;
    background: #777;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
}
body#contents .contents-inner .btn-back a:hover {
    opacity: 0.7;
}

body#contents .contents-inner .btn-back a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f104";
    position: absolute;
    font-weight: bold;
    left: 5%;
}

@media screen and (max-width: 768px) {
	body#contents .contents-inner {
		max-width: 100%;
		padding: 4em 0;
	}
    body#contents .contents-inner .read {
		margin-bottom: 2em;
    }
    body#contents .contents-inner .detail {
		background: #f5f5f5;
		padding: 1.5em;
        font-size: 1.0em;
        max-width: 100%;
	}
    /* Image */
    body#contents .contents-inner .area-img p {
        margin-bottom: 1.5em;
    }
    body#contents .contents-inner .area-img p:last-child {
        margin-bottom: 2em;
    }
}



/* Works
-------------------------------------------------------------------------------------------------------- */
/*
#contents #works {
    background: #f1f1f1;

}
*/
/*
#contents #works .inner {
    max-width: 1140px;
	margin: 0 auto;
}
*/
#contents #works .area-works {
    display: flex;
    flex-wrap: wrap;
}
#contents #works .area-works .box {
    width: 32%;
    margin-right: 2%;
    background: #fff;
    margin-bottom: 0px;
    box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.03);
}
#contents #works .area-works .box:nth-child(3n) {
    margin-right: 0px;
}


/* サムネイル */
#contents #works .area-works .thumb {
    background: #ccc;
}
#contents #works .area-works .thumb img {
    max-width: 100%;
}

/* テキストエリア */
#contents #works .area-works .box-inner {
    padding: 25px 20px;
    text-align: center;
}
#contents #works .area-works .box-inner .tag {
    color: #448239;
    border: 2px solid #448239;
    display: inline-block;
    padding: 6px 12px;
    line-height: 1;
    font-weight: bold;
    margin: 0 0 0.5em;
    font-size: 0.8em;
}
#contents #works .area-works .box-inner .ttl {
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.3em;
}
/* ボタン */
#contents #works .area-works .box-inner .btn-detail {
    width: 100%;
    display: block;
    text-align: center;
}
#contents #works .area-works .box-inner .btn-detail a {
    background: #448239;
    display: block;
    font-size: 1.0em;
    color: #fff;
    padding: 0.6em;
    transition: 0.3s;
    position: relative;
    text-decoration: none;
}
#contents #works .area-works .box-inner .btn-detail a:hover {
    opacity: 0.7;
    text-decoration: none;
}

#contents #works .area-works .box-inner .btn-detail a:after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    position: absolute;
    font-weight: bold;
    right: 5%;
}

/* SP */
@media screen and (max-width:768px) {
    #contents #works .area-works .box {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
    }
    #contents #works .area-works .box:last-child {
        margin-bottom: 0;
    }
}