@charset "UTF-8";


/* *{
    border: 0.5px solid #336699;
} */


/*すべてのページに適用される設定*/
html{
    color: #336699;
    font-family: はんなり明朝;
}

a:link{
    color: #336699;
    text-decoration: none;
}
a:visited{
    color: #336699;
    text-decoration: none;
}
a:hover{
    color: #336699;
    text-decoration: none;
    opacity: 0.7;
}
a:active{
    color: #336699;
    text-decoration: none;
}

p, li {
    color: #336699;
    line-height: 1.7;
}

img{
    width: 100%;
    height: auto;
}




/*すべてのページに適用される - ヘッダー*/
.top{
    background-image: url("../images/top3.jpg");
    padding-bottom: 80px;
    padding-top: 80px;
    margin-top: -100px;
}
.top p{
    color: #FFFFFF;
    font-size: 1.4em;
}
.nav1{
    margin-right: 43px;
}

.nav1 ul {
    list-style-type: none;
}

.nav2 ul {
    list-style-type: none;
}


/*== ボタン共通設定 */
.btn02 {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width:100%;
    max-width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    outline: none;
}

/*ボタン内側の設定*/
.btn02 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転（奥に） */

/* 回転前 */
.rotateback span:nth-child(1) {
    background: #fff;
    color: #336699;
    transform: rotateX(0deg);/*はじめは回転なし*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotateback:hover span:nth-child(1) {
    transform: rotateX(90deg);/* X軸に90度回転 */
}

/* 回転後 */
.rotateback span:nth-child(2) {
    background: #336699;
    color: #fff;
    transform: rotateX(-90deg);/*はじめはX軸に-90度回転*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotateback:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}
.rotateback:click span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}


/*========= レイアウトのためのCSS ===============*/

body{
    vertical-align:middle; 
    padding: 100px 0;
    text-align: center;
}
p{
    margin: 0 0 10px 0;
}



/*すべてのページに適用される - ヒーロー*/

.topga {
    width: 100%;
    overflow-x: hidden;
    margin-bottom: 50px;
}






/*すべてのページに適用される - メイン*/




#profile{
    justify-content: center;
}
#profile .profileBun p{
    text-align: left;
}

#profile .profileRyakureki{
    width: 550px;
    margin: 0 auto;
}
#profile .profileRyakureki p{
    text-align: left;
}

.profilegazou{
    width: 200px;
    margin-right: 20px;
}

.profilebig{
    display: flex;
    justify-content: center;
}


.laser {
    position: relative;

    &::before,&::after {
        position: absolute;
        content: "";
        display: block;
        z-index: -1;
        }

    &::before {
        background-color: #f4eff8;
        top: 0;
        left: 12%;
        width: 1px;
        height: 80vh;
        margin-top: 11vh;
        }

    &::after {
        background-color: #f4eff8;
        top: 0;
        right: 10%;
        width: 1px;
        height: 80vh;
        margin-top: 11vh;
        }
}




.workstachi{
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    width: 90vw;
    gap: 10px;
    margin-left: 4%;
}
.workstachi img:hover {
    transform: translateY(-9px);
    box-shadow: 0px 8px 18px -5px rgba(85, 85, 85, 0.75);
}
.workstachi img{
    margin-bottom: 10px;
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    box-shadow: 0px 4px 15px -5px rgba(85, 85, 85, 0.75);
    vertical-align: bottom;
}
.workstachi_inbox{
    width: 300px;
    height: 300px;
}


#work1 img:hover{
    transform: translateY(-6px);
}
#work1 img{
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    vertical-align: bottom;
}

.work001{
    display: flex;
    justify-content: center;
}
.work001 img{
    width: 95%;
}

.work1saibu img{
    width: 60%;
}
.work1s{
    text-align: right;
}
.work1s p{
    display: inline-block;
    text-align: left;
    width: 40%;
}
.worksnimodoru{
    text-align: center;
    display: inline-block;
    margin-top: 2%;
}
.migimurasaki img:hover{
    transform: translateY(-6px);
}
.migimurasaki{
    width: 40px;
    margin: 20px auto;
}
.migimurasaki img{
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    vertical-align: bottom;
}
.idou{
    display: flex;
    justify-content: center;
}
.migi img:hover{
    transform: translateY(-6px);
}
.migi{
    width: 40px;
}
.migi img{
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    vertical-align: bottom;
}
.hidari{
    width: 40px;
}
.hidari img:hover{
    transform: translateY(-6px);
}
.hidari img{
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    vertical-align: bottom;
}
.work002{
    width: 70%;
    margin: 0 auto;
}
.work004{
    width: 30%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap:5px;
}
.work006{
    width: 40%;
    margin: 0 auto;
}

