@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 768px){
	.is-pc {
		display: none;
	}
	p {
		font-size:calc(24 * 100vw / 768) ;
	}
}
@media print,screen and (min-width: 769px){
	.is-sp {
		display: none;
	}
	
}
body {
	background-color: #383636;
	padding: 0;
	margin: 0;
    position: relative;
    height: 100vh;
	
}
header {
	margin: 0;
	padding: 0;
}
	header h1 {
		background: #030303 ;
		margin: 0;
		color: #fff;
		font-weight: normal;
	}
.logo {
	margin-bottom: 1em;
}
	dl.data {
		line-height: 1.5;
	}
		 dl.data {
		}
			dl.data div {
				display: flex;
				margin-bottom: .5em;
			}
					dl.data div dt {
						padding-right: 1em;
						text-align: left;
					}
					dl.data div dd {
						width: auto;
						text-align: left;
					}

@media screen and (max-width: 768px){
	body {
	}
	header h1 {
		padding: calc(12 * 100vw / 768);
		font-size: calc(24 * 100vw / 768);
	}
	main{
		padding: 1em;
	}
       #sec01 {
        width: 100%;
        text-align: center;
        margin: auto;
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           padding: 20px 0 ;
    }
       #sec01 p {
           width: 100%;
    }
        #sec01 .message01 img {
            width: 100%;
        }
        #sec01 .logo img {
            width: 100%;
            max-width: 300px;
        }
	.data {
	}
		.data dl {
		}
			.data dl div {
			}
					.data dl div dt {
					}
					.data dl div dd {
					}

    #sec02 {
        background-color: #666;
        text-align: center;
        width: 100%;
        padding: 30px  0 30px 0  ;
        color: #fff;
        margin-bottom: 30px;
    }
    #sec02 img {
        width: 100%;
        max-width: 600px;
        margin: auto;
    }
	dl.data {
		line-height: 1.5;
	}
		 dl.data {
		}
			dl.data div {
				border-bottom: 1px solid #999;
				padding: 10px 0 ;

			}
					dl.data div dt {
						width: 6em;
					}
					dl.data div dd {
						width: calc(100% - 7em);
					}
}
@media print,screen and (min-width: 769px){
	header h1 {
		padding: 5px;
		font-size: 12px;
	}
    main {
        position: relative;
        width: 100%;
    }
    #sec01 {
        width: 800px;
        text-align: center;
        margin: auto;
        padding: 50px 0 ;
    }
  
        #sec01 .message01 img {
            width: 100%;
            max-width: 400px;
        }
        #sec01 .logo img {
            width: 100%;
            max-width: 300px;
        }

    #sec02 {
        color: #333;
        text-align: center;
        width: 100%;
        padding: 20px  0 20px 0 ;
        margin-bottom: 40px;
    }
    #sec02 img {
        width: 100%;
        max-width: 600px;
        margin: auto;
    }
	dl.data {
		line-height: 1.5;
	}
		 dl.data {
		}
			dl.data div {
				border-bottom: 1px solid #999;
				padding: 10px 0 ;

			}
					dl.data div dt {
						min-width: 7em;
					}
					dl.data div dd {
					}
}

/*--------------------------------------------
BLOG
---------------------------------------------*/
#blog {
    padding: 5em 0 ;
}
.section-title01 {
    margin: auto;
    text-align: center;
    font-size: 1.2em;
    margin: 0 0 2em 0 ;
}
#blog picture{
	overflow : hidden;
	width : 100%;
}
#blog picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}
#blog li > a{
    color: #fff;
    text-decoration: none;
	display : block;
}
    #blog li > a:hover{
        opacity: .7;
    }

#blog a div div{
	display : flex;
	align-items : flex-start;
	flex-wrap : wrap;
}
#blog .author:before{
	content : "：";
}
a.link02 {
    margin: auto;
    text-align: center;
    display: block;
    color: #333;
    text-decoration: underline;
}
@media screen and (max-width: 768px){
#blog {
    padding: 2em .5em; ;
}    
	#blog ul{
		margin-top : calc( 25 * 100vw / 768 );
	}
	#blog li + li{
		margin-top : calc( 20 * 100vw / 768 );
	}
	#blog li a{
		display : flex;
		align-items : center;
	}
	#blog picture{
		width : calc( 220 * 100% / 736 );
		flex-shrink : 0;
		height : calc( 220 * 100vw / 768 );
		margin-right : calc( 14 * 100% / 736 );
	}
	#blog .title{
		font-size : calc( 26 * 100vw / 750 );
		line-height : 1.38;
	}
	#blog time , #blog .author{
		font-size : calc( 24 * 100vw / 750 );
		line-height : 1.5;
	}
	#blog .link02{
		margin-top : calc( 41 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#blog ul{
		display : flex;
		justify-content : center;
	}
	#blog .title{
		line-height : 1.30;
	}
	#blog time , #blog .author{
		line-height : 1.5;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#blog ul{
		margin-top : calc( 14 * 100vw / 768 );
	}
	#blog li{
		width : calc( 180 * 100% / 980 );
	}
	#blog li:not(:nth-child(5n+1)){
		margin-left : calc( 20 * 100% / 980 );
	}
	#blog picture{
		height : calc( 136 * 100vw / 768 );
	}
	#blog .title{
		font-size : calc( 16 * 100vw / 768 );
		margin-top : calc( ( 12 - 2.5 ) * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#blog ul{
		margin-top : calc( 14 * 100vw / 1280 );
	}
	#blog li{
		width : calc( 180 * 100vw / 1280 );
	}
	#blog li:not(:nth-child(5n+1)){
		margin-left : calc( 20 * 100vw / 1280 );
	}
	#blog picture{
		height : calc( 180 * 100vw / 1280 );
	}
	#blog .title{
		font-size : calc( 16 * 100vw / 1280 );
		margin-top : calc( ( 12 - 2.5 ) * 100vw / 1280 );
	}
	#blog div{
		font-size: 14px;
	}
}
@media print,screen and (min-width: 1380px){
	#blog ul{
		margin-top : 14px;
	}
	#blog li{
		width : 180px;
	}
	#blog li:not(:nth-child(5n+1)){
		margin-left : 20px;
	}
	#blog picture{
		height : 180px;
	}
	#blog .title{
		font-size : 16px;
		margin-top : calc( 12px - 2.5px );
	}
	#blog .link02{
		margin-top : calc( 30px - 3.5px );
	}
}

#sns {
    margin: auto;
    text-align: center;
    padding-bottom: 5em;
}
    #sns ul {
        display: flex;
        list-style: none;
        margin: auto;
        justify-content: center;
    }
        #sns ul li {
            padding: 5px;
        }
@media screen and (max-width: 768px){
        #sns ul li img {
            width: 50px;
        }
}
@media print,screen and (min-width: 769px){
    #sns {
    margin: auto;
    }
        #sns ul li img {
            width: 50px;
        }
}