@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

@font-face {
  font-family: 'FontAwesome';
  src: url('../font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ONGAKUN';
  src: url('../font/ongakun/ONGAKUN.eot');
  src: url('../font/ongakun/ONGAKUN.eot') format('embedded-opentype'), url('../font/ongakun/ONGAKUN.woff') format('woff'), url('../font/ongakun/ONGAKUN.ttf') format('truetype'), url('../font/ongakun/ONGAKUN.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body{
     font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 30px;
     font-weight: 400;
     line-height: 1.8;
     margin: 0px auto;
    max-width: 750px;
    width: 750px;
    -webkit-text-size-adjust: 100%;
    color: #333333;
    word-break: break-all;
    overflow-wrap: break-word;
}

.nav-box-op-body{
    overflow-y: scroll;
    position: fixed;
    width: 100%;
    left: calc(50% - 375px);
}

p{
    margin: 0 auto 24px auto;
}

.post-content p{
    max-width: 768px;
}

.post .post-content p:first-child,.post .post-content img+p{
}

h1{
    color: #333333;
    font-weight: 400;
    margin: 24px auto 48px;
    font-size: 48px;
    position: relative;
    line-height: 64px;
    padding: 0 0 0 76px;
}

h1 span{
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px;
}

.post-content h1{
    max-width: 816px;
    font-size: 48px;
    line-height: 64px;
}

h1::before{
    position: absolute;
    top: calc(50% - 32px);;
    left: 0;
    width: 64px;
    height: 64px;
    color: #fff;
    text-align: center;
    line-height: 64px;
    border-radius: 50%;
    font-size: 46px;
}


h2{
    margin: 48px auto 24px;
    color: #333;
    font-size: 44px;
    line-height: 56px;
    font-weight: 400;
    border-top: 4px solid #ededed;
    padding: 16px 0 8px 56px;
    position: relative;
    box-sizing: border-box;
}

.post-content h2{
    max-width: 824px;
    overflow: initial;
}

h2::before{
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 30%;
    height: 4px;
}

h2::after{
    position: absolute;
    top: 16px;
    left: 0;
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    font-size: 56px;
}

h3 {
    position: relative;
    margin: 0 auto 24px auto;
    font-size: 40px;
    font-weight: 400;
    line-height: 52px;
    padding: 8px 0 8px 52px;
    box-sizing: border-box;
}

.post-content h3{
    max-width: 768px;
}

h3::before{
    position: absolute;
    top: 8px;
    left: 0;
    width: 52px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    font-size: 56px;
}



h4 {
    position: relative;
    margin: 0 auto 24px auto;
    font-size: 36px;
    font-weight: 400;
    color: #333333;
    line-height: 48px;
    padding: 0 0 4px 48px;
    box-sizing: border-box;
}

.post-content h4{
    max-width: 768px;
}

h4::before{
    position: absolute;
    top: 0px;
    left: 0;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 42px;
}

h5{
    color: #333333;
    margin: 0 auto 24px auto;
    font-weight: 400;
    font-size: 33px;
    padding: 4px 0 4px 16px;
    box-sizing: border-box;
    position: relative;
    line-height: 44px;
}

.post-content h5{
    max-width: 768px;
}

h6{
    margin: 0 auto 24px auto;
    font-weight: 400;
    font-size: 30px;
    position: relative;
    line-height: 40px;
}

.post-content h6{
    max-width: 768px;
}


a {
    text-decoration: none;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    outline: none;
}

a img{ 
    transition: all ease-in-out .3s;
    border: 0px;
}

.button{
    position: relative;
    display: inline-block;
    padding: 14px 48px;
    color: #a759ff;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    font-size: 32px;
    border-radius: 16px;
    line-height: 120%;
}

.button::before{
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 20px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    transition: all .3s;
    border-top-width: 4px;
    border-right-width: 4px;
    border-right-style: solid;
    border-top-style: solid;
}


table{
    margin: 0 auto 24px;
    border-collapse: collapse;
}

.post-content table{
    max-width: 864px;
}

table th, table td {
    padding: 8px 16px;
}

table th {
    font-weight: 400;
}

.post-content ul, .post-content ol {
    max-width: 768px;
    margin: 0 auto 24px;
    box-sizing: border-box;
}


.wrap{
    padding: 24px 32px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}


.wrap-box .wrap{
    overflow: hidden;
    background-color: rgba(255, 255, 204, 0);
    position: initial;
}

.wrap-box {
    overflow: hidden;
    position: relative;
}



#header{
    position: relative;
    z-index: 20;
    width: 100%;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}



#header .wrap{
    background-color: rgba(255, 255, 255, 0);
    padding: 0;
    min-width: 100%;
}


.header-wrap{
    position: relative;
    background: #fff;
}

.header-wrap::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 50%;
    margin-right: 620px;
}


.header-inner{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 20px 0 0;
}

.header-inner::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
}

.header-right-inner{
    overflow: hidden;
    margin: 0;
    padding: 0;
    float: right;
}

.logo-inner{
    overflow: hidden;
    float: left;
    padding: 0 20px;
}

#logo {
    margin: 0;
    padding: 0;
    line-height: unset;
}

#logo::before , #logo::after{
    content: "";
    height: 0;
    width: 0;
}

#logo a{
      color: #fff;
    font-size: 38px;
    float: left;
    text-decoration: none;
    line-height: 112px;
    padding: 0;
}

#logo a img {
    vertical-align: bottom;
    height: 80px;
    width: auto;
    padding: 16px 0;
}


.nav-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    background: #fff;
    overflow: scroll;
    left: 100%;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    max-width: 750px;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

.nav-box-op{
    left: 0%;
}

#nav {
    position: relative;
    margin: 0;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;
}

#nav ul{
    list-style: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    text-align: center;
    border-bottom: 2px solid #ededed;
}

#nav .nav-ul-5 li{
    width: 50%;
}

