/*
//
//	変数の宣言
//
*/
:root {

		/* 320px基準 margin padding */
		--res_1: calc(0.68px + 0.1vw);
    --res_5: calc(1.8px + 1vw);
		--res_10: calc(6.8px + 1vw);
		--res_15: calc(11.8px + 1vw);
		--res_20: calc(16.8px + 1vw);
		--res_25: calc(21.8px + 1vw);
		--res_30: calc(26.8px + 1vw);
		--res_35: calc(31.8px + 1vw);
		--res_40: calc(36.8px + 1vw);
		--res_45: calc(41.8px + 1vw);
		--res_50: calc(46.8px + 1vw);
		--res_60: calc(56.8px + 1vw);
		--res_70: calc(66.8px + 1vw);


}





/*--ベースレイアウト--*/

div,span,
ul,ol,li,dl,dd,dt
font,p,span,
img,
a,
table,tr,th,td,
form,input,select,option,
blockquote,
nav,header,footer,article,section,
iframe{
	box-sizing:border-box;
	}



/*@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap');*/


html{


	font-family: 'YuGothic', '游ゴシック体' , 'Yu Gothic', "游ゴシック", Helvetica , "メイリオ",  sans-serif;
	color: #484A48;

	/*
		OpenType フォントのプロポーショナルメトリクスの機能の有効化
		font-feature-settings:[機能名] [有効可否]
		機能名：
			palt (プロポーショナルメトリクス)
			pkna (プロポーショナルかな)
			etc https://helpx.adobe.com/jp/typekit/using/open-type-syntax.html
		有効可否：
			1：有効 (初期値)
			0：無効
	*/
	font-feature-settings: "palt" 1;

	/*
		OpenTypeフォントのメトリクスカーニング機能の有効化
		normal：メトリクスカーニングの実施
		none：カーニングを行わない
		auto：用字系にあわせてユーザエージェントが判断 (初期値)
	*/
	font-kerning: normal;

	/* 320px基準 */

	font-size: 14px;
	letter-spacing: 0.2px;
	line-height: 1.75;

	font-weight: 300;
	-webkit-font-smoothing: subpixel-antialiased;

}


html,body{

	width:100%;
	height:100%;
	margin:0;
	padding:0;
	border:none;
	position: relative;

}


p,ul,ol,li,tr,td{


}

h1,h2,h3,h4,h5,h6,p,ul,li{

	padding: 0;
	margin: 0;

	font-weight: 300;

}



.clearfix:after{

	content:"";
	clear: both;
	display: block;

}


.flex{

	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	display: flex;
}



/*-----左上から複数行-----*/

.flex_wrap{

	-ms-flex-wrap: wrap; /*IE10*/
	-webkit-flex-wrap: wrap; /* Safari6.1以降 */
	flex-wrap: wrap;

}

/*-----両端揃え-----*/
.flex_between{

	-ms-flex-pack: justify; /*IE10*/
	-webkit-box-pack: justify; /* Android4.3以下、Safari3.1〜6.0 */
	-webkit-justify-content: space-between; /* Safari6.1以降 */
	justify-content: space-between;

}





img{

	border: 0;
	display: block;

}


#loader_wrap{

	margin-top: -48px;
	width: 100vw;
	height: 100vh;
	background: #fff;
	z-index: 999;
	position: fixed;

}


#loader{

	width: 100%;
	height: 100%;
	cursor: progress;
	position: relative;

}

#loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5em;
  height: 5em;
  margin-top: -2.5em;
  margin-left: -2.5em;
  border-radius: 50%;
  border: 0.5em solid #ccc;
  border-top-color: #8fc31f;
  animation: spinner 0.8s linear infinite;
  }

	@keyframes spinner {
	  to {
	    transform: rotate(360deg);
	  }
	}



