@charset "UTF-8";

/*
 *
 *  koshigayan web site
 *
 */
 
 
 /*=========================================================
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


   全デバイス共通
   
   
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲   
=========================================================*/

/*=========================================================

* body

==========================================================*/
body {
	font-size:90%;
	font-size: 85%\9;
	height: 100%;
	color:#000;
	font-family: "メイリオ", Meiryo,Sans-Serif,'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic";
	background-color: #fff;
	line-height: 1.5;
	letter-spacing: 0.1em;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*=========================================================

* link

==========================================================*/
a{
	outline: none;
}

a:link,
a:visited {
	color: #7f7f7f;
	text-decoration:underline;
}

a:hover,
a:active {
	color:#333333;
	text-decoration:underline;
}

a img, fieldset, img {
	border:none;
}



/*=========================================================

* header

==========================================================*/
#hdr_w{
	max-width: 980px;
	margin:0 auto 1%;	
}


#header{
    height:0;
    padding-top:16.326%; /* (高さ÷幅×100)  160px÷980px×100=16.326..% */
    background:url(../images/hdrBg_new.jpg) no-repeat center top;
    background-size:contain;
	position: relative;
}

h1 #logo{
	position: absolute;
    top: 0;
    left: 3%;
	width:40%;
	max-width : 900px;
	margin :1.5% auto 0;
}

h1 #logo img{
	width:100%;
	height:auto;
}

h1 #logo a:hover {
	opacity:0.7;	
}


/*=========================================================

* content

==========================================================*/
#content{
	width:100%;
	max-width : 980px;
	margin :0 auto 0;
	padding: 0;
}


/*=========================================================

* footer 

==========================================================*/
#ftr_w{
	max-width: 980px;
	margin:0 auto;	
}



#footer{
    height:0;
    padding-top:28.571%; /* (高さ÷幅×100)  280px÷980px×100=28.571...% */
    background:url(../images/footer_new.jpg) no-repeat center bottom;
    background-size:contain;
    margin-top: -8%;
}




/*=========================================================

* common

==========================================================*/
.main{
	width:100%;
	max-width : 900px;
	margin :0 auto 0;
}

p{
    padding: 0 1%;
    text-align: left;
}

.photo{
	width:100%;
	max-width :900px;
	margin:3% auto;
}

.photo ul li{
	float:left;
	width:48%;
	margin:0.5%;
}

.photo ul li img{
	width:100%;
	height:auto;
}

h3{
    font: bold normal 18px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    color: #589C12;
}

h3 img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:3% 0;
}

.textImg01{
	text-align:left;
}

.textImg01 img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
}

.textImg02{
	text-align:left;
}

.textImg02 img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:3% 0;
}



.font-s{
	font-size: 80%;
}

.form-btn{
    width:100%;
    font-size:100%;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#00afcc;
    border-radius:5px;
    margin: 4% auto 0;
}

.form-btn a{
	color: #fff;
	text-decoration: none;
}
.form-btn a:hover{
	opacity:0.7;
}

/*=========================================================

* index

==========================================================*/

#topimg{

}

#topimg img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}

#topimg p{
    margin: 3% 0;
    text-align: center;
}

.topCatch_pc{
	display: none;
}

.topCatch_sp {
	display: block;
	text-align:left;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}

.topTxt_pc {
	display: none;
}

.topTxt_sp{
	text-align:center;
	color: #d65013;
	margin: 0 0 3% 0;
}


/*=========================================================

* ftr_link

==========================================================*/
#ftr_link{
	width:100%;
	max-width : 800px;
	margin-top: 10%;
}

#ftr_link li{
	float:left;
	margin:0 1% 0 0;
	width:20%;
}

#ftr_link li img{
	width:100%;
	height:auto;
}

#ftr_link a:hover{
	opacity:0.7;
}

/*=========================================================

* staff 

==========================================================*/
.staffTxt_pc {
	display: none;
}

.staffTxt_sp{
    color: #c20050;
    font-size: 110%;
    margin: 0 0 3% 0;
}

