@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:20px;
	right:0;
	
}

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;
        }

    @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;
            }

    }

/* □ 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{
		float:left;
	}
	#news .section .division.news{
		position:relative;
		width:468px;
		margin-left:0;
	}
	#news .section .division.facebook{
		float:right;
	}
	
    
	#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{
		display:none;
	}
	
	#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;
}

		
}