/*
Theme Name: おうちのきおく公式テーマ
Description: 佐藤正純写真研究室のおうちのきおくの公式テーマです。
Author: なかじま制作
Author URI: http://y-nakajima.jp
License: 佐藤正純写真研究室
License URI: http://y-nakajima.jp
Version: 2017
*/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Rock+Salt');

body{
    font-family:"游ゴシック体", "Yu Gothic", YuGothic,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    font-size:16px;
    position:relative;
    line-height: 1.8;
    color:#000;
    overflow-x: hidden;
}

button,input{
    font-family:'Source Sans Pro',"游ゴシック体", "Yu Gothic", YuGothic,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

a img{
}

a img:hover,
#menu-gnav > li:hover{
    opacity:0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -khtml-opacity: .70;
    -moz-opacity: .70;
}

.roll a img:hover{
    opacity:1.0;
}

a:hover{
color:#F53F7D;
text-decoration:none;
}

a{text-decoration:none;}
a:hover{text-decoration:none;color:#C30D23 ;}

a.btn{
    display: block;
    width:180px;
    text-align: center;
    background: rgba(190, 150, 98, 0.8);
    color: #fff;
    font-weight:bold;
    height: 50px;
    line-height: 50px;
    margin: 0 auto 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 0;
    font-size: 16px;
    border: none;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
}
a.btn.middle{
    width:270px;
    font-size: 18px;
}

a.btn:hover{
    opacity: 0.8;
}

/*----------------------------------------------
パンくず
------------------------------------------------*/
#breadcrumbs{
    margin: auto;
    color: rgba(0, 0, 0, 0.75);
    margin-bottom: 20px;
}
#breadcrumbs ol li{
    list-style: none;
    list-style-position: inside;
    float: left;
    font-size: 10px;
    line-height: 35px;
}
#breadcrumbs ol li a{
    padding:0 10px 0 0;
    color: rgba(0, 0, 0, 0.75);
}
#breadcrumbs ol li a:hover{
    text-decoration:underline;
}
#breadcrumbs ol li a:after{
    content:">";
    display: inline-block;
    margin:0 0 0 10px;
}

/*------------------------------------------------
mainVisual
------------------------------------------------- */
.mainVisual{
    width:100%;
    height:100vh;
    min-height:640px;
    position:relative;
    overflow: hidden;
}
.mainVisual:before{
    content:'\f110';
    font-family: 'FontAwesome';
    line-height:50px;
    font-size: 50px;
    display: block;
    width:50px;
    height:50px;
    position: absolute;
    color:#be9662;
    bottom:30%;
    left:0;right:0;
    margin:auto;
    z-index: -1;
    opacity:1;
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8);
    transition:opacity 3s;
}
.mainVisual.show:before{
    opacity:0;
}

.mainImg{
    z-index: -1;
    position:absolute;
    opacity: 0;
    transition: top .7s,
                left .7s,
                margin-top .7s,
                margin-left .7s,
                opacity 2s;
}
.mainImg.show{
    opacity: 1;
}
.logoBox{
    width: 40%;
    height: calc(40vw * 0.445);
    top: 20%;
    left: 30%;
    position: absolute;
    margin:auto;
    transition:3s;
}
.logoBox.moveon{
    width: 30%;
    height: calc(30vw * 0.445);
    left: 5%;
    top:9%;
}
.logoBox:before,
.logoBox:after{
    content:'';
    width: 12%;
    height: 27%;
    border:1px solid #a98046;
    position: absolute;
    transition: 2s;
}
.logoBox:before{
    top:0;
    left:0;
    border-right:none;
    border-bottom:none;
}
.logoBox:after{
    bottom:0;
    right:0;
    border-left:none;
    border-top:none;
}
.logo_origin{
    width:100%;
    height:auto;
    display: block;
    opacity: 0;
}
.type{
    position: absolute;
}
.logo_alphabet{
    position: absolute;
    max-width: 358.5px;
    width: 69.4%;
    height: auto;
    display: block;
    top: 39%;
    right: 0;
    left: 0;
    margin: auto;
}
.type{opacity: 0;transition: 2s;}
.type_o_01{width:20%;top:4%;left:6%;}
.type_u{width:13.5%;top:2%;left:32.5%;}
.type_chi{width:16%;top:2%;left:54.5%;}
.type_no{width:19.5%;top:5%;left:76%;}
.type_ki{width:15%;top:53%;left:20%;}
.type_o_02{width:20%;top:57%;left:41%;}
.type_ku{width:7.5%;top:52%;left:70%;}

.tp0{
    margin-top: -40px;
    padding-left: 80px;
    }
.tp1{
    margin-top: -50px;
    padding-left: 50px;
    }
.tp2{
    margin-top: 70px;
    padding-left: 0px;
    }
.tp3{
    margin-top: 40px;
    padding-left: 30px;
    }
.tp4{
    margin-top: -30px;
    padding-left: 10px;
    }
.tp5{
    margin-top: 50px;
    padding-left: 30px;
    }
