@charset "utf-8";

html{
	font-family: "游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"ヒラギノ角ゴ ProN W4","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif,"游明朝";
	}
	
body{
	width:100%;
	margin:0 auto;
	line-break:strict;
	}
	
.clear{
	clear:both;
	}
	
.bp_head{
	width:100%;
	text-align:center;
	}
	
.social_buttons {
  text-align: center;
  position: relative;
  z-index: 1;
  margin:0 0 20px 0;
  padding:0;
}
.social_buttons li {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.social_buttons li .fb_iframe_widget > span{ vertical-align: baseline; margin:0 0 8px 0;}


a:link{
	color:#000000;
	text-decoration:none;
	}
	
a:visited{
	color:#000000;
	}
	
a:hover{
	color:#000000;
	}
	
a:active{
	color:#000000;
	}



img{
	border:0px;
	padding:0;
	margin:0;
	vertical-align:top;
	}	

	
sup,
sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
     
}
 
sup {
    bottom: 0.5ex;
}
 
sub {
    top: .1ex;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    
    
    .header_bg {
        background: #EFEFEF;
        box-sizing: border-box;
    }
    .header_wrap {
        position: relative;
        text-align: center;
        margin: 0 auto;
        width: 100%;
        max-width: 945px;
        padding: 3.035vw 0 2.335vw;
        box-sizing: border-box;
    }
    .header_logo {
        display: inline-block;
        width: 38.548vw;
    }
    .header_logo img {
        width: 100%;
    }
    .header_pr {
        display: inline-block;
        font-size: 0;
        position: absolute;
    	top: 50%;
    	right: 15px;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	width: 8.585%;
    }
    .header_pr img {
        width: 100%;
    }
    
    
    @media screen and (min-width: 440px) {
        .header_wrap {
            padding: 14px 0 10px;
        }
        .header_logo {
            width: 180px;
        }
        .header_pr {
            width: 40px;
        }
    }
    
    
    @media screen and (min-width: 640px) {
        .header_logo {
            width: 277px;
        }
        .header_wrap {
            padding: 15.79px 0 7.59px;
        }
    }
    
    
    
    .ft_line {
        display: inline-block;
        width: 100%;
        height: 1px;
        background: #cdcdcd;
        border: none;
    }
    
    
    
    
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

	
@media print,screen and (min-width:913px) {
	
	
	.sp{
	display:none;
}


/*------------------------------------------------------------------*/
	

#wrap{
	width:100%;
	padding:0 0 0 0;
	background: fixed url("cont_bg.jpg") center center / cover no-repeat;
	}
	
.ttl_zone{
	width: 100%;
	height: 0;
	padding-top: calc(1292/2000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(h1.jpg) center center / cover no-repeat;
	}
	
h1{
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	}

nav{
	width:100%;
	height: 110px;
	margin: 0;
	padding:0;
	background-color: #003350;
	}
	
	ul.nav_box{
		width: 100%;
		max-width:1000px;
		height: 97px;
		margin:0 auto;
		padding: 0;
		list-style: none;
		display: flex;
		text-align: center;
	}
	
	ul.nav_box li{
		width: 320px;
		height: 97px;
		padding:0;
		margin:0 6px;
	}
	
	ul.nav_box li img{
		width: 100%;
		max-width: 320px;
		height: auto;
		padding:0;
		margin:0;
	}
	
	nav a:hover{
		opacity: 0.7;
	}
	
	
	
	
	
	
.read{
	font-size:110%;
	font-weight:bold;
	line-height:1.6;
	margin:0 auto 40px auto;
	}
	
.cont_box{
	width:90%;
	max-width:800px;
	margin:0 auto ;
	padding:40px 50px 20px;
	background-color: #fff;
	}
	
h2{
	z-index: 100;
	width:100%;
	font-size:150%;
	font-weight:bold;
	text-align:center;
	line-height:1.3;
	padding:15px 0 20px;
	margin:0 auto 0 auto;
	color: #fff;
	background-color: rgba(105, 157, 70);
	/*box-shadow: 0 0 15px #505050;*/
	}
	
p.txt{
	font-size:17px;
	line-height:1.6;
	text-indent:1em;
	margin:0 auto 30px;
	}
	
	
p.txt2{
	font-size:17px;
	line-height:1.6;
	text-indent:0;
	margin:0 auto 30px;
	}
	
#qes{
	font-weight: bold;
	color:#138dee;
	margin-top:25px;
	}
	
span.sato{
	font-weight: bold;
	}
	
p.cap{
	font-size:14px;
	line-height:1.3;
	margin:5px auto 30px;
	padding:0;
	}
	
span.big{
	font-size:18px;
	}
	
	
p.cap2{
	font-size:14px;
	line-height:1.3;
	margin:5px auto 30px;
	padding:0;
	}
	
.img01_01{
	width:300px;
	float: right;
	margin: 5px 0 20px 30px;
	}
	
.img_100{
	width:800px;
	margin:40px auto;
	}
	
.img02_01{
	width:800px;
	margin: 40px auto;
	}
	
.img02_01 img{
	max-width: 800px;
	}
	
p.ttl_kanren{
	color: #ffffff;
	background-color: #3682a7;
	text-align: center;
	max-width: 880px;
	margin:50px auto 0;
	padding:7px 0;
	font-size: 100%;
	font-weight: bold;
	}
	
	.kanren{
		background-color: #eee;
		max-width: 798px;
		margin:0 auto 50px;
		padding:20px 0;
	}
	
	ul.ul_kanren{
		margin:0;
	}
	
	.ul_kanren li{
		margin:5px 0;
		padding: 0;
	}
	
	.ul_kanren a{
		color:#138dee;
	}
	
	.ul_kanren a:link{
		text-decoration:underline;
	}
	
	.ul_kanren a:hover{
		color:#000;
		text-decoration: none;
	}
	
	
.link_zone{
	background-color: #003350;
	padding: 30px 0 10px 0;
	}


.banner_zone{
		width:100%;
		max-width:1150px; 
		margin:0 auto;
		padding:0 0 20px;	
	}	

	.banner_ul{
		width:100%;
		max-width: 1180px;
		margin:0 auto;
		padding:0;
		display: flex;
		text-align: center;
	}
	
	.banner{
		margin: 0 15px;
	}
	
	.banner img{
		width:100%;
		max-width: 380px;
	}
	
	.banner a:hover{
	opacity: 0.7;
	}
	
/*---------------------------------*/
	
ul.p_navi{
	width:90%;
	height:36px;
	margin:50px auto 20px auto;
	padding:0 0 0 0;
	list-style:none;
	text-align:center;
	}
	
ul.p_navi li{
	display:inline;
	margin:0 5px;
	padding:0;
	}

.to_top{
	font-size:14px;
	width:100%;
	margin:20px auto;
	text-align:right;
	}
	
.company{
	width:100%;
	margin:10px auto 0;
	text-align:center;
	}
	
.company_ttl{
	width:100%;
	max-width:880px;
	margin:0 auto 10px;
	border-bottom:1px solid #000;
	}	
	
.company_ttl p{
	font-size:100%;
	font-weight:bold;
	padding:0 0 10px 0;
	margin:0;
	}
	
.company_logo{
	width:100%;
	margin:0 auto 0;
	}
	
.company_profile{
	width:100%;
	padding:5px 0 0 0;
	}	
	
.company_profile p{
	font-size:100%;
	font-weight:bold;
	padding:0 0 10px 0;
	margin:0;
	}
	
.company_profile a:link{
	color:#138dee;
	text-decoration:underline;
	}
	
.company_profile a:visited{
	color:#138dee;
	text-decoration:underline;
	}
	
.company_profile a:hover{
	color:#000060;
	text-decoration:none;
	}
	
 }
 
