﻿.master { z-index: 3; border-width: 0; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0; background: #4568DC; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #4568DC, #B06AB3); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #4568DC, #B06AB3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ border-radius: 0; }

@media (max-width: 1150px) {
    .master-toggle .navbar-header { float: none; }
    .master-toggle .navbar-left,
    .master-toggle .navbar-right { float: none !important; }
    .master-toggle .navbar-toggle { display: block; }
    .master-toggle .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
    .master-toggle .navbar-fixed-top { top: 0; border-width: 0 0 1px; }
    .master-toggle .navbar-collapse.collapse { display: none !important; }
    .master-toggle .navbar-nav { float: none !important; margin-top: 7.5px; }
    .master-toggle .navbar-nav > li { float: none; }
    .master-toggle .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
    .master-toggle .collapse.in { display: block !important; }
}

@media(min-width:768px) {
    .master { padding-left: 5%; padding-right: 5%; }
    .master .nav-blog { margin-right: 50px; }
}

.master li a { color: #fff !important; }
.master .navbar-nav a:hover,
.master .navbar-nav a:focus,
.master .navbar-nav a:active,
.master .navbar-nav > .open > a,
.master .navbar-nav > .open > a:focus,
.master .navbar-nav > .open > a:hover,
.master .navbar-nav > .active > a,
.master .navbar-nav > .active > a:focus,
.master .navbar-nav > .active > a:hover,
.master .dropdown-menu > .active > a,
.master .dropdown-menu > .active > a:focus,
.master .dropdown-menu > .active > a:hover { color: #fff !important; background-color: transparent !important; border-bottom: 1px solid #fff; }
.master .navbar-brand { padding-top: 5px; padding-bottom: 0; }
.master .navbar-brand img { max-width: 200px; }
.master .navbar-toggle .icon-bar { background-color: #fff; }

@media(max-width:320px) {
    .master .navbar-brand { padding-left: 0; padding-right: 0; }
}

.master .navbar-brand { color: #fff !important; /*deal with hover color*/ }
.master .navbar-brand span { color: #f2880b !important; font-family: Impact; height: 50px; font-size: 18px; line-height: 20px; padding: 15px; padding-right: 0; }
.master ul { background-color: transparent; }
.master .register { border: 1px solid #fff; }
.maincontent { padding-left: 5%; padding-right: 5%; margin-top: 72px; }
.sortCondition { margin-top: 15px; }


/*****template list start*******/
.thumb-overlay { position: relative; width: 100%; height: 100%; overflow: hidden; border-width: 0px; }
.thumb-overlay dt { min-height: 42px; _height: 42px; }
.thumb-overlay img { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }
.thumb-overlay:hover img { margin-top: -80px; opacity: 0.5; }
.thumb-title { /* background: #3f96d4;*/ color: #fff; display: block; font-size: 14px; text-transform: uppercase; line-height: 40px; width: 100%; margin-bottom: -80px; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }
.thumb-overlay:hover .thumb-title { margin-bottom: 0px; }
.fun-btn { position: absolute; top: 50%; margin-top: -40px; right: 50%; margin-right: -102px; width: 204px; text-align: center; display: none\9; }
.fun-btn a { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); cursor: pointer; z-index: 1; display: inline-block; }
.thumb-overlay:hover .fun-btn { display: inline-block\9; }
.thumb-overlay:hover .fun-btn a { opacity: 0.8; -webkit-animation-fill-mode: forwards; -webkit-animation-name: overlay-animation; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s; -moz-animation-fill-mode: forwards; -moz-animation-name: overlay-animation; -moz-animation-duration: 0.5s; -moz-animation-timing-function: linear; -moz-animation-delay: 0s; -o-animation-fill-mode: forwards; -o-animation-name: overlay-animation; -o-animation-duration: 0.5s; -o-animation-timing-function: linear; -o-animation-delay: 0s; animation-fill-mode: forwards; animation-name: overlay-animation; animation-duration: 0.5s; animation-timing-function: linear; animation-delay: 0s; transform: scale(1) \9; }

@-webkit-keyframes overlay-animation {
    0% { -webkit-transform: scale(1.5); opacity: 0; }
    50% { -webkit-transform: scale(0.5); }
    100% { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes overlay-animation {
    0% { -moz-transform: scale(1.5); opacity: 0; }
    50% { -moz-transform: scale(0.5); }
    100% { -moz-transform: scale(1); opacity: 1; }
}

@-o-keyframes overlay-animation {
    0% { -o-transform: scale(1.5); opacity: 0; }
    50% { -o-transform: scale(0.5); }
    100% { -o-transform: scale(1); opacity: 1; }
}

@keyframes overlay-animation {
    0% { transform: scale(1.5); opacity: 0; }
    50% { transform: scale(0.5); }
    100% { transform: scale(1); opacity: 1; }
}

.templatemall-top { margin-top: 30px; margin-bottom: 20px; }
.templatemall-main { border-top: 1px solid #ddd; padding-top: 20px; padding-bottom: 20px; }
.templatemall-main .container { margin-bottom: 20px; }
#accordion { margin-top: 10px; }
#sidebar { background-color: #ddd; z-index: 100; }
#sidebar .operation { margin-top: 10px; }
/*****template list end*******/
/*-------s my tab-----*/
.mytab li a { color: #333; padding: 15px 30px 10px 30px; }
.mytab > li > a { background: #f9f9f9; border-bottom: 1px solid #ddd; color: #333; }
.mytab > li > a:hover, .user-temp .nav > li > a:focus { background: #f9f9f9; color: #333; }
.mytab > li > a:hover { background-color: #f9f9f9 !important; }
.mytab > li.active > a, .user-temp .nav > li.active > a:hover, .user-temp .nav > li.active > a:focus { border-bottom-color: transparent; background: #f9f9f9 !important; color: #333; }
.tab-pane { padding-top: 30px; }
/*-------e my tab-----*/
/*******templatedetail start**********/
.templatedetail h1 { color: #5e5652; font-size: 26px; margin-bottom: 20px; }
.templatedetail .mybtn-preview { margin-bottom: 20px; }
.templatedetail .mybtn-buy { margin-bottom: 20px; }
.templatedetail .description { margin-top: 20px; margin-bottom: 20px; }
.templatedetail #myTabContent { background-color: #f9f9f9; }
.templatedetail #myTabContent p { padding-left: 10px; padding-right: 10px; }
.templatedetail .form-group { padding: 25px 0 20px; margin: 0; border-bottom: 1px dashed #e7eaec; }
.templatedetail .form-group.no-border { border: none; padding-bottom: 0px; margin-bottom: -5px; }
.templatedetail .form-group:last-child { border: none; }
/*******templatedetail end**********/
/*******Default.aspx s********/
.hero { position: relative; padding: 600px 0 100px; background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center; }

@media (min-width: 768px) {
    .hero { background-image: url(/Images/default-banner.jpg); }
}

@media (max-width: 768px) {
    .hero { padding: 0 0 50px; background-color: #67c6e1; }
}

.hero .heading { position: relative; margin-top: 40px; margin-bottom: 40px; text-transform: uppercase; font-weight: 700; }

.three-service { background-color: #fff; }
.default-sug h2, .shophelper h2 { margin-top: 0; margin-bottom: 1em; font-size: 2.8em; text-align: center; }
.default-sug h4 { padding: 0px 0 60px; line-height: 1.5em; }
.default-sug h3 { margin: 0; padding-bottom: 10px; line-height: 1.5em; font-size: 1.5em; }
.default-sug p { text-align: left; padding: 1.5em; font-size: 14px; line-height: 1.8em; padding-top: 0.5em; margin-bottom: 10px; }
.default-sug .container { padding: 80px 15px; text-align: center; }
.default-sug .cont { background: #fff; background: rgba(255,255,255,.7); box-shadow: 0 0 20px rgba(0,0,0,0.05); margin-top: 40px; padding-top: 20px; }
.default-sug .cont h3 { padding: 30px 0; font-weight: bold; }

.default-sug .thubmail h3 { padding: 30px 0; }
.default-sug .row { margin-bottom: 60px; }
.go-login,
.go-login:link,
.go-login:visited,
.go-login:active { background: rgb(88,87,86); padding: 10px 40px; font-size: 35px; border: #fff 1px solid; color: #fff; border-radius: 6px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-decoration: none; }
.go-login:hover { background: #fff; color: #045da1; text-decoration: none; }

@media (max-width:768px) {
    .go-login { font-size: 16px !important; padding: 8px 30px; }
}
/*******Default.aspx e********/


.inner-wrap { max-width: 1400px; width: 100%; padding: 70px 0 100px 0; margin: 0 auto 90pt; box-sizing: border-box; }

/*======================================================
　フッター
========================================================*/
footer { background: #272727; color: #272727; padding: 40px 0; font-size: 62.5%; }
footer .inner-wrap { padding: 70px 0 0px 0; }
.footer-wrap .footer-center a:hover { opacity: .7; }
footer .footer-head-wrap { width: 100%; display: flex; justify-content: center; align-items: stretch; margin-bottom: 60px; }
footer .footer-head-wrap a { color: #222; background: #fff; width: calc((70% / 2) - 10px); text-align: center; margin: 0 8px; padding-top: 2.65em; padding-bottom: 2.65em; }
footer .footer-head-wrap a:hover { background: #fff019; color: #222; }
footer .footer-head-wrap a span { display: block; font-size: 24px; font-weight: 100; letter-spacing: 4px; }
footer .footer-head-wrap a img { width: 30px; margin-bottom: 10px; }

footer .footer-body-wrap { color: #ccc; display: flex; justify-content: space-between; max-width: 980px; margin: 0 auto 50px; text-align: left; }

footer .footer-body-wrap a { color: #ccc; }

footer .footer-body-wrap .footer-left { width: 25%; }
footer .footer-body-wrap .footer-left span { display: block; }
footer .footer-body-wrap .footer-left .footer-logo { width: 200px; margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .comp-txt { margin-bottom: 5px; font-weight: 300; font-size: 12px; }
footer .footer-body-wrap .footer-left address { font-style: normal; font-weight: 300; letter-spacing: 1.5px; line-height: 1.4; margin-bottom: 20px; font-size: 12px; }
footer .footer-body-wrap .footer-left .footer-btn-txt { display: inline-block; }
footer .footer-body-wrap .footer-left .footer-btn-txt i { margin-right: 0.6em; }
footer .footer-body-wrap .footer-left .footer-btn-txt span { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; margin-top: -3px; }
footer .footer-body-wrap .footer-center { display: flex; }
footer .footer-body-wrap .footer-center .footer-nav { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: start; align-items: flex-start; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; overflow: hidden; }

footer .footer-body-wrap .footer-center .main-nav { margin-right: 10px; }

footer .footer-body-wrap .footer-center .footer-nav li { display: inline-block; margin: 0 0 0.5em; color: inherit; font-size: 13px; line-height: 2; vertical-align: middle; letter-spacing: .16em; }

footer .footer-body-wrap .footer-center .footer-nav .first { font-weight: 700; border-bottom: 1px solid #fff; }
footer .footer-body-wrap .footer-left .footer-tel .tel { display: flex; align-items: center; font-size: 24px; margin-bottom: 20px; letter-spacing: 3.6px; }
footer .footer-body-wrap .footer-left .footer-tel .tel img { width: 35px; padding-right: 10px; }
/*footer .footer-body-wrap .footer-right .footer-tel .tel:before {
    display: inline-block;
    content: "";
    background: url(../) 50%/contain no-repeat;
    width: 26px;
    height: 26px;
    text-indent: 0;
    letter-spacing: 0;
    vertical-align: -0.13em;
    margin-right: 14px;
}*/
footer .footer-body-wrap .footer-left .footer-time { font-size: 12px; font-weight: 300; letter-spacing: 1.5px; line-height: 1.8; margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .footer-nav-btn a { font-size: 1.7em; color: #fff; background: transparent; border: 1px solid #fff; text-decoration: none; display: flex; text-align: center; padding: 13px 0; justify-content: center; align-items: center; }
footer .footer-body-wrap .footer-left .footer-nav-btn { margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .footer-nav-btn a:hover { background: #fff; color: #222; }
footer .footer-body-wrap .footer-left .footer-nav-btn a span { letter-spacing: .16em; }
footer .footer-body-wrap .footer-left .footer-nav-btn a small { margin-left: 0.8em; }
footer .footer-body-wrap .footer-right .footer-tel .commendation { width: 250px; }
footer .footer-body-wrap .footer-right .footer-tel .commendation .commendation-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box { width: calc((100% / 2) - 6px); }
footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box:last-child { width: 100%; margin-top: 10px; }
footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box img { width: 100%; }



/*---------- ユーティリティナビ -----------*/
footer .utility-navi-block { width: 100%; text-align: right; }

footer .utility-navi-block > ul { padding-bottom: 15px; }

footer .utility-navi-block > ul > li { padding-right: 10px; display: inline-block; }

footer .utility-navi-block > ul > li:last-child { padding-right: 0; }


/*--- アドレスエリア ---*/
footer .f-address-block .f-address { font-size: 1.6em; line-height: 1.4em; letter-spacing: 1.2px; margin-bottom: 20px; }

footer .f-address-block .f-tel { font-size: 2.4em; font-weight: bold; }
footer .f-address-block .f-tel .tel-l { font-size: 3.6em; }


/*--- カレンダー ---*/
footer .calendar-wrap .calendar { max-width: 310px; height: 170px; background: #FFF; margin-bottom: 5px; color: #000; }


/*--- サイトマップ ---*/
footer .f-navi-block { justify-content: space-between; margin-bottom: 70px; }

footer .site-map-wrap { justify-content: space-around; }

footer .site-map-wrap ul { margin-bottom: 40px; }
footer .site-map-wrap ul:last-child { margin-bottom: 0; }

footer .site-map-wrap ul > li:first-child { margin-top: 0; }

footer .site-map-wrap ul > li.f-navi-ttl { padding-bottom: 3px; margin-bottom: 5px; font-weight: bold; border-bottom: solid 1px #FFF; }


/*--- 認証バナーエリア ---*/
footer .certification-bnr { max-width: 980px; margin: 0 auto; }

footer .certification-bnr .col3-box { margin-bottom: 20px; }

/*--- SNSアイコン ---*/
footer .sns-block { margin-top: 70px; text-align: center; }

footer .sns-block img { width: 35px; margin: 5px; }


/*--- copyright ---*/
footer .copyright { color: #fff; text-align: center; font-size: 1.2em; padding: 15px 0; }


/*----------- タブレット縦　------------*/
@media screen and (max-width: 1024px) and (orientation: portrait) {
    footer .footer-body-wrap { padding: 0 10px; }
    footer .footer-body-wrap { flex-wrap: wrap; }
    footer .footer-body-wrap .footer-left .footer-logo { width: 170px; }
    footer .footer-body-wrap > div { width: 100%; justify-content: center; }
    footer .footer-body-wrap .footer-left { text-align: center; margin-bottom: 30px; }
    footer .footer-body-wrap .footer-right { text-align: center; }
    footer .footer-body-wrap .footer-right .footer-tel .tel { justify-content: center; }
    footer .footer-body-wrap .footer-right .footer-tel .commendation { margin: 0 auto; width: 100%; }
    footer .footer-body-wrap .footer-right .footer-tel .footer-nav-btn a { width: 70%; margin: 0 auto; }
    footer .footer-body-wrap .footer-center { margin-bottom: 30px; }
}


/*----------------- 960px以下の形状 -------------------*/
@media screen and (max-width:960px) {

    footer { padding-top: 20px; }

    footer .f-address-block .f-tel { font-size: 2.0em; }
    footer .f-address-block .f-tel .tel-l { font-size: 3.0em; }

    /*footer .f-navi-block .btn-block { margin:auto; }*/


}


/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    /*--- アドレスエリア ---*/
    footer .f-address-block.c-box { margin-bottom: 50px; }

    /*--- カレンダー ---*/
    footer .calendar-wrap .calendar { margin-left: auto; margin-right: auto; }

    /*--- サイトマップ ---*/
    footer .site-map-wrap.c-box { text-align: left; margin-bottom: 70px; }

    /*--- 認証バナーエリア ---*/
    footer .certification-bnr { max-width: 100%; }

    footer .certification-bnr > .col2-box > .c-box > a > img { max-width: 200px; margin: auto; }

    footer .footer-wrap { margin: 0 10px; }
    footer .footer-head-wrap { margin-bottom: 30px; }
    footer .footer-head-wrap a { border-radius: 3px; width: 100%; padding-top: 1em; padding-bottom: 1em; font-size: 18px; }
    footer .footer-head-wrap a span { font-size: 18px; }
    footer .footer-body-wrap { flex-wrap: wrap; justify-content: center; }
    footer .footer-body-wrap .footer-left,
    footer .footer-body-wrap .footer-center,
    footer .footer-body-wrap .footer-right { width: 100%; text-align: center; }
    footer .footer-body-wrap .footer-left { border-bottom: 1px solid #fff; text-align: center; padding-bottom: 20px; margin-bottom: 20px; }
    footer .footer-body-wrap .footer-left .footer-logo { width: 150px; }
    footer .footer-body-wrap .footer-left .footer-tel .tel { justify-content: center; }
    footer .footer-body-wrap .footer-left .footer-tel .commendation { width: 100%; }

    footer .footer-body-wrap .footer-center { margin-bottom: 20px; }
    footer .footer-body-wrap .footer-center .footer-nav li { font-size: 10px; letter-spacing: 1px; }
    footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box { width: calc((70% / 3) - 16px); }
    footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box img { width: 100%; }
    footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box:last-child { width: 57%; margin: 0; }

    footer .footer-body-wrap .footer-center .footer-nav .first { white-space: nowrap; }
    footer .footer-body-wrap .footer-left .footer-nav-btn { width: 70%; margin: 0 auto; }

    /*--- ページトップに戻るボタン ---*/
    .glb-footer_pagetop a { height: 40px; width: 40px; }
    .arrow-top { top: 17px; left: 13px; }
}
