@charset "UTF-8";

/*サイト共通のタグ設定*/
html * {
   box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 100%; /* 全体の文字サイズ */
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  /*フォント種類*/
    line-height: 2;     /*行間*/
}

ul {
    list-style-type: none;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
    font-size: 100%;
    border-spacing: 0;
}

iframe {
    width: 100%;
}

.main-container h1 {
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: black;
    border-bottom-color: black;
    padding: 10px;
    background-image: linear-gradient(to bottom, green, #ffffff, green);
}

h2 {
    padding: 1.5%;
    margin-left: 5px;
    color: white;
    background-color: #006400;
}

h2 img {
    width: 32px;
    margin: 0 10px 0 10px;
    vertical-align: -6px;
}

.main-contents section {
    margin-bottom: 80px;
}

/*リンク（全般）設定*/
a {
    color: #000; /*リンクテキストの色*/
    text-decoration: none;
    -webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
    transition: 0.5s;       /*同上*/
}

a:hover {
    color: #3b9dab;         /*マウスオン時の文字色（全体）*/
    text-decoration: none;  /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*共通デザイン*/
.sletter {
    font-family: "シネマレター" , "メイリオ" , Meiryo , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , sans-serif;
}

/*全体のレイアウト設定*/
.container {
    width: 95%;         /*ブロックの幅を画面の80%にする設定。*/
    max-width: 1100px;  /*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
    margin: 0 auto;     /*HP画面の左右中央に表示させる設定*/
}

.header-container {
    padding: 30px 20px 10px 20px;
    margin: 0 auto;
}

.nav-container {
    padding: 0;
}

.breadcrumbs {
    padding: 0 0 20px 0;
}

.top-wrapperhead {
    padding: 0 0 20px 0;
}

.main-container {
    padding: 0;
}

.footer-container {
    padding: 0 0 40px 0;
}

.main-container,
.side-container,
.sub-containar {
    margin-bottom: 100px;
}

#wrapper2 {
    background: #f8b188;
}

.side-container {
    padding: 0;
}

/**header**/
.pagetop {
    position: fixed;
    bottom: 20px;
    right: 2%;
    border-width : 5px;
    border-style : solid;
    border-color : #B0C4DE ;
}

#header-logo h1 {
    margin-top: -2px;
    font-size: 0;
}
#header-logo h1 img {
    width: 90%;
    height: auto;
    margin-top : 3px;
    padding-top: 3px;
}

/**nav**/
#menu {
    display: none;
    background: #f8b188;
}
#menu li a {
    display: block;
    height: 40px;
}

#toggle {
    display: block;
    position: relative;
    width: 100%;
    background: #006400;
}
#toggle a {
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
#toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
}
#toggle a:before, #toggle a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
    text-decoration: none;
}
#toggle a:before {
    margin-top: -6px;
}
#toggle a:after {
    margin-top: 2px;
}

/*パンくずリスト*/
#breadcrumbs { margin-left: -20px;
    clear: both;
}
#breadcrumbs ol li {
    display: inline;
    list-style-type: none;
}
#breadcrumbs ol li:before {
    content: " > ";
}
#breadcrumbs ol li:first-child:before {
    content:"";
}
#breadcrumbs ol li a {
    color: #000;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}
#breadcrumbs ol li a:hover {
    text-decoration: underline;
}

/*上部sns表示*/
.counter {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    display: inline;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 0.8em;
    background-color: Moccasin;
    margin-left: 5%;
}

/* ヘッダー画像 */
.mainimg {
    margin-bottom: 15px;
    width: 100%;
}
.photo {
    font-size: 0;
}

