@charset "utf-8";

/*全体共通*/
body{
    /*フォント 背景の色*/
    font-family: "Noto Sans JP", serif;
/*--------------------------------------------------------------------*/
  background-color: #fffdfa;
 }
/*ヘッダー*/
  header{
   color: #392a28;;
  }

  header .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
    padding: 20px 0;
    color: #392a28;
  }

  header .logo{
    font-size: 24px;
    font-weight: 700;
  }



  header nav ul{
    display: flex;
  }

  header nav ul li{
    margin-left: 50px;
  }

    header nav ul li a{
    transition: 2s;
    }

    header nav ul li a:hover{
    transition: 2s;
    opacity: 0.6;
     }

         /*ナビゲーション固定
          header {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 10000;
          }

          #container {
            padding-top: 150px;｝ */
          /*固定するときは<nav id="global-nav">もいれる*/


 @media only screen and (max-width: 960px){
  header .row{
   display: block;/**/
  }

  header nav ul{
   justify-content: space-between;
  }
  header nav ul li{
    margin-left: 0;
    margin-top: 20px;
  } 

 
}


/*メイン*/

/*　桜　*/
#sakura_block{
  width: 100%;
}
#sakura_block .sakura_parts_box{
  position: relative;
}
#sakura_block .sakura_parts_box img{
  position: absolute;
  padding-top: 20px;
}
#sakura_block .sakura_parts_box img:nth-child(2n+1){
  width: 37px;/*花びらのサイズ*/
}
#sakura_block .sakura_parts_box img:nth-child(2n){
  width: 22px;/*花びらのサイズ*/
}

/*-----------------------------------
桜の花びらパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 10%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 0; left: 43%;}
img.parts_10{top: 0; left: 50%;}
img.parts_11{top: 0; left: 55%;}
img.parts_12{top: 0; left: 60%;}
img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 81%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 80%;}
img.parts_19{top: 0; left: 83%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 2;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.sakura_parts_box img {
    animation: sakura linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

/*　----------桜おわり------------　*/

h2{
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}


.main_visual{
    background-image: url('../images/topimg.jpg');
    background-repeat:  no-repeat;   
background-size:900px;
background-position: center top;
position: relative;
height:600px;
margin-top: 10px;
object-fit: cover; /* アスペクト比を維持しつつ、画像をボックスに収める */


}

.main_visual .container{ 
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
    height: 600px;
    position: relative;

}


 

.main_visual .purple{
    background-color: #392a28;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.3;/*背景のうすピンク半透明にする*/   mix-blend-mode: multiply;}

@media only screen and (max-width: 960px){

  .main_visual {
   margin-top: 15px;/*naviとメイン画像の間*/
    background-image: url('../images/topimg.jpg');
    background-repeat:  no-repeat;   
background-size: 80%;
background-position: center top;
position: relative;
height: 250px;


 }

  .main_visual h1{
    font-size: 52px;
   }

 .main_visual .container{ 
   height:10px;/*top画像とABOUTの間*/
   position: relative;
 }
 }

/*---------セクション１-----------*/
.section1{
  color: #392a28;
  padding: 80px 0;
  padding-top: 165px;/*top画像とABOUTの間*/
}

.section1 .container{
width: 90%;
margin: 0 auto;
max-width: 1280px;
margin-bottom: 10px;/*ボタンを下に下げる*/
 /*background-color: aqua;*/
}

.section1 .row{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.section1 .col{
  width: 30%;/*真ん中の空き調整*/
 /*background-color: rgb(255, 115, 0);*/

}

.section1 .sub_title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 1px;
  text-align: center;
}

.section1 h1{
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}




.section1 .table-1{
  font-size: 14px;
  line-height: 1.8;/*行間*/
  padding-top: 50px;
  padding-bottom: 50px;}


.section1 .center{
  text-align: center;
  margin: 35px;/*自己紹介とボタンの間の空き設定*/
}


.section1 img{
  border-radius: 20px;
    }
  
    .section1 table {
  width: 100%;
    }
  
    .section1 table tr{
    padding: 20px 0;
    display: block;    
    border-bottom: solid 1px #392a28;
    line-height: 1.5;
    }
  
  
    .section1 table tr th{
     width: 150px;
     font-size: 20px;
      }
  
      .section1 table td{
        font-size: 18px;
         }

@media only screen and (max-width: 960px){
  
  .section1{
  padding-top: 30px;
  padding-bottom: 30px;
  }
  
  .section1 .row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;/*横幅100％をはみ出た時に改行するか*/
    margin-top: 10px;/*私についての下の空き調整*/

   }
  
  .section1 .col{
    width: 100%;/*真ん中の空き調整*/
    text-align:center;
    margin: 15px;
    }

    .section1 h1{
      font-size: 50px;/*調整*/
    }


    .section1 table tr th{
      width:40%;
      font-size: 20px;
       }

       .section1 .container{
        margin-bottom: 18px;/*ボタンを下に下げる*/
        }

        .section1 .table-1{
          font-size: 16px;
          line-height: 1.8;/*行間*/
          padding-top: 1px;
          padding-bottom: 30px;/*自画像とテーブルの間*/
          }

          
      .section1 table td{
        font-size: 17px;
         }

          /*.section1 .center{
            text-align: center;
            background-color: aquamarine;
            margin: 65px;自己紹介とボタンの間の空き設定
          }*/
        }