#loader_wrap.loaded{

	display: none;

}




	#container{

		margin: 0 auto;
		background-color: transparent;
		visibility: visible;
		position: relative;
		padding-top: 48px;

	}


	footer .footer_wrap{

		padding: 10px 20px;
		padding: var(--res_10) var(--res_20);

		background: #65706B;

		color: #fff;

	}


	footer .footer_wrap p{

		text-align: center;

		font-size: 0.8em;
		line-height: 1.8em;
		color: #fff;

	}


	.triangle{

		float: right;
		width: 15px;
		height: 15px;
		border-top: 1px solid #484A48;
		border-right: 1px solid #484A48;

		transition: 0.2s;

		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
		transform:rotate(135deg);

		}




	/*show*/


	/*hide*/
	.sp_hide_img,.menu_hide,#news_box dl dd p{
		display: none;
	}

	blockquote{
		position: relative;
		margin: 40px 0;
		background: #F7F7F7;
		border-radius: 5px;
		padding: 20px;

		text-align: justify;

	}

	blockquote:before{
		content: "";
		background: #8fc31f;
		display: block;
		height: 10px;
		width: 10px;
		left: 0;
		top: 0;
		position: absolute;
		border-radius: 50%;

	}

	blockquote:after{
		content: "";
		background: #8fc31f;
		display: block;
		height: 10px;
		width: 10px;
		right: 0;
		bottom: 0;
		position: absolute;
		border-radius: 50%;

	}


	.color_head .slider{
		margin-bottom: 40px;
	}

	.color_head .slider .slider-cell{
	  list-style-type: none;
	}

	.color_head .slider .slider-cell img{
		width: 240px;
		height: 150px;
	}

	.color_head .slider .slider-cell{
		padding-left: 20px;
	}

	.color_head .slider .slider-cell:last-child{
		padding-right: 20px;
	}




	/*--ヘッダ・ドロワー---*/


	#logo{

		margin-left: 20px;
		margin-left: var(--res_20);
		width: 100px;

	}

	#logo img{

		height: 30px;

	}


	#header{
		width: 100%;
		height: 48px;
		position: fixed;
		top: 0;
		background: rgba(255,255,255,0.95);
		visibility: visible;
		padding: 9px 0;
		text-align: left;
		z-index: 999;
		border-bottom: 1px solid #ddd;
		transition: 0.5s;
	}

	#menubar{

		position: fixed;
		top: 16px;
		right: 20px;
		z-index: 999;
		width:40px;
		height:30px;
		cursor:pointer;
		transition: 0.5s;

	}


	#header.scrolled,
	#header.scrolled #menubar{

		top: -48px;

	}

	#menubar div{
		position: relative;
	}

	#menubar div span{
		display:block;
	  position:absolute;
	  width:100%;
	  border-bottom:solid 1px #373737;
	  -webkit-transition: .35s ease-in-out;
	  -moz-transition: .35s ease-in-out;
	  transition: .35s ease-in-out
	}

	#menubar div span:nth-child(1){
		top:0;
	}

	#menubar div span:nth-child(2){
		top:7px
	}

	#menubar div span:nth-child(3){
		top:14px
	}


	.open #menubar span:nth-child(1){
		top: 11px;
		-webkit-transform:rotate(25deg);
		-moz-transform:rotate(25deg);
		transform:rotate(25deg);
		}

	.open #menubar span:nth-child(2){
		-webkit-transform:scale(0);
		-moz-transform:scale(0);
		transform:scale(0);
	}

	.open #menubar span:nth-child(3){
		top: 11px;
		-webkit-transform:rotate(-25deg);
		-moz-transform:rotate(-25deg);
		transform:rotate(-25deg);
	}





	#header nav{

		background: rgba(255,255,255,1);
		width: 100%;
		height: 100vh;

		position: fixed;
		top: 0;

		opacity: 0;
		transition: 0.5s;

		pointer-events: none;

	}

	#header.open nav{

		opacity: 1;
		transition: 0.5s;

		pointer-events: all;

	}

	#header nav ul{

		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);

		width: 220px;

	}

	#header nav ul li{

		position: relative;
		display: block;

		width: 50%;
		max-width: 220px;
		height: 20px;

		margin-top: 10px;
		margin-bottom: 10px;

		font-size: 9pt;

		text-align: center;

		list-style-type: none;


	}

	#header nav ul li:nth-child(2n){

		border-right: 0;

	}

	#header nav ul li:nth-last-child(1),
	#header nav ul li:nth-last-child(2){

		border-bottom: 0;

	}



	#header nav ul li a{

		display: inline-block;
		text-decoration: none;

	}


	#header nav ul li a span{

		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		color: #616361;
		letter-spacing: 0.05em;


	}

	#header nav ul li.blog_aleat .blog_update_text{

		display: inline-block;
    font-size: 9pt;
    color: #fff;
    margin-top: -4px;
    padding: 0px 2px 0px;
    margin-right: 3px;
    background: #fd3256;
    vertical-align: text-top;

	}

	#header nav .header_sns a,
	#header nav .header_sns img{

		width: 40px;
		margin: 0 auto;

	}



	#header_mobile	{display: none;
	}



	.contents_h1_title{

		font-family: 'Capriola', sans-serif;
		color: #333;
		line-height: 1.5;

		padding: 30px 0 0;
		padding: var(--res_30) 0 0;

		font-size: 2.2em;

		margin: 0 20px 10px;
		margin: 0 var(--res_20) var(--res_10);

	}