/* キャッチコピー */
#catch {
    margin: 0 2% 0 2%;
    width: 100%;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    padding: 5%;
}
/**head-contents**/
.head-contents {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.intro {
    padding: 0;
    margin: 8%;
    border: 1px solid #000;
    border-radius: 6px;
    height: auto;
}
.intro a {
    display: block;
    overflow: visible;
    color: #000;
    height: auto;
    text-decoration: none;
}
.intro a:hover {
    background: green;
    color: #fff;
}
.intro h2{
    font-size: 1rem;
    text-align: center;
}
.intro p{
    padding: 0 5px 0 5px;
}

/*newsrange*/
#newsrange ul {
    list-style:none;
    margin: 0 auto;
    padding: 0;
}
#newsrange li {
    padding: 8px;
    margin: 2% 5% 2% 5%;
    background:#f8b188;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    text-align: center;
    border-radius: 6px;
}
#newsrange .thumnail {
    width: 100%;
}
#newsrange .cat {
    margin-left: 5px;
    font-size: 1rem;
    color: #000;
    border-width: 1px;
}
#newsrange .title {
    margin: 0;
    font-size: 1.1rem;
}
#newsrange .time {
    margin: 0 0 5px 0;
    font-size: 1rem;
    font-weight: bold;
    color: #dd3a59;
}
#newsrange a {
    text-decoration: none;
    color: #000000;
}
#newsrange a:hover {
    color: #717171;
}
/*side-container*/
.nav-side {
    background: #f8b188;
}
.nav-side ul {
    margin-left: -20px;
    margin-bottom: 20px;
}
#vote-img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
    width: 80%;
}
.sns-side {
    background: #f8b188;
    padding-bottom: 10px;
}
.sns-side ul {
    margin: 0;
    padding: 0;
}
.follow-tw {
    display: block;
    margin: 0 5px 5px 5px;
    background-color: #63bafb;
}
.follow-fb {
    display: block;
    margin: 0 5px 5px 5px;
    background-color: #5288f7;
}
.follow-gp {
    display: block;
    margin: 0 5px 5px 5px;
    background-color: #f65d4a;
}

/*imgpickup*/
#imgpickup {
 margin: 0;
 padding: 0;
}
.img-contents4 {
    margin: 0 20px;
    padding: 0;
    list-style: none;
}

.img-contents4 li {
    margin-right: 1.1%;
    margin-bottom: 5px;
    padding: 0 5px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    border-radius: 6px;
}

.img-contents4 li:last-child {
    margin-right: 0;
}
.img-contents4 li a {
    font-size: 0.8rem;
}

.img-contents4 .text {
    margin-top: -20px;
}
.img-contents4 .text span {
    font-size: 1.2rem;
    font-weight: bolder;
    color: white;
    background-color: MediumSeaGreen;
}
.img-contents4 img {
    width: 100%;
}

/*footer*/

.footer-containar h2 {
    margin: 0;
    padding: 0;
    font-size: 0;
}
.footer-containar ul {
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}
.footer-title {
    display: block;
    font-size: 100%;
    background-color: green;
    color: white;
    margin-bottom: 5px;
    margin-left: -10px;
    padding-right: 10px;
    padding-left: 5px;
}
.footer-title::first-letter {
    font-size: 150%;
    color: #F8F8FF;
    font-weight: 700;
}
#sitemap a {
    color: #000;
}
#sitemap a:hover {
    background: green;
    color: #fff;
}

/* コピーライト */
#copyright p {
    margin: 0;
    background-color: green;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
