@import "../js/nav/styles.css";

/* もとは 730px */
@media only screen and (max-width:800px){	
#device { display:block;}
#device p.pc_btn { display:none;}
#device p.sp_btn {display:block; }
}

/* もとは 700px */
@media only screen and (max-width:770px){

body { min-width:360px; font-size:100%;}
/* body {width:fit-content; min-width:360px; font-size:100%;} */

#header { display:none;}
#content{ width:100%;}
#footer { width:100%;}

#wrapper { background:#FFF; border-top:none; overflow:hidden;}
#base { width:100%; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}

#device p.pc_btn { display:block !important;}
#device p.sp_btn { display:none !important;}

/*====================================================================================================
  HEADER
====================================================================================================*/

#header {}

/*====================================================================================================
  CONTENT
====================================================================================================*/

#content { padding:5% 0;}
#content .cont_main { float:none; width: 100%;}
#content .cont_side { display: none;}


/*====================================================================================================
  FOOTER
====================================================================================================*/

#footer { color: #FFF;}
#footer .f_box { padding:10% 5%;}
#footer .f_box::after { display: none;}

/* LOGO */
#footer .logo { float:none; width:100%; font-size: 120%; text-align: center;}

/* ADDRESS */
#footer .add {  float:none; width:100%; font-size: 90%; text-align: center;}
#footer .add a { color: #fff; text-decoration: none;}

/* NAV */
/* #footer ul.f_nav { display: none;} */
#footer ul.f_nav li a { color: #FFF;  background: url(../img/arrow_w.png) no-repeat left center;background-size: auto 10px;} 
#footer ul.f_nav li a:hover { color: #FFF !important; } 


/* COPYRIGHT */
/* #footer .copy { color: #555; background: #fff;} */
#footer .copy { clear:both; color: #FFF; background: #fff; }
	
/*====================================================================================================
  PAGE
====================================================================================================*/

#page { bottom:20px; right: 20px;}

/*====================================================================================================
  TOP PAGE
====================================================================================================*/
#toppage { padding: 0;}

/*** MAINIMG ***********************************************************/
#toppage .mainimg {}


/*** ATTENTION ********************************************************/
.attention { padding: 5%;}
.attention h2 { padding: 0 0 5%;}
.attention h2::after { display: none;}
.attention h2 a { top: 0; }
.attention .attention_box { padding: 0;}
.attention .attention_box dl { padding: 10px 30px 10px 20px;  background: url(../img/arrow_r_sm.png) no-repeat 96% center; background-size: 30px auto; }
.attention .attention_box dl::after {display: none; }
.attention .attention_box dt { float: none; width:100%; background:none;}
.attention .attention_box dd { float: none; width:100%;}


/*** TOPICS *************************************************************/
#toppage .topics { margin-bottom:0; padding:7% 5%; background: #f6f6f6; border-top:1px solid #ddd;}
#toppage .topics h3 { padding: 0 0 5%;}
#toppage .topics h3::after { display: none;}
#toppage .topics h3 a { top: 0; }
#toppage .topics .topics_box {}
#toppage .topics .topics_box::after { display: none;}
#toppage .topics .topics_box dl {  float:none; width: 100%; padding: 5%; background: #fff; border:5px solid #eee;}
#toppage .topics .topics_box dl::after { /*float_clear*/ display:block; clear:both; content:"";}

#toppage .topics .topics_box dl:nth-child(even) {margin: 3% 0 0;}

#toppage .topics .topics_box dl+dl {margin: 3% 0 0;}
#toppage .topics .topics_box dt { float: left; width: 45%;}
#toppage .topics .topics_box dd { float: right; width: 50%; padding: 0; line-height: 120%;}


/*** NEWS **************************************************************/
#toppage .news { padding:7% 5%; border-top:1px solid #ddd;}
#toppage .news h3 { padding: 0 0 5%;}
#toppage .news h3::after { display: none;}
#toppage .news h3 a { top: 0; }
#toppage .news .news_box {border-top:1px solid #ddd;}
#toppage .news .news_box dl { padding: 15px 20px; border-bottom:1px solid #ddd;}
#toppage .news .news_box dl { padding: 10px 40px 10px 20px;  background: url(../img/arrow_g_sm.png) no-repeat 96% center; background-size: 30px auto; }
#toppage .news .news_box dl::after {display: none; }
#toppage .news .news_box dt { float: none; width:100%; background:none;}
#toppage .news .news_box dd { float: none; width:100%;}


/*====================================================================================================
  SUB PAGE
====================================================================================================*/

#subpage { margin: auto; width:90%;}

/* TITLE */
h1.sb_tit {
	display:block;
	padding:7%;
	font-size:150%;
	color:#FFF;
	text-align:center;
	line-height:100%;
}

/* PAN */
.pan { display:none;}

/* MENU LIST */
#subpage .list {}
#subpage .list p {}
#subpage .list p a {
	padding: 5%;
	padding-right:50px;
	font-size: 100%;
	background-size: 30px auto;
}