#nav .nav-ul-4 li{
    width: 50%;
}

#nav .nav-ul-3 li{
    width: 50%;
}

#nav ul .nav-ul-li-center{
    margin: 0 0 0 187.5px;
}

#nav ul .nav-ul-li-center .nav-ul-li-main-a::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100px;
    background-color: #ededed;
    bottom: 25px;
    top: 25px;
    left: 0;
    z-index: 0;
}


#nav ul li {
    font-size: 36px;
    text-align: left;
    color: #333;
    line-height: 46px;
    margin: 0px;
    display: inline-block;
    float: left;
    position: relative;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    overflow: hidden;
    background: #fff;
}

#nav ul li::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100px;
    background-color: #ededed;
    bottom: 25px;
    top: 25px;
    right: 0;
    z-index: 0;
}

#nav ul li:nth-child(2)::before {
    content: "";
    position: absolute;
    width: 0px;
}



#nav ul li ul li{
    width: 100%;
    margin: 0;
    clear: both;
    line-height: 48px;
    visibility: hidden;
    height: 0px;
    opacity: 0;
    transition: 0.3s;
    display: block;
}



#nav ul li .nav-ul-li-main-a {
    color: #333;
    padding: 29px 0 0 88px;
    position: relative;
    text-decoration: none;
    display: block;
    height: 121px;
    z-index: 1;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

#nav ul li .nav-ul-li-main-a span{
    display: block;
    font-size: 26px;
}

.nav-ul-li-main-a{

}


#nav ul li .nav-ul-li-main-a::before{
    content: "g";
    font-family: ONGAKUN;
    position: absolute;
    top: calc(50% - 34px);
    left: 10px;
    width: 68px;
    height: 68px;
    background-color: #ffffff;
    color: #a759ff;
    text-align: center;
    line-height: 68px;
    border-radius: 50%;
    font-size: 50px;
}


#nav ul #nav-ul-li-main-a-cat-j .nav-ul-li-main-a::before{
    content: "\f238";
    font-family: FontAwesome;
    color: #00b300;
    font-size: 46px;
}

#nav ul #nav-ul-li-main-a-cat-j::after {
    background: #00b300;
}

.mg-menu-1 .mg-menu-title-wrap{
    background: #00b300;
}

.mg-menu-1 .mg-menu-title-wrap .mg-menu-title-inner::before {

}

.mg-menu-1 .mg-menu-title-wrap .mg-menu-title-inner .mg-menu-title-more-bt {

}


.mg-menu-1 .mg-menu-main-inner .mg-menu-item .mg-menu-item-thumbnail:before{
    background: linear-gradient(-30deg,rgba(126, 239, 126, 0.7) 15%,rgba(0, 179, 0, 0.7) 55%);
}

#nav ul #nav-ul-li-main-a-cat-s .nav-ul-li-main-a::before{
    content: "\f13d";
    font-family: FontAwesome;
    color: #171c60;
    font-size: 46px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}

#nav ul #nav-ul-li-main-a-cat-s::after {
    background: #171c60;
}

.mg-menu-3 .mg-menu-title-wrap{
    background: #171c60;
}

.mg-menu-3  .mg-menu-title-wrap .mg-menu-title-inner::before {

}

.mg-menu-3  .mg-menu-title-wrap .mg-menu-title-inner .mg-menu-title-more-bt {

}


.mg-menu-3  .mg-menu-main-inner .mg-menu-item .mg-menu-item-thumbnail:before{
    background: linear-gradient(-30deg,rgba(114, 122, 232, 0.7) 15%,rgba(23, 28, 96, 0.7) 55%);
}

#nav ul #nav-ul-li-main-a-cat-s2 .nav-ul-li-main-a::before{
    content: "\f13d";
    font-family: FontAwesome;
    color: #171c60;
    font-size: 46px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}

#nav ul #nav-ul-li-main-a-cat-s2::after {
    background: #171c60;
}

#nav ul li::after {
    display: block;
    content: "";
    position: absolute;
    bottom: -380px;
    left: 50%;
    width: 400px;
    height: 400px;
    background: #a759ff;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    z-index: 0;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav ul .active::after{
    display: block;
    content: "";
    position: absolute;
    bottom: -40px !important;
}

#nav ul .current::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    bottom: -380px;
}

.mg-menu{
    position: relative;
    width: 100%;
    left: 0;
    background-color: #ededed;
    overflow: hidden;
    -webkit-transition: all ease-out .3s;
    transition: all ease-out .3s;
    margin: 0;
    max-height: 0;
}

.mg-menu-title-wrap{
    background-color: #a759ff;
}