.tp6{
    margin-top: -50px;
    padding-left: 45px;
    }
.tp7{
    margin-top: -10px;
    padding-left: 80px;
    }

.type.moveon{
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
}
.logo_alphabet.moveon{
    margin: auto !important;
}

.seal_visual{
    display: block;
    width: 244px;
    height: auto;
    position: absolute;
    bottom: 3%;
    right: 3%;
    opacity: 0;
    transition: 2s;
}
.seal_visual.show{
    bottom: 5%;
    opacity: 1;
}
.catch{
    display: block;
    width: 135px;
    height: auto;
    position: absolute;
    top: 16%;
    right: 6%;
    opacity: 0;
    transition: 2s;
}
.catch.show{
    top: 14%;
    opacity: 1;
}

.headerEntry {
    position: absolute;
    top: 5%;
    right: 5%;
}

.mainVisual i{
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3%;
    display: block;
    margin: auto;
    font-size: 68px;
    text-align: center;
    width: 68px;
    line-height: 1;
    animation: moveY 1s infinite alternate linear;
    -ms-animation: moveY 1s infinite alternate linear;
    -webkit-animation: moveY 1s infinite alternate linear;
    -moz-animation: moveY 1s infinite alternate linear;
    cursor: pointer;
}
@keyframes moveY {
0% {bottom:3%;}
50% {bottom:5%;}
100% {bottom:3%;}
}

@-ms-keyframes moveY {
0% {bottom:3%;}
50% {bottom:5%;}
100% {bottom:3%;}
}
 
@-webkit-keyframes moveY /* Safari and Chrome */
{
0% {bottom:3%;}
50% {bottom:5%;}
100% {bottom:3%;}
}
 
@-moz-keyframes moveY /* Firefox */
{
0% {bottom:3%;}
50% {bottom:5%;}
100% {bottom:3%;}
}
/*--------------------
svg関連
---------------------*/
div#svgOuchiWrapper{
    position:absolute;
    left:0;right:0;
    top:0;bottom:0;
    margin:auto;
    width: 50%;
    height: calc(50vw * 0.7);
    transition: 3s;
}
div#svgOuchiWrapper.moveon02{
    width: 65%;
    height: calc(65vw * 0.7);
}
#svg_ouchi{
    width:100%;
}
#svg_ouchi .st0{
    opacity:0.5;
}
#svg_ouchi .st1{
    fill:none;
    stroke:#BD936D;
    stroke-width:5;
    stroke-linecap:round;
    stroke-miterlimit:10;
}
#svg_ouchi .st0,
#svg_ouchi .st1{
    stroke-dasharray: 2830;
    stroke-dashoffset: 2830;
}
#svgOuchiWrapper.moveon #svg_ouchi .st0,
#svgOuchiWrapper.moveon #svg_ouchi .st1{
    -webkit-animation: mapOuchi 20s linear 0s infinite;
    animation: mapOuchi 20s linear 0s infinite;
}
@keyframes mapOuchi {
    0% {stroke-dashoffset: 2830;}
    40% {stroke-dashoffset: 0;}
    60% {stroke-dashoffset: 0;}
    100% {stroke-dashoffset: 2830;}
}

/*---------------------
common
-----------------------*/
.cHeader{
    float: left;
    position: relative;
}
.cCntnt{
    padding-left: 35%;
}

.sctn{
    position: relative;
    opacity: 0;
    top:50px;
    transition: opacity .5s ,top 1s;
}
.sctn.show{
    opacity: 1;
    top:0;
}

.wide_inner{
    width:90%;
    margin-right:auto;
    margin-left:auto;
    position: relative;
}
.main_inner{
    max-width:1400px;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    position: relative;
}
.middle_inner{
    max-width:1200px;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    position: relative;
}
.inner{
    max-width:960px;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    position: relative;
}
.mini_inner{
    max-width:820px;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    position: relative;
}
.toplink{
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #be916d;
    color: #fff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    display: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.toplink:hover{
    background: #dbb292;
    color:#fff !important;
}
/*----------------------------------------------
conceptWrapper
------------------------------------------------*/
.conceptWrapper {
    padding: 230px 0 0 0;
    transition:.7s;
}
.logo_light{
    width: 164px;
    height: auto;
    position: absolute;
    top: 6%;
    right: 7%;
    transition:.7s;
}
.svgSquareWrapper{
    position: absolute;
    width: 80%;
    top: -40px;
    left: -4%;
    transition: .7s;
}
.svgSquareWrapper.sp {
    display: none;
}
.imgWrapper{
    position: absolute;
    width: 58%;
    height: 400px;
    overflow: hidden;
    right: 0;
}
.imgWrapper img{
    position: absolute;
    width: auto;
    height: 100%;
    right: 0;
    transition: .7s;
}
.tit{
    position: relative;
    background: #bd926d;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    line-height: 1;
    padding: 5px 11px;
    margin: 0 0 40px 0px;
}
.tit:before{
    transition:.7s;
}
.tit_concept:before{
    content: "";
    position: absolute;
    width: 455px;
    height: 200px;
    background: url(images/tit_concept.png) no-repeat;
    background-size: 100%;
    top: -150px;
    left: -110px;
}

