@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/

body {
	font-size:14px;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height:1.6;
    background: linear-gradient(#60aa60,#ffffff);
    background-repeat: no-repeat;    
/*サイトの最大幅を800pxとして中央に配置*/
    /*----------------------------*/
    max-width: 806px;
    position:relative;
    margin: 0 auto;
    border: 1px solid #000000;
    /*----------------------------*/
}

.body_b {
    width:803x;
    margin: 0 auto;
    top: 0px;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #ffffff;    
}

h2 {
    position: relative;
    margin: 2px auto;
    clear: both;
    background:url(../images/common/bg_h2.gif) no-repeat;
    height:32px;
    line-height:32px;
    width:800px;
    font-size:20px;
    text-indent: 1em;    
}

h4{
	background:url(../img/common/bg_h3.gif) no-repeat left top;
	text-indent:10px;
	font-size:18px;
    font-weight: bold;
	color:#333333;
	margin:20px 0 0 0;
	line-height:1.0em;
	clear:left;
	}


header {
    position:fixed;
    margin: 0 1px 0;
    top: 0px;
    width:800px;    
    height:75px;
    background-color: #303030;
    border: 1px solid #000000;    
    z-index:10;
}

header img {
    width:180px;
    height:50px;
    float: right;
}

main {
    position:relative;
    margin: 80px auto;
    width: 800px;
    background-color: #ffffff;
}

.contents {
    width: 800px;
    position:relative;
	margin: 0 auto;
}



a {
	color:#009595;
}

a:hover {
	color:#00ff00;
}

h1 {
	font-size:24px;
    text-indent: 1em;    
    color:#008000;
    font-weight:bold;
    background-color: #ffffff;
    text-align:left; 
    margin: 0 0 0;
    height: 40px;
    text-shadow: 1px 1px 1px #505050,2px 2px 2px #808080;
    padding:10px 0 0;
}

h1 a {
    color: #008000;
    text-decoration:none;
}

h2 {
    position: relative;
    margin: 2px auto;
    clear: both;
    background:url(../images/common/bg_h2.gif) no-repeat;
    height:32px;
    line-height:32px;
    width:800px;
    font-size:20px;
    text-indent: 1em;    
}

p {
	margin:0.5em 0 0.5em 0;
}

ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
ol li {
	list-style:decimal;
}
li {
	margin-left:2em;
}


/*================================================
 *  グローバルナビゲーション
 ================================================*/
nav {
    width:799px;
    position:relative;
    margin: 0 0 0;
	opacity:0.8;
	background:#303030;
	padding:0 0;
}

nav ul {
    width:799px;
    margin:0 0 0;
/*    background:#30ff30;指定反映しない？*/
    border:1px solid #000000;
}

nav li {
	position:relative;
	float:left;
	list-style:none;
	margin:0;
	padding:2.5px 10px;
    background:#303030;
    border:1px solid #000000;
    font-size:11px;
    
}
nav li a {
	color:#ffffff;
	text-decoration:none;
}
nav li a:hover {
	color:green;
	text-decoration:underline;
}

section {
	margin-bottom:10%;
}

/*================================================
 *  フッター
 ================================================*/
footer {
    clear: both;
    width: 803px;
    position: relative;
    margin:0 auto 10px auto;
	padding:0.5em 0;
	font-size:11px;
	text-align:center;
    color: #ffffff;
    background:#303030;
    top: 10px;
}

.copyright a {
    color: #ffffff;
    text-decoration:none;
}

.copyright a:hover {
	color:#008000;
    text-decoration:underline;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/

.totop {
	position:fixed;
	bottom:15px;
	right:15px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#008000;
}
.totop img:hover {
	background:#00ff00;
}

/*================================================
 *  カスタムコンテナ
 ================================================*/

.con_w {
    width: 100%;
    overflow: hidden;
}

.div_a{
    color: #303030;
    text-decoration: none;
}

.div_a>div:hover{
    color: green;
    text-decoration: none;
    opacity: 0.5;
    box-shadow: inset 0 0 5px 5px green;
}

.con_txt {
    width: 46%;
    float: left;
    margin: 0 2% 0 2%;
}

.con_img_y {
    width:46%;
    float: left;
    margin: 0 2% 0 2%;
}

.con_img_t {
    width: 26%;
    float: left;
    margin: 0 10%;
}

#con_mail {
    font-weight: bold;
}

#con_mail a{
    font-weight: bold;
    color: green;
    text-decoration: none;
}