.staffTxt_pc2 {
	display: none;
}
.staffTxt_sp2{
	text-align:left;
	color: #c20050;
	font-size: 110%;
	margin: 3% 0;
}


/*=========================================================

* member

==========================================================*/
.memberLink_pc {
	display: none;
}
.memberLink_sp{
	text-align:center;
}

.memberLink_sp img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:3% 0;
}

.memberTxt_pc {
	display: none;
}

.memberTxt_sp{
	text-align:left;
	color: #14834e;
	font-size: 110%;
	margin: 0 0 3% 0;
}



/*=========================================================

* trial

==========================================================*/
.trialTxt_pc {
	display: none;
}

.trialTxt_sp{
	text-align:left;
	margin: 0 0 3% 0;
}

.trialTxt_sp #trialTxt1{
	color: #1d2080;
}

.trialTxt_sp #trialTxt2{
	color: #d41021;
	font-size: 140%;
}

.trialTxt_sp #trialTxt3{
	color: #0c65a9;
}

.trialTxt_sp #trialTxt4{
	color: #800780;
}


.trialImg{
	text-align:center;
}

.trialImg img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 1% 0;
}

#trialTxt5{
	color: #008d85;
	font-size: 110%;
	margin: 2% 0;
}


/*=========================================================

* lectuer

==========================================================*/
.lectuerArea{
    width: 100%;
    max-width : 900px;
    margin: 0 0 6% 0;
    text-align: center;

}

.lectuerImg{
	float:left;
	width:20%;
	max-width: 142px;
}

.lectuerImg img {
	width:100%;
	height:auto;
}


.lectuerTxt{
    float: left;
    width: 76%;
    margin: 0;
    font-size: 90%;
    text-align: left;
}


.lectuerName{
    font-size: 115%;
    font-weight: bold;
}



/*=========================================================

* gallery

==========================================================*/

h4{
	padding:2% 0 1% 2%;
	text-align: left;
	font-size:110%;
	color:#cf007f;
	font-weight: bold;
}  

ul#galleryArea{
	width:100%;
	max-width :880px;
	margin: 0 auto 5%;
}

ul#galleryArea li{
	float:left;
	display:block;
	width:47%;
	margin:1%;
}


ul#galleryArea img{
	width:100%;
	overflow: hidden;
	height:auto;
}	
	
/*=========================================================

* story

==========================================================*/
#storyimg{
	text-align:center;
}

#storyimg img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}

.story_pc{
	display: none;
}

.story_sp {
	display: block;
	text-align:center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    padding: 0;
}	

#story_ttl{
	margin-left: 5%;
}

/*=========================================================

* media

==========================================================*/
#media{
	border: 1px solid #00803a;
	padding: 2% 12%;
	max-width: 900px;
	margin: 0 3% 7% 3%;
	list-style-type:circle;
}
 
#media li{
    margin-bottom: 3%;
    text-align: left;
}

.mediaTxt_pc {
	display: none;
}

.mediaTxt_sp{
	text-align:left;
	color: #00803a;
	font-size: 110%;
	margin: 0 0 1% 3%;
}

.mediaTxt_sp2{
	text-align:left;
	color: #d01373;
	font-size: 110%;
	margin: 0 0 1% 3%;
}

/*=========================================================

* contact

==========================================================*/
.contact{
	border: 1px solid #00afcc;
	padding: 2%;
	max-width: 900px;
	margin: 1% 3% 10% 3%;
	text-align: center;	
}

 
/*=========================================================
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


   SP
   
   
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲   
=========================================================*/
@media screen and (max-width: 767px) {
    /*　画面サイズが767pxまではここを読み込む　*/

/*=========================================================

* header

==========================================================*/
body.Android #logo a {
    padding-top: 1%;
    display: block;

}

/*=========================================================

* menu

==========================================================*/
#menu_pc{
	display: none;
}
.js #menu {
	display:none;
}
.js .slicknav_menu {
	display:block;
	position: absolute;
    top: 0;
	right:0;
    z-index: 1;
}
.js .slicknav_menu a {
	text-decoration: none;
}