@media screen and (min-width:480px) {

    /*全体のレイアウト設定*/
    .container {
        width: 80%;
        border-width: 1px;
        border-style: solid;
        border-color: black;
    }
    .main-container h1 {
        margin-top: 50px;
    }
    .header-container {
        margin-bottom: 10px;
    }

    /*mainコラム分割*/
    #wrapper1:after {
        content: "";
        display: block;
        clear: both;
    }
    .main-contents {
        float:left;
        margin: 0;
        padding: 0;
        width: 72%;
    }
    .side-container {
        float: right;
        margin: 0;
        padding: 0;
        width: 25%;
    }
    /*header*/
    #toggle {
        display: none;
    }
    #menu {
        display: block;
    }
    #menu li a {
        height: auto;
    }
    #header-logo h1 img {
        width: 35%;
    }
    /*nav*/
    #nav-head ul {
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
    #nav-head li {
        float: left;
        border-right: 1px solid #2F4F4F;
        width: 12.5%;
    }
    #nav-head li:last-child {
        border-right: none;
    }
    #nav-head li a {
        display: block;
        padding: 20px 0;
        width: 100%;
        background: #006400;
        text-align: center;
        font-size: 14px;
        color: #fff;
    }
    #nav-head li a:hover {
        background: #90EE90 ;
        color: #000;
    }
    /*上部sns横に並べる*/
    .top-wrapperhead {
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    .counter {
        float: left;
    }
    .fb-like {
        float: right;
    }
    .hatena {
        float: right;
    }
    /**head-contentsの分割**/
    .head-contents {
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    .intro {
        float: left;
        margin: 0.5%;
        padding: 0;
        border: 1px solid #000;
        border-radius: 6px;
        height: 230px;
        width: 32%;
    }
    .intro a {
        display: block;
        overflow: scroll;
        color: #000;
        height: 230px;
    }
    .intro a:hover {
        background: green;
        color: #fff;
    }
    .intro h2 {
        font-size: 1rem;
        text-align: center;
    }
    /* ヘッダー画像 */
    .mainimg {
        position: relative;
        width: 100%;
    }

    /* キャッチコピー */
    #catch {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 75%;
        font-size: 1.5rem;
        font-weight: normal;
        max-width: 750px;
        text-align: center;
        padding: 15px;
        background-color: rgba(255,255,255,0.7);
    }
    /*newsrange*/
    #newsrange ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
    #newsrange li {
        overflow: hidden;
        padding: 8px;
        margin: 2% 5% 2% 5%;
        background: #f8b188;
        border-width: 1px;
        border-style: solid;
        border-color: black;
    }
    #newsrange .thumbnail {
        float: left;
        margin-right: 10px;
        font-size: 0;
    }
    #newsrange .cat {
        margin-left: 5px;
        font-size: 1rem;
        color: #000;
        border-width: 1px;
    }
    #newsrange .title {
        margin: 0;
        font-size: 1.1rem;
    }
    #newsrange .time {
        margin: 0 0 5px 0;
        font-size: 1rem;
        font-weight: bold;
        color: #dd3a59;
    }
    #newsrange a {
        color: #000;
    }
    #newsrange a:hover {
        color: #717171;
    }


    /* imgpickup 画像を横に並べる */
    /*imgpickup*/
    #imgpickup {
    margin: 0;
    padding: 0;
    }
    .img-contents4 {
        overflow: hidden;
        margin: 0 20px;
        padding: 0;
        list-style: none;
    }

    .img-contents4 li {
        float: left;
        margin-right: 1.1%;
        width: 24%;
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        border-radius: 6px;
    }

    .img-contents4 li:last-child {
        margin-right: 0;
    }
    .img-contents4 li a {
        font-size: 0.8rem;
    }

    .img-contents4 .text {
        margin-top: -20px;
    }
    .img-contents4 .text span {
        font-size: 1.2rem;
        font-weight: bolder;
        color: white;
        background-color: MediumSeaGreen;
    }


    /**footer内横に並べる**/
    #wrapper2 {
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
    .nav-footer {
        float: left;
        width: 33%;
    }
    .sns1 {
        float: left;
        width: 34%;
    }
    .sns2 {
        float: left;
        width: 33%;
    }
}

/* ########### 480px以上768px以下 ########### */
@media screen and (min-width:480px)and ( max-width: 768px ) {
    /*全体のレイアウト設定*/
    .container {
        width: 95%;
    }
    /*mainコラム分割*/
    .main-contents {
        width: 68%;
    }
    .side-container {
        width: 29%;
    }
    /*nav*/
    #nav-head li {
        width: 25%;
    }
    /* キャッチコピー */
    #catch {
    font-size: 1rem;
    }
}