.mg-menu-title-inner{
    color: #fff;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: left;
    font-size: 24px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.mg-menu-title-inner span{
    margin: 0 0 0 16px;
    font-size: 16px;
}

.mg-menu-title-more-bt{
    color: #fff !important;
    padding: 25px 48px 25px 0!important;
    line-height: 40px;
    font-size: 30px;
    margin: 0;
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.mg-menu-title-more-bt::before {
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    right: 18px;
    font-size: 48px;
}

.mg-menu-op{
    max-height: 960px;
}


.mg-menu-main-inner{
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px 0 0 20px;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

.mg-menu-item {
    overflow: hidden;
    padding: 0;
    margin: 0 20px 24px 0;
    width: calc(50% - 20px);
    position: relative;
    line-height: 1.6;
    font-size: 30px;
}

.mg-menu-item-thumbnail {
    width: 100%;
    background-size: cover;
    margin: 0 0 8px 0;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.mg-menu-item-thumbnail:before {
    content: "";
    display: block;
    padding-top: 62%;
    background: linear-gradient(-30deg,rgba(220, 189, 255, 0.7) 15%,rgba(167, 89, 255, 0.7) 55%);
    opacity: 0;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.mg-menu-item-thumbnail::after {
    content: "\f105 この続きを読む";
    font-family: FontAwesome;
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    opacity: 0;
    color: #ffffff;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.mg-menu-item-meta {
    font-size: 24px;
    color: #333 !important;
}

.mg-menu-item-title{
    width: 100%;
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;
  white-space: normal;
  max-height: 4.8em;
  position: relative;  
    color: #333 !important;
}

.mg-menu-item-title::after{
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  background-color: #ededed;
}


.nav-title{
    background-color: #ededed;
    height: 120px;
    color: #333;
    line-height: 120px;
    font-size: 42px;
    padding: 0 0 0 32px;
}

.nav-title span {
    margin: 0 0 0 24px;
    font-size: 34px;
}


.normal-nav{
    padding: 32px 0 0 32px;
}

.normal-nav p{
    margin: 0 auto 16px auto;
    font-size: 32px;
    font-weight: 500;
    color: #333;
    padding: 0 32px 0 0;
}

#nav .normal-nav ul{
    list-style: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-bottom: 0px solid #ededed;
}

#nav .normal-nav ul li::before {
    content: "";
    width: 0;
    height: 0;
}

#nav .normal-nav ul li::after {
    content: "";
    width: 0;
    height: 0;
}

#nav .normal-nav ul li {
    width: 100%;
    border-bottom: 2px solid #ededed;
}

.nav-ul-li-item {
    color: #333 !important;
    padding: 25px 54px 25px 0!important;
    line-height: 40px;
    font-size: 30px;
    margin: 0;
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.nav-ul-li-item::before {
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    right: 24px;
    font-size: 48px;
}

.nav-ul-li-item-youtube, .nav-ul-li-item-twitter{
    padding: 25px 54px 25px 82px!important;
}

.nav-ul-li-item-youtube::after{
    content: '\f167';
    font-family: FontAwesome;
    position: absolute;
    left: 18px;
    font-size: 48px;
    color: #cd201f;
}

.nav-ul-li-item-twitter::after{
    content: '\f099';
    font-family: FontAwesome;
    position: absolute;
    left: 18px;
    font-size: 48px;
    color: #55acee;
}



#nav-btn-wrap{
    overflow: hidden;
    position: fixed;
    height: 100px;
    width: 100px;
    text-align: center;
    right: 12px;
    top: 6px;
    z-index: 9999;
    border-radius: 50%;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
}


#nav-btn {
    display: block;
    position: relative;
    top: 36px;
    left: 25px;
    width: 50px;
    height: 6px;
    margin: 0;
    transition: .2s;
}

#nav-btn:before{
    display: block;
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 50px;
    height: 6px;
    transition: .3s;
}


#nav-btn:after {
    display: block;
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    width: 50px;
    height: 6px;
    transition: .3s;
}

.close-wrap{
    background: rgba(255, 255, 255, 0.7);
}

#nav-btn-wrap .close {
    height: 0;
}

#nav-btn-wrap .close:before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    top: 10px;
}

#nav-btn-wrap .close:after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    top: 10px;
}



#nav-btn-menu{
    position: absolute;
    font-size: 20px;
    text-align: center;
    top: 56px;
    width: 100%;
    margin: 0;
}

.close-menu {
    opacity: 0;
}

.nav-btn-wrap-sp-close {
    position: absolute;
    width: 0;
    left: 0;
    height: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0);
    z-index: -1;
}

.close-wrap .nav-btn-wrap-sp-close {
    z-index: 1;
    height: 100%;
    width: 100%;
}

#gnav-wrap{
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    overflow: hidden;
    height: 92px;
    width: 750px;
}

#gnav-wrap ul{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    height: 120px;
}

#gnav-wrap ul li{
    position: relative;
    overflow: hidden;
    display: table-cell;
    padding: 0 24px;
    height: 92px;
}

#gnav-wrap ul li::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 60px;
    background-color: #ededed;
    bottom: 16px;
    top: 16px;
    right: 0;
    z-index: -1;
}

#gnav-wrap ul li::after {
    display: block;
    content: "";
    position: absolute;
    bottom: -386px;
    left: 50%;
    width: 400px;
    height: 400px;
    background: #a759ff;
    z-index: -1;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


#gnav-wrap ul li a{
    color: #333;
    height: 92px;
    display: block;
    padding: 10px 0 0 56px;
    position: relative;
    box-sizing: border-box;
    font-size: 32px;
    line-height: 46px;
}

#gnav-wrap ul li a::before{
    content: "g";
    font-family: ONGAKUN;
    position: absolute;
    top: calc(50% - 28px);
    left: 0;
    width: 56px;
    height: 56px;
    background-color: rgb(255, 255, 255, 0);
    color: #a759ff;
    text-align: center;
    line-height: 56px;
    border-radius: 50%;
    font-size: 44px;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

#gnav-wrap ul #gnav-j a::before{
    content: "\f238";
    font-family: FontAwesome;
    color: #00b300;
    font-size: 42px;

}

#gnav-wrap ul #gnav-s a::before , #gnav-wrap ul #gnav-s2 a::before{
    content: "\f13d";
    font-family: FontAwesome;
    color: #171c60;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    font-size: 42px;

}





.gnav-jp{
    display: block;
    font-size: 18px;
    margin: -4px 0 0;
    line-height: 20px;
}

#gnav-wrap ul #gnav-j::after {
    background: #00b300;
}

#gnav-wrap ul #gnav-s::after, #gnav-wrap ul #gnav-s2::after {
    background: #171c60;
}


#gnav-wrap ul .current::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    bottom: -386px;
}


#contents{
    overflow: hidden;
    position: relative;
    padding: 0;
}

#contents::before{
    content: "";
    position: absolute;
    max-width: 980px;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: -1;
    margin: 0 auto;
}


.top-item-thumbnail {
    position: relative;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0;
}

.top-item-thumbnail img{
    z-index: -1;
}


.top-item-thumbnail::before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さを幅の66.6%に固定 */
    opacity: 0;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}