/*---------------------------------*//*---------------------------------*//*---------------------------------*/

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

	
/*--ハンバーガー----------------------------------------------------------------*/


/* ハンバーガーメニューのサイズ(32x32) */
.hamburger-menu{
  vertical-align: center;
  width: 32px;
  height: 32px;
}
/* ハンバーガーメニューの位置と色 */
.menu-btn{
  position:fixed;
  top: 0;
  left: 0;
  display: flex;
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #007a9e;
}
/* メニュー線（本体と before と after で３本表示する） */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{
  /* 20x3 の白線 */
  content: '';
  display: block;
  height: 3px;
  width: 20px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
/* before を少し上にずらして描画 */
.menu-btn span:before{
  bottom: 8px;
}
/* after を少し下にずらして描画 */
.menu-btn span:after{
  top: 8px;
}

/* メニューをオープンしたら三本線を×にする */
#menu-btn-check:checked ~ .menu-btn span{
  /* メニューオープン時は三本線の真ん中の線を透明にする */
  background-color: rgba( 255, 255, 255, 0 ); 
}
#menu-btn-check:checked ~ .menu-btn span::before{
  /* メニューオープン時は三本線の上の線を 45 度傾ける */
  bottom: 0;
  transform: rotate( 45deg ); 
}
#menu-btn-check:checked ~ .menu-btn span::after{
  /* メニューオープン時は三本線の下の線を -45 度傾ける */
  top: 0;
  transform: rotate( -45deg ); 
}
/* チェックを非表示にする */
#menu-btn-check{
  display: none;
}

