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


/* --------------------------------
   □ サイト情報 (ヘッダー)
-------------------------------- */
header{ 
	height:auto;
	overflow:hidden;
	margin-bottom:-2px;
	background:#fff;
	border-top:15px solid #e4f1ff;
	width:100%;
}

header #headerArea{
	width:auto;
	margin:0 auto;
	clear:both;
	padding:20px 0 10px;
	position:relative;
}

header .inner{
	width:960px;
	min-height:auto;
	text-align:center;
	margin: auto;
	position:relative;
	padding-bottom:20px;
}

header .inner h1{
	padding-top:0;
	float:none;
}
header .inner p.banner{
	position:absolute;
	top:-15px;
	right:0;
}
header .inner .facebook{
	position:absolute;
	top:-15px;
	left:0;
	max-width: 280px;

	& img{
		max-width: 100%;
	}

	@media only screen and
	(max-width : 640px) {
		display: none;
	}
}

header .visualArea{
	width:1116px;
	min-height:auto;
	text-align:center;
	margin: auto;
	position:relative;
}


header .visualArea p.accent{
	margin:0;
}
header .visualArea p.catch{
	position:absolute;
	top:-85px;
	left:150px;
}


header nav#globalnavi.pc{
	clear:both;
	float:none;
	padding-top:0;
}

header nav#globalnavi{
	width:960px;
	margin:10px auto;
	display:table;
}
header nav#globalnavi ul {
    width: 100%;
    margin: 10px auto;
    display: table;
}
header nav#globalnavi li{
	padding:0;
	display:table-cell;
	border-left:1px solid #7fa6d0;
}

header nav#globalnavi li a{
	padding:0 15px;
}

header nav#globalnavi li:last-child{
	border-right:1px solid #7fa6d0;
}






/* --------------------------------
   □ ページコンテンツ
-------------------------------- */
.contents{
}

	.contents section{
	}



header #headerArea .popup-area {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
	height:364px;
	width:700px;
	overflow:hidden;
}

header #headerArea .popup-area ul{
	display:none;
}
header #headerArea .popup-area li {
    position: absolute;
}

header #headerArea .popup-area .accent01 {
    top: 20px;
    left: 300px;
}