/*=========================================================

* contact

==========================================================*/
.contact{
	border: 1px solid #00afcc;
	padding: 2%;
	max-width: 900px;
	margin: 1% 1% 10% 1%;
	text-align: center;	
}

/*=========================================================

* media

==========================================================*/
#media{
	border: 1px solid #00803a;
	padding: 2% 1% 2% 8%;
	max-width: 900px;
	margin: 0 1% 7% 1%;
	list-style-type:circle;
}
 
/*=========================================================

* ftr_link

==========================================================*/

#ftr_link li{
	float:left;
	margin:0 1% 0 0;
	width:25%;
}







}
/* @media おわり */


/*=========================================================
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


	Tablet
   
   
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲   
=========================================================*/
@media screen and (min-width:768px) and (max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/

/*=========================================================

* header

==========================================================*/

h1 #logo{
	position: absolute;
    top: 0;
    left: 3%;
	width:35%;
	max-width : 900px;
	margin :1.5% auto 0;
}

h1 #logo img{
	width:100%;
	height:auto;
}

h1 #logo a:hover {
	opacity:0.7;	
}


/*=========================================================

* common

==========================================================*/	
.photo{
	width:100%;
	max-width :900px;
	margin:3% auto;
}

.photo ul li{
	float:left;
	width:24%;
	margin:0 0.5%;
}

.photo ul li img{
	width:100%;
	height:auto;
}	

.form-btn{
    width:45%;
    font-size:100%;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
    margin: 3% auto 0;
}

.form-btn a{
	color: #fff;
	text-decoration: none;
}
.form-btn a:hover{
	opacity:0.7;
}

/*=========================================================

* index 

==========================================================*/	

.topCatch_sp{
	display: none;
}

.topCatch_pc {
	display: block;
	text-align: center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}	

.topTxt_sp{
	display: none;
}

.topTxt_pc {
	display: block;
	text-align: center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
}
/*=========================================================

* sns

==========================================================*/	
#sns{
	width:100%;
	max-width : 800px;
	margin: 5% 0 5% 1%;
}

#sns ul li{
	float:left;
	margin:0 1%;
}

#sns ul li#fb,#sns ul li#tw{
	width:10%;
}

#sns ul li#sns_txt{
	width:60%;
}

#sns ul li img{
	width:100%;
	height:auto;
}

#sns a:hover{
	opacity:0.7;
}

/*=========================================================

* member

==========================================================*/
.memberLink_sp {
	display: none;
}
.memberLink_pc{
	text-align:center;
	display: block;
}

.memberLink_pc img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:3% 0;
}

/*=========================================================

* media

==========================================================*/
.mediaTxt_sp{
	display: none;
}

.mediaTxt_sp2{
	display: none;
}

.mediaTxt_pc {
	display: block;
	text-align:left;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 1% 3%;
}
	
/*=========================================================

* gallery

==========================================================*/

ul#galleryArea{
	width:100%;
	max-width :880px;
	margin: 0 auto 5%;
}

ul#galleryArea li{
	float:left;
	display:block;
	width:22%;
	margin:1%;
}


ul#galleryArea img{
	width:100%;
	overflow: hidden;
	height:auto;
}	
	
/*=========================================================

* menu

==========================================================*/
.slicknav_menu {
	display:none;
}

#menu_sp{
	display: none;
}

#menu_pc{
	width:100%;
	max-width : 895px;
	margin :0 auto;
	display: block;
}

#menu_pc ul{
	margin-left:3%;
}

#menu_pc ul li{
	float:left;
	width:11%;
	margin:0 0.7%;
}

#menu_pc ul li img{
	width:100%;
	height:auto;
}

#menu_pc a:hover{
	opacity:0.7;
}

/*=========================================================

* story

==========================================================*/
.story_sp{
	display: none;
}

.story_pc {
	display: block;
	text-align:center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
    padding: 0;
}	




/*=========================================================

* ftr_link

==========================================================*/
#ftr_link li{
	float:left;
	margin:0 2%;
	width:18%;
}

		

}
/* @media おわり */



/*=========================================================
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


	PC
   
   
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲   
=========================================================*/
@media only screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/	

