@charset "UTF-8";
body{
    background:#F8F4E6;
    font-family: "MS Pゴシック" ;
    color: #3E3B3B;
    font-size: 17px;
    line-height: 30px;

}
header,main{
    width: 53%/*1000px*/;
    margin: 0 auto;
}
header{
    margin-top: 5vh;
}
/*--------------header----------*/
#toprogo{
    width: 27vw;
}
#instagram,#line {
    width: 2.5vw;
}
.icon {
    text-align: right;
    float: right;
    padding-top: 2.2vw;
}
.headerph{
    display: none;
}
/*--------nav------------*/
nav {
display: flex;
justify-content:space-between; 
width: 100%;
}
nav img{
    width:9vw ;
}
#toprogo2,.header {
    display: none;
}
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
    .navv,#toprogo {
    display: none;
    }

    header,main{
        width: 75%;
        margin: 0 auto;
    }
    #instagram,#line {
        width: 4.5vw;
    }
      #toprogo2 {
        width: 30vw;
        display: inline;
        margin: -8vh 0vh 0vh 0vh;
      }
      #topr2 {
        text-align: center;
      }
      .icon {
        text-align: left;
        float: none;
        height: 60px;
      }
      
      /*------------------------------
       ハンバーガーメニュー
      ------------------------------*/
        .headerph {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0 20px;
        background: #F8F4E6;
        float: right;
      }
      
      .logon {
        font-size: 24px;
      }
      /* チェックボックスは非表示に */
      .drawer-hidden {
        display: none;
      }
      
      /* ハンバーガーアイコンの設置スペース */
      .drawer-open {
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 100;/* 重なり順を一番上に */
        cursor: pointer;
      }
      
      /* ハンバーガーメニューのアイコン */
      .drawer-open span,
      .drawer-open span:before,
      .drawer-open span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background: #333;
        transition: 0.5s;
        position: absolute;
      }
      
      /* 三本線のうち一番上の棒の位置調整 */
      .drawer-open span:before {
        bottom: 8px;
      }
      
      /* 三本線のうち一番下の棒の位置調整 */
      .drawer-open span:after {
        top: 8px;
      }
      
      /* アイコンがクリックされたら真ん中の線を透明にする */
      #drawer-check:checked ~ .drawer-open span {
        background: rgba(255, 255, 255, 0);
      }
      
      /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
      #drawer-check:checked ~ .drawer-open span::before {
        bottom: 0;
        transform: rotate(45deg);
      }
      
      #drawer-check:checked ~ .drawer-open span::after {
        top: 0;
        transform: rotate(-45deg);
      }
        
      /* メニューのデザイン*/
      .drawer-content {
        width: 25%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/* メニューを画面の外に飛ばす */
        z-index: 99;
        background: #fff;
        transition: .5s;
      }
      .drawer-content ul li a {
        text-decoration: none;
        font-family: "MS Pゴシック" ;
        color: #3E3B3B;
        line-height: 50px;
      }
      
      /* アイコンがクリックされたらメニューを表示 */
      #drawer-check:checked ~ .drawer-content {
        left: 0;/* メニューを画面に入れる */
      }    
    }
      @media screen and (max-width: 746px) {
    #instagram,#line {
        width: 5vw;
    }
      #toprogo2 {
        width: 25vh;
        display: inline;
        margin:-3vh 0vh 0vh 0vh;
      }
      }

      @media screen and (max-width: 594px) {
        /* 480px以下に適用されるCSS（スマホ用） */
        header,main{
            width: 90%;
            margin: 0 auto;
        }
        #instagram,#line {
            width: 8vw;
        }
          #toprogo2 {
            width: 45vw;
            display: inline;
            margin:0;
            padding: 0;
          }
          .icon {
            text-align: left;
            float: none;
            height: 60px;
          }
          .drawer-content {
            width: 100%;
          }
    }
        /*-------------------footer-------------*/

footer{
    background-color: white;
}
.footercent{
    width: 60%/*1000px*/;
    margin: 0 auto;
}
.menu {
    display: flex;
    justify-content: space-evenly;
}
.menu p {
    color:#2E1010;
}
#sei img {
    width: 13vw;
}
#sei,.icon2{
    text-align: center;
}
footer .menu a {
    text-decoration: none;
}
@media screen and (max-width: 594px) {
    .menu {
        display: initial;
        justify-content: initial;
        text-align: center;
    }
    .footercent{
        padding-top: 3vh;
    }
    .menu p {
        font-weight: bold;
    }
    #sei img {
        width: 30vw;
    }
}

/*-----------------------home-----------------------*/
#hometop {
    width: 47vh;
}
#hometopp {
    margin-top: 3%;
    text-align: center;
}
.div1,.div2,.div3 {
    margin-top: 8%;
}
#tag1,#tag2,#tag3 {
    width: 13vw;
}
#picthome {
    width: 13vw;
    margin: 7%;
}
.div1-1,.div2-1 {
    display: flex;
}
#img1 {
    margin: auto;

}
#img1 img {
    width: 18vw;
}
.div2-1 {
    margin-top: 8%;
    margin-bottom: 8%;
}
.div2-2 {
    text-align: center;
}
.div3-1 {
    text-align: center;
}
.div3-1 p {
    text-align: left;
    display: inline-block;
}
#bo{
    font-weight: bold;
}
.div3 {
    margin-bottom: 8%;
}