/* □ affiliate
-------------------------------- */
#affiliate{
	padding:80px 0;
	background:url(../../images/index/affiliate/bg.png) bottom center repeat-x #d1e7ff;
}

    #affiliate > section{
        max-width: 960px;
        margin: 0 auto;
    }

    #affiliate > section + section{
        margin-top: 63px;
    }

    #affiliate section.section + section.section{
        margin-top: 49px;
    }


    #affiliate section ul.itemList{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-bottom: 20px;
    }

        #affiliate section ul.itemList li{
            max-width: 24%;
        }
            #affiliate section ul.itemList li img{
                max-width: 100%;
            }

        #affiliate section p.buttonStyle{
            position: relative;
            text-align: center;
            margin: 0;
        }
        #affiliate section p.buttonStyle a{
            width: 30%;
        }
        #affiliate section p.buttonStyle.sns a.m{
            width: 40px;
            padding:10px 0px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 50%;
        }
        
        #affiliate section p.buttonStyle.sns a.instagram{
            margin-left: 149px;
        }
        #affiliate section p.buttonStyle.sns a.twitter{
            margin-left: 195px;
        }
        #affiliate section p.buttonStyle.sns a.m span{
            padding: 0;
        }

        #affiliate section p.buttonStyle + p.buttonStyle{
            margin-top: 14px;
        }


		/* □ company
		-------------------------------- */
		#affiliate section.company{
			padding:10px 0;
		}
				
			#affiliate section.company .subsection{
				width:960px;
				margin:auto;
				
			}
			#affiliate section.company .subsection h4{
				margin-bottom:20px;
			}

			#affiliate section.company .subsection p.facebook.pc{
				position:relative;
			}

			#affiliate section.company .subsection p.facebook.pc img{
				position:absolute;
				right:0;
				top:-70px;
				width:250px;
			}

			#affiliate section.company .subsection .snsbuttons.pc{
				display: block;
				text-align:right;
				margin-top: -12px;
				margin-bottom: 17px;
			}
			#affiliate section.company .subsection .snsbuttons li{
				float: none;
				display: inline-block;
				width: auto;
				margin: 0;
			}
			#affiliate section.company .subsection .snsbuttons li + li{
				margin-left: 2px;
			}
			
			#affiliate section.company .subsection p.facebook.sp{
				display:none;
			}

			#affiliate section.company .subsection .snsbuttons.sp{
				display:none;
			}
				
			#affiliate section.company .subsection p.images{
				float:left;
			}
				
			#affiliate section.company .subsection table{
				float:left;
				padding-left:30px;
				width:50%;
				table-layout:fixed;
				font-size: 1.5rem;
			}
				
			#affiliate section.company .subsection table tr,
			#affiliate section.company .subsection table th,
			#affiliate section.company .subsection table td{
				border:1px solid #004ea2;
				padding:1em;
			}
				
			#affiliate section.company .subsection table th{
				width:9em;
				background:#2775ca;
				color:#fff;
				text-align:center;
			}
			#affiliate section.company .subsection table td{
				background:#fff;
				padding-left:2.5em;
				height:1.5em;
			}
			
			#affiliate section.company .subsection table td span{
				display:inline-block;
			}

		/* □ kline
		-------------------------------- */
		#affiliate section.kline{
			padding:10px 0;
		}

		#affiliate section.kline p.description{
			font-size: 1.4rem;
			margin-bottom: 20px;
		}

		#affiliate section.kline div.klineShop{
			border:1px solid #004ea2;
			background:#f6f6f6;
			padding:30px;
			width:900px;
			overflow:hidden;

			& + .klineShop{
				margin-top: 30px;
			}
		}
		
		#affiliate section.kline div.klineShop .images{
			float:left;
			margin:0;
		}
	
		/* □ qrbox
		-------------------------------- */
		#affiliate section.kline div.klineShop .qrbox{
			position: relative;
			border: 1px dotted #333;
			background:#f6f6f6;
			padding:15px;
			width: fit-content;
			margin-left: auto;

			dt{
				font-weight: bold;
				font-size: 1.6rem;
				margin-bottom: 10px;
			}

			dd{
				display: flex;
				align-items: center;
				width: fit-content;
				margin: 0 auto;

				.qr{
					width: 100px;
					height: 100px;
					background: #fff;
					border: 1px solid #ddd;
					border-radius: 5px;
					overflow: hidden;

					img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}

				.link{
					margin-left: 10px;

					a{
						display: block;
						background: #004ea2;
						color: #fff;
						padding: 10px 20px;
						border-radius: 5px;
					}
				}
			}
		}

		@media only screen and
		(max-width : 640px) {
			#affiliate section.kline div.klineShop .qrbox{
				margin: 0 0 6vw 0;
				width: auto;

				dt{
					font-size: 1.4rem;
				}

				.flex_box{
					flex-wrap: nowrap;

					.qr{
						width: 60px;
						height: 60px;
					}

					.link{
						font-size: 1.2rem;
					}
				}

			}
		}
		
		#affiliate section.kline div.klineShop > ul{
			float:left;
			padding:10px 0 0 30px;
			width: 440px;
			font-size: 1.4rem;
		}
		#affiliate section.kline div.klineShop > ul li{
			padding-bottom:15px;
		}
		#affiliate section.kline div.klineShop > ul li.shopname{
			font-weight: bold;
			font-size: 1.6rem;
			margin-bottom: 10px;
		}
		
		#affiliate section.kline div.klineShop > ul li.open{
			padding-left:5em;
			text-indent:-5em;
		}
	
		#affiliate section.kline div.klineShop > ul li > dl{
			display:table;
		}
		#affiliate section.kline div.klineShop > ul li > dl > dt,
		#affiliate section.kline div.klineShop > ul li > dl > dd{
			display:table-cell;
		}
		
		#affiliate section.kline div.klineShop > ul li span{
			display:none;
		}
		
		#affiliate section.kline div.klineShop > ul li.catch{
			padding-left:10px;
			background:url(../../images/kline/arrow.png) left 10px no-repeat;
		}
		
		
		#affiliate section.kline div.klineShop > ul li.catch span{
			display:inline-block;
			padding:15px;
			line-height:1.5;
			color:#fff;
			border-radius:5px;
			background:#004ea2;
		}
		

    @media only screen and
    (max-width : 640px) {

        #affiliate{
            padding:10% 1% 15%;
            margin-top: 30px;
        }

        #affiliate > section section{
            padding: 0;
        }
        #affiliate > section + section{
            margin-top: 33px;
        }

        #affiliate section.section + section.section{
            margin-top: 59px;
        }


        #affiliate section ul.itemList{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

            #affiliate section ul.itemList li{
                max-width: 48%;
                margin-bottom: 8px;
            }
                #affiliate section ul.itemList li img{
                    max-width: 100%;
                }

            #affiliate section p.buttonStyle{
                position: relative;
                text-align: center;
                margin: 0;
            }
            #affiliate section p.buttonStyle a{
                width: 100%;
            }
            #affiliate section p.buttonStyle.sns a.m{
                width: 40px;
                position: static;
                margin-top: 10px;
            }

            #affiliate section p.buttonStyle.sns a.instagram{
                margin-left: 0;
                margin-bottom: 0;
            }
            #affiliate section p.buttonStyle.sns a.twitter{
                margin-left: 5px;
                margin-bottom: 0;
            }
            #affiliate section p.buttonStyle.sns a.m span{
                padding: 0;
            }

            #affiliate section p.buttonStyle + p.buttonStyle{
                margin-top: 14px;
            }

					
			/* □ company
			-------------------------------- */
			#affiliate section.company{
				padding:0px 0;
			}
					
				#affiliate section.company .subsection{
					width:auto;
					margin:auto;
					padding:3%
					
				}
				#affiliate section.company .subsection h4{
					margin-bottom:20px;
					font-size: 1.4rem;

					& img{
						height: 1.6rem;
					}
				}


				#affiliate section.company .subsection p.facebook.pc{
					display:none;
				}	
				
				#affiliate section.company .subsection p.facebook.sp{
					display:block;
					margin:4% 0 0 0;
				}
				#affiliate section.company .subsection p.facebook.sp img{
					width:100%;
				}

				#affiliate section.company .subsection .snsbuttons.pc{
					display: none;
				}

				#affiliate section.company .subsection .snsbuttons.sp{
					display: block;
					margin-top: 8px;
				}
				#affiliate section.company .subsection .snsbuttons{
					display: flex;
					justify-content: space-between;
					text-align: center;
					margin: 4px 0 0 0;
					padding-bottom: 17px;
				}
				#affiliate section.company .subsection .snsbuttons li{
					width: 48%;
				}
				#affiliate section.company .subsection .snsbuttons li img{
					width: 100%;
				}
				
					
				#affiliate section.company .subsection p.images{
					float:none;
				}
					
				#affiliate section.company .subsection p.images img{
					width:100%;
					max-width:100%;
				}
					
				#affiliate section.company .subsection table{
					float:none;
					padding-left:0;
					width:100%;
					table-layout:fixed;
				}
					
				#affiliate section.company .subsection table tr,
				#affiliate section.company .subsection table th,
				#affiliate section.company .subsection table td{
					border:1px solid #004ea2;
					padding:0.5em;
					display:block;
				}
				#affiliate section.company .subsection table tr{
					border:none;
					padding:0;
				}
				#affiliate section.company .subsection table th{
					width:auto;
					background:#2775ca;
					color:#fff;
					text-align:center;
				}
				#affiliate section.company .subsection table td{
					background:#fff;
					padding-left:0.5em;
				}
					
				#affiliate section.company .subsection table td span{
					display:block;
				}
					
				#affiliate section.company .subsection table td span.tel-link{
					display:inline-block;
				}
					
					
				#affiliate section.company .subsection div.map{
					clear:both;
					padding-top: 20px;
				}
					
				#affiliate section.company .subsection div.map iframe{
					margin-bottom:0;
				}
					
				#affiliate section.company .subsection div.map p.googlemap{
					text-align:right;
				}
				#affiliate section.company .subsection table td{
					background:#fff;
					padding-left:1em;
					height:auto;
				}
					
				#affiliate section.company .subsection table tr.sp{
					display:none;
				}

	
				#affiliate section.kline div.klineShop{
					padding:20px;
					width:100%;
					box-sizing:border-box;
				}
				
				#affiliate section.kline div.klineShop .images{
					float:none;
					margin:0;
				}
				
				#affiliate section.kline div.klineShop .images p img{
					width:100%;
				}
				
				#affiliate section.kline div.klineShop > ul{
					float:none;
					padding:10px 0 0 0;
					width: 100%;
				}
				#affiliate section.kline div.klineShop > ul li{
					padding-bottom:15px;
				}
			
				#affiliate section.kline div.klineShop > ul li.open{
					padding-left:0;
					text-indent:0;
				}
			
				#affiliate section.kline div.klineShop > ul li > dl{
					display:block;
				}
				#affiliate section.kline div.klineShop > ul li > dl > dt,
				#affiliate section.kline div.klineShop > ul li > dl > dd{
					display:block;
				}
				
				
				#affiliate section.kline div.klineShop > ul li span{
					display:inline;
				}
				
				#affiliate section.kline div.klineShop > ul li.catch{
					padding-left:0;
					background:none;
				}
				
				
				#affiliate section.kline div.klineShop > ul li.catch span{
					display:inline-block;
					padding:15px;
					line-height:1.5;
					color:#fff;
					border-radius:5px;
					background:#004ea2;
				}


    }

