@charset "utf-8";

/*
Theme Name: theme058_m2
Theme URI: http://theme.o2gp.com/
Description: theme058 Responsive Ver with Hamburger Menu
Version: 1.0
Author: keisys
Author URI: http://theme.o2gp.com/

Author URI: http://theme.o2gp.com/

Tags: simple



	o2 Group v1.0

	 http://theme.o2gp.com/



	This theme was designed and built by o2 Group,

	whose blog you will find at http://theme.o2gp.com/



	The CSS, XHTML and design is released under GPL:

	http://www.opensource.org/licenses/gpl-license.php



*/



* {
    margin: 0;
    padding: 0;
}



html {
    background: #ffffff;
}



body {

    font: 14px/1.5 "メイリオ", "Meiryo", arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;

    color: #252525;

    background: #ffffff url(images/header.png) repeat-x;

}



a {
    color: #41add9;
}

a:hover {
    color: #299dc8;
    text-decoration: none;
}

a:active,
a:focus {
    outline: 0;
}

img {
    border: 0;
}

.clear {
    clear: both;
}

p {
    margin-bottom: 10px;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}





/*******************************

全体幅

*******************************/

#header,
#container,
.inner {

    margin: 0 auto;

    width: 960px;

}





/*******************************

/* ヘッダー

*******************************/

#header {

    position: relative;

    height: 40px;

}



#header h1,
#header h2,
#header h3,
#header ul,
#header .banners {

    position: absolute;

    top: 0;

    color: #fff;

    font-size: 12px;

    line-height: 30px;

}



#header h2 {
    right: 0;
}



/* ロゴの位置 */

#header h3 {
    top: 50px;
}





/******************

/* ヘッダーナビゲーション

******************/

#header ul {

    top: 40px;

    right: 0;

    width: 310px;

    height: 14px;

    line-height: 14px;

}



#header ul li {
    float: left;
    list-style: none;
}



#header ul a {

    display: block;

    height: 14px;

}







/******************

/* ヘッダー　バナー

******************/

#header .banners {

    right: -10px;

    top: 70px;

}



#header .banners img {
    margin-right: 10px;
}





/************************************
/* メインナビゲーション
************************************/
.menu-toggle {
    display: none;
}

#mainnav {
    margin: 0 auto;
    width: 960px;
    height: 60px;
    background: #008080;
}

#mainnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#mainnav li {
    float: left;
    list-style: none;
    width: 192px;
    text-align: center;
}

#mainnav a {
    display: block;
    width: 192px;
    /* fallback */
    width: 191px;
    /* considering border */
    height: 60px;
    line-height: 60px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    background: #00769a;
    background: linear-gradient(to bottom, #009cbd 0%, #005a75 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
    width: 100%;
    /* Let li control width */
}

#mainnav a:hover {
    background: #009cbd;
    background: linear-gradient(to bottom, #99f0ff 0%, #009cbd 100%);
}

#mainnav li:last-child a {
    border-right: none;
}





/*******************************

メイン画像

*******************************/

#mainImage {

    padding: 12px 0 0;

    background: #fff;

}





/*******************************

コンテンツ位置

*******************************/

#container {

    padding: 20px 0;

}



#main {

    float: left;

    width: 715px;

    padding-bottom: 40px;

}



#sidebar {

    float: right;

    width: 225px;

    padding-bottom: 40px;

    font-size: 13px;

}





/*************************

/* ボックスの囲み

/* .boxContainer

/* 背景画像でボックスの高さを調整

/* 

/* 各ボックス

/* .box1 1番目の2つのbox

/* .box2 2番目の3つのbox（画像）

/* .box3 3番目の2つのbox

/* .box4 4,5番目の1つのbox

/* #sidebar .box1 サイドバーのbox

*************************/

.boxContainer {

    width: 715px;

    margin: 0 auto 20px;

    background: url(images/box1.gif) 0 100%;

}



.box1,
.box2,
.box3,
.box4 {

    float: left;

    width: 225px;

    margin: 0 20px 20px 0;

}



.box1,
.box3,
.box4 {

    width: 327px;

    margin: 0 21px 0 0;

    padding: 10px;

    border-top: 1px solid #dadada;

}



#sidebar .box1 {

    width: 209px;

    margin: 0 0 20px;

    padding: 10px 7px;

    border: 1px solid #dadada;

    background: #fff;

}



.box3 {

    width: 347px;

    padding: 0 0 10px;

}



.box4 {

    margin: 0 0 20px 0;

    padding: 0;

    width: 715px;

    border: 1px solid #dadada;

    background: #fff;

}



/* 最後のbox */

.last {
    margin-right: 0;
}





/* 画像を中央表示 */

.box1 .center {
    padding-bottom: 10px;
}



/* 画像を左に回りこみ */

.box4 img {

    float: left;

    margin: 0 10px 10px;

}



.box4 h4 img {
    float: none;
    margin: 0 0 10px;
}



.box4 p {
    padding: 0 10px 10px;
}







#date {

    text-align: right;

    padding-right: 15px;

    padding-top: 5px;

    padding-bottom: 10px;

    font-weight: bold;

    color: #858585;

}



#next {

    text-align: center;

    padding-top: 30px;

    padding-bottom: 30px;

}



img.aligncenter {

    display: block;

    margin-left: auto;

    margin-right: auto;

}

img.alignright {

    padding: 4px;

    margin: 0 0 2px 7px;

    display: inline;

}

img.alignleft {

    padding: 4px;

    margin: 0 7px 2px 0;

    display: inline;

}

