/* -------------------- パーツ系 ここから -------------------- */

/* 表示・非表示 */
@media screen and (max-width:440px){
	.visible-sp{display: block;}
	.visible-tb{display: block;}
	.visible-dt{display: none;}
}

@media screen and (min-width:441px) and (max-width:1024px){
	.visible-sp{display: block;}
	.visible-tb{display: block;}
	.visible-dt{display: none;}
}

@media screen and (min-width:1025px){
	.visible-sp{display: none;}
	.visible-tb{display: none;}
	.visible-dt{display: block;}
}
/* >>ここから-共通-見出し、説明文css -------------------------------*/



/* 主にdetailページタイトルと英サブタイトル */
.title-gray-block{
    display: block; 

    padding:30px 0;
	margin:0 auto;
    margin-top:30px;    
    font-weight: bold;
	background-color:#F3F3F3;
	text-align: center;
	width:1000px;
}

.title-gray-block h2{
	font-size: 24px;
	font-weight: bold;
	
}
.title-gray-block .subtitle{
 font-size: 14px;
}

.back_gray {
	background-color:#F3F3F3;
 	padding:20px 0px; 
	margin:20px 0px;
}


@media screen and (max-width:768px){
	.title-gray-block{
		display: block; 
		padding:20px 0;
		margin-top:30px;
		font-weight: bold;
		background-color:#F3F3F3;
		width:100%;
	} 
	.title-gray-block h2{padding:5px 0; font-size: 18px!important; font-weight: bold;}
	.title-gray-block .subtitle{font-size: 12px;}
	.info_title {
	text-align: left;
 	padding:10px 0px; 
	margin:15px 0px;
}

}

	.info_title {
	margin:0px 20px;
}


.notes_list li {
	text-align: left;
	padding:5px 0px; 
	margin-left:20px;
	list-style: disc;
}







/* コンテンツ内説明文 */	
div.title{margin:5px 0; font-weight: bold;text-align: left; font-size: 16px;}
.title i{margin:1px; font-size: 20px;}
p.setumei {text-align: left; font-size: 16px;padding-left:10px;}
.setumei_s {text-align: left; font-size: 14px;}

@media screen and (max-width:768px){
	div.title{margin:5px 0; font-weight: bold;text-align: left; font-size: 14px;}
	p.setumei {text-align: left; font-size: 14px;padding-left:10px;}
	.setumei_s {text-align: left; font-size: 12px;}
	.sp_textleft{text-align: left; }
}


/* >>ここまで-共通-見出し、説明文css -------------------------------*/


/* -------アンダーライン------- */	

.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}
.blue_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #afeeee 0%) repeat scroll 0 0;}
.red_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffd1d1 0%) repeat scroll 0 0;}
.gray_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #dcdcdc 0%) repeat scroll 0 0;}

.green_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #00cc44 0%) repeat scroll 0 0;}