.work012{
    width: 30%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap:5px;
}
.work030{
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.work030 img{
    margin: 5px;
}
.work030 video{
    width: 100%;
    margin: 5px;
    display: flex;
    justify-content: center;
}




.contact1{
    display: flex;
    justify-content: center;
}
.contact1 img{
    margin-top: -10%;
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    vertical-align: bottom;
    width: 80px;
}
.contact1 p{
    width: 260px;
    margin-right: -3%;
    text-align: left;
}

.contact1 img:hover {
    transform: translateY(-9px);

}

.kwskmidashi p{
    color: #c4cdd8;
    font-size: 1.1em;
    margin-bottom: 7px;
}
.kwskmidashi1 p{
    color: #c4d8c7;
    font-size: 1.1em;
    margin-bottom: 7px;
}
.kwskmidashi2 p{
    color: #cfc4d8;
    font-size: 1.1em;
    margin-bottom: 10px;
}
.accordion_header p{
    color: #ffffff;
}
.wrap-video1{
    display: block;
    margin-left: -44%;
    opacity: 0.8;
    width: 98vw;
    padding-right: 2%;
    overflow-x: hidden;
    
}

.wrap-video2{
    display: none;
}
.uraBanashi{
    font-size: 0.6em;
    opacity: 0.4;
}







/*====================================================================
.s_06 .accordion_one
====================================================================*/
.s_06 .accordion_one {
    max-width: 1024px;
    margin: 0 auto;
  }
  .s_06 .accordion_one .accordion_header {
    background-color: #c6bdcf;
    color: #fff;
    font-size: 16px;
    padding: 20px 11%;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
  }
  .s_06 .accordion_one:nth-of-type(2) .accordion_header {
      background-color: #b0c0d1;
  }
  .s_06 .accordion_one:nth-of-type(3) .accordion_header {
      background-color: #c4d8d2;
  }
  .s_06 .accordion_one .accordion_header:hover {
    opacity: .8;
  }
  .s_06 .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
  }
  .s_06 .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
  }
  .s_06 .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
  .s_06 .accordion_one .accordion_header .i_box .one_i:before, .s_06 .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
  }
  .s_06 .accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
  }
  .s_06 .accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
  }
  .s_06 .accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .s_06 .accordion_one .accordion_inner {
    display: none;
    padding: 30px 30px;
    border-left: 1px solid #c6bdcf;
    border-right: 1px solid #c6bdcf;
    border-bottom: 1px solid #c6bdcf;
    box-sizing: border-box;
  }
  .s_06 .accordion_one:nth-of-type(2) .accordion_inner {
    border-left: 1px solid #b0c0d1;
    border-right: 1px solid #b0c0d1;
    border-bottom: 1px solid #b0c0d1;
  }
  .s_06 .accordion_one:nth-of-type(3) .accordion_inner {
    border-left: 1px solid #c4d8d2;
    border-right: 1px solid #c4d8d2;
    border-bottom: 1px solid #c4d8d2;
  }
  .s_06 .accordion_one .accordion_inner p.txt_a_ac {
    margin: 0;
  }
  .s_06 .accordion_one .accordion_inner .closeArea {
    width: 180px;
    margin: 0 auto;
  }
  .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #c6bdcf;
    padding: 15px 15px 15px 20px;
    text-decoration: none;
    line-height: 1.3;
    color: #fff;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
  }
  .s_06 .accordion_one:nth-of-type(2) .accordion_inner .closeArea .close_box a.close_btn {
      background-color: #b0c0d1;
  }
  .s_06 .accordion_one:nth-of-type(3) .accordion_inner .closeArea .close_box a.close_btn {
      background-color: #c4d8d2;
  }
  .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn:hover {
    opacity: .8;
  }
  .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 18px;
    height: 18px;
  }
  .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:before, .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:after {
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(45deg);
    transform-origin: center center;
  }
  .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
  }


.kwskPic{
    margin: 2%;
}
.kwskPic img:hover {
  opacity: 0.8;
}

.kwskBoxE p{
    color:#c6bdcf;
}



.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 100;
}
.modal-img {
    max-width: 95vw;
    max-height: 95vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1vw;
    background-color: white;
    z-index: 100;
}
.modal-img img {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    z-index: 100;
}





  @media screen and (max-width: 1024px) {
    .s_06 .accordion_one .accordion_header {
      font-size: 18px;
    }
    .s_06 .accordion_one .accordion_header .i_box {
      width: 30px;
      height: 30px;
      margin-top: -15px;
    }
    .s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
      font-size: 14px;
    }
  }
  @media screen and (max-width: 767px) {
    .s_06 .accordion_one .accordion_header {
      font-size: 16px;
      text-align: left;
      padding: 15px 60px 15px 15px;
    }
  }
  