/* □ news
-------------------------------- */
#news{
	position:relative;
	background-size:cover;
	z-index:10;
	
}
	
	#news .section{
		padding-top:60px;
	}
	
	#news .section .subsection{
		padding-bottom:60px;
		position:relative;
	}

	#news .section .division{
		max-width: 500px;
		margin: 0 auto;
	}
	#news .section .division.news{
		position:relative;
		width:468px;
		margin-left:0;
	}
	#news .section .division.facebook{
		margin:0 auto;
	}
	
    
	#news .section .division.facebook .snsbuttons{
        display: block;
		text-align:right;
        margin-top: 4px;
        padding-bottom: 17px;
	}
	#news .section .division.facebook .snsbuttons li{
        float: none;
        display: inline-block;
        width: auto;
        height: auto!important;
        margin: 0;
	}
	#news .section .division.facebook .snsbuttons li + li{
        margin-left: 2px;
	}

	#news .section .division.facebook .link{
        clear: both;
		text-align:right;
	}
	
	#news .section .division.facebook .link img{
		width:50%;
	}
	
	#news h2 {
		text-align:left;
		padding-bottom:30px;
	}
	#news p.btn{
		position:absolute;
		top:0px;
		right:0px;
	}
	
	#news ul {
		margin-left:-24px;
	}

	#news ul li {
		width:222px;
		float:left;
		margin-left:24px;
		position:relative;
	}
		
		#news ul li p.new{
			position:absolute;
			top:-15px;
			right:5px;
		}
	
		#news ul li dl dt a{
			font-size:117%;
			color:#009;
			font-weight:700;
			display:inline-block;
			padding-bottom:5px;
		}
	
		#news ul li dl dt span{
			font-size:77%;
			font-weight:normal;
			color:#333;
		}
	
		#news ul li dl dd{
			padding-bottom:5px;
		}
		