.top-item-thumbnail::after {
    content: "\f105 この続きを読む";
    font-family: FontAwesome;
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 26px;
    line-height: 40px;
    opacity: 0;
    color: #ffffff;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.post{
    padding: 0 0 16px;
    margin: -24px 0 0;
}

.post header{
    top: 0;
    left: 0;
    width: 100%;
    position: relative;
}


.post-title{
    margin: 0 auto 12px;
    font-size: 42px;
    line-height: 68px;
    padding: 16px 0 0;
    position: relative;
    color: #333;
    width: 100%;
    font-weight: 400;
    overflow: hidden;
}

.post-title::before{
    content: "";
    position: absolute;
    left: -130px;
    width: 1240px;
    height: 3px;
    color: #fff;
    text-align: center;
    line-height: 0;
    border-radius: 0;
    font-size: 0px;
    top: calc(100% - 1px);
}

.post-list-right .post-title{
    margin: 0 auto;
    padding: 16px 0 0;
    border: 0;
}

.post-list-right .post-title::before , .post-list-right .post-title::after{
    content: "";
    height: 0;
    width: 0;
}


.post-title a{
    color: #333;
    display: block;
}

.post header .post-title{
    padding: 0 0 24px;
    max-width: 980px;
    font-size: 48px;
    line-height: 72px;
    text-align: center;
    overflow: initial;
    max-height: 100%;
}

.post_number {
    position: absolute;
    font-size: 28px;
    line-height: 32px;
    bottom: 49px;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit- transform: translateY(0%) translateX(-50%);
    padding: 0 24px;
    background: #ffffff;
    font-style: italic;
}

.post-meta{
    margin: 0 auto;
    font-size: 20px;
}

.post-meta p{
    margin: 0;
    display: inline-block;
    font-size: 20px;
    line-height: 46px;
}

.post-list-right .post-meta p{
    overflow: initial;
    float: right;
    padding: 0;
    border: 0;
    font-size: 20px;
    line-height: 46px;
    color: #888888;
}

.post-meta .post-categories{
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: bottom;
}

.post-meta .post-categories li{
    float: left;
}

.post header .post-meta{
    margin: 24px auto;
    display: table;
}


.post-content{

}

.post-thumbnail{
    margin: 0 -32px 0;
    padding: 0 0 24px;
}

.post-thumbnail img{
    margin: 0 auto;
    max-width: 1240px;
}

.post-thumbnail-movie {

}

.post .post-content .post-thumbnail-movie {
    padding-top: calc(56.25% + 36px);
}

.post-thumbnail-movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto;
    max-width: 1240px;
    left: 0;
}

.post-main-thumbnail-movie {
    position: relative;
    margin: 0 0 24px;
}

.post-main-thumbnail-movie-box {
    margin: 0 auto;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.2);
    clear: both;
    padding-top: calc(56.25%);
    position: relative;
}

.post-main-thumbnail-movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%!important;
    width: 100%!important;
    margin: 0 auto;
    height: auto;
}

.post-main-thumbnail-movie-en, .post-main-thumbnail-movie-jp {
    position: relative;
    color: #ffffff;
    opacity: 0.6;
    margin: 0;
    line-height: 120px;
    height: 120px;
    font-weight: 100;
    transform: skewX(-15deg);
}

.post-main-thumbnail-movie-en {
    font-size: 88px;
    width: auto;
    float: left;
    margin: 0 0 0 16px;
}

.post-main-thumbnail-movie-jp {
    font-size: 36px;
    width: auto;
    float: right;
    margin: 0 16px 0 0;
}

.post-list .post-content{
    width: 100%;
    margin: 0 auto;
    float: left;
    position: relative;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
}

.post-list .post-content .post-thumbnail-movie {
    margin: 0;
}

.newicon{
    position: absolute;
    right: 16px;
    bottom: -24px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    line-height: 72px;
    text-align: center;
    color: #fff;
    border: 3px solid #ffffff;
    transform: rotate(30deg);
    margin: 0;
    font-size: 24px;
    pointer-events: none;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
}

.post-list .post-content .post-thumbnail-movie , .journey-post-list .post-thumbnail-movie {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: 1.5px solid #fff;
    box-sizing: border-box;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
    background: rgba(255, 0, 0, 0.5);
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    pointer-events: none;
}



.post-list .post-content .post-thumbnail-movie::before  , .journey-post-list .post-thumbnail-movie::before{
    content: "";
    position: absolute;
    left: 33px;
    top: 24px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 40px solid #ffffff;
}

.post_list_number {
    padding: 0 24px 0 0;
    font-size: 32px;
    line-height: 46px;
    pointer-events: none;
    font-style: italic;
    background: #ffffff;
    float: left;
}

.post img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.wrap-box .wrap-post-list{
    padding: 0 0 24px;
}

.post-list{
    border-top: 2px solid #ededed;
    overflow: hidden;
    padding: 32px;
    margin: 0 auto 0;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.wrap-post-list a:first-child .post-list{

}

.post-list img{
    width: 100%;
    max-width: 800px;
    height: 100%;
    display: block;
    margin: auto 0;
    float: left;
    position: absolute;
    top: 0;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}


.post-list:first-child img{
    width: 100%;
    float: none;
}

.post-list-right{
    width: 100%;
    float: left;
    padding: 32px 0 0;
}

.post-list-right p{
    margin: 0;
    max-height: 5.4em;
    overflow: hidden;
    padding: 0;
    font-size: 24px;
    color: #333333;
}

.post-list-right header{
    padding: 0 0 13px;
    margin: 0 0 16px;
    position: relative;
}



.wrap-sub-title {
    padding: 0 32px 32px;
    max-width: 1240px;
    margin: 0 auto;
}


.wrap-sub-title p{
    padding: 4px 16px 4px 32px;
    margin: 0 auto;
    max-width: 1240px;
    font-size: 30px;
    position: relative;
    box-sizing: border-box;
    background-color: #ededed;
    border-radius: 8px;
}

.wrap-sub-title p::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 70%;
    top: 15%;
    z-index: 1;
    left: 20px;
}


