/*
Theme Name: McQueen Template 2column
Description: A theme by MACQA.
Author: MACQA Arakawa
Version: 1.0
*/

@charset "utf-8";

/* 初期設定リセット */
*{margin: 0;padding: 0}

/* 基本設定 */
html,body {
margin: 0;
padding: 0;
width : 100%;
height: 100%;
}
body {
overflow-x: hidden;
font-family:　YuGothic,'Yu Gothic',sans-serif;
padding: 100px 2%;
background-image: url(http://www.sparkle-ark.co.jp/sablog/wp-content/uploads/2017/02/bbg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

@media(max-width:468px) {
body {
padding: 10px 2%;
}
}

/* レイアウト基本設定 */
.container {
max-width: 1100px;
margin: 0 auto;
text-align: left;
padding: 0;
}

[class*="col-"] {padding:5px;margin: 0;}
.row {margin: 0;padding: 0;}

/* リンク */
a { text-decoration : none}
a:hover { text-decoration : underline}
a {color: #382d2a;}

a:hover, a:focus, a:active, a.active {
color: #494e74;
text-decoration: none;
}

a, a:hover, a:focus, a:active, a.active {outline: 0;}
a img:hover {opacity:0.9;}

/* テキスト基本設定 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: sans-serif;
font-weight: bold;
}

.text-primary { color: #0076b0;}

p {
font-size: 14px;
line-height: 1.75;
text-align: left;
}

/* 文字装飾 */

.small {
font-size: 12px !important;
color: #666;
}

.b {
font-weight: bold;
font-size: 16px;
}

.bb {
font-weight: bold;
font-size: 18px;
}

.white {color: #fff;}
.red {color: #c60000;}
.blue {color: #00468b;}
.green {color: #00782d;}
.orange {color: #fe7816;}
.gold {color: #807109;}

.u {border-bottom: 1px solid;}

/* 画像センタリング */
.img-centered {margin: 0 auto;}

/* 画像基本設定 */
img {
border: none;
vertical-align : middle;
}

/* リスト基本設定 */
ul.lsnone, ol.lsnone { list-style : none}
ul {padding: 0; margin: 10px 20px;line-height: 1;}

/* ヘッダブロック */
#header {
display: block;
position: relative;
text-align: left;
padding: 0;
margin: 0 auto;
max-width: 1100px;
}

/* コーナーカット */
.headborder {
max-width: 1100px;
margin: 0 auto -6px;
text-align: left;
padding: 0;
background: transparent;
}
.frame {
    position: relative;
    display: inline-block;
    padding: 0;
    height: 50px;
    line-height: 50px;
    background: #fff;
    width: calc(100% - 50px) ;
    margin: 0 auto;
}
.frame:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 50px solid #fff;
    position: absolute;
    right: -50px;
    top: 0px;
}

@media(min-width:468px) {

/* ロゴブロック */
#logo {
text-align: center;
margin: 0 auto;
height: 80px;
padding: 30px 100px 0;
background: #fff;
}

#logo:hover,
#logo:focus,
#logo:active,
#logo.active {
color: #2097d0;
}

/* ロゴ画像 */
#logo img {
margin: 0;
padding: 0;
display: inline-block;
background: #fff;
}

/* サイトタイトル */
#header h1.sitename,
#header div.sitename {
margin: 30px 0 0 10px;
padding: 0;
text-align: left;
line-height: 1.1;
font-weight: normal;
font-size: 10pt;
}

#navi {
width: 50%;
padding: 0;
margin-top: -80px;
float: right;
}

#navi ul {
background: none;
padding: 0;
text-align: left;
list-style: none;
}

#navi li a:hover {
border-bottom: 5px solid;
}

/* メインカラム基本設定 */
#main {
margin: 0 auto;
padding: 50px 100px !important;
text-align: left !important;
background: #fff;
}

}/* メディアクエリ終了 */

#logo {
background: #fff;
text-align: center;
}
#logo img {
margin: 0 auto;
}
#navi {
background: #fff;
height: 60px;
padding: 0px 0;
text-align: center;
}
#navi ul {
margin: 0 auto;
padding:20px 0 0;
list-style:none;
width: 100%;
}
#navi li a {
float: left;
width: 25%;
padding: 20px 10px;
height: 30px;
}

hr {
clear: both;
border-color: transparent;
}

/* メインカラム基本設定 */
#main {
margin: 0 auto;
padding: 50px 30px;
text-align: left !important;
background: #fff;
}

/* コンテンツ */
[id*="post"] {
margin-bottom: 35px;
background: #fff;
}

.entry {
text-align: left;
padding: 50px;
line-height: 2;
}

@media(max-width:468px) {
.entry {padding:0;}
}

/* コンテンツ見出し */
.entry h1, .hentry h1 {
font-size: 30px;
padding: 20px 0;
border-bottom: 2px solid #494e74;
margin: 0;
line-height: 1.5;
}

.entry h2, .hentry h2, .header {
font-size: 24px;
padding: 30px 0 30px 20px;
border-left: 10px solid #494e74;
margin: 15px 0;
line-height: 1.5;
}

