﻿@charset "utf-8";
/* CSS Document */


/*
display
visibility
overflow
position
top / right / bottom / left /
z-index
float
clear
width ( min-width / max-width )
height ( min-height / max-height )
margin ( margin-top / margin-right / margin-bottom / margin-left )
padding ( padding-top / padding-right / padding-bottom / padding-left )
border ( border-width / border-color / border-style )
background ( background-color / background-image / background-repeat / background-attachment / background-position )
list-style ( list-style-type / list-style-image / list-style-position )
color
font ( font-family / font-style / font-variant / font-weight / font-size )
line-height
text-indent
text-decoration
text-align
*/

/* TOP
======================================*/

/* outline */

body.common #main {
	float: none;
	max-width: 100%;
	width: 100%;
}

body.common.top #contents {
	width: 100%;
	max-width: 100%;
	padding: 0;
}



/* SlideContents */

#mainVisual {
	background: #e7f7c7;
}

body.common #slide {
	position: relative;
	z-index: 1;
	padding: 20px 0;
	margin: 0 auto;
}

body.common #slideInfo {
display: none;
	position: absolute;
	top: 272px;
	right: 40px;
	font-weight: bold;
	text-align: right;
}

body.common .sActive { border: solid 2px #6ba900 !important; }

body.common .dummy {
	width: 934px;
	height: 250px;
	background: #eee;
	line-height: 250px;
	font-weight: bold;
	text-align: center;
}



/** 
 *  sliderkit-core.css
 *	> Core CSS styles
 *  
 *  This file is part of Slider Kit jQuery plugin.
 *  http://www.kyrielles.net/sliderkit/
 *  
 *  Copyright (c) 2010-2012 Alan Frog
 *  Licensed under the GNU General Public License
 *  See <license.txt> or <http://www.gnu.org/licenses/>
 *
 */

/*
 *  PLUGIN BASICS
 *  ------------------------------------------------
 */
.sliderkit{display:block;position:relative;overflow:hidden;text-align:left;}/
.sliderkit a,
.sliderkit a:hover{text-decoration:none;}
.sliderkit a:focus{outline: 2px #6BA900 dotted;}
.sliderkit img{border:0;}

/*---------------------------------
 *  Navigation
 *---------------------------------*/
.sliderkit .sliderkit-nav{z-index:10;position:relative;text-align:center;}

/* Nav > Clip */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}
.sliderkit .sliderkit-nav-clip ul li a:focus {outline: 2px #6BA900 dotted;}

/*---------------------------------
 *  Buttons
 *---------------------------------*/
.sliderkit .sliderkit-btn{z-index:10;}

/*---------------------------------
 *  Panels
 *---------------------------------*/
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;}
.sliderkit .sliderkit-panel-active{z-index:5;}
.sliderkit .sliderkit-panel-old{z-index:4;}

/* Panels > Overlay */
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1;}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0;}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0;}

/*---------------------------------
 *  Counter
 *---------------------------------*/
