@charset "UTF-8";

/* ------------------------------------------------------------------------------------------------------------------------------------
common
------------------------------------------------------------------------------------------------------------------------------------ */
.pc_only { display: block; }
.sp_only { display: none !important; }

@media screen and (max-width:768px) {
.pc_only { display: none; }
.sp_only { display: block !important; }
}



/* ------------------------------------------------------------------------------------------------------------------------------------
header
------------------------------------------------------------------------------------------------------------------------------------ */
@media all and (min-width: 320px) {
  /* header */
  #section_header::after { display: block; content: ""; width: 100%; height: 2px; background: linear-gradient(to right, #5bade1 0%, #49d18b 50%, #38b33b 100%);}
  #area_header { overflow-x: hidden; width: 100%; background: #fff; font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
  
  /* header_top */
	#area_header .header_top { display: flex; justify-content: space-between; width: 100%; padding: 13px 10px 6px 13px; box-sizing: border-box;}
  #area_header .header_top h1 img { width: 88px; height: auto;}
  #area_header .header_top p img { width: auto; height: 30px;}

	/* btn_menu */
  #area_header p.btn_menu { position: fixed; top: 60px; right: 5px; z-index: 99; width: 74px;}
  #area_header p.btn_menu img { width: 100%; height: auto;}
  
	/* gmenu */
	#gmenu { position: fixed; width: 100%; top: 60px; z-index: 100; transform: translateX(100%); background: #fff;}
	#gmenu .btn_close { margin: 15px 0; padding-right: 25px; text-align: right;}
  #gmenu .btn_close img { width: 30px; height: auto;}
  #gmenu .inner ul.glbnav li { width: 100%; box-sizing: border-box;}
  #gmenu .inner ul.glbnav li:first-child::before { content: ""; display: block; width: 100%; height: 1px; background: linear-gradient(to right, #5bade1 0%, #49d18b 50%, #38b33b 100%);}
  #gmenu .inner ul.glbnav li::after { content: ""; display: block; width: 100%; height: 1px; background: linear-gradient(to right, #5bade1 0%, #49d18b 50%, #38b33b 100%);}
	#gmenu .inner ul.glbnav li a { display: block; width: 100%; margin: 0 25px; padding: 15px 20px; background: url("../images/common/cmn_gnav_arrow.png") left center no-repeat; background-size: 15px auto; text-decoration: none; color: #333; font-size: 15px; box-sizing: border-box;}
}


@media all and (min-width: 1025px) {
  /* header */
  #section_header::after { height: 4px;}
  #area_header { position: relative; display: flex; justify-content: space-between; width: 1200px; margin: 0 auto;}
  
  /* header_top */
  #area_header .header_top { display: flex; justify-content: space-between; align-items: normal; width: 100%; padding: 20px 0 9px; box-sizing: border-box;}
  #index #area_header .header_top { padding: 20px 0 13px;}
  #area_header .header_top h1 img { width: 177px; height: auto; padding-top: 5px;}
  #area_header .header_top p img { width: 171px; height: auto}
  
  /* nav */
  #area_header .nav { display: block; position: absolute; top: 0;}

  /* btn_menu */
	#area_header p.btn_menu {display: none;}
	
  /* glbmenu */
	#gmenu { position: absolute; top: 37px; left: 0; right: 0; margin: auto; transform: translateX(0); width: 750px;}
  #gmenu .btn_close { display: none;}
  #gmenu .inner ul.glbnav { display: flex; justify-content: space-between;}
  #gmenu .inner ul.glbnav li { display: inline-block; width: auto;}
  #gmenu .inner ul.glbnav li:first-child::before,
  #gmenu .inner ul.glbnav li::after { display: none;}
  #gmenu .inner ul.glbnav li a { width: auto; margin: 0; padding: 0 30px 0 0; min-height: 18px; background: url("../images/common/cmn_gnav_arrow.png") right 5px top no-repeat; line-height: 1.5; font-size: 14px;}
}



/* ------------------------------------------------------------------------------------------------------------------------------------
footer
------------------------------------------------------------------------------------------------------------------------------------ */
#footer { padding: 50px 0 43px; background: linear-gradient(to right, #5bade1 0%, #8ac457 50%, #008b3e 100%); text-align: center; color: #fff; line-height: 1; font-size: 13px; font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
#footer .ttl { margin-bottom: 20px; font-weight: bold; font-size: 30px;}
#footer .inq { margin-bottom: 20px;}
#footer .inq strong { font-weight: bold;}
#footer .inq a { color: #fff; text-decoration: underline;}
#footer ul.menu { display: flex; justify-content: center; margin-bottom: 25px;}
#footer ul.menu li { padding: 0 18px; border-left: solid 1px #fff;}
#footer ul.menu li:first-child { border-left: none;}
#footer ul.menu li a { color: #fff; text-decoration: none;}
#footer ul.sns { display: flex; justify-content: center;}
#footer ul.sns li { margin: 0 3px;}

@media screen and (max-width:768px) {
  #footer { padding: 25px 0 30px; font-size: 14px;}
  #footer .ttl { margin-bottom: 20px; font-weight: bold; font-size: 20px;}
  #footer .inq { margin-bottom: 30px;}
  #footer .inq strong { display: block; margin-bottom: 5px;}
  #footer .inq span { display: none;}
  #footer ul.menu { display: block; margin-bottom: 15px;}
  #footer ul.menu li { display: inline-block; margin-bottom: 7px; border: none;}
  #footer ul.menu li:first-child { border-right: solid 1px #fff;}
}



/* ------------------------------------------------------------------------------------------------------------------------------------
copyright
------------------------------------------------------------------------------------------------------------------------------------ */
.copyright { padding: 20px 0; text-align: center; color: #8ac457; font-weight: bold; font-size: 13px;}



/* ------------------------------------------------------------------------------------------------------------------------------------
block_pagetop
------------------------------------------------------------------------------------------------------------------------------------ */
.area_pagetop { position: fixed; right: 10px; bottom: 10px; z-index: 100;}

@media screen and (max-width:768px) {
  .area_pagetop { width: 60px;}
}



/* end css
------------------------------------------------------------------------------------------------------------------------------------ */