#contents-title {
    margin: 0;
    max-width: 100%;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    padding: 32px 0;
}

#jp-contents-title{
    display: block;
    font-size: 20px;
    font-weight: 300;
    margin-top: 4px;

}

#breadcrumb-box{

}

#breadcrumb {
    overflow: hidden;
    max-width: 750px;
    margin: 0;
    padding: 3px;
    font-size: 24px;
    height: 42px;
    line-height: 42px;
}

#breadcrumb ol{
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    height: 60px;
}

#breadcrumb li{
    margin: 0;
    padding: 0 16px 0 12px;
    position: relative;
    display: table-cell;
}

#breadcrumb li:first-child{
    padding: 0 16px 0 20px;
}

#breadcrumb li:last-child{
    padding: 0 0 0 12px;
}

#breadcrumb li::before{
    content: "";
    position: absolute;
    width: 2px;
    height: 70%;
    right: 0;
    background-color: #d0d0d0;
    transform: skew(-28deg);
    bottom: 15%;
    top: 15%;
}

#breadcrumb li:last-child::before{
    width: 0px;
}

#breadcrumb li:last-child::after{
    width: 0px;
}

#searchform-wrap{
    background-color: #fff;
    overflow: hidden;
    padding: 80px 0 160px;
}

.searchform {
    float: left;
    padding: 24px 32px;
    width: 750px;
    background-color: #ededed;
    overflow: hidden;
    box-sizing: border-box;
}

.s{
    border: 0;
    margin: 0;
    height: 72px;
    width: calc(100% - 72px);
    float: left;
    vertical-align: middle;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 30px;
    box-sizing: border-box;
    display: block;
    padding: 0 24px;
    border-radius: 36px 0 0 36px;
    outline: 0;
    color: #333333;
}

.searchsubmit{
    position: relative;
    height: 72px;
    line-height: 72px;
    border: 0;
    background: #ffffff;
    padding: 0;
    float: right;
    color: #333333;
    font-size: 30px;
    vertical-align: middle;
    text-align: center;
    width: 72px;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    display: block;
    border-radius: 0 36px 36px 0;
}

.searchsubmit::before {
    content: "\f002";
    font-family: FontAwesome;
    position: absolute;
    width: 72px;
    left: 0;
    height: 72px;
    top: 0;
}

.page-search-box{
    padding: 0 32px;
}

.page-search .searchform {
    width: 686px;
    background-color: #fff;
    padding: 0;
}

.page-search .s , .page-search .searchsubmit{
    background-color: #ededed;
}

.page-search {
    overflow: hidden;
    padding: 24px 0 54px 0;
}


#nav-search{
    position: absolute;
    float: left;
    overflow: hidden;
    display: block;
    width: 50px;
    height: 36px;
    text-align: center;
-webkit-transition: width 0.3s;
    transition: width 0.3s;
    z-index: 100;
    right: 8px;
    margin: 0;
}


#nav-search i{
    display: block;
    line-height: 36px;
    width: 50px;
    float: right;
    cursor: pointer;
    font-size: 24px;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    text-shadow:
        0 2px 0 #fff,
        2px 0 0 #fff,
        0 -2px 0 #fff,
        -2px 0 0 #fff,
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px 2px 0 #fff
        ;
}


#nav-search .searchform{
    float: right;
    overflow: hidden;
    width: 0px;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    height: 32px;
    padding: 0;
}

.next-page{
    float: left;
    width: 710px;
    height: 180px;
    position: relative;
    background-color: #fff;
    transition: all .3s;
    margin: 20px 0 20px 20px;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
}

.next-page .category-tag {
    position: absolute;
    margin: 0;
    display: block;
    bottom: 30px;
    left: 216px;
    font-size: 20px;
    transition: all .3s;
    line-height: 40px;
}


.next-page-thumbnail,prev-page-thumbnail{
    width: 120px;
    height: 120px;
    background-size: cover;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: 80px;
    top: 30px;
    transition: all .3s;
}

.prev-page-thumbnail{
    width: 120px;
    height: 120px;
    background-size: cover;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: 30px;
    top: 30px;
}


.prev-page{
    float: right;
    width: 710px;
    height: 180px;
    position: relative;
    background-color: #fff;
    transition: all .3s;
    margin: 20px 20px 20px 0;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
}


.prev-page .category-tag {
    position: absolute;
    margin: 0;
    display: block;
    bottom: 30px;
    left: 166px;
    font-size: 20px;
    transition: all .3s;
    line-height: 40px;
}


.next-page a {
    position: relative;
    display: block;
    padding: 30px 30px 30px 80px;
    color: #333333;
    text-decoration: none;
    transition: all .3s;
    font-size: 28px;
    line-height: 1.4;
    height: 100%;
    box-sizing: border-box;
    z-index: 2;
}

.next-page a::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    transition: all .3s;
}


.next-page a::after {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 21px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    transition: all .3s;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: #ffffff;
}

.prev-page a {
    position: relative;
    display: block;
    padding: 30px 80px 30px 30px;
    color: #333333;
    text-decoration: none;
    transition: all .3s;
    font-size: 28px;
    line-height: 1.4;
    height: 100%;
    box-sizing: border-box;
    z-index: 2;
}

.prev-page a::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    transition: all .3s;
}

.prev-page a::after {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 21px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    transition: all .3s;
    border-top-width: 2px;
    border-right-width: 2px;
    border-right-style: solid;
    border-top-style: solid;
    border-color: #ffffff;
}


.paging-title{
    max-height: 2.8em;
    overflow: hidden;
    margin: 0 30px 0 0;
    position: absolute;
    left: 216px;
}

.prev-page a .paging-title{
    left: 166px;
    margin: 0 80px 0 0;
}