.modoru img{
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    vertical-align: bottom;
    width: 45px;
    z-index: 50;
}

.modoru p{
    color: #b6cfd9;
    font-size: 0.8em;
    z-index: 50;
}

/*すべてのページに適用される - フッター*/


.modoru{
      position: fixed; /*要素を固定*/
      bottom: 40px;
      right: 50px;
      z-index: 50;
}
.modoru img:hover {
    transform: translateY(-9px);
}




  
  .wrap-video video{
    width: 45%;
    height:45%;
  }
  .start {
	background-color: #ffffff;
	position: fixed;
    bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}



  





.copyright1{
    margin-bottom: -120px;
}

.copyright1 p{
    color: #FFFFFF;
    padding-top: 75px;
    padding-bottom: 75px;
    text-align: center;
    background-color: #5179a1;
    margin-top: 150px;
}

.copyright2{
    margin-bottom: -120px;
}

.copyright2 p{
    color: #FFFFFF;
    padding-top: 75px;
    padding-bottom: 75px;
    text-align: center;
    background-color: #5179a1;
}

.copyright3{
    margin-bottom: -120px;
}

.copyright3 p{
    color: #FFFFFF;
    padding-top: 75px;
    padding-bottom: 75px;
    text-align: center;
    background-color: #5179a1;
    margin-top: 150px;
}





#wrapper{
    width:100%;
    height: 17vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
      margin-bottom: -150px;
      margin-top: 20px
    }


canvas{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    }

.midashi p{
    color: rgb(190, 211, 205);
    font-size: 1.3em;
    margin-top: 50px;
}
.kirehashi{
    width: 300px;
}
.kirehashi img{
    margin-bottom: -10px;
}
.kirehashiBox{
    justify-content: center;
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.instaIcon{
    margin: auto 0;
}
.instaUrl{
    margin: 0 auto;
    font-size: 0.8em;
}

















/*個別のスタイル*/
/*index.html*/



/*モバイル対応*/
@media (max-width: 767px){
    .nav1 ul {
        flex-wrap: wrap;
    }
    .nav1{
        margin-right: 0px;
    }

    .top{
        padding: 8vh 0;
        font-size: 1em;
    }
    
    .profilebig{
        flex-direction: column;
    }
    
    .nav1{
        margin-left: -10%;
    }
    .contact1 p{
        text-align: center;
    }
    
    .midashi p{
        color: rgb(190, 211, 205);
        font-size: 1.2em;
        margin-top: 30px;
    }
    .top{
        font-size: 0.9em;
    }

      .wrap-video video{
        width: 200%;
        height: 200%;
        transform: translate(-25%, 5%);
      }



      #profile .profileRyakureki{
        width: 100%;
        margin: 0 auto;
    }


    .profilegazou{
        margin: 0 auto;
    }

    .work001{
        flex-direction: column;
        margin: 10 auto;
    }
    .work001 img{
        width: 95%;
        margin-bottom: 4px;
    }
    .work00001{
        text-align: center;
    }
    .work1saibu img{
        width: 80vw;
    }
    .work1s{
        text-align: center;
    }
    .work1s p{
        font-size: 0.9em;
        width: 90%;
    }
    .work002{
        width: 95%;
    }
    .work004{
        width: 95%;
    }
    .work006{
        width: 95%;
    }

    .work012{
        width: 95%;
        margin: 0 auto;
        display: block;
        justify-content: center;
    }

    .contact1{
        flex-direction: column;
    }
    .contact1 p{
        margin: 0 auto;
    }
    .contact1 img{
        margin-top: 0%;
    }
    .wrap-video1{
        display: none;
    }
    .wrap-video2{
        display: block;
    }
    .wrap-video2 video{
        width: 75vw;
    }
    .work030{
        width: 95%;
    }






}

@media (max-width: 1200px){    
        .laser {
            position: relative;

            &::before,&::after {
                position: absolute;
                content: "";
                display: block;
                z-index: -1;
                }

            &::before {
                display: none;
                }

            &::after {
                display: none;
                }
        }
}


html{
    font-size: 62.5%;
}
body{
    font-size:1.6rem;/* 16px*/
    line-height: 2;
}


@media screen and (max-width: 640px) {/* 640px以下*/
    body{
    line-height: 2;
    }

}