/* -------バーライン -------*/	
.barline100{border-bottom: 2px solid #000000; width:100px; margin:20px auto;  clear: both;}
.barline200{border-bottom: 1px solid #000000; width:200px; margin:50px auto;clear: both;display:block;}
.barline200mar0{border-bottom: 1px solid #000000; width:200px; margin:0px auto;clear: both;display:block;}
.long_barline{border-bottom: 2px solid #000000; width:100%; margin:0px auto;  clear: both;}
.sub_barline{border-bottom: 2px solid #000000; width:60%; margin:0px auto;  clear: both;}
.line_pad{padding:30px 0;}
.contents_end{padding:40px 0;  clear: both;}
.barline100_sp{display:none;}
.contents_clear{clear:both;}
.barline-full{width: 100%;}



@media screen and (max-width:768px){
	.barline100{border-bottom: 1px solid #000000; width:100px; margin:20px auto;  clear: both;}
	.contents_end{padding: 0;  clear: both;}
	
	/* 2018/05/10 bk
	.barline200block{border-bottom: 1px solid #000000; width:200px; margin:50px auto; display:inline-block;}*/
	.barline200block{
		border-bottom: 1px solid #000000; 
		width:200px; 
		margin:0 auto;

		margin-top: 50px !important;
		margin-bottom: 50px !important;

		display:inline-block;
	}

	.long_barline{border-bottom: 1px solid #000000; width:100%; margin:0px auto;  clear: both;}
	.line_pad{padding:15px 0;}
	.barline200 {border-bottom: 1px solid #000000; width:100px; margin:40px auto;clear: both;display:block;}
	.barline-full{border-bottom: 2px dotted #000; width: 90%; margin:0 auto; margin-top: 30px; margin-bottom: 40px;}
}



@media screen and (max-width:440px){
.barline200_sp{border-bottom: 2px solid #000000; width:200px; margin:20px auto;  clear: both;}
.barline100_sp{border-bottom: 1px solid #000000; width:100px; margin:20px auto;  clear: both;display:block;}
}


/* ---------------------img 用css---------------------*/	

/* img_text_line */

.txt_linebar{margin:30px 0px 30px 0px }
@media screen and (max-width:768px){
	.txt_linebar {margin:15px 0px 15px 0px  }
}


/* image周りborder */
.img_grayline{border: 1px solid #dcdcdc;}


/* image、幅フルブラウザ */
.img_full {border-bottom: solid 2px #000;}
.img_full_noline {}
.img_full img{width: 100vw;margin:0 auto;}
.img_full_noline img{width: 100vw;margin:0 auto;}



/* --------------コンテンツmargin、flex中央寄せ類--------------------- */

/*　main_con、sub_con、向けのmargin */
.con_mar{margin:40px auto;}

@media screen and (max-width:768px){
.con_mar{margin:20px auto;}
}



/*top_nameタイトル画像用の中央寄せとmargin */
.top_nameimg_mar{margin:35px auto;display: flex; justify-content: center}

@media screen and (max-width:768px){
.top_nameimg_mar{margin:20px auto;display:block;}
}

/*flex要素の中央寄せ */

.con_flex_centermar{display: flex; justify-content: center; flex-wrap:wrap}



/* ---------------------ボタン部品--------------------- */

/* 背景白ボタン（シンプル */

.btn_white a,
.btn_white button
{
	display:inline-block;
	width:400px;
	border:solid 2px #000;
	padding:15px;
	margin:20px ;
  font-size: 16px; 
  font-weight: bold;
text-align:center;
}

.btn_white a:hover { background-color: #dcdcdc;
 }


@media screen and (max-width:768px){
.btn_white a,
.btn_white button{
	display:inline-block;
	width:300px;
	border:solid 2px #000;
	padding:10px;
	margin:10px ;
  font-size: 14px; 
  font-weight: bold;
}
}



/*ボタン---------------------------------------- */


.sofa-btn a{font-size: 16px;}
.sofa-btn a.btn-sofapage{display: block; width:200px; height:50px; left: 0; right: 0; padding-top: 15px; background: rgb(68, 66, 66); color: #fff; margin:15px auto; text-align: center;}

@media screen and (max-width:768px){
.sofa-btn a{font-size: 16px;}
.sofa-btn a.btn-sofapage{display: block; width:200px; height:50px; left: 0; right: 0; padding-top: 15px; background: rgb(68, 66, 66); color: #fff; margin:15px auto; text-align: center;}	
}


.btn {
	font-size: 1.6rem;
	/*padding:15px 30px;*/
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	padding-left: 30px !important;
	padding-right: 30px !important;

	border-radius: 0;
	border-width: 1px;
	font-weight: bold;
	-webkit-transition: background 0.2s ease;
	transition: background 0.2s ease;
}

@media screen and (max-width:768px){
	.btn {font-size: 1.2rem;}
}

.btn:hover{color: #fff;background-color: #40698C;  border-color: #fff;}
.btn-info {color: #333; background-color: transparent; border-color: #333;}

.button {
	display: inline-block;
	width: 200px !important;
	height: 50px !important;
	text-align: center;
	text-decoration: none;
	line-height: 50px !important;
	outline: none;
	background-color: #fff;
	border: 1px solid #000;
	font-weight: bold;
	margin: 10px 0 0 0;
	position: relative;
	z-index: 1000;
}
.button:hover {background-color: #F0C35D; color: #000;}
.button::before,
.button::after {position: absolute; z-index: -1; display: block; content: '';}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.button-middle {
	width: 150px !important;
	height: 40px !important;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	outline: none;
	background-color: #fff;
	border: 1px solid #000;
	font-weight: bold;
}
.button-middle:hover {background-color: #F0C35D; color: #000;}
.button-middle::before,
.button-middle::after {position: absolute; z-index: -1; display: block; content: '';}
.button-middle,
.button-middle::before,
.button-middle::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* ボタン：グレー */
/*2018/05/08 bk
a#btn-gray-xlarge{
    display: block;
    width:300px;
    height:60px;
    left: 0;
    right: 0;
    padding-top: 20px;
    background: rgb(68, 66, 66);
    color: #fff;
    margin:15px auto;
	text-align: center;
	font-size: 16px;
}
@media screen and (max-width:440px){
	a#btn-gray-xlarge{font-size: 12px; width: 100%;}
}*/
a.btn-gray-xlarge{
    display: block;
    width:300px;
    height:60px;
    left: 0;
    right: 0;
    padding-top: 20px;
    background: rgb(68, 66, 66);
    color: #fff;
    margin:15px auto;
	text-align: center;
	font-size: 16px;
}
@media screen and (max-width:440px){
	a.btn-gray-xlarge{font-size: 12px; width: 100%;}
}

a#btn-gray-large{
    display: block;
    width:250px;
    height:60px;
    left: 0;
    right: 0;
    padding-top: 20px;
    background: rgb(68, 66, 66);
    color: #fff;
    margin:15px auto;
	text-align: center;
	font-size: 16px;
}

a#btn-gray-large2{
    display: block;
    width:250px;
    height:60px;
    left: 0;
    right: 0;
    padding-top: 7px;
    background: rgb(68, 66, 66);
    color: #fff;
    margin:15px auto;
	text-align: center;
	font-size: 16px;
}

a#btn-gray-large2 #title{
	font-weight: bold;
	font-size: 16px;
	color: #fff;
}

a#btn-gray-large2 #description{
	color: #fff;
}

a#btn-gray-middle{
    display: block;
    width:150px;
    height:50px;
    left: 0;
    right: 0;
    padding-top: 15px;
    background: rgb(68, 66, 66);
	color: #fff;
	margin:15px 0;
    text-align: center;
}


/*footer*/
footer {
	width: 100%;
	padding:7% 0;
	text-align:center;
	background:#333;
	margin:50px 0 0 0;
}

footer a:link, 
footer a:link p {
	color: #fff;
}

footer a:visited, 
footer a:visited p {
	color: #fff;
}



h5 {
font-size: 1.2rem;
	color:#fff;
}

@media screen and (max-width:768px){
h5 {
font-size: 0.8rem;
	color:#fff;
}

} 


/* -------------------- fullPage.jsの箇所 ここから -------------------- */
.section{text-align:center;}
.section img .main{position: relative; margin:0 auto;}

@media screen and (max-width:440px){
	.section img.main{width: 60%;}
} 

@media screen and (min-width:441px) and (max-width:768px) {
	.section img.main{width: 40%; margin-top: -100px;}
}

@media screen and (min-width:769px) and (max-width:1024px) {
	.section img.main{width: 35%; margin-top: -100px;}
}

@media screen and (min-width: 1025px) {
	.section img.main{width: 30%;}
}
/* -------------------- fullPage.jsの箇所 ここまで --------------------*/