@charset "UTF-8";
/* CSS Document自作 */
html p{
  line-height: 2.3;
  font-size: 1.2em;
  color: #2A2724;
}

html {
/*  scroll-padding-top: 40px; すべてのページ内ジャンプは40px分追加*/
    /* box-sizing: border-box; */
    width: 100%;
    background: #ffefef;
}

#wrapper{
  width: 90%;/*実質940px*/
  margin: 0 auto;
  padding: 0 5%;/*50px*/
  background: #ffefef url("../img/00_bgDotted.jpg");
}
#titlediv{
  width: 200px;/*200px*/
  height: 140px;
  margin: 0 auto;
  background: #fff;
  padding: 16px 13px 0;
  position: absolute;
  z-index: 99;
  top:73%;
  bottom:0;
  left:0;
  right:0;
  }

/*=================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    margin-bottom:30px;
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("../img/pho_3_slider.jpg");
}
.slider-item02 {
    background:url("../img/pho_4_slider.jpg");
}
.slider-item03 {
    background:url("../img/pho_7_slider.jpg");
}
.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/
.slick-prev, 
.slick-next {
    position: absolute;
    z-index: 3;
    top: 42%;
    cursor: pointer;
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    /*border-top: 2px solid #fff;  矢印の色*/
    /*border-right: 2px solid #fff;  矢印の色*/
    height: 25px;
    width: 25%;/*25px*/
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
  text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
    margin:0 5px;
}

.slick-dots button {
    display:none;/*blockで表示*/
    color: transparent;
    outline: none;
    width:5px;/*ドットボタンのサイズ*/
    height:5px;/*ドットボタンのサイズ*/
    border-radius:100%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*--------------------------スライダーのためのcss--------------------------*/
/* 大枠 */
section{
    margin-bottom:50px;
}
main{
    padding-bottom:120px;
}
#intro {
    /* padding-left: 3%; */
    /* background: #aaa;            bg test*/
    width: 90%;
    margin: 0 auto;
    padding-top: 90px;
    font-family: 'Rounded M+ 1c', sans-serif;
}
.catchCopy{
    text-align: center;
    color: #f44;
    font-size: 3.0em;
    text-shadow: 0 9px 3px #fff;
    font-family:'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}
.catchsubCopy{
    text-align: center;
    font-size: 1.3em;
}
/*項目アイコン*/
.h2kakutitle{
    font-size: 1.7em;

}
.h2kakutitle::before {
    content: "";
    display: inline-block;
    width: 29px;
    height: 26px;
    margin-right: 5px;
    background: url("../img/listStyle.svg") 0 1px no-repeat;
    background-size: contain;
    position: relative;
  }
  
@media screen and (min-width: 768px) {  
        .pc-grid-col2,
        .pc-grid-col3{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        /*2カラムの列幅*/
        .pc-grid-col2 .col{
            width: 47%;  /*もと460pxに全体幅940px(980px-paddingの20px)*/
            /* background: #999; */
          }
}
/*++++++++++++++
about
++++++++++++++*/

/* 写真とコピー */
.posi{
    position: relative;

}
.posi img{
    width: 100%;
}
.bunA, .bunB, .bunC{
    position: absolute;
    top: 80%;
    left:5%;
    width:50%;
    margin: 0 auto;
    padding: 0 2px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background: #ffffff70;
    color: #f44;
    line-height: 1.5;
    border-radius:2px;
    transform: translateY(-50%);
}
.bunB{
    width:60%;
    line-height: 1.2;
}
.bunC{
    width:90%;
}

/*aboutのlast-message『ご連絡いただければ』*/
.messe{
    text-align: center;
    padding-top: 80px;
    margin-bottom: 90px;
    color: #464646;
    font-size: 1.65em;
    font-weight: bold;
    text-shadow: 0px 0px 18px #fefefe;
    background:url(../img/favicon.svg) 100% 0 no-repeat;
}

/* profile */
#place{
    padding-left: 2%;
}
#place h3{
    margin:1em 0 1em;
    border-bottom: dotted 2px #333;
}
#place section p{
    line-height: 1.32;
    margin-bottom: 1.4em;
}