/* メニュー装飾 */
.menu-content{
  width: 60%;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%; /* メニューを画面外へ */
  z-index: 80; /* 下のコンテンツの上にかぶせて表示する */
  background-color: #007a9e;
  transition: all 0.5s; /* 0.5秒かけてアニメーションで出し入れする */
}
.menu-content ul{
  padding: 70px 10px 0;
}
.menu-content ul li{
  border-bottom: solid 1px #ffffff; /* メニューアイテムの区切り線 */
  list-style: none;
	font-size: 15px;
	color: #ffffff;
	padding: 9px 15px 10px 0;
}
.menu-content ul li a{
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  text-decoration: none;
  color: #ffffff;
  position: relative;
}

/* メニューの出し入れ */
#menu-btn-check:checked ~ .menu-content{
  left: 0;  /* チェックされたら画面内へ */
}



	
/*--▲ハンバーガー----------------------------------------------------------------*/	
	

body img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

	
sup,
sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
     
}
 
sup {
    bottom: 0.5ex;
}
 
sub {
    top: 0.5ex;
}

.pc{
	display:none;
}


.ttl_zone{
	width:100%;
	height:auto;
	margin:0 auto 0 auto;
	}

.read{
	font-size:100%;
	font-weight:bold;
	width:90%;
	line-height:1.6;
	margin:0 auto 3%;
	}
	
#wrap{
	width:100%;
	margin:0 auto;
	}
	
h2{
	width:100%;
	font-size:130%;
	font-weight:bold;
	text-align:center;
	line-height:1.3;
	padding:15px 0 10px 0;
	margin:0 auto 20px;	
	z-index: 100;
	color: #fff;
	background-color: rgba(105, 157, 70);
	}
	
p.txt{
	width:90%;
	font-size:100%;
	line-height:1.6;
	text-indent:1em;
	margin:0 auto 4%;
	padding:0;
	}
	
p.txt2{
	width:90%;
	font-size:100%;
	line-height:1.6;
	text-indent:0;
	margin:0 auto 4%;
	padding:0;
	}
	
#qes{
	font-weight: bold;
	color:#138dee;
	margin-top:4%;
	}
	
span.sato{
	font-weight: bold;
	}
	
p.cap{
	font-size:80%;
	width:100%;
	line-height:1.2;
	margin:2% auto 7%;
	padding:0;
	}
	
p.cap2{
	width:90%;
	font-size:80%;
	line-height:1.2;
	margin:2% auto 7%;
	padding:0;
	}
	
span.big{
	font-size:120%;
	}
	
.img01_01{
	float:right;
	width:40%;
	margin: 1% 5% 5% 5%;
	}

.img_100{
	width:90%;
	margin:7% auto;
	}
	
.img01_03{
	width:40%;
	float: right;
	margin: 1% 6% 5% 5%;
	}
	
.img02_01{
	width:90%;
	margin:7% auto;
	}
	
.link_zone{
	background-color: #003350;
	padding: 5% 0;
	}
	
p.ttl_kanren{
	color: #ffffff;
	background-color: #3682a7;
	text-align: center;
	width: 90%;
	margin:30px auto 0;
	padding:7px 0;
	font-size: 100%;
	font-weight: bold;
	}
	
	.kanren{
		background-color: #eee;
		width: 90%;
		margin:0 auto 30px;
		padding:10px 0;
	}
	
	ul.ul_kanren{
		margin:0;
		padding:0 10%;
	}
	
	.ul_kanren li{
		margin:5px 0;
		padding: 0;
	}
	
	.ul_kanren a{
		color:#138dee;
	}
	
	.ul_kanren a:link{
		text-decoration:underline;
	}
	
	.ul_kanren a:hover{
		color:#000;
		text-decoration: none;
	}
	



	
ul.p_navi{
	width:auto;
	height:36px;
	margin:30px auto 20px auto;
	padding:0 0 0 0;
	list-style:none;
	text-align:center;
	}
	
ul.p_navi li{
	display:inline;
	margin:0 5px;
	padding:0;
	}

.to_top{
	font-size:14px;
	width:90%;
	margin:20px auto;
	text-align:right;
	}
	
	
.company{
	width:100%;
	margin:30px auto;
	text-align:center;
	}
	
.company_ttl{
	width:90%;
	max-width:800px;
	margin:0 auto 10px;
	border-bottom:1px solid #000;
	}	
	
.company_ttl p{
	font-size:100%;
	font-weight:bold;
	padding:0 0 10px 0;
	margin:0;
	}
	
.company_logo{
	width:100%;
	margin:0 auto 0;
	}
	
.company_profile{
	width:100%;
	padding:5px 0 0 0;
	}	
	
.company_profile p{
	font-size:100%;
	font-weight:bold;
	padding:0 0 5px 0;
	margin:0;
	}
	
.company_profile a:link{
	color:#138dee;
	text-decoration:underline;
	}
	
.company_profile a:visited{
	color:#138dee;
	text-decoration:underline;
	}
	
.company_profile a:hover{
	color:#000060;
	text-decoration:none;
	}
	
}