section#info{
	background:url(../../images/common/footer/bg.jpg) center center repeat-x ;
	background-size:cover;
	padding-top:60px;
	min-height:548px;
}

div.infoBox{
	width:960px;
	margin:60px auto;
	text-align:center;
	padding:70px 0 45px;
	background-color:rgba(255,255,255,0.6);
	
}

div.infoBox dl dt{
	font-weight:bold;
	padding-bottom:45px;
}

div.infoBox dl dd{
	color:#333;
	font-weight:700;
}

div.infoBox dl dd.footer_description{
	padding-bottom:45px;
}

div.infoBox dl dd span{
	display:none;
}

div.infoBox dl dd.infodetails{
	display:inline-block;
	
}

		
@media only screen and
(max-width : 640px) {
	

/* --------------------------------
   □ サイト情報 (ヘッダー)
-------------------------------- */
header {
    height: auto;
    overflow: visible;
    margin-bottom: -2px;
	background:#fff;
}

header #headerArea {
    clear: both;
    padding: 20px 20px 0;
    position: relative;
    overflow: visible;
}
	
header .inner {
    min-height: 20px;
    text-align: center;
    padding-bottom: 20px;
    overflow: hidden;}

header .inner h1{
	padding-top:0;
	float:left;
	width:90px; 
}

header .inner h1 img{
	width:100%; 
}

header .inner p.catch{
	clear:both;
}


