@charset "utf-8";
h1{
    color: #2f3e44;
    font-size: 64px; 
    text-align: left;
    padding-top: 20px;
}
h2{
    color: #2f3e44;
    font-size: 32px;
}
h3{
    color: #2f3e44;
    font-size: 20px;
}
p{
    color: #2f3e44;
    font-size: 16px;
}

nav{
    width: 1080px;
    height: 100px;
    margin: 0 auto;

}

ul{
    display: flex;
    list-style: none;
    height: 95px;
    justify-content: flex-end;
}
ul li{
    padding-top: 10px;
}
ul li a{
    padding: 40px 30px;
    text-decoration: none;
    color: #2f3e44;
}
ul li a:hover{
    color: #555;
}

.top{
    height: 800px;
    text-align: center;
    margin: 0 auto;
}
.top img{
    margin-top: 30px;
    height: 600px;
}

/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:2%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #2f3e44;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #2f3e44;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#2f3e44;
}


.Service{
    width: 1080px;
    margin: 0 auto;
    margin-top: 150px;
}
.Servicebox{
    display: flex;
    text-align: center;
    gap:20px;
    padding: 20px;
}
.Servicebox div{
    height: 400px;
    width: 340px;
}
.Servicebox h2{
    margin-top: 10px;
}
.Servicebox img{
    margin: 30px;
}
.Servicebox p{
    text-align: left;
    padding: 20PX;
}

.works{
    width: 1080px;
    margin: 0 auto;
    margin-top: 150px;
}
.workscontner{
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    justify-content: center;
    gap:20px;
}
.worksbox{
    height: 400px;
    width: 340PX;
}
.worksbox img{
    height: 300px;
    width: 300px;
}

.about{
    width: 1080px;
    height: 500px;
    margin: 0 auto;
    margin-top: 150px;
    position: relative;  
}
.aboutin{
    display: flex;
}

.meishi{
    height: 300px;
    width: 600px;
    display:flex;
    border: #2f3e44;
    border-style: solid;
    margin: 30px;
}
.meishi ul{
    display: flex;
    list-style: none;
    height: 180px;
    flex-flow: column;
    justify-content: space-between;
    margin-top: 60px;
    margin-right: 60px;
    
}
.meishi img{
    margin: 0 auto;
    margin-top: 50px;
    width: 200px;
    height: 200px;
}


.botan{
    justify-content: end;
    width: 300px;
    position: absolute;
    right: 0px;
    bottom: 50px;
}
/*== 矢印の線がループして伸縮 */

.btnlinestretches5{
    /*線の基点とするためrelativeを指定*/
  position:relative;
    /*リンクの形状*/ 
  color:#333;
    padding: 10px 0;
  display:inline-block;
    text-decoration: none;
    outline: none;
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #333;
}

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-4px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
    animation: arrowlong02 2s ease infinite;
}
@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:105%;opacity:1}
    100%{width:105%;opacity:0}
}

@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    80%{left:103%;opacity:1}
    100%{left:103%;opacity:0}
}

.contact{
    width: 100%;
    height: 300px;
    margin: 0 auto;
    margin-top: 150px;
    background-color: #c7d8d9;
   

}
.contactinner{
    width: 1080px;
    height: 280px;
    margin: 0 auto;
    position: relative;
}

#footer{
    position: relative;
    width: 100%;
    height: 250px;
    margin: 0 auto;
    background-color: #91bbc1;
}
.footer{
    width: 1080px;
    height: 100px;
    margin: 0 auto;
}
footer div nav{
    height: 30px;
    width: 400px;
    display: inline;
    padding: 0 10px;
}
footer div nav ul{
    padding-top: 30px;
    height: 50px;
}
.privacy{
    width: 100%;
    height: 50px;
    margin-top: 50px;
    text-align: end;
}
.privacy p a{
    padding: 20px 30px;
    text-decoration: none;
    color: #2f3e44;
}
.privacy a:hover{
    color: #555;   
}
.copy{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

}
/*========= ページトップのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
	display: block;
	width: 100px;
	height: 100px;
	color: #333;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    /*背景画像の指定*/
	background: url("../img/片手をあげる人のピクトグラム.png") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 100px;
	height: 130px;
    /*背景画像の指定*/
	background: url("../img/after.png") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}

/*Page Topと書かれたテキストの位置*/
#page-top span{
    position: absolute;
    bottom: -20px;
    right: 22px;
	color: #2f3e44;
}
/*検証のためのCSS*/
section{
padding: 500px 0;
}
  


.abouttop{
    height: 450px;
    width: 1080px;
    margin: 0 auto;
}

.hobby{
    height: 660px;
    width: 1080px;
    margin: 0 auto;
    
}
.hobbybox{
    display: flex;
    text-align: center;
    gap:20px;
    padding: 20px;
}
.hobbybox div{
    width: 340px;
}
.hobbybox p{
    margin-left: 18px;
    margin-right: 18px;
    text-align: left;
    padding: 10px;
}
.hobbybox img{
    text-align: center;
    margin: 0 auto;
    display: block;
    height: 250px;
    width: 250px;
}

.contactpage{
    width: 1080px;
    height: 1200px;
    margin: 0 auto;
}
.contacttop{
    height: 300px;
}
.form{
    height: 900px;
    text-align: center;
}