.entry h3, .hentry h3 {
font-size: 22px;
padding: 20px 0 10px;
border-bottom: 5px solid #ccc;
margin-bottom: 10px;
line-height: 1.5;
}

.entry h4, .hentry h4 {
margin: 20px 0;
padding: 5px 10px;
background: #f0f0f0;
line-height: 1.5;
border-radius: 10px;
text-justify:distribute;
}

/* コンテンツ画像 */
.entry img {
width: 100% !important;
height: auto;
margin: 30px auto;
}

/* コンテンツ画像サイズ調整 */
.img {
height: 320px;
overflow: hidden;
position: relative;
margin: 30px auto;
}

.img img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}

/* TOPに戻るボタン */
a.gotop {
display: block;
margin: 10px auto 20px;
width: 55px;
height: 55px;
background: url(images/gotop.png);
}

a.gotop i {color: #fff;}
a.gotop span {display: none;}

/* パンくず */
#breadcrumb ul {margin:0; padding: 0;}
#breadcrumb {
margin:5px 0 5px;
background:none;
padding: 0;
}
#breadcrumb li {
list-style: none;
float: left;
margin: 5px;
font-size: 12px;}

#breadcrumb :after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

.list-thumbnail img {width: 110px; height: 110px;margin: 0 10px 5px 0;}

/* サイドバー基本設定 */
#side {
padding:30px 0;
}

@media(max-width:468px) {
#side {margin: 0 2%;}
}

/* サイドバーコンテンツブロック */
.menu {
margin:0;
padding:5px 0;
font-size: 1em;
font-weight: bold
line-hegiht: 1.1;
color: #fff;
text-align: center;
border-radius: 15px;
}

/* レコメンド見出し */
.recommend-header {
margin:0;
padding:10px 0;
font-size: 1.2em;
font-weight: bold
line-hegiht: 1.1;
color: #fff;
text-align: center;
border-radius: 10px 10px 0 0 ;
}

/* レコメンドBOX設定 */
.recommend {
padding: 10px;
margin-bottom: 30px;
text-align: center;
background: #fefefe;
border-radius: 0 0 15px 15px;
border-right: 3px solid;
border-bottom: 3px solid;
border-left: 3px solid;
}

.recommend p {
line-height: 1.25;
}

/* コンテンツリスト */
#side ul{
margin:0;
padding:10px 1%;
list-style: none;
}

#side ul li a{
margin:0 0 3px 0;
padding:10px;
background:#f7f7f7;
border-left:5px solid #e0e0e0;
display:block;
text-decoration:none;
color:#333333;
}

#side aside {
border-left: none;
border-bottom: none;
margin: 0 auto;
padding: 10px 0;
text-align: left !important;
line-height: 1.5;
}

#side aside li {
line-height: 1.5;
}

/* サーチ関連※基本非表示 */
#searchform input {
padding: 0;
margin: 0;
}

#searchform input#s {
width: 60%;
padding: 0 3px;
margin: 5px;
border: none;
height: 30px;
border: 1px solid #ccc;
}

#searchform input#bt {
padding: 0;
margin: 0 0 -10px;
border: none;
height: 30px;
}

/* フッター */
#footer {
padding: 10px 0 10px;
margin: 0 auto;
text-align: center;
clear: both;
max-width: 1100px;

}

#footer p {
line-height: 1;
font-size: 10px;
}
　#footer, #footer a, #copyright {color: #fff;}
#footer img {max-width: 300px;}
#copyright {font-size: 12px;margin: 10px 0;}

/* PC・スマホ表示切替 */
.pc {display: none;}
.sp {display: block;}

/* メディアクエリ768px以上 */
@media(min-width:768px) {

#logo img {margin: 0; float: left;}
.pc {display: block;}
.sp {display: none;}
#main {margin: 0 auto; padding: 30px;}

[class*="rnk-"] {
margin: 30px auto 0;
padding: 0 15px 15px;
text-align: center;
border-style: solid;
border-width: 5px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

[class*="rankb-"] {margin: 0;}

table {width: 100%; margin: 20px auto;}
.midashi {margin: 20px 0 0;}

#side aside {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 auto;
padding: 10px;
text-align: left !important;
line-height: 1.5;
}

.sideheader {
margin: 0;
padding: 20px;
font-size: 16px;
letter-spacing: 0.3em;
clear: both;
background: none;
}

[id*="post"] {height: 100%;}
.entry {margin: 0 2%;}

#side ul li a{
margin:0 0 3px 0;
padding:10px;
background:#f7f7f7;
border-left:5px solid #e0e0e0;
display:block;
text-decoration:none;
color:#333333;
}

#side ul li a:hover{
color:#FC5179;
border-left:5px solid #FC5179;
}

}/* メディアクエリ終了 */