/*=========================================================

* header

==========================================================*/

h1 #logo{
	position: absolute;
    top: 0;
    left: 3%;
	width:35%;
	max-width : 900px;
	margin :1.5% auto 0;
}

h1 #logo img{
	width:100%;
	height:auto;
}

h1 #logo a:hover {
	opacity:0.7;	
}


/*=========================================================

* common

==========================================================*/	
.photo{
	width:100%;
	max-width :900px;
	margin:3% auto;
}

.photo ul li{
	float:left;
	width:24%;
	margin:0 0.5%;
}

.photo ul li img{
	width:100%;
	height:auto;
}	

.form-btn{
    width:37%;
    font-size:100%;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
    margin: 2% auto 0;
}

.form-btn a{
	color: #fff;
	text-decoration: none;
}
.form-btn a:hover{
	opacity:0.7;
}

/*=========================================================

* index 

==========================================================*/	

.topCatch_sp{
	display: none;
}

.topCatch_pc {
	display: block;
	text-align: center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}	

.topTxt_sp{
	display: none;
}

.topTxt_pc {
	display: block;
	text-align: center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
}

/*=========================================================

* sns

==========================================================*/
#sns{
	width:100%;
	max-width : 800px;
	margin: 5% 0 5% 1%;
}

#sns ul li{
	float:left;
	margin:0 1%;
}

#sns ul li#fb,#sns ul li#tw{
	width:10%;
}

#sns ul li#sns_txt{
	width:60%;
}

#sns ul li img{
	width:100%;
	height:auto;
}

#sns a:hover{
	opacity:0.7;
}	

/*=========================================================

* staff 

==========================================================*/	
.staffTxt_sp{
    display: none;
    text-align: left;
}

.staffTxt_pc {
	display: block;
	text-align:left;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
}	

.staffTxt_sp2{
	display: none;
}

.staffTxt_pc2 {
	display: block;
	text-align:left;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:3% 0;
}	
	
/*=========================================================

* member

==========================================================*/
.memberLink_sp {
	display: none;
}
.memberLink_pc{
	text-align:center;
	display: block;
}

.memberLink_pc img {
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:3% 0;
}
	
.memberTxt_sp{
	display: none;
}

.memberTxt_pc {
    display: block;
    text-align: center;
    max-width: 100%; /* 画像の最大幅 */
    width /***/: auto; /* IE8のみ */
    height: auto;
    vertical-align: bottom;
    margin-right: auto;
    margin-left: auto;
}	
/*=========================================================

* story

==========================================================*/
.story_sp{
	display: none;
}

.story_pc {
	display: block;
	text-align:center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
    padding: 0;
}	


/*=========================================================

* trial

==========================================================*/
.trialTxt_sp{
	display: none;
}

.trialTxt_pc {
	display: block;
	text-align:center;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 3% 0;
}	

/*=========================================================

* media

==========================================================*/
.mediaTxt_sp{
	display: none;
}

.mediaTxt_sp2{
	display: none;
}

.mediaTxt_pc {
	display: block;
	text-align:left;
    max-width:100%; /* 画像の最大幅 */
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
    margin:0 0 1% 3%;
}



/*=========================================================

* gallery

==========================================================*/

ul#galleryArea{
	width:100%;
	max-width :880px;
	margin: 0 auto 5%;
}

ul#galleryArea li{
	float:left;
	display:block;
	width:22%;
	margin:1%;
}
ul#galleryArea img{
	width:100%;
	overflow: hidden;
	height:auto;
}	


/*=========================================================

* menu

==========================================================*/
.slicknav_menu {
	display:none;
}

#menu_sp{
	display: none;
}

#menu_pc{
	width:100%;
	max-width : 895px;
	margin :0 auto;
	display: block;
}

#menu_pc ul{
	margin-left:3%;
}

#menu_pc ul li{
	float:left;
	width:11%;
	margin:0 0.7%;
}

#menu_pc ul li img{
	width:100%;
	height:auto;
}

#menu_pc a:hover{
	opacity:0.7;
}

	
	
}
/* @media おわり */