#con_mail a:hover{
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    background-color: green;
}

.box_w {
    width: 100%;
    overflow: hidden;
}

.box_link {
    width: 280px;
    float: left;
    margin: 30px;
    border-style: solid;
    border-width: 5px;
    border-color: green;
    border-radius: 20px;
    padding: 5px 20px;
}

.con_link a{
    color: #303030;
    text-decoration: none;   
}

.con_link a:hover{
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    background-color: green;
}

#navi {
    font-size: middle;
    text-align: center;
}

#navi a{
    color: #303030;
    text-decoration: none;   
}

#navi a:hover{    
    font-weight: bold;
    color: green;
    text-decoration: none;  
}

    /*================================================*/
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    img {
        max-width: 480px;
    }
    
    body {
        font-size: 14px;
        font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック",
            "MS PGothic", sans-serif;
        line-height: 1.6;
        background: linear-gradient(#60aa60, #ffffff);
        background-repeat: no-repeat;
        /*サイトの最大幅を480pxとして中央に配置*/
        /*----------------------------*/
        max-width: 480px;
        position: relative;
        margin: 0 auto;
        border: 1px solid #000000;
        /*----------------------------*/
    }
    
    .body_b {
        width: 477px;
        margin: 0 auto;
        top: 0px;
        position: relative;
        background-color: #ffffff;
        border: 1px solid #ffffff;
    }
        
    main {
         width: 474px;
         font-size: small;
    }
    
    /*================================================
     *  グローバルナビゲーション スマホ用
    ================================================*/
    nav {
        width: 477px;
        position: relative;
        margin: 0 0 0;
        opacity: 0.8;
        background: #303030;
        padding: 0 0;
    }

    nav ul {
        width: 474px;
        margin: 0 0 0;
        /*    background:#30ff30;指定反映しない？*/
        border: 1px solid #000000;
    }

    nav li {
        position: relative;
        float: left;
        list-style: none;
        margin: 0;
        padding: 2.5px 10px;
        background: #303030;
        border: 1px solid #000000;
        font-size: 11px;
    }
    nav li a {
        color: #ffffff;
        text-decoration: none;
    }
    nav li a:hover {
        color: green;
        text-decoration: underline;
    }

    section {
        margin-bottom: 10%;
    }
/*================================================
    header スマホ用
    ================================================*/
    header {
        position: fixed;
        margin: 0 1px 0;
        top: 0px;
        width: 474px;
        height: 75px; /*スライドショーの位置を同量オフセットが必要*/
        background-color: #303030;
        border: 1px solid #000000;
        z-index: 10;
    }

    h1 {
        font-size: 22px;
        text-indent: 0em;
        color: #008000;
        font-weight: bold;
        background-color: #ffffff;
        text-align: center;
        margin: 0 0 0;
        height: 40px;
        text-shadow:
            1px 1px 1px #505050,
            2px 2px 2px #808080;
        padding: 10px 0 0;
    }

    h1 a {
        color: #008000;
        text-decoration: none;
    }
    
    h2 {
    position: relative;
    margin: 2px auto;
    clear: both;
    background:url(../images/common/bg_h2.gif) no-repeat;
    height:32px;
    line-height:32px;
    width:475px;
    font-size:20px;
    text-indent: 1em;    
}
    
    .mail_img {
        display: none;
    }
    
    /*================================================
    フッター スマホ用
    ================================================*/
    footer {
        clear: both;
        width: 474px;
        position: relative;
        margin: 30px auto 10px auto;
        padding: 0.5em 0;
        font-size: 11px;
        text-align: center;
        color: #ffffff;
        background: #303030;
        top: 10px;
    }

    .copyright a {
        color: #ffffff;
        text-decoration: none;
    }

    .copyright a:hover {
        color: #008000;
        text-decoration: underline;
    }
    
    /*================================================
 *  カスタムコンテナ
 ================================================*/
    .con_w {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: space-around;
            margin: 0 0 25px 0;
            
        
    }
    
    .con_txt {
    width: 96%;
    margin: 0 2% 0 2%;
        order: 2;
}

.con_img_y {
    width:96%;
     margin: 0 2% 0 2%;
    order: 1;    
     float: none;
}
    
    .con_img_y img {
       margin: auto;
  display: block;
    }

.con_img_t {
    width: 96%;
     margin: 0 2% 0 2%;
     order: 1;
}
    
        .con_img_t img {
       margin: auto;
  display: block;
    }
}