footer{
    width: 100%;
    background:url(../img/footer-1000-400.jpg) no-repeat;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

/* グラデーションを::beforeでつける */
footer::before{
    content:"";
    display:block;
    width:100%;
    height: 100%;
    background-color: rgba(255,200,200,.6);
    background-image:radial-gradient(at top, transparent 40%,khaki);
    position:absolute;
    top: 0;
    left: 0;
    z-index: -1;/* フッターの下に配置 */
}

.fotwrapper{
    width:100%;
    position: relative;
    z-index: 2; /* アイコンがクリック可能になるように2に設定 */
}
footer .nav{
    width: 90%;
    margin: 0 auto;
}
@media screen and (min-width: 999px) {
    footer{
        background:url(../img/footer-1000-400.jpg) no-repeat center;
        background-size: 100% auto; /* 横幅は100%に、縦幅は自動調整 */
    }
}

.pripol{
  text-align: center;/*m0-auto はblock要素にしか効かない。inlineblockにはこれ*/
}

.pripol li{
    background: #ffffff55;
    width: 35%;
    margin: 5px 0;
    padding: 5px 0;
    text-align: center;
    font-size: 0.9em;
    display: inline-block;
}

.footerLogoWrap{
    width: 150px;
    margin: 0 auto;
    font-size:.8em;
}

/*++++++++++++
  icon関連
++++++++++++++*/
.sliderSnsWrap{
    width:100%;
    position: fixed; /* デフォルトの位置 */
    background: #ffefef65;
    z-index: 9;
    text-align: center;
}
.sliderSnsWrap .sns{
    display:flex;
    top: 0;
    right: 1px;
/*    padding:10.6px 0 3.5px;*/
    gap: 1px;  /*アイコン間のスペース調整 */
    width: 230px;
    font-size: 1em;
/*    margin-left: 20%;*/
}
.sliderSnsWrap li{
    width: 80px;
    display:inline-block;
    padding-top:20px;
/*     margin-left: 20.5%; */
}
.sliderSnsWrap li:first-child{
    width: 190px;
    padding-top: 5px;
}
.sliderSnsWrap .sns li a {
    display: inline-block;
    text-decoration: none;
}
.fukidasi{
    position:relative;
    width:250px;
    height:45px;
    background:#FBFFE2;
    padding-top:12px;
    text-align:center;
    color:#454545;
    font-size:10px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}


.fukidasi:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(251, 255, 226, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:24px;
    border-right-width:24px;
    margin-top: -10px;
    border-left-color:#FBFFE2;
    left:100%;
    top:50%;
}
@media screen and (min-width: 568px) {
        .sliderSnsWrap .sns{
            right: 100px;
            font-size: .8em;
            padding:5.6px 0 3.5px;
            gap: 1px;  /*アイコン間のスペース調整 */
            width: 50%;
        }
        .sliderSnsWrap li:first-child{
            width: 190px;
            padding-top: 5px;
        }
        .fukidasi{
            position:relative;
            width:300px;
            height:45px;

            padding:10px;
            text-align:center;
            color:#454545;
            font-size:1em;
            font-weight:bold;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
        }
        .fukidasi:after{
            border: solid transparent;
            content:'';
            height:0;
            width:0;
            pointer-events:none;
            position:absolute;
            border-color: rgba(251, 255, 226, 0);
            border-top-width:10px;
            border-bottom-width:10px;
            border-left-width:24px;
            border-right-width:24px;
            margin-top: -10px;
            border-left-color:#FBFFE2;
            left:100%;
            top:50%;
        }        
}

@media screen and (max-width: 568px) {
    .fukidasi {
        width: 300px; /* 幅を広げる */
    }
}





.footerIconsWrap{
    width:100%;
    position: static; /* デフォルトの位置 */
/*    background: none;  背景色をクリア */
    z-index: 999;
}
.footerIconsWrap .sns{
    width: 220px;
    margin: 30px auto;
    
}
.footerIconsWrap .sns li{
    /* width: 10.5%; */
    display:inline-block;
    /* margin-left: 20.5%; */
    color: #2a2724;
}
.footerIconsWrap .sns li:first-child{
    margin-left:0;
    background: #fff;
    
}
@media screen and (min-width: 768px) {  
        footer .nav{
            text-align: center;
        }
        .pripol li{
            display:inline-block;
            width: 20%;
        }
}


/* icon */
    @font-face {
        font-family: 'icomoon';
        src:  url('fonts/icomoon.eot?8byi82');
        src:  url('fonts/icomoon.eot?8byi82#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?8byi82') format('truetype'),
        url('fonts/icomoon.woff?8byi82') format('woff'),
        url('fonts/icomoon.svg?8byi82#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    
    [class^="icon-"], [class*=" icon-"] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        font-size: 360.2%;
    
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-mail:before {
        content: "\ea1";
        color: #5a5754;
    }
    .icon-instagram:before {
        content: "\ea2";
        color: #5a5754;
    }
    .icon-youtube:before {
        content: "\ea3";
        color: #5a5754;
    }
/* --/sns/icon-- */


.copyWright{
    text-align: center;
    font-size: 0.9em;
}

/* markstamp */
.markarea{
    position: relative;
}

.stamp img{
    position: relative;
    top: -90px;
    left:75%;
    transform:rotate(-15deg);
    width:30%;
}
.stamp2 img{
    position: relative;
    z-index: -9;
    left:75%;
    width: 23%;
}

/*fuwaっと文字を出す*/
.fuwa{
  opacity: 0;
  transform:translate(0,200px);
  transition: 1.5s;
}
.fuwa.scrol{
  opacity: 1;
  transform:translate(0,0);
}