.paging-date-prev {
    margin: 0;
    position: absolute;
    right: 80px;
    bottom: 30px;
    font-size: 20px;
    color: #888888;
}

.paging-date-next {
    margin: 0;
    position: absolute;
    right: 30px;
    bottom: 30px;
    font-size: 20px;
    color: #888888;
}


.pagenation {
    margin: 48px 0 24px 0;
}

.pagenation ul {
    margin: 0 auto;
    padding: 0;
    display: table;
}
.pagenation li {
    float: left;
    list-style: none outside none;
    margin-left: 8px;
    border-radius: 50%;
    display: inline-block;
    height: 54px;
    width: 54px;
    line-height: 54px;
    text-align: center;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    font-size: 25px;
}

.pagenation li:first-child {
    margin-left: 0;
}
.pagenation li.active {
    color: #FFFFFF;
}
.pagenation li a {
    border-radius: 50%;
    display: inline-block;
    height: 54px;
    width: 54px;
    line-height: 54px;
    text-align: center;
    text-decoration: none;
}

.page-links{
    text-align: center;
    padding: 16px 0 0 0;
}

.page-links span{
    border-radius: 50%;
    display: inline-block;
    height: 54px;
    width: 54px;
    line-height: 54px;
    text-align: center;
    color: #FFFFFF;
    font-size: 25px;
}

.page-links a {
    display: inline-block;
}

.page-links a span{
    background-color: rgba(255, 121, 27, 0);
    transition: all ease-in-out .3s
}

.wrap-paging{
    padding: 20px 0 0 0;
    box-sizing: border-box;
    max-width: 100%;
    background-color: #ededed;
}


.paging{
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    max-width: 1280px;
}


#comment-area{
    max-width: 816px;
    margin: 0 auto;
}

#respond{
    max-width: 816px;
    margin: 0 auto;
}

#comment{
    width: 95%;
    display: block;
    font-size: 30px;
}

.comment-body p {
    clear: both;
}

.commets-list{
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 768px;
}

.commets-list .avatar {
    float: left;
    margin: 0 12px 12px 0;
}

.children {
    padding-left: 32px;
    list-style: none;
}


.reply {
    text-align: right;
    margin: 0 0 16px 0;
}

.commets-list li {
    overflow: hidden;
    padding: 16px 0 0;
    width: 100%;
    border-top: 1px solid #efefef;
}

.form-submit{
    text-align: right;
    padding: 24px 0 0;
}

.form-submit .submit{
    position: relative;
    display: inline-block;
    padding: 14px 40px;
    background-color: #fff;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    font-size: 32px;
    border-radius: 16px;
    line-height: 120%;
    -webkit-appearance: none;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}


.wrap-pagetop{
    margin: 0 auto;
    overflow: hidden;
    background: url(../img/common/footer/footer-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 480px;
}

.wrap-pagetop .wrap{
    height: 432px;
    position: relative;
}

.pagetop_box {
    height: 120px;
    width: 120px;
    position: absolute;
    right: 32px;
    bottom: 24px;
}

.pagetop {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    font-size: 126px;
    color: #ffffff;
    border-bottom: 8px solid #ffffff;
}

.pagetop::before {
    content: "\f106";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 8px;
    width: 120px;
    line-height: 84px;
    transition: all .3s;
}


.footer-v-sns-box{

}

.footer-v-sns-box .footer-sns-li {
    height: 120px;
    width: 120px;
    line-height: 96px;
    background-color: rgba(0, 0, 0, 0.4);
    margin: 0 24px 0 0;
}

.footer-v-sns-box .footer-sns-twitter::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 0%;
}

.footer-v-sns-box .footer-sns-youtube::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 0%;
}

.footer-v-sns-box .footer-sns-li a {
    font-size: 60px;
    box-sizing: border-box;
    border-bottom: 8px solid #ffffff;
    height: 120px;
    width: 120px;
}


.footer-v-sns-box .footer-sns-ul {
    width: auto;
    margin: 0 auto;
    position: absolute;
    right: 152px;
    bottom: 24px;
}


#footer-widget {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 20px 40px;
    box-sizing: border-box;
    background-color: #ededed;

}

#footer-widget h2{
    margin: 0 auto 0px;
    padding: 8px 0 8px 48px;
    border-top: 0px;
    color: #ffffff;
}

#footer-widget h2::before{
    top: 0px;
}

#footer-widget h2::after{
    top: 8px;
    color: #ffffff;
}

#footer-widget-box1{
    max-width: 1240px;
    box-sizing: border-box;
    padding: 0px;
    overflow: hidden;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.3);
}

.footer-widget-list-box{
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
}

.relation-item{
    width: 50%;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
}

.relation-item:nth-child(2n-1){
    padding: 0 10px 0 20px;
}

.relation-item:nth-child(2n){
    padding: 0 20px 0 10px;
}

.relation-item-thumbnail{
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 20px 0 0;
    position: relative;
    float: left;
    box-sizing: border-box;
}

.relation-item-thumbnail::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    opacity: 0;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}


.relation-item-thumbnail::after {
    content: "\f105 この続きを読む";
    font-family: FontAwesome;
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    opacity: 0;
    color: #ffffff;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}


.relation-item-title{
    max-height: 4.9em;
    line-height: 1.6;
    padding: 0;
    overflow: hidden;
    margin: 20px 0 8px;
    float: left;
    width: 100%;
    box-sizing: border-box;
    font-size: 26px;
}

.relation-item-meta{
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    float: left;
    font-size: 20px;
    margin: 0 0 20px;
    color: #888888;
}



a .relation-item-thumbnail{
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.relation-item a{
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    color: #333333;
    display: block;
    height: 100%;
}


#footer{
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.8);
}


#footer::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    top: 0;
    z-index: 1;
}



#footer a{
    color: #333;
}

#footer-box{
}

#footer-box .wrap{
    background-color: rgba(0, 0, 0, 0);
}