@media screen and (max-width: 1430px) {
/* 表示領域が1430px以下の場合に適用するスタイル */
.tit_concept:before{
    width: 375px;
    height: 163px;
    top: -130px;
    left: -35px;
}
}
.conceptStateBox{
    margin: 0 0 100px 0;
}
.conceptHeader{
    margin: 0 0 70px 0;
    transition:.7s;
}
.statementCatch{
    font-weight: bold;
    font-size: 3vw;
    line-height: 1;
    text-shadow: 
    #fff 2px 0px 0px, #fff -2px 0px 0px,
    #fff 0px -2px 0px, #fff 0px 2px 0px,
    #fff 2px 2px 0px, #fff -2px 2px 0px,
    #fff 2px -2px 0px, #fff -2px -2px 0px,
    #fff 1px 2px 0px, #fff -1px 2px 0px,
    #fff 1px -2px 0px, #fff -1px -2px 0px,
    #fff 2px 1px 0px, #fff -2px 1px 0px,
    #fff 2px -1px 0px, #fff -2px -1px 0px,
    #fff 1px 1px 0px, #fff -1px 1px 0px,
    #fff 1px -1px 0px, #fff -1px -1px 0px;
}
.statementCatch br{
    display: none;
}
.statement p{
    font-weight: bold;
    margin-bottom: 23px;
    font-size: 20px;
    transition: .7s;
}
.overview{
    max-width: 800px;
    width: 90%;
    margin: 0 auto 80px;
    padding: 0 0 60px 0;
}
.overview:after{
    content: "";
    width: 100px;
    height: 1px;
    margin: auto;
    display: block;
    background: #cbcbcb;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}
.overviewList li{
    float:left;
    width:30%;
    margin:0;
    text-align: center;
    position: relative;
}
.overviewList li.icon_arrow{
    width:5%;
    min-height:116px;
}
.overviewList li.icon_arrow:after{
    content: "";
    width: 38.5px;
    height: 25px;
    display: block;
    background: url(images/icon_arrow.png) no-repeat center;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12.5px;
    transition: .7s;
}
.overviewList li.icon_arrow.a01:after{
    margin-left: 0px;
}
.overviewList li.icon_arrow.a02:after{
    margin-left: 0px;
    right: 50%;
    left: auto;
}
.overviewList li:last-child{
    margin-right:0; 
}
.overviewList li:last-child:after{
    content:none;
}

.overviewList li p{
    font-size: 18px;
    font-weight: bold;
}

.overviewList li img{
    width:auto;
    height:116.5px;
}

/*---------------------
showCase
-----------------------*/
.showCaseWrap{
    margin:0 auto 100px;
}
.scImgPosi{
    overflow: hidden;
    position: relative;
    cursor:pointer;
}
.scImgPosi:after{
    content:'';
    display: block;
    width: 100%;
    height:100%;
    position:absolute;
    background:#fff;
    transition: .7s;
}
.scImgPosi.sc0.show:after{
    width: 0%;
    right:0;
}
.scImgPosi.sc1.show:after{
    width: 0%;
    left:0;
}
.scImgPosi.sc2.show:after{
    height: 0%;
    top:0;
}
.scImgPosi.sc3.show:after{
    height: 0%;
    bottom:0;
}
.scImgPosi:hover img{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.sc{
    width:50%;
    height:450px;
    box-sizing: border-box;
}
.sc.cntnt{
    padding:5%;
    position:relative;
}
.scLeft{
    float:left;
    background:#fff;
}
.scRight{
    float:right;
    background:#ffe5d5;
}
.scLeft img,
.scRight img,
ul.scSlide li img,
.img_nightPhoto li img{
    position: absolute;
    width: 100%;
    height:auto;
    transition: .7s;
}
.scWide{
    width:100%;
    height:230px;
    clear: both;
    overflow: hidden;
}
ul.scSlide{
    height:100%;
}
ul.scSlide li{
    float: left;
    width:10%;
    height:100%;
    position: relative;
}
ul.scSlide li.w20{
    width:20%;
}
.scTitle{
    font-weight: bold;
    margin-bottom: 40px;
    line-height: 1.5;
    font-size: 2.5vw;
}
.scTitle.scSctn02{
    text-align: right;
    padding: 5% 0 0 0;
    font-size: 2.7vw;
}
.scSctn01:after{
    content:'';
    background:url('images/read_withquolity.png') no-repeat center;
    background-size: cover;
    width:138px;
    height:34.5px;
    display: block
}
.scSctn02:after{
    content: '';
    background: url(images/read_withfamily.png) no-repeat right center;
    background-size: 110px auto;
    width: 100%;
    height: 33px;
    display: block;
}
.discription{
    font-weight: bold;
    margin-bottom:20px;
}
.scLeft .discription{
    padding-left: 30%;
}
.comments{
    font-weight: bold;
    position:absolute;
    bottom:10px;
    right:10px;
    color:#bd936d;
}
.comments:before{
    content:'\f002';
    font-family: 'FontAwesome';
    margin:0 10px 0 0;
    font-weight:normal;
}

/*---------------------
nightPhoto
-----------------------*/
.sctn_nightPhoto{
    width:90%;
    max-width:1200px;
    margin:0 auto 80px;
    box-sizing: border-box;
}
ul.img_nightPhoto{
    float:left;
    max-width: 455px;
    width:40%;
    height:auto;
    display: block;
}
ul.img_nightPhoto li{
    width:35%;
    height:200px;
    float:left;
}
ul.img_nightPhoto li:last-child{
    width:65%;
}
.sctn_nightPhoto h3{
    font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
    width: 57%;
    float: right;
}
@media screen and (max-width: 1340px) {
.sctn_nightPhoto h3{
    font-size: 2.1vw;
}
}

.sctn_nightPhoto h3 br{
    display: none;
}
.sctn_nightPhoto h3:after{
    content:'';
    background:url('images/read_nightphoto.png') no-repeat left center;
    background-size: 138px auto;
    width:100%;
    height:34.5px;
    display: block
}
.sctn_nightPhoto p.discription{
    width: 57%;
    float: right;
    margin-bottom:0;
}
.sctn_nightPhoto div p{
    font-weight: bold;
}

/*---------------------
drone
-----------------------*/
.sctn_drawn{
    background:#f4f4f4;
    padding: 60px 0 80px;
}

img.lisence_img{
    float:left;
    width:30%;
    display: block;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
}
img.lisence_img.test{
    float:left;
    width:20%;
    display: block;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
}
.drone_txt{
    padding:0 0 0 38%;
    z-index: 2;
    position: relative;
}
.drone_txt.test{
    padding:0 420px 0 24%;
}

.drone_txt h3{
    font-weight:bold;
    font-size:21px;
    margin-bottom:30px;
    text-shadow: #f4f4f4 2px 0px 0px, #f4f4f4 -2px 0px 0px, #f4f4f4 0px -2px 0px, #f4f4f4 0px 2px 0px, #f4f4f4 2px 2px 0px, #f4f4f4 -2px 2px 0px, #f4f4f4 2px -2px 0px, #f4f4f4 -2px -2px 0px, #f4f4f4 1px 2px 0px, #f4f4f4 -1px 2px 0px, #f4f4f4 1px -2px 0px, #f4f4f4 -1px -2px 0px, #f4f4f4 2px 1px 0px, #f4f4f4 -2px 1px 0px, #f4f4f4 2px -1px 0px, #f4f4f4 -2px -1px 0px, #f4f4f4 1px 1px 0px, #f4f4f4 -1px 1px 0px, #f4f4f4 1px -1px 0px, #f4f4f4 -1px -1px 0px;
}
.drone_txt p{
    margin-bottom:20px;
    text-shadow: #f4f4f4 2px 0px 0px, #f4f4f4 -2px 0px 0px, #f4f4f4 0px -2px 0px, #f4f4f4 0px 2px 0px, #f4f4f4 2px 2px 0px, #f4f4f4 -2px 2px 0px, #f4f4f4 2px -2px 0px, #f4f4f4 -2px -2px 0px, #f4f4f4 1px 2px 0px, #f4f4f4 -1px 2px 0px, #f4f4f4 1px -2px 0px, #f4f4f4 -1px -2px 0px, #f4f4f4 2px 1px 0px, #f4f4f4 -2px 1px 0px, #f4f4f4 2px -1px 0px, #f4f4f4 -2px -1px 0px, #f4f4f4 1px 1px 0px, #f4f4f4 -1px 1px 0px, #f4f4f4 1px -1px 0px, #f4f4f4 -1px -1px 0px;
}
.drone_txt p strong{
    font-weight:bold;
}
.drone_txt p:last-child{
    margin-bottom:0;
}

.illust_drone{
    position: absolute;
    height: 90%;
    top:5%;
    right:-140px;
    transition:.7s;
    z-index: 1;
}
.illust_drone.white{
    display: none;
}
@media screen and (max-width: 1200px) {
    .drone_txt.test{
        padding:0 330px 0 24%;
    }
    .illust_drone{
        height: 80%;
        top: 10%;
        right: -140px;
    }
}

/*---------------------
plan
-----------------------*/
.sctn_plan{
    padding: 60px 0 80px;
}
.tit_plan:before{
    content: "";
    position: absolute;
    width: 263.5px;
    height: 127.5px;
    background: url(images/tit_plan.png) no-repeat;
    background-size: 100%;
    top: -150px;
    left: -30px;
}
.planHeader{
    top: 160px;
}
.planCntnt{
    margin-bottom:70px;
}
.planTable{
    margin-bottom:55px;
}
.planTable dt,
.planTable dd{
    padding:20px 0;
}
.planTable dt{
    float: left;
}
.planTable dt p{
    font-weight: bold;
    font-size: 20px
}
dd.plan{
    padding-left: 35%;
    border-bottom:1px solid #be9662;
    box-sizing: border-box;
}
.price{
    font-weight: bold;
    font-size: 22px;
    color:#836239;
}
.price:after{
    color:#fff;
    font-weight: normal;
    background:#836239;
    content:"税込み";
    font-size:10px;
    padding:2px 5px;
    margin:0 0 0 5px;
    line-height: 1;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: relative;
    top: -4px;
}
.item{
    display: block;
    text-align: center;
    color:#836239;
    font-weight: bold;
    font-size: 16px;
    width: 32%;
    float:left;
    position: relative;
}
.item:before{
    content:"";
    width:80px;
    height:80px;
    display: block;
    margin: auto;
}
.illust_cam:before{
    background: url('images/illust_cam.png') no-repeat center;
    background-size:81px auto; 
}
.illust_dronecam:after{
    content: "";
    display: block;
    position: absolute;
    width: 130px;
    height: 80px;
    background: url(images/illust_dronecam.png) no-repeat center;
    background-size: 100% auto;
    top: -3px;
    margin: auto;
    right: 0;
    left: -10px;
    }
.illust_dvd:before{
    background: url('images/illust_dvd.png') no-repeat center;
    background-size:74px auto; 
}
.illust_book:before{
    background: url('images/illust_book.png') no-repeat center;
    background-size:75px auto; 
}
.illust_gift:before{
    background: url('images/illust_gift.png') no-repeat center;
    background-size:80px auto; 
}
.icon_plus{
    width:2%;
    float:left;
    display: block;
    height:80px;
    position: relative;
}
.icon_plus:after{
    content: "＋";
    font-size: 30px;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -15px;
    line-height: 1;
    position: absolute;
    height: auto;
}

.tit_option{
    background: #be9662;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 26px;
    width: 120px;
    text-align: center;
}
.planOption{
    border-top:1px solid #be9662;
}
.planOption dt,
.planOption dd{
    line-height: 58px;
}
.planOption dt{
    font-size:16px;
    font-weight:bold;
    float:left;
}
.planOption dd{
    padding-left:30%;
    border-bottom:1px dashed #be9662;
}


/*---------------------
faq
-----------------------*/
.sctn_faq{
    background: #f4f4f4;
    padding: 60px 0 80px;
}
.tit_faq:before{
    content: "";
    position: absolute;
    width: 250.5px;
    height: 109.5px;
    background: url(images/tit_faq.png) no-repeat;
    background-size: 100%;
    top: -120px;
    left: -30px;
}
.faqHeader{
    top: 120px;
}
.faqList{
    border-bottom: 1px solid #e8cfae;
}
.faqList dt{
    font-size: 20px;
    font-weight: bold;
    border-top: 1px solid #e8cfae;
    padding: 24px 25px 24px 0;
    transition: .2s;
    position: relative;
    cursor: pointer;
}
.faqList dt.on,
.faqList dt:hover{
    background:#fff;
}
.faqList dt:before{
    content:"";
    width:30px;
    height:1px;
    position: absolute;
    right:15px;
    top:50%;
    margin-top:0.5px;
    transition: .2s;
    background:#bd926d;
}
.faqList dt:after{
    content: "";
    width: 1px;
    height: 30px;
    position: absolute;
    right: 29.5px;
    top: 50%;
    margin-top: -13px;
    transition: .2s;
    background: #bd926d;
}
.faqList dt.on:after{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.faqList dd{
    display: none;
    box-sizing: border-box;
    padding: 30px;
}
.faqList dd p:last-child{
    margin-bottom: 0 !important;
}

/*---------------------
profile
-----------------------*/
.sctn_prof{
    padding: 60px 0 80px;
}
.tit_prof:before{
    content: "";
    position: absolute;
    width: 293.5px;
    height: 176px;
    background: url(images/tit_profile.png) no-repeat;
    background-size: 100%;
    top: -120px;
    left: -30px;
}
.profHeader{
    top: 120px;
}
.profCntnt{
}
.imgProf{
    width:185px;
    height:auto;
    float:left;
    transition:.2s;
}
.profText{
    padding:0 0 0 225px;
}
.profText h3{
    font-weight: bold;
    font-size: 18px;
    margin: 0 0 10px 0;
}
.profText p{
    font-size: 14px;
    font-weight: bold;
    margin:0 0 10px 0;
}
.profText div{
    background:#f4f5f4;
    padding: 8px 13px;
}
.profText div h4{
    font-size: 14px;
    font-weight: bold;
}
.profText div p{
    margin:0;
}


/*----------------------------------------------
footer
------------------------------------------------*/

footer.footer{
    background:url('images/bk_footer.jpg') no-repeat center;
    background-size: cover;
    position: relative;
}
footer.footer:before{
    content:'';
    display: block;
    width: 100%;
    height:100%;
    background-color:#000;
    position: absolute;
    top:0;
    left: 0;
    opacity:0.4; 
}

.footer_inner{
    position: relative;
    padding:50px 0 30px;
    text-align: center;
}
.footer_inner .btn{
    margin-bottom:10px;
}
a.linkCntct{
    color: #fff;
    font-weight: bold;
    display: block;
    margin: 0 auto 30px;
}
a.linkCntct:hover{
    color: #fffa;
}
.logo_white{
    display: block;
    width:230px;
    height:auto;
    margin:0 auto 60px;
}
.footerLink{
    margin-bottom:10px;
}
.footerLink li{
    display: inline-block;
    line-height: 1;
}
.footerLink li:first-child{
    border-right: 1px solid #fff;
    padding: 0 20px 0 0;
    margin: 0 20px 0px 0;
}
.footerLink li a{
    color:#fff;
    font-weight: bold;
}
.footerLink li a:hover{
    color:#fffa;
}
.copyright{
    display: block;
    color:#fff;
    font-weight: bold;
}


/*----------------------------------------------
under
------------------------------------------------*/

.logo_under{
    width:120px;
    float:left;
}
.logo_under img{
    display: block;
    width:100%;
    height:auto;
}
header#header {
    border-top: 5px solid #be9662;
}
header#header .main_inner{
    padding:10px 0;
}



/*------------------------------------------------
お申し込みフォーム
------------------------------------------------- */

div#formBox{
    width: 95%;
    max-width: 790px;
    margin: 0px auto;
    padding: 20px 0;
}