/* リンクアニメーション */
a {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

/* サイトカラー指定 */

.navigation{
position:absolute;
right: 30px;
top: 70px;
width:50%;
height:50px;
z-index:10;
}

.navigation__wrapper{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}

.navigation__container{
position:absolute;
top:50%;left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
width:100%;
}

.navigation__list{
list-style: none;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;}

.navigation__list>li a{color:#494e74;text-transform:uppercase;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.navigation__list>li a:hover{color:#6882f6}
.navigation__burger{display:none}

@media (max-width: 991px){
.navigation__cta{display:none}
.navigation__container{position:fixed;top:0;left:0;-webkit-transform:translate(0, 0);transform:translate(0, 0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#fff;opacity:0;visibility:hidden;-webkit-transition:visibility 0s .4s,opacity .4s;transition:visibility 0s .4s,opacity .4s}
.navigation__container--is-open{opacity:1;visibility:visible;-webkit-transition:visibility 0s,opacity .4s;transition:visibility 0s,opacity .4s}
.navigation__container--is-open .navigation__list>li:nth-child(1) a{-webkit-transition:color .2s ease-in-out,-webkit-transform .2s .4s;transition:color .2s ease-in-out,-webkit-transform .2s .4s;transition:transform .2s .4s,color .2s ease-in-out;transition:transform .2s .4s,color .2s ease-in-out,-webkit-transform .2s .4s}
.navigation__container--is-open .navigation__list>li:nth-child(2) a{-webkit-transition:color .2s ease-in-out,-webkit-transform .2s .6s;transition:color .2s ease-in-out,-webkit-transform .2s .6s;transition:transform .2s .6s,color .2s ease-in-out;transition:transform .2s .6s,color .2s ease-in-out,-webkit-transform .2s .6s}
.navigation__container--is-open .navigation__list>li:nth-child(3) a{-webkit-transition:color .2s ease-in-out,-webkit-transform .2s .8s;transition:color .2s ease-in-out,-webkit-transform .2s .8s;transition:transform .2s .8s,color .2s ease-in-out;transition:transform .2s .8s,color .2s ease-in-out,-webkit-transform .2s .8s}
.navigation__container--is-open .navigation__list>li:nth-child(4) a{-webkit-transition:color .2s ease-in-out,-webkit-transform .2s 1s;transition:color .2s ease-in-out,-webkit-transform .2s 1s;transition:transform .2s 1s,color .2s ease-in-out;transition:transform .2s 1s,color .2s ease-in-out,-webkit-transform .2s 1s}
.navigation__container--is-open .navigation__list>li a{-webkit-transform:translateY(0);transform:translateY(0)}
.navigation__container--is-open .navigation__list>li a:hover{color:#c4c4c4}
.navigation__list{height:250px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}
.navigation__list>li{overflow:hidden}
.navigation__list>li a{-webkit-transform:translateY(100%);transform:translateY(100%);color:#585858;font-weight:700;-webkit-transition:-webkit-transform 0s .4s;transition:-webkit-transform 0s .4s;transition:transform 0s .4s;transition:transform 0s .4s, -webkit-transform 0s .4s}

.navigation__burger{
position:absolute;
top: 35px;
right: 0px;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
width:35px;
height:27px;
-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer}
.navigation__burger--is-open .navigation__burger-el{-webkit-transition:opacity .2s,-webkit-transform .4s;transition:opacity .2s,-webkit-transform .4s;transition:transform .4s,opacity .2s;transition:transform .4s,opacity .2s,-webkit-transform .4s}
.navigation__burger--is-open .navigation__burger-el--top{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.navigation__burger--is-open .navigation__burger-el--bottom{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.navigation__burger--is-open .navigation__burger-el--middle{opacity:0}
.navigation__burger-el{display:block;width:100%;height:3px;background-color:#494e74;-webkit-transition:opacity .2s .2s,-webkit-transform .4s;transition:opacity .2s .2s,-webkit-transform .4s;transition:transform .4s,opacity .2s .2s;transition:transform .4s,opacity .2s .2s,-webkit-transform .4s}
.navigation__burger-el--top{-webkit-transform-origin:left top;transform-origin:left top}
.navigation__burger-el--bottom{-webkit-transform-origin:left bottom;transform-origin:left bottom}
}

.list-thumbnail img {
width: 100%;
height: auto;
}
@media(min-width:768px) {
.list-thumbnail img {
width: 200px;
height: auto;
}
}

.more {
font-size: 90%;
padding: 5px 15px;
float: right;
color: #494e74;
border: 1px solid #494e74;
border-radius: 15px;
}

a.more:hover {
color:#6882f6;
border-color:#6882f6;}

.entry .row, .entry [class*="col-"] {
padding: 0;
margin: 0;
}
.social {
margin: 0 auto;
text-align: center;
}
@media(max-width:468px) {

}
.social a {
display: block;
width: 100%;
padding: 15px 0;
color: #fff;
}
.facebook {
background-color: #315096;
}
.facebook:hover {
  background-color: #4166b9;
  color: white;
}

.twitter {
width: 33%;
  background-color: #55acee;
}

.twitter:hover {
  background-color: #70bdf7;
  color: white;
}
.hatena {
width: 33%;
  background-color: #008fde;
}

.hatena:hover {
  background-color: #25a3e8;
  color: white;
}