.footer-nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.footer-nav ul li{
    position: relative;
    padding: 0 0 0 12px;
} 

.footer-nav ul li::before{
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
} 

.footer-nav ul li ul{
    margin: 0;
} 


.footer-nav-box {
    width: 20%;
    float: left;
    margin: 0;
    box-sizing: border-box;
    font-size: 24px;
}

.footer-nav-box:first-child {
    width: calc(50% - 0px);
    padding: 0 16px 0 0;
}

.footer-nav-box:nth-child(2) {
    width: calc(50% + 0px);
    padding: 0 0 0 16px;
}

.footer-nav-box:nth-child(3) {
    width: calc(50% - 0px);
    padding: 0 16px 0 0;
}


.footer-sub-title{
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    position: relative;
    display: block;
}

.footer-sub-title::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: calc(50% - 1px);
    z-index: 1;
}

.footer-sub-title span{
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    padding: 0 8px 0 0;
}

.footer-sub-title-a span{
    padding: 0 8px 0 12px;
}

.footer-sub-title-a span::after{
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
}

.footer-sns-wrap{
    height: 64px;
    background-color: #efefef;
}

.footer-sns-box{
    width: 980px;
    margin: 0 auto;
}

.footer-sns-ul{
    list-style: none;
    padding: 0;
    overflow: hidden;
    width: 192px;
    margin: 0 auto;
}

.footer-sns-li{
    height: 64px;
    width: 64px;
    line-height: 64px;
    text-align: center;
    position: relative;
    background-color: #fff;
    float: left;
}

.footer-sns-li a{
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    color: #ffffff !important;
    font-size: 28px;
}

.footer-sns-twitter::before{
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    background-color: #55acee;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}




.footer-sns-youtube::before{
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    background-color: #cd201f;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.footer-sns-googlep::before{
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    background-color: #dd4b39;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}


#copy{
    position: relative;
    color: #fff;
}

#copy .wrap{
    padding: 24px 20px 24px 20px;
}

#copy-box{
    line-height: 1.4;
    text-align: center;
    margin: 48px 0;
}

#copy-box-text-e{
    font-size: 18px;
}

#copy ul{
    margin: 24px auto 0;
    padding: 0;
    display: table;
    font-size: 20px;
    text-align: center;
}

#copy ul li{
    list-style: none;
    position: relative;
    padding: 0 0 0 12px;
    float: left;
    margin: 0 0 0 16px;
}

#copy ul li::before {
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
}

#copy ul li a{
    color: #fff;
}


.loadingAnim{
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 750px;
    height: 100%;
    text-align: center;
}
.loadingAnim:before,
.loadingAnim:after{
    line-height: 1;
    position: fixed;
    z-index: 99;
    right: 0;
    left: 0;
    display: block;
    width: 750px;
    height: 50%;
    margin-right: auto;
    margin-left: auto;
    content: ' ';
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    transition-delay: .3s;
    background-color: #ffffff;
 
}
.loadingAnim:before{
    top: 0;
}
.loadingAnim:after{
    bottom: 0;
}
 
.loaded .loadingAnim:before{
    height: 0;
}
.loaded .loadingAnim:after{
    height: 0;
}
 
.loaded .loadingAnim{
    pointer-events: none;
}



#progress-bar {
    width: 0;
    height: 4px;
    background: #a759ff;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 100;
    -webkit-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
}

.progress-bar-complete {
    width: 0 !important;
    left: 100% !important;
}

.progress-bar-fadeout {
      opacity: 0 !important;
}






#nav ul li ul li a::before{
    content: "";
    position: absolute;
    width: 0px;
    left: 0;
    height: 0px;
    background-color: #FF9123;
}

#nav ul .active > .nav-ul-li-main-a {
    color: #ffffff;
    text-decoration: none;
    opacity: 1;
}




#nav ul li ul{
    float: left;
    margin-right: 0px;
    min-width: 100%;
}

#nav ul li ul li a{
    color: #fff;
    background-color: #FF9123;
    border-bottom: 1px #efefef solid;
}



#nav ul .current-page-parent a,#nav ul .current_page_item a,#nav ul .current-menu-item a,#nav ul .current-menu-parent a,#nav ul .current_page_ancestor a {
    color: #a759ff;
    opacity: 1;
}

#nav ul .current-page-parent a::before,#nav ul .current_page_item a::before,#nav ul .current-menu-item a::before,#nav ul .current-menu-parent a::before,#nav ul .current_page_ancestor a::before {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    background-color: #FF9123;
}

#nav ul .current-page-parent a::after,#nav ul .current_page_item a::after,#nav ul .current-menu-item a::after,#nav ul .current-menu-parent a::after,#nav ul .current_page_ancestor a::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    background-color: #FF9123;
}



#nav ul .current-page-parent ul li a,#nav ul .current_page_item ul li a,#nav ul .current-menu-item ul li a,#nav ul .current-menu-parent ul li a,#nav ul .current_page_ancestor ul li a {
    color: #fff;
    opacity: 1;
}

#nav ul .current-page-parent ul li a::before,#nav ul .current_page_item ul li a::before,#nav ul .current-menu-item ul li a::before,#nav ul .current-menu-parent ul li a::before,#nav ul .current_page_ancestor ul li a::before {
    content: "";
    position: absolute;
    width: 0px;
    left: 0;
    height: 0px;
}




#nav ul li ul .current-page-parent a,#nav ul li ul .current_page_item a,#nav ul li ul .current-menu-item a,#nav ul li ul .current-menu-parent a,#nav ul li ul .current_page_ancestor a {
    color: #fff;
    opacity: 0.6;
}

#nav ul li ul .current-page-parent a::before,#nav ul li ul .current_page_item a::before,#nav ul li ul .current-menu-item a::before,#nav ul li ul .current-menu-parent a::before,#nav ul li ul .current_page_ancestor a::before {
    content: "";
    position: absolute;
    width: 0px;
    left: 0;
    height: 0px;
}