div#form_greet{
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
}

div#form_greet.thanks{
    margin: 0 0 0 0;
}

body.page-thanks_juku div#form_greet,
body.page-thanks_seminar div#form_greet{
    margin: 0 0 0 0;
}

div#form_greet p{
    margin: 0 0 10px 0;
}

div#form_greet p span{
    display:block;
}

div#form_greet div{
    background:#f5f5f5;
    padding:10px;
    text-align: center;
}

div#form_greet div span{
    margin:0 0 0 15px;
    font-size:26px;
}

div#formBox dl{
    width: 100%;
    margin: auto;
    padding: 0 0 20px 0;
    margin: 0 auto 0;
}

div#formBox dl dt{
    float: left;
    padding: 15px 0 0 20px;
    font-weight: bold;
    width: 26%;
}
div#formBox dl dt.required:after{
    display: inline-block;
    content: "必須";
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #ad871b;
    padding: 0 5px 0;
    margin: 0 0 0px 10px;
    position: relative;
    top: -2px;
}

div#formBox dl dd{
    padding: 15px 20px 15px 30%;
}

div#formBox dl dd.kugiri{
    border-bottom: 5px solid #ddd;
}

div#formBox dl dd.even{
    background:#f7f7f7;
}

div#formBox dl dd p{
    font-size:13px;
    color:#ad871b;
}