@media screen and (max-width: 594px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    #tag1,#tag2,#tag3 {
        width: 30vw;
    }
    .div1-1,.div2-1 {
        display: initial;
    }
    .div1,.div2,.div3 {
        margin-top: 8%;
    }
    #picthome {
        width: 45vw;
        margin: 0;
    }
    #aa{
        text-align: center;
    }
    #img1 img {
        width: 40vw;
    }
    .div2-1 {
        margin-top: 8%;
        margin-bottom: 8%;
        display: flex;
        justify-content: center;
    }
    .div2-2 {
        text-align: center;
    }
    .div3-1 {
        text-align: center;
    }
    .div3-1 p {
        text-align: left;
        display: inline-block;
    }
    #bo{
        font-weight: bold;
    }
    .div3 {
        margin-bottom: 8%;
    }
    #hometop {
        width: 100%;
    }
}
/*---------------------------profile----------*/
.profilemain {
    margin: 5% auto;    
}
#pict{
    width: 60%;
    margin-top: 10%;
}
.gaiyou{
    width: 50%;
    margin: auto;
    white-space: nowrap;
    text-align: center;
}
#group20 {
    display: none;
}
.profilemain table {
    width: 40vw;
    height: 30vh;
}
@media screen and (max-width: 594px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    #pict{
        width: 50vw;
    }
    .gaiyou{
        width: 85%;
    }
    #group20 {
        display: initial;
        width: 45%;
    }
    .profilemain table {
        width: vw;
    }
}

/*------------------------------content-------------*/
#cro, #cro2 {
    color: #968B79;
    border-bottom: 7px double #968B79;
    margin: 5% auto 3% auto;
    font-size: x-large;
}
.con1,.con2 {
    display: flex;
    margin: 5% auto;
}
#imag {
    width: 20vw;
    margin: auto 1%;
    flex: 1;
}
#cro2 {
    margin-top: 25%;
}
.div4-1 {
    display: flex;
}
#ga1 {
    width: 27%;
    flex: 1;
    margin: auto 3%;
}
.div4-2 {
    margin-top: 5%;
    display: flex;
}
.div4-3{
    text-align: center;
    margin: 13% auto;
}
.div4-3 img {
    width: 35vw;
}
#group19 {
    display: none;
}
@media screen and (max-width: 594px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .con1 {
        display: initial;
        margin: 5% auto;
    }
    .con1 #imag {
        width: 100%;
        margin: auto 1%;
        flex: initial;
    }
    .con2 {
        display: flex;
        margin: 5% auto;
    }
    .con2 #imag {
        width: 20vw;
        margin: auto 1%;
        flex: 1;
    }

    .div4-1 {
        display: initial;
    }
    #ga1 {
        width: 100%;
        flex: initial;
        margin: auto 3%;
    }
    .div4-2 {
        margin-top: 5%;
        display: initial;
    }

    .div4-3 img {
        width: 100%;
    }
    #group19 {
        display: initial;
        width: 45%;
    }
}
/*---------------------------into----------*/
.intrmain p {
    margin: 5vh auto;
}
#mini {
    display: none;
}
.intrga img {
    width: 15VW;
    margin: 3% auto;
}
.intr {
    width: 60%;
    height: auto;
    margin: 8vh;
}
.intrga{
    margin: 8vh;
    margin-left: 3vw;
}
.intrmain {
    display: flex;
}
#group18 {
    display: none;
}
@media screen and (max-width: 594px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    #mini {
        display: initial;;
    }
    #mini img {
        width: 100%;
    }
    .intrga img {
        display: none;
    }
    .intr {
        width: 60%;
        height: auto;
        margin: 0 auto;
    }
    .intrmain {
        display: initial;
    }
    #group18 {
        display: initial;
        width: 45%;
    }
}
/*---------------------------問い合わせ---------*/
.test {
    text-align: center;
}
.test iframe {
    width:100%;
    height:1000px;
}
.contamain div {
    margin-top: 5vh;
    text-align: center;
}
.contamain div img {
    width: 22vw;
    margin-top: 5vh;
}
.contamain form{
    text-align: center;
    margin-bottom: 30vh;
    margin-top: 8vh;

}
.contamain dl{
    margin: auto auto 0 auto;
}

.contamain dd {
    margin: 0 0 5vh 0;
}
.contamain textarea {
    margin-bottom: 5vh;
}
.button {
    display       : inline-block;
    border-radius : 50%;          /* 角丸       */
    font-size     : 13pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 23px 40px;   /* 余白       */
    background    : #a9ceec;     /* 背景色     */
    color         : #3E3B3B;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    transition    : .3s;         /* なめらか変化 */
    box-shadow    : 3px 3px 4px #666666;  /* 影の設定 */
  }
  .button:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
  }
.contamain input,textarea {
    border:none
}
.contamain input{
    height: 28px;
}
#phone {
    width: 25px;
}
#ph {
    text-decoration: none;
    color: #3E3B3B;
    margin-left: 5px;
}
#ph:hover{
    font-weight: bold  ;
}
#group21 {
    display: none;
    }
@media screen and (max-width: 594px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .contamain div img {
        width: 85%;
    }
    .contamain input,textarea {
        width: 100%;
    }
    .contamain input{
        width: 100%;
    }
    #group21 {
        display: initial;
        width: 45%;
    }
    .test iframe {
        width:80vw;
        height:170vh;
    }
    }