@charset "UTF-8";
/* CSS Document */
/*
Reset
Layout
clearfix
Media screen
*/
/*================================================================================
	Reset
================================================================================*/
html , head , body , header , footer , nav , section , div , ul , ol , li , dl , dt , dd , table , tr , th , td , h1 , h2 , h3 , h4 , h5 , h6 , p , a , span , img , video{
	margin : 0;
	padding : 0;
	border : none;
}
ul , ol{
	list-style : none;
}
a , a:hover , a:active{
	color : #333;
	text-decoration : none;
}
a , a img , a:hover img{
	transition : all .5s;
}
a:hover , a:hover img{
	opacity : .7;
}
img{
	display : block;
	width : 100%;
	height : auto;
}
html{
	margin-left : -1px;
	overflow-Y : scroll;
	height : 100%;
	margin-bottom : 1px;
}
body{
	height : auto;
	color : #333;
	font-size : 14px;
	line-height : 180%;
	background-color : #fff;
	font-family : "ヒラギノ明朝 ProN W3", "HiraMinProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
/*================================================================================
	Layout
================================================================================*/
.wrap{
	margin : 0 auto;
}
.link_nav li{
	display : inline-block;
	margin : 0 5px;
}
.link_nav li a{
	display : block;
	overflow : hidden;
	width : 30px;
	height : 0;
	padding-top : 30px;
}
.link_nav li:nth-child(1) a{
	background : url(../img/common/icon_facebook.png) no-repeat 0 0;
	background-size : 30px 30px;
}
.link_nav li:nth-child(2) a{
	background : url(../img/common/icon_instagram.png) no-repeat 0 0;
	background-size : 30px 30px;
}
.link_nav li:nth-child(3) a{
	width : 70px;
	padding-top : 71px;
	background : url(../img/common/icon_tateshina.png) no-repeat 0 0;
	background-size : 70px 71px;
}
/* menu_area
--------------------------------------------------------------------------------*/
/* archive */
.archive h2{
	overflow : hidden;
	width : 100%;
	height : 0;
	padding-top : 25px;
	background : url(../img/common/txt_archive.jpg) no-repeat 50% 0;
	background-size : 205px 25px;
}
.archive li{
	margin-top : 30px;
}
.archive li img{
	width : 110px;
	float : left;
}
.archive li h3{
	width : 200px;
	float : right;
	margin-top : 0;
	font-size : 17px;
}
.archive li h3 a{
	display : block;
}
.archive li p{
	width : 200px;
	float : right;
	padding-left : 33px;
	box-sizing : border-box;
}
.archive li p{
	font-size : 12px;
	font-weight : bold;
	font-family : "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
}
.archive li:nth-child(1) p{
	background : url(../img/common/icon_cat1.png) no-repeat 0 0;
	background-size : 28px 18px;
}
.archive li:nth-child(2) p{
	background : url(../img/common/icon_cat2.png) no-repeat 0 0;
	background-size : 21px 18px;
}
.archive li:nth-child(3) p{
	background : url(../img/common/icon_cat3.png) no-repeat 0 0;
	background-size : 28px 19px;
}
/* weekly */
.weekly{
	margin-top : 50px;
	display : none;
}
.weekly h2{
	overflow : hidden;
	width : 100%;
	height : 0;
	padding-top : 150px;
	background : url(../img/common/bnn_bijinsama.jpg) no-repeat 50% 0;
}
.weekly div{
	margin-top : 50px;
}
/* banner */
.banner{
	margin-top : 70px;
}
.banner li{
	margin-top : 90px;
}
/* banner */
.banner2{
	margin-top : 40px;
}
.banner2 li{
	margin-top : 40px;
}
/*================================================================================
	Media screen : PC 640px
================================================================================*/
@media screen and (min-width: 641px){
	.wrap{
		width : 1280px;
	}

.letter_comment {
	text-align: center;
	font-size: 20px;
}

	/* archive */
	.archive li div{
		display : none;
	}
}
/*================================================================================
	Media screen : 横幅100%時の背景色ヌケ防止
================================================================================*/
@media screen and (min-width: 641px) and (max-width: 1000px){
}
/*================================================================================
	Media screen : SP 640px
================================================================================*/
@media screen and (max-width: 640px){
	.link_nav li:nth-child(3) a{
		width : 53px;
		padding-top : 54px;
		background : url(../img/common/icon_tateshina.png) no-repeat 0 0;
		background-size : 53px 54px;
	}

	/* other_letters */
	.other_letters > ul{
		padding-left : 10px;
		padding-right : 10px;
	}
	/* archive */
	.archive{
		margin-top : 40px;
	}
	.letter_comment {
		text-align: center;
		font-size: 15px;
	}
	
	.archive li{
		margin : 30px 15px;
	}
	.archive li img{
		width : 40%;
		padding-right : 15px;
		box-sizing : border-box;
	}
	.archive li h3{
		width : 60%;
		font-weight : normal;
	}
	.archive li p{
		width : 60%;
	}
	.archive li div{
		width : 60%;
		float : left;
		margin-top : 5px;
	}
	.archive li div a{
		display : inline-block;
		margin-right : 5px;
		padding : 4px 6px;
		background-color : #c6dcbd;
	}
	.archive li div a{
		font-size : 12px;
		font-weight : bold;
		font-family : "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
		line-height : 100%;
	}

	.weekly{
		display : none;
	}
	.banner{
		display : none;
	}
}
/*================================================================================
	clearfix
================================================================================*/
#contents .wrap:after{
	visibility : hidden;
	display : block;
	font-size : 0;
	content : " ";
	clear : both;
	height : 0;
}
/* clearfix for ie7 */
#contents .wrap{
	display : inline-block;
}
#contents .wrap{
	display : block;
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
header{
	position : relative;
}
header h1 a{
	display : block;
}
header h1 span{
	display : block;
}
header h1 img{
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 640px){
	header .wrap{
		padding-top : calc( 40 * 100vw / 750 );
		height : calc( 160 * 100vw / 750 );
	}
	header h1 a{
		display : inline-block;
		padding-left : calc( 48 * 100% / 750 );
	}
	header h1 span:nth-of-type(1) img{
		width : calc( 326 * 100vw / 750 );
	}
	header h1 span:nth-of-type(2){
		display : none;
	}
	header p{
		display : none;
	}
	header #btn_menu{
		position : absolute;
		top : calc( 43 * 100vw / 750 );
		right : calc( 25 * 100% / 750 );
		overflow : hidden;
		width : calc( 56 * 100% / 750 );
		height : 0;
		padding-top : calc( 46 * 100vw / 750 );
		background-repeat : no-repeat;
		backface-visibility : hidden;
		will-change : background;
		background-image : url(../img/common/icon_menu.svg);
		background-size : contain;
		background-position : center;
	}
	header #btn_menu.active{
		background-image : url(../img/common/icon_menu_close.svg);
		background-position : center;
		background-size : auto calc( 42 * 100vw / 750 );
	}
	header nav{
		width : calc(100% - calc( 30 * 100vw / 750 ));
		background-color : rgba(255,255,255,.98);
		position : absolute;
		top : calc( 140 * 100vw / 750 );
		left : calc( 15 * 100vw / 750 );
		z-index : 10;
		display : none;
	}
	header nav.active{
		display : block;
	}
	header nav ul{
		display : flex;
		justify-content : center;
		flex-wrap : wrap;
		padding-top : calc( 45 * 100vw / 750 );
		padding-bottom : calc( 50 * 100vw / 750 );
	}
	header nav li{
		font-size : calc( 28 * 100vw / 750 );
		line-height: 2.0;
		padding: calc( 20 * 100vw / 750 ) 0 ;
	}
	header nav li{
		width : 100%;
		text-align : center;
	}