header nav.sp{
	display:none;
	position:absolute;
	top:95px;
	left:0;
	z-index:200;
	background-color:rgba(255,255,255,0.9);
	width:100%;
	text-align:left;
	box-sizing: border-box;
	padding:0;
	border-bottom:3px solid #e4f1ff;
	font-size:83%;
}

header nav ul {
    width: 100%;
    margin:0;
	padding:0;
    display: table;
}

header nav ul li {
    display:block;
    border-right: none;
    border-bottom: 1px solid #d2d2d2;
	box-sizing:border-box;
	padding:0;
}

header nav ul li a{
    display:block;
    padding:3%;
	color:#333;
}

header nav p.close{
	text-align:center;
	margin:0;
}

header nav p.close a{
    display:block;
    padding:3%;
	color:#333;
}


header .inner{
	width:100%;
	
}

header .inner p.banner{
	display:none;
	
}

header .visualArea{
	width:100%;
	min-height:auto;
	text-align:center;
	margin: auto;
	position:relative;
}
header .visualArea .swiper-slide img{
    max-width: 100%;
}

@media only screen and
(max-width : 640px) {
    
header .visualArea .swiper-slide{
    width: 100%!important;
}
    
}


header .visualArea p.accent{
	margin:0;
}

header .visualArea p.accent img{
	width:100%;
	margin:0;
}
header .visualArea p.catch{
    position: absolute;
    top: -10px;
    left: 10px;
	width:8%;
}

header .visualArea p.catch img{
	max-width:100%;
}


header nav ul li:last-child{
	border-right:none;
}


header nav#globalnavi.pc{
	display:none;
}




/* --------------------------------
   □ ページコンテンツ
-------------------------------- */
.contents{
}

	.contents section{
	}



/* □ news
-------------------------------- */
#news{
	position:relative;
	background-size:cover;
	z-index:10;
	
}
	
	#news .section{
		padding-top:30px;
	}
	
	#news .section .subsection{
		padding-bottom:60px;
		position:relative;
	}
	
	#news .section .division{
		float:none;
	}
	#news .section .division.news{
		width:auto;
	}
	#news .section .division.facebook{
		float:none;
		width:auto;
	}
	#news .section .division.facebook p.link{
		text-align:center;
		margin-top:15px;
	}
	#news .section .division.facebook p.link img{
		width:100%;
	}
	
    #news .section .division.facebook .snsbuttons {
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin: 4px 0 0 0;
        padding-bottom: 17px;
    }
    #news .section .division.facebook .snsbuttons li{
        width: 48%;
    }
    #news .section .division.facebook .snsbuttons li img{
        width: 100%;
    }
    
	#news .section .division.facebook .fb-page{
		max-width: 100%;
	}
	
	#news h2 {
		text-align:left;
		padding-bottom:0;
		margin-bottom:20px;
	}
	#news p.btn{
		position: absolute;

		right: 0px;
	}
	
	#news ul.list {
		margin-left:0;
		border-top:1px dashed #ccc;
	}

	#news ul.list li {
		width:100%;
		float:none;
		margin-left:0;
		position:relative;
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom:1px dashed #ccc;
	}
		#news ul.list li img{
			display:none;
		}
		
		#news ul.list li p.new{
			position:absolute;
			top:-15px;
			right:5px;
		}
	
		#news ul.list li dl dt a{
			font-size:117%;
			color:#009;
			font-weight:700;
			display:inline-block;
			padding-bottom:5px;
		}
	
		#news ul.list dl dt span{
			font-size:77%;
			font-weight:normal;
			color:#333;
		}
	
		#news ul.list li dl dd{
			padding-bottom:5px;
		}
		
		
		
		
section#info{
	background:url(../../images/common/footer/bg.jpg) center center repeat-x ;
	background-size:cover;
	padding-top:60px;
	min-height:548px;
}


div.infoBox{
	width:95%;
	margin:60px auto;
	text-align:center;
	padding:70px 0 45px;
	background-color:rgba(255,255,255,0.6);
	
}

div.infoBox dl dt{
	font-weight:bold;
	padding-bottom:45px;
}

div.infoBox dl dd{
	color:#333;
	font-weight:700;
}

div.infoBox dl dd.footer_description{
	display:none;
}

div.infoBox dl dd span{
	display:inline;
}

		
}