.sliderkit .sliderkit-count{position:absolute;top:5px;right:5px;z-index:10;padding:5px;color:#fff;background:#000;}

/*---------------------------------
 *  Loader
 *---------------------------------*/
.sliderkit .sliderkit-timer{position:absolute;top:0;left:0;z-index:10;height:3px;background:#ccc;}


/* This code can be reduced and pasted in any other CSS file :

Here is a compact version :
-------------------------------

.sliderkit{display:none;position:relative;overflow:hidden;text-align:left;}
.sliderkit a,
.sliderkit a:hover{text-decoration:none;}
.sliderkit a:focus{outline:1px dotted #000;}
.sliderkit img{border:0;}
.sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;}
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}
.sliderkit .sliderkit-btn{z-index:10;}
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;}
.sliderkit .sliderkit-panel-active{z-index:5;}
.sliderkit .sliderkit-panel-old{z-index:4;}
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1;}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0;}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0;}
.sliderkit .sliderkit-count{position:absolute;top:5px;right:5px;z-index:10;padding:5px;color:#fff;background:#000;}
.sliderkit .sliderkit-timer{position:absolute;top:0;left:0;z-index:10;height:3px;background:#ccc;}
*/



/** 
 *  sliderkit-demos.css
 *	> CSS code for demos
 *  This file is part of Slider Kit jQuery plugin.
 *  http://www.kyrielles.net/sliderkit/
 *  
 *  Copyright (c) 2010-2012 Alan Frog
 *  Licensed under the GNU General Public License
 *  See <license.txt> or <http://www.gnu.org/licenses/>
 */

/*---------------------------------
 *  Slideshow > + Carousel
 *---------------------------------*/
.slideshow-carousel {
	/*width: 934px;
	height: 320px;*/
}

.aspect {
    position: relative;
    width: 100%;
	background: #fff;
}

.aspect {
    content:"";
    display: block;
    padding-top: 27%; /* 高さを幅の75%に固定 */
}
.sliderkit-panels {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


body.common #main .sliderkit-panels img {
/* .sliderkit-panels img {*/
	width: 960px;
	max-width: 100%;
	height: 257px;
}

@media screen and (max-width: 980px) {
	body.common #main .sliderkit-panels img {
		/*height: 257px;*/
		width: 100%;
		max-width: 100% !important;
		height: auto;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}


/* Panel 
.slideshow-carousel .sliderkit-panel {
	
	height: 250px;
}*/


.controller {
	border-radius: 0 0 20px 20px;
	background: #fff;
	padding: 10px 0;
	max-width: 960px;
}

/* Navbar */
.slideshow-carousel .sliderkit-nav {
	/*top: 260px;*/
	/*left: 160px;*/
	left: 77px;
	width:480px;
	height: 50px;
}
.slideshow-carousel .sliderkit-nav-clip ul li {
	float: left;
	padding: 1px 3px;
/*	padding: 0 3px;*/
	margin: 0!important;
}
.slideshow-carousel .sliderkit-nav-clip ul li a {
	display:block;
	width:142px;
	height:38px;
	border:3px solid #ccc;
	overflow:hidden;
}
.slideshow-carousel .sliderkit-nav-clip ul li.sliderkit-selected a {
	border:3px solid #6ba900;
}

/* Controls */
.slideshow-carousel .sliderkit-controls{}

.slideshow-carousel .sliderkit-go-btn a,
.slideshow-carousel .sliderkit-play-btn a,
.slideshow-carousel .sliderkit-pause-btn a{
	position: relative;
	z-index: 9999;
	display: block;
	width: 40px;
	height: 40px;
}
.slideshow-carousel .sliderkit-btn span, .slideshow-carousel .sliderkit-play-btn span{display:none;}
.slideshow-carousel .sliderkit-go-prev a {
	position: absolute;
	/*left: 100px;*/
	right: 170px;
	bottom: 18px;
	background: url(/common/img/slide/controll/btn_prev.png) no-repeat 0 0 !important;
}
.slideshow-carousel .sliderkit-go-next a {
	position: absolute;
	right: 120px;
	bottom: 18px;
	background: url(/common/img/slide/controll/btn_next.png) no-repeat 0 0 !important;
}
.slideshow-carousel .sliderkit-play-btn a {
	position: absolute;
	right: 70px;
	bottom: 18px;
	background: url(/common/img/slide/controll/btn_play.png) no-repeat 0 0 !important;
}
.slideshow-carousel .sliderkit-pause-btn a{
	position: absolute;
	right: 26px;
	bottom: 18px;
	background: url(/common/img/slide/controll/btn_stop.png) no-repeat 0 0 !important;
}


@media screen and (max-width: 980px) {
	/* Navbar */
	.slideshow-carousel .sliderkit-nav {
		/*left: 80px!important;*/
		left: 25px!important;
	}
	
	
	.slideshow-carousel .sliderkit-btn span, .slideshow-carousel .sliderkit-play-btn span{display:none;}
	.slideshow-carousel .sliderkit-go-prev a {
		/*left: 20px;*/
		right: 150px;
	}
	.slideshow-carousel .sliderkit-go-next a {
		right: 100px;
	}
	.slideshow-carousel .sliderkit-play-btn a {
		right: 55px;
	}
	.slideshow-carousel .sliderkit-pause-btn a{
		right: 10px;
	}

}

@media screen and (max-width: 880px) {
	/* Navbar */
	.slideshow-carousel .sliderkit-nav {
		/*left: 45px!important;*/
		left: 10px!important;
	}
	
	
	.slideshow-carousel .sliderkit-btn span, .slideshow-carousel .sliderkit-play-btn span{display:none;}
	.slideshow-carousel .sliderkit-go-prev a {
		/*left: 10px;*/
		right: 95px;
		background-size: 30px!important;
		bottom: 12px;
	}
	.slideshow-carousel .sliderkit-go-next a {
		right: 60px;
		background-size: 30px!important;
		bottom: 12px;
	}
	.slideshow-carousel .sliderkit-play-btn a {
		right: 30px;
		background-size: 30px!important;
		bottom: 12px;
	}
	.slideshow-carousel .sliderkit-pause-btn a{
		right: 0px;
		background-size: 30px!important;
		bottom: 12px;
	}

}

@media screen and (max-width: 800px) {
	/* Navbar */
	.slideshow-carousel .sliderkit-nav {
		height: 30px!important;
		visibility: hidden!important;
	}
	
	
	.slideshow-carousel .sliderkit-btn span, .slideshow-carousel .sliderkit-play-btn span{display:none;}
	.slideshow-carousel .sliderkit-go-prev a {
		left: 10px;
		background-size: 30px!important;
		bottom: 1px;
	}
	.slideshow-carousel .sliderkit-go-next a {
		left: 50px;
		background-size: 30px!important;
		bottom: 1px;
	}
	.slideshow-carousel .sliderkit-play-btn a {
		right: 30px;
		background-size: 30px!important;
		bottom: 1px;
	}
	.slideshow-carousel .sliderkit-pause-btn a{
		right: 0px;
		background-size: 30px!important;
		bottom: 1px;
	}

}


/*---------------------------------
 *  contents
 *---------------------------------*/
 

body.common.top .section {padding: 25px 0 10px;}
 
 /* box
==================================*/

body.common  #contents p {
    margin: 10px 10px 15px;
}

#contents .box0 {
	background: #fff;
	border-radius: 20px;
	padding: 10px 20px;
	box-sizing: border-box;
	margin-bottom: 25px;
}
#contents .box00 {
	background: #fff;
	border-radius: 20px;
	padding: 10px 20px;
	box-sizing: border-box;
	margin-bottom: 25px;
}