div#formBox dl dd p#tit{
    color: #FFFFFF;
    background: #ad871b;
    margin: 10px 0 0px 0;
    line-height: 1;
    padding: 4px 10px;
    width: 150px;
    text-align: center;
    font-size: 12px;
}
div#formBox dl dd span.price{
    font-size:18px;
    font-weight:normal;
}
div#formBox dl dd span.price:after {
    background: #a9967f;
}
span#addressConfirm {
    font-weight: bold;
    font-size: 24px;
    color: #ad871b;
    display: block;
    border-bottom: 1px solid #ad871b;
    background: #fff;
    margin: 0 0 0 0;
    padding: 10px 10px;
    line-height: 1.3;
}

div#formBox dl dd input,
div#formBox dl dd textarea{
    font-family:"游ゴシック体", "Yu Gothic", YuGothic,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin:0 0 15px 0;
    font-size: 16px;
    line-height:1.8;
    padding:2.5px 5px;
    border: none;
    border: 1px solid #d6c2a9;
    box-sizing: border-box;
    }

div#formBox dl dd input[type="checkbox"]{
    margin:0 10px 3px 0;
}
div#formBox dl dd input[type="radio"]{
    margin:0 10px 3px 0;
}

div#formBox dl dd textarea{
    width: 96%;
    height: 110px;
    }