/*--	
	header nav li:nth-child(6){
		margin-left : calc( 25 * 100vw / 750 );
	}
--*/	
	header nav a{
		display : block;
		padding-top : calc( 8 * 100vw / 750 );
		padding-bottom : calc( 8 * 100vw / 750 );
	}
		header nav .menu-logo {
			padding: calc( 40 * 100vw / 750 ) calc( 25 * 100vw / 750 )  calc( 25 * 100vw / 750 )  calc( 25 * 100vw / 750 );
			text-align: center;
			margin: auto;
			justify-content: center;
			border-top: 1px solid #ccc ;
			margin: calc( 25 * 100vw / 750 ) calc( 25 * 100vw / 750 ) 0 calc( 25 * 100vw / 750 );
		}
			header nav .menu-logo span img {
				width: 55%;
				height: auto;
				margin: auto auto 5px auto ;
			}
			header nav .menu-logo span.copy{
				font-size:  11px;
				color: #666;
				display: block;
				text-align: center;
				margin-top: 10px;
			}
}
@media print,screen and (min-width: 641px){
	header .wrap{
		padding-top : 69px;
		height : 276px;
		box-sizing : border-box;
	}
	header h1 span:nth-of-type(1) img{
		width : 171px;
	}
	header h1 span:nth-of-type(2){
		margin-top : 21px;
	}
	header h1 span:nth-of-type(2) img{
		width : 364px;
	}
	header p{
		position : absolute;
		top : 69px;
		right : 105px;
	}
	header p img{
		width : 93px;
	}
	header #btn_menu , header #menu{
		display : none;
	}
}
@media screen and (max-width: 640px){
	.home #btn_menu{
		background-image : url(../img/common/icon_menu_white.svg);
	}
	.home #btn_menu.active{
		background-image : url(../img/common/icon_menu_close_white.svg);
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
footer p{
	text-align : center;
	line-height : 1.2;
	color : #221714;
}
footer .linkNav{
	display : flex;
	justify-content : center;
	align-items : center;
	flex-wrap : wrap;
}
footer .linkNav:before{
	content : "";
	display : block;
	width : 100%;
	order : 2;
}
footer .linkNav li:not(:last-child):after{
	content : "/";
	margin-left : .5em;
	margin-right : .5em;
}
footer .linkSNS{
	background : url("../img/common/bg_sns.png") center top no-repeat;
	display : flex;
	justify-content : center;
}
footer h2 a{
	display : block;
}
footer h2 span{
	display : block;
}
footer h2 img{
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 640px){
	footer .wrap{
		padding-top : calc( 131 * 100vw / 750 );
		padding-bottom : calc( ( 82 - 1.6 ) * 100vw / 750 );
	}
	footer .linkNav li{
		font-size : calc( 25 * 100vw / 750 );
	}
	footer .linkNav li:nth-child(-n+3){
		order : 1;
	}
	footer .linkNav li:nth-child(n+4){
		order : 3;
		margin-top : calc( 36 * 100vw / 750 );
	}
	footer .linkSNS{
		margin-top : calc( 50 * 100vw / 750 );
		background-size : auto 100%;
		height : calc( 56 * 100vw / 750 );
		padding-top : calc( 4 * 100vw / 750 );
	}
	footer .linkSNS li + li{
		margin-left : calc( 20 * 100vw / 750 );
	}
	footer .linkSNS img{
		width : auto;
		height : calc( 49 * 100vw / 750 );
	}
	footer h2{
		margin-top : calc( 82 * 100vw / 750 );
	}
	footer h2 span:nth-of-type(1) img{
		width : calc( 182 * 100vw / 750 );
	}
	footer h2 span:nth-of-type(2){
		margin-top : calc( 21 * 100vw / 750 );
	}
	footer h2 span:nth-of-type(2) img{
		width : calc( 398 * 100vw / 750 );
		max-width : 100%;
	}
	footer .wrap > a{
		display : block;
		margin-top : calc( 74 * 100vw / 750 );
	}
	footer .wrap > a img{
		width : calc( 103 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
	}
	footer p{
		margin-top : calc( ( 26 - 1.6 ) * 100vw / 750 );
		font-size : calc( 16 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 641px){
	footer .wrap{
		padding-top : 116px;
		padding-bottom : calc( 167px - 1.3px );
	}
	footer .linkNav li{
		font-size : 15px;
	}
	footer .linkNav li:nth-child(-n+4){
		order : 1;
	}
	footer .linkNav li:nth-child(n+5){
		order : 3;
		margin-top : 28px;
	}
	footer .linkSNS{
		margin-top : 46px;
		background-size : auto 100%;
		height : 39px;
		padding-top : 2px;
	}
	footer .linkSNS li + li{
		margin-left : 14px;
	}
	footer .linkSNS img{
		width : 35px;
	}
	footer h2{
		margin-top : 49px;
	}
	footer h2 span:nth-of-type(1) img{
		width : 146px;
	}
	footer h2 span:nth-of-type(2){
		margin-top : 21px;
	}
	footer h2 span:nth-of-type(2) img{
		width : 320px;
	}
	footer .wrap > a{
		display : none;
	}
	footer p{
		margin-top : calc( 53px - 1.3px );
		font-size : 13px;
	}
}
@media print,screen and (min-width: 641px){
	.contents_area{
		width : 960px;
		margin-left : auto;
		margin-right : auto;
	}
}
/*--------------------------------------------
LETTERS
---------------------------------------------*/
.other_letters h2{
	overflow : hidden;
	width : 100%;
	height : 0;
	padding-top : 44px;
	background : url(../img/common/txt_other.jpg) no-repeat 50% 0;
	background-size : 400px 44px;
}
.other_letters ul{
	margin-top : 54px;
	display : flex;
	flex-wrap : wrap;
}
.other_letters li h3{
	margin-top : 20px;
	font-size : 17px;
	letter-spacing : 2px;
}
.other_letters li div{
	margin-top : 10px;
}
.other_letters li div a{
	display : inline-block;
	margin-right : 5px;
	padding : 4px 6px;
	background-color : #c6dcbd;
}
.other_letters li div a{
	font-size : 12px;
	font-weight : bold;
	font-family : "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	line-height : 100%;
}
@media screen and (max-width: 640px){
	.other_letters{
		margin-top : 40px;
	}
	.other_letters h2{
		padding-top : 30px;
		background-size : 270px 30px;
	}
	.other_letters li{
		margin-bottom : 15px;
	}
	.other_letters li img{
		width : 40%;
		float : left;
	}
	.other_letters li h3{
		width : 60%;
		float : right;
		margin-top : 0;
		font-weight : normal;
		padding : 0 10px;
		box-sizing : border-box;
	}
	.other_letters li div{
		width : 60%;
		float : right;
		margin-top : 0;
		font-weight : normal;
		padding : 0 10px;
		box-sizing : border-box;
	}
}
@media print,screen and (min-width: 641px){
	.other_letters ul{
		margin-top : 54px;
	}
	.other_letters li{
		width : 310px;
	}
	.other_letters li:not(:nth-child(3n+1)){
		margin-left : 15px;
	}
	.other_letters li:nth-child(n+4){
		margin-top : 44px;
	}
}