@keyframes gnaviAnime{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}




@media screen and (max-width:1200px)  {
    /*========= ナビゲーションのためのCSS ===============*/

    /*アクティブになったエリア*/
    #g-nav.panelactive{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
	    top: 40%;
	    width:100%;
        height: 100vh;
    }

    /*丸の拡大*/
    .circle-bg{
        position: fixed;
	    z-index:3;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #999;
        /*丸のスタート位置と形状*/
	    transform: scale(0);/*scaleをはじめは0に*/
	    right:-50px;
        top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
    }

    .circle-bg.circleactive{
	    transform: scale(50);/*クラスが付与されたらscaleを拡大*/
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav-list{
        display: none;/*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav.panelactive #g-nav-list{
        display: block; /*クラスが付与されたら出現*/
    }

    /*ナビゲーション*/
    #g-nav ul {
	    opacity: 0;/*はじめは透過0*/
        /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
        position: absolute;
        z-index: 999999;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity:1;
    }

    /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
    #g-nav.panelactive ul li{
        animation-name:gnaviAnime;
        animation-duration:1s;
        animation-delay:.2s;/*0.2 秒遅らせて出現*/
        animation-fill-mode:forwards;
        opacity:0;
    }

    /*リストのレイアウト設定*/
    .gnav{
        display: contents;
        height: 100px;
    }
    #g-nav li{
	    text-align: center; 
	    list-style: none;
    }

    #g-nav li a{
	    color: #ffffff;
        font-size: 2rem;
	    text-decoration: none;
	    padding:20px;
	    display: block;
	    text-transform: uppercase;
	    letter-spacing: 0.1em;
	    font-weight: bold;
        z-index: 999999;
    }

    /*========= ボタンのためのCSS ===============*/
    .openbtn{
	    position:fixed;
	    top:10px;
	    right: 10px;
	    z-index: 9999;/*ボタンを最前面に*/
	    cursor: pointer;
        width: 50px;
        height:50px;
    }
	
    /*×に変化*/	
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
	    background-color: #666;
  	    width: 45%;
    }

    .openbtn span:nth-of-type(1) {
	    top:15px;	
    }

    .openbtn span:nth-of-type(2) {
	    top:23px;
    }

    .openbtn span:nth-of-type(3) {
	    top:31px;
    }

    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn.active span:nth-of-type(2) {
	    opacity: 0;
    }

    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    h1{
        font-size: 48px;
    }
    nav{
        width: 100%;    
    }
    .top{
        height: 500px;
    }
    .Service{
        width: 750px;
    }

    .Servicebox{
        width: 750px;
        gap: 15px;
    }
    .Servicebox p{
        padding: 5PX;
    }
    .works{
        width: 750px;
    }
    .workscontner{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .worksbox{
        flex: 1;
        margin: 10px;
        padding: 20px;
        text-align: center;

    }
    .about{
        width: 750px;
        margin-top: 100px;
        position: relative;  
    }
    .aboutin{
        display: flex;
        justify-content: center;
    }
    .meishi{
        width: 550px;  
        height: 250px;         
    }
    .meishi img{
        margin: 0 auto;
        margin-top: 30px;
        width: 180px;
        height: 180px;
    }
    .meishi ul{
        height: 180px;
        margin-top: 30px;
        margin-right: 30px;
    }

    
    .botan{
        width: 150px;
        bottom: -20px;
    }

    .contactinner{
        width: 750px;
        height: 280px;
        position: relative;
    }
    .contactinner p{
        margin-left: 20px;
        margin-top: 20px;
    }
    .contactinner .botan{
        position: absolute;
        bottom: 20px;
    }
    .footer{
        width: 750px;
    }    


    .abouttop{
        width: 750px;
    }
    
    .hobby{
        height: 660px;
        width: 750px;       
    }
    .hobbybox{
        display: flex;
        text-align: center;
        gap:10px;
        padding: 10px;
    }

    
    .contactpage{
        width: 750px;
    }
    .contacttop{
        height: 300px;
    }
    
}


@media screen and (max-width:750px)  {
    .top img{
        margin-top: 80px;
        height: 400px;
        width: 400px;
    }
    .Service{
        width: 420px;
    }
    .Servicebox{
        width: 420px;
        display: block;
        text-align: center;
        align-items: center;
    }
    .works{
        width: 420px;
    }
    .workscontner{
        display: block;
    }
    .about{
        width: 420px;
        margin-top: 100px;
    }
    .meishi{
        width: 420px;           
    }
    .meishi ul{
        height: 160px;
        margin-top: 30px;
        margin-right: 5px;
    }
    .meishi img{
        margin-top: 0PX;
        width: 140px;
        height: 140px;
    }

    .contactinner{
        width: 420px;
        height: 280px;
        position: relative;
    }
    .contactinner .botan{
        position: absolute;
        bottom: 20px;
    }
    .footer{
        width: 420px;
    }

    .abouttop{
        width: 420px;
    }
    
    .hobby{
        height: 660px;
        width: 420px;       
    }
    .hobbybox{
        display: block;
        text-align: center;
    }

    .contactpage{
        width: 420px;
        height: 1200px;
        margin: 0 auto;
    }
    .contacttop{
        height: 300px;
    }
    .form{
        height: 900px;
        width: 420px;
        align-items: center;
    }
}