div#formBox dl dd input.haba{
    display:block;
    width:100%;
    }

div#formBox dl dd select{
    font-family:"游ゴシック体", "Yu Gothic", YuGothic,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin:0 0 20px 0;
    font-size: 16px;
    line-height:1.8;
    padding:5px;
    }

.caution{
    background:#FFEFE9;
}

label{
    cursor:pointer;
}

#course_dd label{
    display: block;
    font-size: 20px;
    line-height: 1.2;
    border-bottom: 1px solid #d6c2a9;
    padding: 12px 10px 10px;
    font-weight:bold;
}
#course_dd label:first-child{
    border-top: 1px solid #d6c2a9;
}
#course_dd label:nth-child(even){
    background: #f5f5f5;
}
#course_dd .caution label:nth-child(even){
    background: transparent;
}
#course_dd label input{
    float:left;
    margin: 0 10px 3px 0;
    position: relative;
    top: 6px;
}
#course_dd label p{
    float: left;
    font-size: 18px !important;
    font-weight: bold;
    color: #000 !important;
    line-height: 1.5;
    margin-right:20px;
}
span.priceHidden{
    display: none;
}
#option_dd label:first-child{
    border-top: 1px dashed #c5af92;
}
#option_dd label{
    display: block;
    border-bottom: 1px dashed #c5af92;
    padding: 4px 0;
}
#option_dd label input{
    float:left;
    margin: 0 10px 3px 0;
    position: relative;
    top: 8px;
}
#option_dd label p{
    float: left;
    color: #000 !important;
    font-size: 16px !important;
}