/*---- frexible grid system ----*/


.box_1_2 { 
	display: block;
	float: left;
	margin-left: 3%;
}

.box_1_2:first-child {
	margin-left: 0; 
}

.box_1_2 { width: 48.5%; }



/* Headline2 */
body.common.top #contents .section h2 {
	padding: 60px 0 10px;
	margin: 0 0 10px;
	background: none;
	font-size: 150%;
	border: none;
	border-radius: 0px;
	text-align: center;
	color: #444;
	font-weight: normal;
}
body.common.top #contents .section h2 span {
	display: inline;
	border-left: none;
	padding: 0px;
	margin-left: 0;
}

 
/* caution
==================================*/

/*注意テキスト*/

#caution {
	background: #FFBBB2;
}

body.common #caution .caution {
	background: url(/common/img/sp/icon_cautionIndex.png) left 0.5em no-repeat !important;
	color: #DD2B02;
	font-weight: bold;
	padding-left: 32px;
	margin-bottom: 5px;
	font-size: 120%;
}

body.common #caution h3 {
	border-bottom: 1px solid #ccc !important;
}


/* earthquake
==================================*/

/*震災関連*/

#earthquake {
	background: #ffecea;
}

body.common.top #contents #earthquake .section h2 {background: url(../img/sp/icon_earthquake.png) no-repeat top center;}

/* Headline3 */
body.common #earthquake h3 {
	background: url(/common/img/sp/icon_hexagon_red.png) 5px 0.5em no-repeat;
	color: #DD2B02;
}


/* pickup
==================================*/

/*ピックアップ*/


body.common.top #contents #pickup .section h2 {background: url(../img/sp/icon_pickup.png) no-repeat top center;}

#contents #pickup .box0 {
	border: 1px solid #ddd;
}
#contents #pickup .box00 {
	border: 1px solid #ddd;
}

#contents .box0 li {margin-bottom: 5px;}
#contents .box00 li {margin-bottom: 5px;}

/* h3タイトルのみ */
#pickup .box0 .pkup_h3 {
	 border-bottom:0!important;
	 margin-bottom:0!important;
}


/* notice
==================================*/

/*お知らせ*/


body.common.top #notice {background: #F0F0F0;}

body.common.top #contents #notice .section h2 {background: url(../img/sp/icon_notice_top.png) no-repeat top center;}

body.common.top #notice #tab_contents2,
body.common.top #notice #tab_contents3,
body.common.top #notice #tab_contents4 {display: none;}

/*タブメニュー*/


body.common.top #notice .tab_menu {
	border-bottom: 3px solid #528200;
}

body.common.top #notice .tab_menu li {
	display: inline;
	margin-bottom: 0;
}

body.common.top #notice .tab_menu a {
	display: block;
	text-align: center;
	padding: 20px 0 17px;
	background: #fff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 10px 10px 0 0;
}

body.common.top #notice .tab_menu a:hover,
body.common.top #notice .tab_menu a.on {
	background: #528200;
	color: #fff;
}

/*コンテンツ*/

body.common.top #notice .box0 {
	border-radius: 0 0 20px 20px;
	margin-bottom: 25px;
}
body.common.top #notice .box00 {
	border-radius: 0 0 20px 20px;
	margin-bottom: 25px;
}



/* banner
==================================*/

#banner ul {margin: 30px 0;}

#banner li {
	float: left;
	margin: 0 15px 15px 0!important;
}

/* 重要なお知らせ欄
==================================*/

        #caution .box0 .pkup_h3,
        #earthquake .box0 .pkup_h3 {
            border-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

        #caution .box0 .pkup_h3 {
            color: #cc0000 !important
        }

/*************************************************
top サムネイル
*************************************************/
.fbox2c {
      display: flex;
      flex-wrap: wrap;
    }
    
    div.parent_box {
      display: flex;
      padding-bottom: 20px;
      width: 100%;
    }
    div.parent_box a {
      display: flex;
      align-items: center;
    }
    .side_image img {
    width: 120px;
    border: 2px solid #ECECEC;
        border-radius: 5px;
        vertical-align: middle;
        max-width: none!important;
    }
    .side_text {
    padding-left: 5px;
    }
    .mb40 {
      margin-bottom: 30px!important;
    }
    @media (min-width: 1024px) {
      div.parent_box {
        width: 49%;
      }
      }