#main{

	padding-bottom: 40px;

}


footer{

	width: 100%;
	max-width: 1024px;

}




	/*
	//
	//   slider
	//
	*/

	.index_slider{

		visibility: hidden;

	}

	.slick-dotted.slick-slider{

		margin-bottom: 85px;

	}

	.slick-dots{

		bottom: -35px;

	}

	.slick-slide
	{
	    padding: 5px;
	}


	/*
	//
	//   タブレット
	//
	*/



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


	#container{

		padding-top: 0;

	}



	#header,#index_big_image,#menubar{

		display: none;

	}

	#header,#header nav,#logo{

		display: block;

	}

	#header{

		width: 164px;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(255,255,255,1);
		border-right: 1px solid #e8e8e8;
		border-left: 1px solid #e8e8e8;
		border-bottom: 0;

		margin: 0;
		padding: 0;

		overflow: hidden;

	}


	#header .pc_head_wrap{

		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		height: 100vh;

		padding-bottom: 60px;
		padding-bottom: var(--res_60);

	}

	#header #logo,
	#logo img{

		height: 38px;
		margin: 0 auto 20px;
		padding: 0;

	}

	#header #logo{

		margin-top: 30px;
		margin-top: var(--res_30);

	}



	#header nav{

		width: 100%;
		height: auto;
		background: none;
		position: relative;

	}


	#header nav ul{


		position: static;

		width: 100%;
		height: auto;
		transform: none;

		border: 0;

	}

	#header nav ul li{

		width: 100%;
		margin-top: 8px;
		margin-bottom: 8px;

		list-style-type: none;

		position: relative;

		text-align: left;
		padding-left: 30px;

	}



	#header nav ul li:nth-child(n + 5)::after{

		margin: 0;

	}


	#header nav ul li:nth-child(n + 1)::after{

		content: none;

	}

	#header nav ul li a span{

		font-size: 9pt;
		transition: 0.15s;
		padding-right: 5px;

	}

	#header nav ul li a span:hover{

		border-right: 12px solid #8fc31f;
		border-radius: 12px;

	}



	#header nav ul li a span{

		position: static;

	}


	#header nav .header_sns{

		width: 35%;
		float: left;
		padding-top: 10px;

	}

	#header nav .header_sns a,
	#header nav .header_sns img{

		width: 40px;

	}




	/*
	//
	//   slider
	//
	*/


	#index_slider_wrap{

		padding: 40px;

	}

	.slick-prev,
	.slick-next{

		right: 0;

	}


	.index_slider{

		display: block;
		margin: 0 0 var(--res_70) 0;
		list-style-type: none;
		width: 100%;

	}


	.index_slider .flickity-page-dots{

		bottom: 40px;

	}

	.index_slider .flickity-page-dots .dot{

		width: 15px;
		height: 15px;

		border: 1px solid #777;
		background: #fff;

	}

	.index_slider .flickity-page-dots .dot.is-selected{

		background: #777;

	}


	.contents_h1_title{

		margin-left: 0;
		margin-right: 0;
		padding: 70px 40px 15px;
		padding: var(--res_70) var(--res_40) var(--res_15);

	}


	#main{

		margin-right: 0;
		padding-left: 164px;
		padding-top: 0;
		width: 100%;
		max-width: 1024px;


	}








}





/*
//
//   PC
//
*/



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


	#loader_wrap{

		margin-top: 0;
		z-index: 1000;
		top: 0;
		left: 0;

	}


	#container{

		padding-left: 164px;
		width: 100%;
		max-width: 1024px;

		position: relative;

	}




	/*
	//
	//   slider
	//
	*/


	.index_slider img{

		padding: 0 2px;

	}


	#header{

		left: 50%;
		margin-left: -512px;

		padding: 0;

	}

	#header .pc_head_wrap{

	}

	#header #logo,
	#logo img{

		margin: 40px auto 20px;
		margin: var(--res_40) auto var(--res_20);

	}


	#main{

		padding-left: 0;
		width: 100%;
		margin-top: 0;

	}






}