span.price {
    margin-left: 20px;
    font-size: 16px !important;
}
span.price:after {
    padding:1px 3px;
    top: -3px;
}
span.myPrice{
    margin-left: 0;
    font-size: 30px;
    color: #836239;
}
span.tax{
    color:#fff;
    font-weight: normal;
    background:#836239;
    font-size:10px;
    padding:2px 5px;
    margin:0 0 0 5px;
    line-height: 1;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: relative;
    top: -4px;
}



h4.tit_h4_inform{
    font-weight: bold;
    margin:0 0 10px 0;
}
.policyBox_inform{
    height: 150px;
    padding: 10px 15px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    background: #ffffff;
    border: 1px solid #ccc;
    font-size: 0.8em;
}

.policyBox_inform h2{
    margin: 25px 0;
    font-size: 20px;
    background: transparent;
    padding: 20px 5%;
    color: #555;
}


div.halfBox,
div.sanbunBox,
div.zipBox{
    width:100%;
    }

div.halfBox span.formWrap{
    width:48%;
    display:block;
    float:left;
    }

div.halfBox span.formWrap:last-child{
    float:right;
    }

div.halfBox span.formWrap input{
    width:93%;
    }

div.sanbunBox span.formWrap input{
    width:93%;
    }

div.sanbunBox span.formWrap{
    width:25%;
    display:block;
    float:left;
    }

div.zipBox span.formWrap{
    width:55%;
    display:block;
    float:left;
    }

div.cardBox span.formWrap{
    width:35%;
    display:block;
    float:left;
    }

div.cardBox span.formWrap input{
    width:93%;
    }
div.cardBox span.formWrap select{
    width:100%;
    }

span.birth_span,
span#postcode_span,
span.remit_span{
    float:left;
    margin:0 10px 0;
    line-height:30px;
    }

span#postcode_span{
    margin:0 10px 0 0;
    }

div.setWrap.caution{
    padding: 10px;
    border: 1px solid #ccc;
}

div.setWrap.caution span.formWrap input.haba{
    margin:0 0 0 0 !important;
}

div#courseWrap.setWrap.caution{
    margin:0 0 10px 0 ;
}

.yoyaku_button{
    margin:0 0 30px 0;
    text-align:center;
    }

.yoyaku_button > button,
.yoyaku_button > input {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    border: none;
    cursor:pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size:18px;
    text-shadow: 0 0 3px rgba(0,0,0,0.2);
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
    color:#fff;
    background: #be9662;
    background: -moz-linear-gradient(top, #be9662 0%, #bc7b2b 100%);
    background: -webkit-linear-gradient(top, #be9662 0%,#bc7b2b 100%);
    background: linear-gradient(to bottom, #be9662 0%,#bc7b2b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#be9662', endColorstr='#bc7b2b',GradientType=0 );
    font-weight: bold;
}

.yoyaku_button > button:hover,
.yoyaku_button > input:hover {
    background:#a26e2b;
}

.strongContainer {
    display:none;
    border: 5px solid #ddd;
    border-top: none;
}

#ginfuriContainer_account{
    padding:10px;
}

#ginfuriContainer_account h4{
    font-weight: bold;
    border-bottom: 2px dashed #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

#ginfuriContainer_account p{
}

.tPrice{
/*    border-top: 1px solid #ddd;
    margin-top: 5px;
    padding-top: 5px;*/
}
.tPrice span.tPrice_midashi{
    font-size: 12px;
    font-weight: bold;
    margin: 0 10px 0 0;
    background: #DDD;
    padding: 2px 7px;
    line-height: 1;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.tPrice span.tPrice_caution{
    font-size: 12px;
    margin:0 0 0 0;
    color:#888;
}

/* yoyaku_validate ---------------------*/

.validate_attention{
    position: relative;
    top: -10px;
    left: 0px;
    background: #9E0000;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#course_dd .validate_attention,
#card_dd .validate_attention{
    top: 5px;
}

.halfBox .validate_attention{
    top: -10px;
    left: 0px;
}

.validate_attention:before{
    content: "";
    position: absolute;
    top: -12px;
    left: 10px;
    display: block;
    border: 6px solid transparent;
    border-bottom-color: #9E0000;
    border-left-color: #9E0000;
}

#formWrap {
    width:700px;
    margin:0 auto;
    color:#555;
    line-height:120%;
    font-size:90%;
}

/*---------------------
確認画面
---------------------*/
#cover{
    background: rgba(190, 150, 98, 0.8);
    width: 100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
}
#confirmBox{
    position: fixed;
    width: 600px;
    background: #fff;
    top: 5%;
    left: 50%;
    margin: 0 0 0 -300px;
    height: 90%;
    z-index: 10000;
}