/* MIDASHI */
/* #subpage h2 { margin:20px 2%; font-size:120%; color: #fff; border: none;} */
#subpage h2 { margin:20px 0; font-size:120%; color: #fff; border: none;}

/* COMMON */
#subpage .comment { margin:0 2% 20px;}

/* PHOTO */
#subpage .photo-l,
#subpage .photo-r,
#subpage .photo-c { clear:both; float:none; text-align:center; margin:0 0 10px;}
#subpage .photo-l img,
#subpage .photo-r img,
#subpage .photo-c img { width:100%; height:auto;}
#subpage .photo-l2 { float:none;}
#subpage .photo-r2 { float:none;}
#subpage .photo-l2 p { float:left; width:48%; margin:0 1%;}
#subpage .photo-r2 p { float:left; width:48%; margin:0 1%;}
#subpage .photo-l2 img,
#subpage .photo-r2 img { width:100%; height:auto;}
#subpage .caption {}

/* LIST */
#subpage ul {}
#subpage ul li {}
#subpage ol {padding-left: 5%;}
#subpage ol li { }


/* HYOU */
/*
#subpage table {}
#subpage table th,
#subpage table td {
	table-layout:auto !important;
	display:block !important;
	padding:5px 5% !important;
	width:90% !important;
	height:auto !important;
	text-align:left;
	font-weight:normal;
}
*/

/* HYOU */
#subpage table {}
#subpage table th,
#subpage table td {
	table-layout:auto !important;
	//display:block !important;
	//padding:5px 5% !important;
	//width:90% !important;
	height:auto !important;
	text-align: center;
	font-weight:normal;
	line-height:1.9rem;
	font-size:0.83rem;
}


/* LINK */
#subpage .icon-pdf,
#subpage .icon-word,
#subpage .icon-excel,
#subpage .icon-link {}


/*---------------------------------------------------------------------------
  BOX
---------------------------------------------------------------------------*/

/* BOX1 */
#subpage .box1 {margin:0 2% 20px;}
#subpage .box1:after { display:none;}

/* BOX2 */
#subpage .box2 {margin:0 2% 20px;}
#subpage .box2:after { display:none;}
#subpage .box2 h3 { margin:10px 0; font-size:120%;}

/* BOX3 */
#subpage .box3 {margin:0 2% 20px;}
#subpage .box3:after { display:none;}

/* BOX4 */
#subpage .box4 {}
#subpage .box4:after { display:none;}
#subpage .box4 .box { float:none; width:96%; margin:0 2% 20px;}
#subpage .box4 p { padding:10px 0 0 !important; }
#subpage .box4 .bo a {font-size:100%;}

#subpage img {
	max-width:100%;
}


div #map.map {
    width: -moz-available;
    width: -webkit-fill-available;
}

#page a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   tap-highlight-color: rgba(0, 0, 0, 0);
   -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

#subpage textarea#idtxtdtl {
     width: 17.725rem;
}

.mail_table table{}
.mail_table table th,
.mail_table table td {
      table-layout:auto !important;
      display:block !important;
      padding:0.5rem 1rem !important;
      width:24rem; !important;
      height:auto !important;
      text-align:left;
      font-weight:normal;
      line-height:3rem;
      font-size:1.2rem;
      width: 18.75rem;
}
}

@media only screen and (min-width:490px){

.mail_table table td,
.mail_table table th {
      width: 36.75rem;
}

#subpage textarea#idtxtdtl {
      width:29.45rem;
}
}