.alignright {

    float: right;

}

.alignleft {

    float: left;

}



.box_img_border {

    border: 1px solid #cccccc;

    padding: 1px;

    margin: 1px;

}





/*************

/* 見出し

*************/

.box3 h4 {
    margin-bottom: 10px;
}



#container h3 {

    margin-bottom: 10px;

    padding-bottom: 5px;

    color: #298fb5;

    background: url(images/h3.gif) repeat-x 0 100%;

}



#container h2 {

    padding: 0 5px 0 20px;

    margin-bottom: 10px;

    line-height: 45px;

    font-size: 20px;

    color: #298fb5;

    background: url(images/h2Bg.png) no-repeat 0 100%;

}



#container .box4 h3 {

    padding: 7px 5px;

}





/*************

/* リスト

*************/

#container ul {
    margin-left: 5px;
}



#container ul li,
#footerUpper ul li {

    list-style: none;

    margin-bottom: 8px;

    padding: 0 5px 0 12px;

    background: url(images/bullet2.gif) no-repeat 0 5px;

}



#container .box3 ul {
    padding: 0 5px;
}



#sidebar ul {
    margin-left: 3px;
}



/*************

サイド（右側）コンテンツ

*************/

#sidebar p {
    margin-bottom: 20px;
}

#sidebar ul {
    margin-bottom: 10px;
}





/*******************************

/* フッター

*******************************/

#footerUpper {

    clear: both;

    padding: 20px 0;

    border-bottom: 1px solid #5d5d5d;

    overflow: hidden;

    background: #888888;

}



#footerUpper .inner {

    background: url(images/footerBorder.gif) repeat-y;

}



#footerUpper .inner .box {

    float: left;

    width: 210px;

    padding-left: 10px;

    margin: 0 20px 10px 0;

    line-height: 1.2;

}



#footerUpper .inner .last {

    width: 230px;

    margin-right: 0;

}



#footerUpper ul li {

    color: #fff;

    background: url(images/bullet.gif) no-repeat 0 3px;

}



#footerUpper a {
    color: #fff;
}

#footerUpper a:hover {
    color: #eeeeee;
}



#footerLower {

    clear: both;

    padding: 10px;

    text-align: center;

    border-top: 1px solid #7e7e7e;

    background: #5d5d5d;

}



address {

    color: #fff;

    font-style: normal;

    font-size: 13px;
}

/* Responsive Styles */
@media screen and (max-width: 960px) {

    /* Container & Layout */
    #header,
    #container,
    .inner,
    #mainnav {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .inner {
        padding: 0 10px;
    }

    /* Header */
    #header {
        height: auto;
        text-align: center;
        padding-bottom: 10px;
        background-size: cover;
    }

    #header h1,
    #header h2,
    #header h3,
    #header ul,
    #header .banners {
        position: static;
        width: 100%;
        text-align: center;
        line-height: normal;
    }

    #header h1 {
        font-size: 16px;
        padding: 10px 0;
    }

    #header h2 {
        font-size: 12px;
        margin-bottom: 5px;
    }

    #header h3 {
        margin-bottom: 10px;
    }

    #header ul {
        height: auto;
        margin-bottom: 10px;
        width: 100%;
    }

    #header ul li {
        float: none;
        display: inline-block;
        margin: 0 5px;
    }

    #header .banners {
        margin: 10px 0;
    }

    /* Global Navigation */
    #mainnav {
        height: auto;
        background: #008080;
    }

    #mainnav ul {
        height: auto;
        overflow: visible;
    }

    #mainnav li {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }

    #mainnav a {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        box-sizing: border-box;
    }

    #mainnav li:last-child a {
        border-bottom: none;
    }

    /* Main Content & Sidebar */
    #main,
    #sidebar {
        float: none;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: left;
    }

    #sidebar {
        margin-top: 30px;
    }

    /* Boxes */
    .boxContainer {
        width: 100%;
        background: none;
    }

    .box1,
    .box2,
    .box3,
    .box4 {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
        box-sizing: border-box;
        padding: 10px;
        text-align: left;
    }

    #sidebar .box1 {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    /* Media */
    img {
        max-width: 100%;
        height: auto;
        display: inline-block;
    }

    iframe {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    /* Centered Maps */
    table {
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        margin: 0 auto;
        text-align: left;
    }

    dl,
    dt,
    dd {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    /* Text Alignment overrides */
    #main p {
        text-align: left;
    }

    /* Center specific elements if needed, but default to left as per request */
    .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Hamburger Menu Styles */
    .menu-toggle {
        display: block;
        width: 100%;
        padding: 10px;
        background: #333;
        color: #fff;
        border: none;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: 2px;
    }

    #mainnav ul {
        display: none;
    }

    #mainnav.toggled ul {
        display: block;
    }

    #mainnav li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Contact Form Centering */
    .wpcf7 {
        text-align: center;
        margin: 0 auto;
        max-width: 100%;
    }

    .wpcf7 form {
        display: inline-block;
        width: 100%;
        max-width: 500px;
        text-align: left;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea {
        width: 95%;
        max-width: 100%;
        margin: 5px auto;
        display: block;
    }

    .wpcf7 input[type="submit"] {
        margin: 10px auto;
        display: block;
        cursor: pointer;
    }

    /* General Form Centering if not using CF7 */
    form {
        text-align: center;
    }

    input,
    textarea {
        max-width: 100%;
    }

    /* Footer */
    #footerUpper .inner .box {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 0;
    }

    #footerUpper .inner .last {
        width: 100%;
    }
}