/* =============================================================================================== */
/* デフォルト設定(各種問題回避・ブラウザ毎の初期設定の影響回避)                                    */
/* =============================================================================================== */
body, header, footer, address, p, h1, h2, h3, h4, h5, h6, ul, li, a, div, img, form, select, dl, dt, dd, button, i {
    padding: 0;
    margin:  0;
    border: none;
    box-shadow: none;
    font-style: normal;
}
li {
    list-style:none;
}
a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
img {
    backface-visibility: hidden;
    border: 0px;
    vertical-align: bottom;
}
h1,h2,h3,h4,h5,h6 {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: bold;
}
/* =============================================================================================== */
/* デフォルト設定(共通)                                                                            */
/* =============================================================================================== */
#wrapper {
    position:relative;
    height:100%
    z-index: 0;
}
body > #wrapper {
    height:auto;
    min-height:100%
}
/* =============================================================================================== */
/* デフォルト設定(汎用演出用)                                                                      */
/* =============================================================================================== */
/* Hover時:半透過 */
.hover,
.hover img,
.hover div {
    transition: 0.6s;
}
.hover:hover,
.hover:hover img,
.hover:hover div {
    opacity: 0.6;
}
/* Hover時:アンダーライン表示／非表示 */
.underlineN:hover {
    text-decoration: underline;
}
.underlineU {
    text-decoration: underline;
}
.underlineU:hover {
    text-decoration: none;
}
/* FadeIn */
.fadeIn {
    opacity: 0;
    transition: 0.7s;
}
.fadeIn.fromL {
    transform: translateX(-30px);
}
.fadeIn.fromR {
    transform: translateX(30px);
}
.fadeIn.fromT {
    transform: translateY(-30px);
}
.fadeIn.fromB {
    transform: translateY(30px);
}
.fadeIn.active {
    opacity: 1;
    transform: translateX(0px);
    transform: translateY(0px);
}
/* FadeInHover */
.FadeInHoverWrapper .FadeInHover {
    opacity: 0;
    transition: 0.5s;
}
.FadeInHoverWrapper .FadeInHover.fromL {
    transform: translateX(-30px);
}
.FadeInHoverWrapper .FadeInHover.fromR {
    transform: translateX(30px);
}
.FadeInHoverWrapper .FadeInHover.fromT {
    transform: translateY(-30px);
}
.FadeInHoverWrapper .FadeInHover.fromB {
    transform: translateY(30px);
}
.FadeInHoverWrapper:hover .FadeInHover {
    opacity: 1;
    transform: translateX(0px);
    transform: translateY(0px);
}
@media screen and (max-width: 768px) {
    .FadeInHoverWrapper .FadeInHover {
        display: none;
        opacity: 1;
        transform: translateX(0px);
        transform: translateY(0px);
    }
    .FadeInHoverWrapper .FadeInHover.fromL {
        transform: translateX(0px);
    }
    .FadeInHoverWrapper .FadeInHover.fromR {
        transform: translateX(0px);
    }
    .FadeInHoverWrapper .FadeInHover.fromT {
        transform: translateY(0px);
    }
    .FadeInHoverWrapper .FadeInHover.fromB {
        transform: translateY(0px);
    }
    .FadeInHoverWrapper:hover .FadeInHover {
        opacity: inherit;
        transform: none;
        transform: none;
    }
}
/* image_flow_in */
.image_flow_in {
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.image_flow_in:before {
    content: "";
    display: inline-block;
    width:  200%;
    height: 100%;
    background: #000000;
    transition: 1.0s;
    position: absolute;
    top:  0;
    left: -200%;
    z-index: 20;
}
.image_flow_in.active:before {
    left: 200%;
}
.image_flow_in img {
    visibility: hidden;
}
.image_flow_in.active img {
    transition-delay: 0.3s;
    visibility: visible;
}
/* line-effect */
.line-effect {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.line-effect:after,
.line-effect:before,
.line-effect span:after,
.line-effect span:before {
    content: "";
    display:block;
    position:absolute;
    background-color:#606060;
    z-index:3
}
.line-effect:after,
.line-effect:before {
    width:  0;
    height: 6px;
    -webkit-transition:.15s ease-in;
    -o-transition:.15s ease-in;
    transition:.15s ease-in
}
.line-effect:before {
    top:0;
    left:0
}
.line-effect:after {
    bottom:0;
    right:0
}
.line-effect:hover:after,
.line-effect:hover:before {
    width: 100%;
}
.line-effect span:after,
.line-effect span:before {
    width: 6px;
    height: 0;
    -webkit-transition:.15s ease-in-out;
    -o-transition:.15s ease-in-out;
    transition:.15s ease-in-out;
    -webkit-transition-delay:.2s;
    -o-transition-delay:.2s;
    transition-delay:.2s
}
.line-effect span:before {
    bottom:0;
    left:0
}
.line-effect span:after {
    top:0;
    right:0
}
.line-effect:hover span:after,
.line-effect:hover span:before {
    height: 100%;
}
@media screen and (max-width: 768px) {
    .line-effect:after,
    .line-effect:before {
        display: none;
        width: 100%;
    }
    .line-effect span:after,
    .line-effect span:before {
        display: none;
        height: 100%;
    }
    .line-effect:hover:after,
    .line-effect:hover:before {
        width: inherit;
    }
    .line-effect:hover span:after,
    .line-effect:hover span:before {
        height: inherit;
    }
}
/* =============================================================================================== */
/* デフォルト設定(サイト毎)                                                                        */
/* =============================================================================================== */
body {
    color:#000000;
    width:100%;
    height:100%;
    -webkit-text-size-adjust:100%;
    background:#ffffff;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    letter-spacing: normal;
    font-size: 16px;
    line-height: 1.8;
}
@media screen and (max-width: 640px) {
    body {
        font-size: 3vw;
    }
}
/* =============================================================================================== */
/* スマホ対応用                                                                                    */
/* =============================================================================================== */
.cd_sp_only {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .cd_pc_only  { display: none   !important; }
    div.cd_sp_only  { display: block  !important; }
    p.cd_sp_only  { display: block  !important; }

    br.cd_sp_only,
    span.cd_sp_only,
    img.cd_sp_only {
        display: inline !important;
    }
}