#confirmBox h2{
    font-weight: bold;
    text-align: center;
    border-bottom: 5px solid #ddd;
    margin: 0px auto 0;
    padding: 10px 0 7px 0;
    line-height: 1;
    font-size: 18px;
    width: 90%;
    color: #000000;
}

#confirmBox dl {
    width: 90%;
    margin: auto;
    overflow-y: auto;
}

#confirmBox dl dt{
    float: left;
    padding: 10px 0 0 0;
    font-size: 14px;
    font-weight: bold;
}

#confirmBox dl dd{
    padding: 10px 0 10px 190px;
    border-bottom: 1px solid #ddd;
    min-height: 24px;
}

#btnBox{
    width: 600px;
    position: fixed;
    bottom: 5%;
    left: 50%;
    height: 60px;
    margin: 0 0 0 -300px;
    text-align: center;
    background: #fff;
    padding: 10px 0 0 0;

}

#btnBox button{
    width: 250px;
    height: 45px;
    margin: 0 auto;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #bc7b2b;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin:0 0 0 5px;
    font-size: 16px;}

#btnBox button:hover{
    background: #8f5814;
}

#btnBox button#btn_rewrite{
    color: #fff;
    background: #bbb;
    margin:0 5px 0 0;
}

#btnBox button#btn_rewrite:hover{
    background: #aaa;
}

/*------------------------------------------------
事務所概要
------------------------------------------------- */
.sctn_prof.about{
    padding-top: 0;
}
.about .cCntnt{
    padding:0;
}
.aboutDl{
    margin: 0 auto 40px;
}
.aboutDl dt,
.aboutDl dd{
    padding:10px 0;
}

.aboutDl dt{
    float:left;
    font-weight:bold;
}

.aboutDl dd{
    padding-left: 30%;
    border-bottom: 1px solid #b18d5e4d;
}

/*------------------------------------------------
お問い合わせ
------------------------------------------------- */
div#formBox dl dd.even {
    background: #f7f7f7;
}
.cntctBox{
    width: 100%;
    margin:0 auto 60px;
}
.cntctBox h2{
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 15px 0;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.cntctBox p{
    margin: 0 0 15px 0;
}
.cntctBox dl.tel{
    background: #f7f7f7;
    padding: 20px;
}
.cntctBox dl.tel dt{
    float: left;
    width: 160px;
    font-weight: bold;
    padding:10px 0;
}
.cntctBox dl.tel dd{
    padding: 10px 0 10px 160px;
}
.cntctBox dl.tel dd span{
    margin: 0 0 0 15px;
    font-size:14px;
}
.cntctBox dl.tel dd.tel{
    font-size:20px;
}

.cntctBox #formBox{
    width: 100%;
    padding:0;
}
.cntctBox #formBox input{
    margin-bottom:0px;
}
.cntctBox #formBox textarea {
    width: 100%;
    margin-bottom:0;
    display: block;
}
.cntctBox #formBox dl {
    border-bottom:none;
    padding: 0;
    margin: 0;
}
.cntctBox #formBox dl dd {
    padding: 15px 20px 15px 230px;
    border-top: 1px solid #ededed;
    margin-bottom:0 !important;
}
.cntctBox #formBox .yoyaku_button{
    margin-bottom: 0;
}
.wpcf7-not-valid-tip{
    position: relative;
    left: 0px;
    background: #9E0000;
    color: #fff !important;
    padding: 5px 10px;
    font-size: 12px !important;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    display: inline-block !important;
    top: 8px;
    font-weight: bold !important;
}
.wpcf7-not-valid-tip:before{
    content: "";
    position: absolute;
    top: -12px;
    left: 10px;
    display: block;
    border: 6px solid transparent;
    border-bottom-color: #9E0000;
    border-left-color: #9E0000;
}
div.wpcf7-response-output {
    position: relative;
    margin: 20px 0.5em 1em !important;
    padding: 1.2em 1em !important;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    border: 3px solid #ffdddd !important;
    background: #ffefef;
    color: #990000;
}
div.wpcf7-response-output:before{
    content: "";
    position: absolute;
    width: 0px;
    margin: auto;
    top: -30px;
    left: 0;
    right: 0;
    display: block;
    border: 15px solid transparent;
    border-bottom-color: #ffdddd;
}

body.page-contact div#formBox dl {
    width: 100%;
    margin: auto;
    border-bottom: 5px solid #ddd;
    padding: 0 0 20px 0;
    margin: 0 auto 20px;
}



/*------------------------------------------------
20180524追加
------------------------------------------------- */
img.icon_drone{
    position: absolute;
    display: block;
    top: -15%;
    right: 5%;
    width: 75px !important;
    height: auto !important;
}