/*---------セクション２-----------*/


.section2{
color: #392a28;
padding: 100px 0;
padding-top: 90px;/*WORKSとボタンの間*/
}

.section2 .container{
width: 90%;
margin: 0 auto;
max-width: 1280px;
margin-bottom: 10px;/*ボタンを下に下げる*/
}

.section2 .sub_title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
  /*background-color: #410416;*/
}

.section2 .row{
  /*width: 90%;*/
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
 margin-left: auto;
 margin-top: 80px;
 /*background-color: blue;*/
}

.section2 .col{
  width: 31%;/*真ん中の空き調整*/
  position: relative;/*下の　section2 h3{ position: absolute;とセット*/
/*加工追加*/margin-bottom: 60px;/*追加終わり*/
}



.section2 h1{
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.section2 p{
font-size: 20px;
text-align: center;
}

.section2 img{
border-radius: 20px;/*画像の部分の角を丸める*/
display: block;
margin-left: auto;
 margin-right: auto;;
}
/*------大きいバナー見出し-----------------------------*/
.WORKSsub_title{
  background-color: #ffd4d4;
  display: inline-block;
  color: #392a28;
border: solid 2px #fff;
  /*position: absolute;
  bottom: 6px;
  left: 50%; /*ひだり端から50％のとこから配置*/
  /*transform: translateX(-50%);*/
  position: absolute;
  top:6%;
  left: 30%;
  transform: translate(-50%, -50%);
/**/
  padding: 6px 20px;
  border-radius: 10px;
  }
  /*------大きいバナー見出しおわり------------------*/

/*----小さいバナー見出し-789だけWORKSsub_title2に変えている---*/

  .WORKSsub_title2{
    background-color: #ffd4d4;
    color: #392a28;
    border: solid 2px #fff;
    display: inline-block;
  
    /*position: absolute;
    bottom: 6px;
    left: 50%; /*ひだり端から50％のとこから配置*/
    /*transform: translateX(-50%);*/
    position: absolute;
    top:12%;
    left: 30%;
    transform: translate(-50%, -50%);
  /**/
    padding: 6px 20px;
    border-radius: 10px;
    }

   /*----小さいバナー見出しおわり--------------*/ 

/*----------WEBサイト見出し--------------*/ 
   .WORKSsub_title3{
    background-color: #ffd4d4;
    color: #392a28;
    border: solid 2px #fff;
    display: inline-block;
  
    /*position: absolute;
    bottom: 6px;
    left: 50%; /*ひだり端から50％のとこから配置*/
    /*transform: translateX(-50%);*/
    position: absolute;
    top:12%;
    left: 35%;
    transform: translate(-50%, -50%);
  /**/
    padding: 6px 20px;
    border-radius: 10px;
    }
/*----------WEBサイト見出しおわり--------------*/ 

.section2 .center{
  text-align: center;
}


@media only screen and (max-width: 960px){


  .section2{
     padding-bottom: 20px;
    padding-top: 20px;/*WORKSとボタンの間*/
  }
  

  .section2 .row{
    margin-top: 50px;/*タイトル下*/
    flex-wrap: wrap;
  }
  
  .section2 .col{
    width: 100%;/*真ん中の空き調整*/
    margin-bottom: 40px;
}

}
/*---------セクション3-----------*/

.section3 h1{
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
   text-align: center;
   
}



.container-contact {
  max-width:600px;
  margin:0 auto;
  text-align:center;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  background-color:#FAFAFA;
}

input {
  margin-bottom:10px;
}

/*これ！！！*/
input:focus {
  background-color: #ffffff;
  outline: 1px  #f57898 solid;
}

/*これ*/
textarea:focus {
  background-color: #ffffff;
  outline: 1px  #f57898 solid;
}


textarea {
  height:100px;
  margin-bottom:40px;/*ボタンとメッセージボックスの間*/
  }

input:first-of-type{
  margin-top:35px;
}

input, textarea {
  font-size: 1em;
  padding: 15px 10px 10px;
  font-family: 'Source Sans Pro',arial,sans-serif;
  border: 1px solid #e3d3cc;
  background: #ffffff;
  color:#5e5351;;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 80%;
  max-width: 600px;
}
::-webkit-input-placeholder {
   color: #938478;
}
:-moz-placeholder {
   color: #ccd4ab;  
}
::-moz-placeholder {
   color: #ccd4ab; 
}
:-ms-input-placeholder {  
   color: #ccd4ab; } 


/* お問い合わせスマホ対応 */
@media (max-width: 960px) {
  label.error {
    width: 90%;
  }
  input, textarea {
    width: 90%;
  }
  button {
    width:90%;
  }
  body {
  padding-top:10px;
  }  
}



.section3{
  color: #392a28;
  padding: 100px 0;
  background-image: url('../images/cat02252.jpg');/*エラー発生中*/
    background-repeat:  no-repeat;   
background-size: 83%;
background-position: center;
position: relative;
padding-top: 90px;/*CONTACTとボタンの間*/
margin-bottom: 40px;
}


.section3 .container-contact{
width: 90%;
margin: 0 auto;
max-width: 1280px;
position: relative;
background-color:#fffdfa;}


.section3 .sub_title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}



 .section3 .text{
  line-height: 1.8;
margin-bottom: 10px;
text-align: center;
  }

  .section3 .center{
    text-align: center;

  }
  
  

  @media only screen and (max-width: 960px){
    .section3 .row{
      flex-wrap: wrap;/*時と場合によって改行*/
    }
    
    .section3 .col{
      width: 100%;/*画像サイズ*/
      margin-bottom: 30px;
      }
  }
  /*---------セクション3おわり-----------*/

  /*---------フッダー-----------*/
  footer{
    color: #392a28;
    text-align: center;
    font-size: 12px;
  }

  footer .container{
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
    border-top: solid 1px #392a28;
    padding: 50px 0 20px;
   }
   footer .top-page{
font-size: 15px;
 display: inline-block;
margin-bottom: 40px;  
}

footer ul{
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
    
footer ul li{
  font-size: 15px;
  margin: 0 20px;
}

footer ul li a{
transition: 2s;
}

footer ul li a:hover{
  transition: 2s;
  opacity: 0.6;
}





/*★下層ページ共通★*/
.page_main_visual{
  background-image: url('../images/cherryblossom.png');
background-size: cover;
background-position: center top;
position: relative;}

.page_main_visual .container{ 
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
  height: 300px;/*★調整する*/
  position: relative;
}

.page_main_visual .title{
  position: absolute;
  top:50%;/*★メイン画像の半分のところからスタート*/
  left: 50%;/*縦から左50％50％に配置*/
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
text-align: center;
}


.page_main_visual h1{
  font-size: 50px;
  font-weight: 700;
  color: #392a28;
  margin-bottom: 10px;
}
.page_main_visual p{
  font-size: 20px;
  font-weight: 500;
  color: #392a28;
}

.page_main_visual .purple{
  background-color: #ffc1cc;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.2;/*背景のうすピンク半透明にする*/
  mix-blend-mode: multiply;
}

@media only screen and (max-width: 960px){
.page_main_visual .sub{
font-size: 17px;
}
}

/*---------下層ページセクション1-----------*/
/*-----仮-----*/
.profile {
  display: flex; /*横並び*/
  justify-content:center;
  margin-top: 100px;/*名前とaboutの間*/
  padding-bottom: 50px;
}

.profile .image {
  width: 20%; /*画像サイズ指定*/
  margin-left: 70px;
  padding: 0;
  text-align: center;
}
.profile .image img {
  width: 90%;
  height: auto;
  border-radius: 50px;
}
.profile .right {
  margin: 0 0 0 20px;
  padding: 0;
}

.profile .title {
  margin: 110px 0 0;
  padding: 0;
  font-weight: bold;
  font-size: 40px;
  text-align: center;
  color: #392a28;
}
.profile .text {
  margin: 10px 0 0;
  padding: 0;
align-items: center;
color: #392a28;
}


/*------仮----*/
.aboutme{
  background-color: #fffdfa;
  padding: 120px 0;
  padding: 10px;/*自己紹介とスキルの間のアキ*/
  margin-bottom: 50px;
  color: #392a28;
  }


/*名前と写真*/
.aboutme .container{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}



/*-------------------------*/
/*自己ＰＲ*/




/*-------------------------*/

.row-about{
  width: 90%;
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto 24px;
  background-color: #ffffff;
  padding: 30px 60px;
  border: solid 1px #e8cece;
  border-radius: 40px;
  align-items: center;/*画像縦センター寄せ*/
  }

.col-about:first-child{/*画像と文章の横幅とこの横幅*/
  width: 20%;
}

.col-about:last-child{
  width: 70%;
}

.aboutme h3{
  font-size: 24px;
  font-weight: 700;
  color: #392a28;
  margin-bottom: 40px;
}

.text-about{
  line-height: 1.6;
}

.col-about .img{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

.col-about h3{
  color: #392a28;
}

.row-about img{
  border-radius: 40px;
  border: solid 1px #d6c8c5; 
  }


@media only screen and (max-width: 960px){

  .purple{
   margin-bottom: 10px;
  }

  .profile {
    width: 100%;
    display:block; /*横並び*/
    align-items: center;
    margin-top: 20px;/*aboutと名前の間空き*/
  }

  .profile .text {
 text-align: center;
  color: #392a28;
  margin-bottom: 20px;
  }

  .profile .image {
    width: 70%; /*画像サイズ指定*/
    margin-left: 70px;
    text-align: center;
    margin: 0 auto;
  }

/*名前と写真*/


.aboutme{
  margin-top:  10px;
  margin-bottom: 10px;
}

.aboutme .left{
  padding-top: 10px;
}

.aboutme .title{
margin-top: 10px;

}

.aboutme .row {
  width: 150%;
  display: block;
  flex-wrap: wrap;
padding: 30px 24px;
}

.aboutme .col:first-child{/*画像と文章の横幅とこの横幅*/
  width: 50%;
}

.aboutme .col:last-child{
  width: 50%;
}


.aboutme .col .img{
  max-width: 130px;
}
.aboutme h2{
font-size: 14px;
margin-bottom: 10px;
text-align: center;  
}

.aboutme .text{
  font-size: 21px;
}


.row-about {
  flex-wrap: wrap;
  gap: 24px 0;
    margin-top: 10px;/*自分の画像と自己紹介の間*/
padding: 30px 24px;}

.col-about:first-child{/*画像と文章の横幅とこの横幅*/
  width: 100%;
}

.col-about:last-child{
  width: 100%;
}

.col-about .img{
  max-width: 130px;
}
.aboutme h3{
font-size: 20px;
margin-bottom: 30px;
text-align: left;  
}

 .text-about{
  font-size: 15px;}
 }


/*----自己ＰＲここまで----------*/

/*スキル*/


  .skill{
  color: #392a28;
 padding: 100px 0;
 padding-bottom: 100px;
 padding-top: 130px;/*自己紹介文とスキルの間*/
background-color: #fffdfa;
          }
          
 .skill .container{
 width: 90%;
 margin: 0 auto;
max-width: 1280px;
  margin-bottom: 10px;/*ボタンを下に下げる*/
   /*background-color: aqua;*/
          }
          
 .skill .sub_title{
  font-size: 20px;
   font-weight: 500;
  margin-bottom: 20px;
   text-align: center;
            /*background-color: #410416;*/
          }
          
.skill h1{
 font-size: 50px;
font-weight: 700;
line-height: 1.3;
text-align: center;
  }
     .row-skill{
     display: flex;
     justify-content:space-between;
     margin-top: 10px;

      }

     .col-skill{
    width: 23%;
    text-align: center;
  
     }

     .box-skill{
    background-color: #ffffff;
    border-radius: 100%;
    width: 110px;
    height: 110px;
    margin:  0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
     }

    .icon{
    width: 100%;
      }

   .skill h3{
    font-size: 20px;
    font-weight: 700;
    color: #e62579;
    margin-bottom: 10px;
    }
 
   .text-skill{
    font-size: 15px;
    text-align: center;
    line-height: 1.5;
    color: #392a28;
    }  


    @media only screen and (max-width: 960px){
      /*けす.heading{
        font-size: 28px;
      }*/
      


    .skill{
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 60px;

    }  
      .row-skill{
        flex-wrap: wrap;
        gap:36px;/*col同士の幅が空く*/
      }

      .col-skill{
        width: 100%;
           }

    .text-skill{
    font-size: 14px;
    text-align: center;
    }

    .skill h3{
     text-align: center;
      }
    }

/*スキルここまで*/

/*ビフォーアフター*/

.beforeafter{
  padding: 100px 0;
  padding-bottom: 50px;
  padding-top: 5px;
}

.beforeafter .container{
  width: 90%;
  margin: 0 auto;
 max-width: 1280px;
          }

 .beforeafter .sub_title{
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 20px;
   text-align: center;
    }


  .beforeafter p{
    text-align: center;
    margin-bottom: 20px;
  }
/*ビフォーアフターおわり*/


/*すきなもの*/
.favorite{
  color: #392a28;
  /*padding: 50px 0;
  padding-top: 10px;*/
  padding: 100px 0;
  padding-top: 130px;/*自己紹介文とスキルの間*/
  margin-bottom: 10px;
  background-color: #fffdfa;
  }
  
  .favorite .container{
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
  margin-bottom: 10px;/*ボタンを下に下げる*/
  }

  
  .favorite .sub_title{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .favorite h1{
    font-size: 50px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }


  /*　★★★カーソルあてると文字★★★　*/

  .favorite-picture {
    width:			280px;
    height:			auto;
    overflow:		hidden;
    margin:			10px 8px 10px 16px;
    position:		relative;	/* 相対位置指定 */
  }  

  .favorite-picture .caption {
    font-size:		130%;
    text-align: 		center;
    padding-top:		120px;
    color:			#fff;
  }
  
  .favorite-picture .mask {
    width:			100%;
    height:			100%;
    position:		absolute;	/* 絶対位置指定 */
    top:			0;
    left:			0;
    opacity:		0;	/* マスクを表示しない */
    background-color:	rgba(249, 10, 141, 0.4);	/* マスクは半透明 */
    -webkit-transition:	all 0.2s ease;
    transition:		all 0.2s ease;
    border-radius: 30px;
  }

  .favorite-picture img{
    width: 100%;
    border-radius: 30px;
  }

  .favorite-picture:hover .mask {
    opacity:		1;	/* マスクを表示する */
  }

  /*　★★★カーソルあてると文字おわり★★★　*/

  .favorite .row{
    display: flex;
  justify-content:space-between;
   margin-top: 10px;/*好きなものタイトルと画像の間*/
  }
  

 
  
  @media only screen and (max-width: 960px){
    
    .favorite{
      width: 100%;
      color: #392a28;
      background-color: #fffdfa;
      padding-bottom: 10px;
      }
      
    .favorite .container{
      width: 100%;
      }

.favorite .row{
  width: 100%;
  display:block;
 }
    
    .favorite .col{
      width: 60%;

  }

/**/.favorite-picture {
  width:			280px;
  height:			auto;
  overflow:		hidden;
  margin:			10px 8px 10px 16px;
  position:		relative;	/* 相対位置指定 */
 margin-top: 0 auto;
}  

.favorite-picture .caption {
  font-size:		130%;
  text-align: 		center;
  padding-top:		120px;
  color:			#fff;
}

.favorite-picture .mask {
  width:			100%;
  height:			100%;
  position:		absolute;	/* 絶対位置指定 */
  top:			0;
  left:			0;
  opacity:		0;	/* マスクを表示しない */
  background-color:	rgba(249, 10, 141, 0.4);	/* マスクは半透明 */
  -webkit-transition:	all 0.2s ease;
  transition:		all 0.2s ease;
}

.favorite-picture img{
  width: 100%;
}

.favorite-picture:hover .mask {
  opacity:		1;	/* マスクを表示する */
}

/*　★★★カーソルあてると文字おわり★★★　*/
/**/

  }
/*FAVORITEここまで*/




/*-----ボタン全部この設定になる----*/
.btn{ 
  font-size: 18px;
  border: solid 1px #4f4644;
  border-radius: 100px;/*角を丸くする*/
  display: inline-block;/*高さ？*/
  width: 270px;
  line-height: 60px;/*たてはば　行間を広げて高さを出す*/
  text-align: center;
  transition: .2s;/*カーソル合わせたときに色戻る速度*/
} 

.btn:hover{
color: #f51759;
border: solid 1px;
transition: .2s;/*カーソル合わせたときに色変わる速度*/
}
/*-------------------------*/
  


@media only screen and (max-width: 960px){
  .about .row{
   display:block;
  }
  
  .about .box1{
    width: 100%;}/*真ん中の空き調整*/
    
    .about h1{
      font-size: 50px;/*調整*/
    }

    .about .text{
      font-size: 160px;
      line-height: 1.66;/*行間*/
      padding:50px 0;
      padding-top: 30px;
      padding-bottom: 40px;
    }
    .about .box1{
      width: 100%;
     background-color: rgb(255, 115, 0);
    font-size: 30px;
    text-align: center;
    }

    .aboutme-photo img { width: 20%; }
    
    .about .about-text2{
      width: 100%;
      padding: 30px;
      background-color: rgb(255, 115, 0);
      }
}




  /*---------WORKSセクション1-----------*/
  .works_section1{
  color: #392a28;
  padding: 80px 0;
}

.works_section1 .container{
width: 90%;
margin: 0 auto;
max-width: 1280px;
}

.works_section1 .sub_title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}

.works_section1 h1{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;

}

.works_section1 .row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.works_section1 .col{
  width: 48%;/*画像サイズ*/
  }

  .works_section1 .text{
  line-height: 1.8;
margin-bottom: 50px;
  }

  .works_section1 img{
border-radius: 20px;
  }

 /*ここから @media only screen and (max-width: 960px){
    .works_section1 .row{
      flex-wrap: wrap;/*時と場合によって改行
    }
   

    .works_section1 .col{
      width: 100%;/*画像サイズ
      margin-bottom: 30px;
      }・
  }*いる/

  /*---------worksセクション1おわり-----------*/


/*---------worksセクション2-----------*/

/*banner画像*/

.works-detail{
  width: 90%;
  color: #392a28;
  padding: 100px 0;
  padding-top: 20px;
  padding-bottom: 40px;
  margin: 0 auto;
  }
  
  .works-detail .container{
    width: 45%;/*吹き出し幅の調整*/
  max-width: 1280px;
  padding-top: 10px;
  margin-bottom:20px;
  margin: 0 auto;
  }
  
  .works-detail .row{
    width: 90%;/*画像の大きさ*/
   margin: 0 auto;
   margin-top: 15px;
   margin-bottom: 40px;/*画像とテーブルの間空き調整*/
  }
  
 
  
  .works-detail h1{
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin: 60px 20px 60px;
    color: #ffffff;

  }
  
  /*タイトル文字装飾*/
  .works-detail h1 {
    position: relative;
    margin-bottom: 2em;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    background: #e3acac
  }
  
  .works-detail h1:before,
  .works-detail h1:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    background: #e3acac
  }
  
  .works-detail h1:before {
    bottom: -15px;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  
  .works-detail h1:after {
    bottom: -30px;
    left: 50px;
    width: 15px;
    height: 15px;
  }


/*タイトル文字装飾おわり*/


  .works-detail img{
  border-radius: 10px;/*画像の部分の角を丸める*/
  display: block;
  margin-left: auto;
   margin-right: auto;;
  }
  
  
  .works-detail .blue{
    color: rgb(66, 167, 234); 
    text-decoration:underline
    }
    
  
  @media only screen and (max-width: 960px){
    .works-detail .row{
      width: 85%;/*画像の大きさ*/
      margin-top: 50px;/*タイトル下*/
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
   
    
    .works-detail .col{
      width: 100%;/*真ん中の空き調整*/
      margin-bottom: 20px;
  }

  .works-detail img{
   width: 100%;
    }
    
    .works-detail .container{
      width: 90%;/*吹き出し幅の調整*/
      }

      .works-detail h1{
        font-size: 19px;
        margin: 25px 15px 0px;
      }


  }
  

/*テーブル*/

.table-2{
  width: 100%;
  max-width: 1280px;
  font-size: 14px;
  line-height: 1.8;/*行間*/
  padding-top: 20px;
  padding-bottom: 50px;
   margin: 0 auto;
}


  
.table-2 table tr{
   width: 70%;
    padding: 20px 0;
    margin: 0 auto;
    display: block;    
    border-bottom: solid 1px #4f4644;
    line-height: 1.5;
    }
  
  
.table-2 table tr th{
     width: 280px;/*見出しの幅の調整。今ターゲットに合わせて設定してる*/
     font-size: 17px;
      }
  
.table-2 table td{
  width: 1000px;
        font-size: 16px;
             }

.table-2 table img{
  margin-top: 10px;
margin-left: 10px;
}

.works-detail .center{
  margin-top: 30px;
  margin-bottom: 40px;
  text-align: center;
}

.beforeafter .center{
  margin-top: 70px;
  margin-bottom: 35px;
  text-align: center;
}


@media only screen and (max-width: 960px){

.table-2{
  width: 100%;
line-height: 1.8;/*行間*/
padding-top: 10px;
padding-left: 30px;/*テーブルの横線の左側空ける*/
padding-bottom: 50px;

}

table {
  width: 90%;
 border-collapse: collapse;
}

.table-2 table tr{
width: 100%;
}

.table-2 table th{
  width: 100%;
}

.table-2 table tr{
    width: 100%;
 }

.table td, table th {
  width: 100%;
  display: block;
  padding: 10 px;
}
.table-2 table th {
  width:100% ;
}

.table-2 table tr th{
  width: 190px;
}

.table-2 table img{
width: 95%;
}

.works-detail .center{
  margin-top: 10px;
  margin-bottom: 30px;
  text-align: center;
}

}
/*後でけす.table-1 table tr{
    width: 100%;
     padding: 20px 0;
     margin: 0 auto;
     display: block;    
     border-bottom: solid 1px #4f4644;
     line-height: 1.5;
     background-color: aquamarine;
     }
  
     .table-1 table tr th{
      width: 180px;/*見出しの幅の調整。今ターゲットに合わせて設定してる*/
      /*font-size: 18px;
      background-color: #f57898;
       }*/



/***　ルーズリーフ風ボックス　***/
/*外枠の設定*/
/*.note-box {
  width: 70%;
  border: solid 2px #999; /*外枠の線*/
 /* padding: 0 1em 0 2em; /*内側の余白*/
 /* margin: 0 auto;
  margin-bottom: 50px;}

/*文字、罫線の設定*/
/*.note-box p {
  border-bottom: dashed 1px #ccc; /*罫線*/
 /* line-height: 1.5; /*行の高さ*/
  /*padding: 0.5em 0 0.5em 0.5em; /*文字の位置*/
  /*margin:0;}
.note-box p:last-of-type {
  border-bottom: none;
}

/*---------worksセクション2おわり-----------*/

/*お問い合わせセクション*/
  .contact_section1{
    color: #392a28;
    padding: 80px 0;
  }
  
  .contact_section1 .container{
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
  }
  


 /*jikken*/
 .before_after_slider {
  position: relative;
  overflow: hidden;
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}

.box_before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  border-right: 5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 10px 0 15px -13px #000;
}

.box_before img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.box_before::before {
  content: '';
  z-index: 1;
  position: absolute;
  top: 0;
  right: -28px;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 10px 0 15px -13px #000;
}

.slider_range {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: col-resize;
}



@media only screen and (max-width: 960px){
.beforeafter .container{
  width: 350px;
}

  .before_after_slider {
  width: 350px;
  height: 260px;
    margin: 0 auto;
  }

  .box_before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    border-right: 5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 10px 0 15px -13px #000;
  }
  
  .box_before img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }
  
  .box_after img {
   
    width: 100%;
    height: 100%;
    
  }
  
  .box_before::before {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    right: -27px;
    bottom: 0;
    width: 45px;
    height: 45px;
    margin: auto;
    border: 5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 10px 0 15px -13px #000;
  }
  
  .slider_range {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: col-resize;
  }
}