#nav-search-ibox{
    overflow: hidden;
    position: relative;
    float: right;
}





.category-tag{
    position: relative;
    margin: 0 9px 0 0;
    display: block;
    float: left;
    background-color: #a759ff;
    padding: 0 12px;
    color: #ffffff;
    letter-spacing: 2px;
    text-align: center;
    text-indent: 2px;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    font-size: 24px;
    line-height: 46px;
}

.category-tag-special2, .category-tag-special, .category-tag-special-cat{
    background-color: #171c60;
}

.category-tag-journey{
    background-color: #00b300;
}

.category-tag-movie{
    background-color: #FF0000;
}

.post-meta .category-tag::before{
    content: ",";
    position: absolute;
    z-index: 1;
    left: -6px;
    color: #333;
}

.post-meta .category-tag:first-child::before,
.post-meta p+.category-tag::before
 {
    content: "";
    position: absolute;
    width: 0px;
    height: 76%;
    bottom: 12%;
    top: 12%;
    left: -5px;
    background-color: #333;
    z-index: 1;
}


.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-google-plus:before {
    content: "\f0d5";
}

.fa-youtube:before {
    content: "\f167";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-search:before {
    content: "\f002";
}


.center{
    text-align: center;
}

.nimg{
    max-width: 864px !important;
    margin: 0 auto 24px;
    overflow: hidden;
}

.nimg img {
    max-width: 100%;
}



.limg{
    margin: 0 -32px 24px;
    max-width: 1280px !important;
    overflow: hidden;
}

.limg img {
    max-width: 1240px;
}


.limgp{
    text-align: center;
    max-width: 948px !important;
    margin: 0 auto 24px auto;
    overflow: hidden;
}

.limgp img {
    max-width: 100%;
}

.lp{
    margin: 0 auto 24px;
    max-width: 1240px !important;
    overflow: hidden;
}

figure{
    margin: 0 auto 24px;
    max-width: 864px;
}

figure img{
    margin: 0 auto;
    max-width: 1240px;
}

figcaption{
    margin: 0px auto 0;
    padding: 8px 20px 8px;
    text-align: center;
    background-color: #ededed;
}

.a-arrow{
    position: relative;
    padding: 0 0 0 16px;
}

.a-arrow::before{
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
}

.a-blank{
    position: relative;
    padding: 0 0 0 40px;
}

.a-blank::before{
    content: '\f2d2';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
}

.h1-link::before, .h2-link::after, .h3-link::before, .h4-link::before, .h5-link::before, .h6-link::before{
    content: '\f105';
    font-family: FontAwesome;
}

.h1-link::before{
    font-size: 42px;
}

.h5-link{
    padding: 0 0 0 36px;
}

.h5-link::before{
    font-size: 36px;
    position: absolute;
    top: 0px;
    left: 12px;
    width: 24px;
    height: 42px;
    text-align: center;
    line-height: 42px;
}

.h6-link{
    padding: 0 0 0 16px;
}

.h6-link::before{
    font-size: 28px;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 38px;
    text-align: center;
    line-height: 38px;
}

.h1-link a, .h2-link a, .h4-link a, .h5-link a{
    color: #333333;
}

.col2:after, .col3:after{
    content: "";
    clear: both;
    display: block;
}

.col, .colw{
    float: left;
    margin: 0 0 32px 0;
    width: 100%;
}

.col4{
    margin: 0 0 0 -32px;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

.col4:after {
    content: "";
    clear: both;
    display: block;
}

.col4 .col{
    width: calc(50% - 32px);
    margin: 0 0 32px 32px;
}

.post-content .col .panel, .post-content .col .panel-warp, .post-content .colw .panel, .post-content .colw .panel-warp{
    width: 100%;
    margin: 0 auto;
}

.col > p:last-child{
    margin: 0;
}

.panel-warp{
    position: relative;
    box-sizing: border-box;
    padding: 0 8px 8px 0;
    overflow: hidden;
    margin: 0 auto 32px auto;
}

.post-content .panel-warp{

}


.panel-warp::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    left: 8px;
    top: 8px;
    z-index: 1;
}

.panel{
    margin: 0;
    position: relative;
    padding: 36px 40px 12px;
    box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;
    z-index: 1;
}

.post-content .panel{
}

.panel h3{
    padding: 0 0 6px;
    border-top-width: 0px;
    border-bottom-width: 3px;
}

.panel h3::before {
    content: "";
    width: 0px;
    height: 0px;
}

.panel table th, .panel table td {
}

.panel table th {
}



.comment-form-url label, .comment-form-email label, .comment-form-author label, .comment-form-comment label{
    display: block;
}

.comment-form-url input, .comment-form-email input, .comment-form-author input, .comment-form-comment #comment{
    border: 1px #cecece solid;
    padding: 0.5em;
    border-radius: 5px;
    width: 80%;
    box-sizing: border-box;
    font-size: 30px;
}

.comment-form-comment #comment{
    border: 1px #cecece solid;
    padding: 0.5em;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-size: 30px;
}

.site-list{
    list-style: none;
    width: auto;
    margin: 0;
    padding: 0 0 56px;
}

.site-list ul{
    padding: 0 0 0 32px;
    width: auto;
    margin: 0;
}

.site-list , .site-list ul{
    list-style: none;
}

.site-list{
    margin: 0 -32px 0 0;
}

.site-list a {
    color: #333 !important;
    padding: 25px 54px 25px 0!important;
    line-height: 40px;
    font-size: 30px;
    margin: 0;
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box;
    border-bottom: 2px solid #ededed;
}

.site-list .a-arrow::before {
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    right: 24px;
    font-size: 48px;
    left: auto;
    top: calc(50% - 20px);
}

.twitter-tweet{
    margin: 0 auto !important;
    width: 520px !important;
    transform: scale(1.234) !important;
    padding: 100px 0 110px !important;
}

.tweet-box{
    overflow: hidden;
}