@charset "UTF-8";
/*共通部分---------*/


html{font-size: 100%;
    scroll-behavior: smooth;
}
body{
    line-height: 1.7;
    color: #9C9595;
    background-color:white;
    font-family: 'Ayuthaya','ヒラギノ角ゴシック','Ayuthaya', cursive;
} 
a{text-decoration: none;
}
img{max-width: 100%;}


.wrapper{max-width: 1100px;
    margin: 0 auto;
    padding: 0 1%;
  font-family: 'Ayuthaya','ヒラギノ角ゴシック', cursive;
}
    
 
/*header-----------*/


.main-nav li{margin-left: 70px;　
	margin-top: 40px; 
}


.header-box {
  height: 80px;
}

header {
  position: fixed;
  top: 0;
  left: 90px;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  font-size:180%;
  font-family: 'Ayuthaya';
}

.logo2 {
	width: 130px;
    height:130px;
    transition: 1.0s ;
	margin-top:  5px;
}
.logo2:hover{opacity: 0.3 ; }

nav {
  width: 30%;
}

ul {
  width: 100%;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  width: 33%;
}

a {
  display: block;
  width: 100%;
  line-height: 80px;

}

.main-nav a{color:#C4C2C2;}
.main-nav a:hover{color:gray;}




/*top--------*/

.img_center {

}
.img_center img {width: 100%;height: 100%;
margin-right: 0px;
margin-left: -200px;
  margin-top: 0px;
	margin-bottom: 100px;
	animation-name:rotation-y ; 
    animation-duration: 7s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
	
}


.img_center2 img {width: 900px;
 margin-left:-150px;
  margin-top: 350px;
	opacity: 0.6 ;
}


.main_flex{display: flex}



/* アニメーション */
@keyframes rotation-y {
  0% {
        transform: rotateY(0); /* Y軸を中心に0°回転 */
    }
    25% {
        transform: rotateY(90deg); /* Y軸を中心に45°回転 */
    }
    50% {
        transform: rotateY(180deg); /* Y軸を中心に90°回転 */
    }
    75% {
        transform: rotateY(270deg); /* Y軸を中心に135°回転（裏） */
    }
    100% {
        transform: rotateY(360deg); /* Y軸を中心に180°回転（裏） */
	}}

.top-profile1{text-align: center;
font-family: 'ヒラギノ角ゴシック'; color:rgba(102,102,102); font-size:20px; margin-bottom: 10px;}

.top-profile2{text-align: center;
font-family: 'ヒラギノ角ゴシック'; color:rgba(102,102,102); font-size:15px; margin-bottom: 20px;}

.viewmore{text-align: center}
.viewmore:hover{opacity: 0.7 ; }

.flower3{text-align: right; }
.flower3 img{width:160px;margin-right: 120px ;margin-top: -50px;margin-bottom: 10px;}






/*プロフィール--------*/
#profile{background-color:#f1f0f0;}


.top2{margin-left: 100px; padding-top: 50px;}



.mainimg{text-align : center;
margin-top: 12px; margin-left: 40px;}



content_p img{width: 100px}





.content_photo,.content_p{
 width: 40%;margin-bottom: 100px



}

.content_photo{margin-left: 120px; }
.content_p{margin-top: 40px; margin-right: 50px;color: #9C9595;font-size: 17px;}

.main{
 display: flex;

}


.photo_size{width: 75%;  border: 5px solid #9C9595; margin-top:45px; }




.viewmore2{position: absolute;z-index: 1; margin-top: -260px;margin-left: 1100px;margin-bottom: -100px}
.viewmore2:hover{opacity: 0.1 ; }



/*矢印*/

.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;/*画面いっぱいにする場合100vh*/
	margin: -2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;/*着地点（サンプルは[class:cp_arrows]height300pxの50%）*/
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background:  #008BBB;
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}




/*アニメーション--------*/

.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 3s, transform 3s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}



.typing h1,h2 {
	color:#9C9595;
	font-size: 25px;
	text-align: center;
	font-family: 'Ayuthaya','ヒラギノ角ゴシック';;
	font-weight: normal;
	margin-bottom: -50px;
}
.typing span {font-size: 25px;}



/*プロフィール リンク飛んだ後--------*/
#profile2{background-color: white; font-family: 'Ayuthaya','ヒラギノ角ゴシック';}



.photo_size2{ margin-top: 75px; margin-left: -30px;margin-right: 10px;}

.main h2{margin-bottom: 10px;  color: #9C9595;font-weight: lighter;}

.wrapper h1{font-size: 44px;font-weight: normal; color:#8AC2D7}
.wrapper span{font-size: 25px;}
.main{margin:-100px auto -70px;}
.content_p{margin-left: 30px}
.content_p h4{color:#8AC2D7;}
.content_p h2{color:#8AC2D7;font-size: 30px;}

/*skill　HTMLなど*/

.skill_html{background-color:#f1f0f0;}
.skill_html p{color: #9C9595; margin: 50px;}
.skill_html h1{margin: 50px; margin-top: 50px;font-size: 55px;
font-weight: bold; 
color: rgba(0, 0, 0, 0);
text-shadow: 3px 3px 0 #fff;
-webkit-text-stroke: 0.2px #888;
text-stroke: 0.2px #888;
padding: 0 0 10px;
}


 




/*** 下から登場するアニメーション ***/
@keyframes updown-anim{
  0%{
    transform: translateY(110%); /*表示範囲外から*/
  }
  100%{
    transform: translateY(0); /*通常の位置へ*/
  }
}

/*** アニメーションさせる要素 ***/
.updown{
  display: flex;
  overflow: hidden;
}
.updown span{
  transform: translateY(110%); /*下（範囲外）に隠しておく*/
  display: block; /*ブロック要素に変更*/
}

/*** スクロールで画面に入った場合 ***/
.updown.active span{
  animation: 0.65s updown-anim linear forwards; /*一度だけのアニメーション（終了時点で固定）*/
}

/*** 各文字のアニメーション遅延時間 ***/
.updown span:nth-child(1) {
  animation-delay: 0s;
}
.updown span:nth-child(2) {
  animation-delay: 0.05s;
}
.updown span:nth-child(3) {
  animation-delay: 0.1s;
}
.updown span:nth-child(4) {
  animation-delay: 0.15s;
}
.updown span:nth-child(5) {
  animation-delay: 0.2s;
}
.updown span:nth-child(6) {
  animation-delay: 0.25s;
}
.updown span:nth-child(7) {
  animation-delay: 0.3s;
}
.updown span:nth-child(8) {
  animation-delay: 0.35s;
}
.updown span:nth-child(9) {
  animation-delay: 0.4s;
}
.updown span:nth-child(10) {
  animation-delay: 0.45s;
}
.updown span:nth-child(11) {
  animation-delay: 0,5s;
}
.updown span:nth-child(12) {
  animation-delay: 0.55s;
}
.updown span:nth-child(13) {
  animation-delay: 0.6s;
}
.updown span:nth-child(14) {
  animation-delay: 0.65s;
}
.updown span:nth-child(15) {
  animation-delay: 0.7s;
}
.updown span:nth-child(16) {
  animation-delay: 0.75s;
}


/*** 装飾用 ***/
.updown{
  font-weight: lighter;
  font-size: 2rem;
  margin: 2rem;
  margin-top: 100px;
  margin-left:50px; 
  color: #9C9595;
}




/*経歴--------*/


body p{color:  #9C9595 ;}

body h1 {
  font-size: 36px;
  margin: 0 0 30px;
  padding: 10px;
  font-weight: bold;
  color: #008BBB;
}
body h1 span{font-size: small;}

dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

dl dt {
  text-align: right;
  width: 8.5em;
  padding: 0.5em 1.0em 0.5em 0.5em;
  position: relative;
 color:  #8AC2D7;
}

dl dt::after {
  content: '●';
  position: absolute;
  right: -0.55em;
  top: 5px;
  font-size: 22px;
  color:  #8AC2D7;
}

dl dd {
  width: calc(100% - 8.5em);
  padding: 0.5em 2.0em 3.0em;
  border-left: 2px solid  #9C9595;
}

dl dd h2 {
  font-size: 22px;
  font-weight: bolder;
  margin: 0 0 10px;
  color:#008BBB;
}






/*線アニメーション*/
#container {
  width: 1420px;
  margin: 0;
}
.border{
	position: relative;
	text-align:center;
  margin: 0 auto ;
	
}
.border:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom:double 3px #8AC2D7;
	transform: translateX(-50%);
	animation-name: border_anim;
  animation-duration:0.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode:forwards;
	
}
@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}
/* textアニメーション */
.Headline{
  margin: 0;
  animation-name: SlideIn ;
  animation-duration: 0.2s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  opacity: 0;
  font-size: 170px;
  font-family: 'Ayuthaya','ヒラギノ角ゴシック';
  margin-left: 50px;
	margin-bottom: -20px;
   color:#fff;
  text-stroke: 0.5px #000;
  -webkit-text-stroke: 1px #008BBB;
}

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  50% {
    opacity: 0;
    transform: translateY(12px);
  }
75% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/*works*/


.works_container{display: flex; justify-content: space-between;}
.works_container img{width: 250px; height: 250px}
.wrapper2 h1{margin-left: 20px; font-size: 3rem;}
.works_item{margin-top: 100px;}
.works_container2 img{margin-left: -100px;width: 100%}
.works_container2{display: flex;justify-content: space-between;}
.works_container2>div{
    width: 40%;
}
.works_container2 h3{font-size: 35px;color:#8AC2D7;font-weight: lighter;}
.p_2{margin-left: 50px}
.works_item h3{color:#8AC2D7; font-size: 18px; border-bottom: dotted 3px  #008BBB; }
.works_item h3:hover{opacity: 0.1 ; }
.works_item img{  box-shadow: 20px 20px 0px 0  #f1f0f0;;border: solid 5px #f1f0f0; opacity: 0.9;}
.works_item img:hover{opacity: 0.1 ; }


.works_yazirusi{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
	
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/*== 無限に波紋が広がる */

.btnripple2{
    /*波紋の基点とするためrelativeを指定*/
	position: relative;
    /*波紋の形状*/
	display:inline-block;
	background:#8AC2D7;
	opacity:0.6;
	width:60px;
	height:60px;
	border-radius: 50% 10%;
	color:#ccc;
    outline: none;
    /*アニメーションの設定*/
    transition: all .6s;
	margin-left: 340px;
	margin-top: 30px;
}

/*hoverした際の背景色の設定*/
.btnripple2:hover{
	background: #008BBB;	
}

/*波形を2つ設定*/
.btnripple2::after,
.btnripple2::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left: -25%;
    top: -25%;
    /*波形の形状*/
    border: 0.5px solid #8AC2D7;
    width: 150%;
    height: 150%;
    border-radius: 50% 10%;
    /*はじめは不透明*/
    opacity: 1;
    /*ループするアニメーションの設定*/
    animation:3s circleanime linear infinite;
}

/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnripple2::before {
    animation-delay:1s; 
}

/*波形のアニメーション*/
@keyframes circleanime{
	0%{
	  transform: scale(0.38);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}

/*中央矢印*/
.btnripple2 span::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 38%;
    left: 45%;
    /*矢印の形状*/
    border: 14px solid transparent;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-color: #fff;
}


/*works　詳細　リンク飛んだ後--------WEBSITE*/
.main_pic_works img{text-align: center;width: 120%;margin-bottom: 0px;margin-top: 50px;margin-left: -7px;}
.main_pic_works{text-align: center;}
.works_comment{text-align: center;margin-left: 250px;width: 1000px;margin-bottom: 100px}
.works_comment span{font-weight: bold}
.works_center{text-align: left}
.works_comment h1{
font-size:4em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #fffff0;
	text-shadow: 
		0 0.05em 0.08em  #008BBB;
	margin-top: 10px;
}
.works_center span{color:#008BBB;font-size: 1.3em;font-weight: lighter;margin-bottom: 10px;}
.works_center p{margin-bottom: 20px;margin-top: 15px}
.png_center img{width: 40%; margin-bottom: 100px;}


.img-wrap {
  animation: img-wrap 3s cubic-bezier(.4, 0, .2, 1);
}

@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}


.color_img img{width: 40%; margin-top: 30px;margin-bottom: 70px;}
.color_img2 img{width: 100%;margin-top: 30px;margin-bottom: 70px;}


/*== 矢印の線がループして伸縮 */

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

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

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-4px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 1px solid  #008BBB;
    border-right: 1px solid  #008BBB;
    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}
}

.btnlinestretches5 span{color:#8AC2D7;margin-bottom: -5px; font-weight: bold;font-size: 40px;}

/*works　詳細　リンク飛んだ後--------バナーページ*/



/*お問い合わせ*/

 /* 点滅 */
.contact_p{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.contact_p { font-size: 20px;
        font-weight: bold;
	    font-family: 'Ayuthaya';
	    padding-top: 22px;
	margin-left: 100px;
        color:#8AC2D7;}


#contact{background-color:#f1f0f0;}

.box_mail{font-size: 350%; text-align: center;
padding-bottom: 100px;padding-top: 20px;font-family: 'Ayuthaya'; color:#f1f0f0;
  text-stroke: 0.5px #000;
  -webkit-text-stroke: 1px #008BBB;
}

 #contact a:hover {
    transform: translateX(35px);opacity: 0.7 ;}




	  




/*footer*/
footer{text-align: center; font-size: medium; letter-spacing: 0.12em; height: 150px; padding-top: 50px;background-color:#f1f0f0; }
.menu{display: flex; list-style: none; font-weight: bolder; width: 1100px; margin-left: 130px;}
.menu a{color:rgb(186,186,186); text-decoration: underline; font-family:'Ayuthaya'}
.menu a:hover{ 
color:gray; text-decoration: none;}
footer ul{justify-content:  space-around;}
.menu p{font-family:'Ayuthaya'; color:rgb(186,186,186);}


/*上にいくボタン*/

#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #008BBB;
  opacity: 0.4;
  border-radius:40% 80% 20% 60%;;
  margin: 20px;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 35px;
  height: 35px;
  top: -50px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}






/*スマホデザイン*/



  @media screen and (max-width: 640px) {
	  
	  
	.container_main{
    overflow:hidden;
}
 
	  

  .main-nav {
	  margin-left: -468px;font-size: 20px}
	  
	  .main-nav li{padding-left: 60px}
	  

 .logo2 {margin-left: 215px;margin-top: 55px; width:90px;height: 70px;transform: rotate(75deg);
	}

	  	.main_flex{  position:relative;height: 100vh;
  width:500px;
  height:700px;}
	  
	  .top-profile1{font-size:15px; font-weight: bold; color:rgba(157,156,156,0.93);}
	 .top-profile2{font-size: 13px;color:rgba(157,156,156,0.93);}
	  .img_center img {  position:absolute;
  }
	  .img_center2 img{margin-top: 280px;width: 60%;margin-left: 100px;
  }
	  
	  .viewmore3  img{width:100%;  margin-top: -100px;margin-left: 62px;} 
	  .slider {
	margin-bottom: -120px;
}

	  .top2 img{margin-left: -65px}
	  .col img{margin-left: 70px}
	  .col2 img{width:50%; margin-left: 0px;margin-top: 50px;margin-left: 50px}
	  
	  .contact_p{text-align: center;margin-left: 0px;}
	  .box_mail{font-size: 100%; margin-bottom: -100px;}
	
	  .col p{font-size: 20px; text-align: center}
	

	 .main {display: block;}
	  .main h2{font-size: 20px;margin-bottom: 20px}
	 .photo_size{width: 450vw;height: 45vh;object-fit: cover; margin-top: 70px;opacity: 0.8;}
	  
	 .top2{margin-left: 70px; padding-top: 30px}
	  
	  
	  .content_p img{padding-left: 35px}
	  .main img{text-align: left}
	  
	  
	.content_p{color: #979696; margin-left: 35px}  
	  
    .content_photo,.content_p{width: 80%;margin-bottom: 100px
    }
	  
	.content_photo{margin-left: 35px;margin-bottom: -10px}
	  
	.menu li{padding-right: 30px;
	  }
	.menu{width: 350px; font-size: 20px;margin-left:10px;}
   
	  
	/*矢印*/

.cp_arrows {
	margin: -3em auto;
}
	
 
.viewmore2  img{width:100%;  margin-top: 70px;margin-left: 490px; } 	  


.viewmore2{position:static;width:30%; margin:-280px 0px 0 -230px; z-index: 0;}
	  


	
/*topここまで--------*/
	  

	  
	  
	  
	  
/*Profile　リンク飛んだ後--------*/

.photo_size2{width: 100%;margin: -10px auto;}
	 
.content_p h4{color:#8AC2D7; margin-bottom: 3px}
.content_p h2{color:#8AC2D7;font-size: 27px;font-size: 30px;}

/*Profile　リンク飛んだ後 career--------*/
#container {width: 350px;}
body h1 {font-size: 20px;}
body p{font-size: 16px;}
dl dd h2 {font-size: 20px;}
	  
	  
	  	  
/*アニメーション--------*/

.Headline{margin-left: 0;
          text-stroke: 1px #000;
           -webkit-text-stroke: 0.5px #8AC2D7;
	  font-size: 90px;
  }


	  
/*タイピング--------*/
.typing h1,h2 {
	font-size: 14px;
		margin-bottom:  -40px;color: #8AC2D7;opacity: 0.5;
}
.typing span {font-size: 14px;color: #9C9595;opacity: 0.6;}
	  
	  
/*下から出てくる１２３--------*/
	  
.updown{
  font-weight: lighter;
  font-size: 30px;
  margin: 0 auto;
  margin-top: 50px;
  margin-left:0px; 
  color: #9C9595;
}
	  
.skill_pro div{width: 80%; margin: 0 auto ;}  	 
	  
	  
/*skill　HTMLなど*/	  
.skill_html h1{font-size: 29px;}
.wrapper h1{font-size: 35px;margin: 0 auto -10px; margin-left: 10px}
.wrapper span{font-size: 15px;}
.skill_pro div{width: 80%; margin: 0px auto 60px;}  
	  
/*Works*/  

.works_container{flex-direction: column; align-items: center;margin-top: -50px;}

.works_item{width: 100%;}
.works_item img{width: 100%;box-shadow: 18px 18px 0px 0 #f1f0f0;border: solid 5px #f1f0f0; }
.works_item h3{color:#8AC2D7; font-size: 20px; border-bottom: dotted 3px  #008BBB;    }
.main_pic_works img{width: 100%;}
.works_comment{margin-left: 0px;width: 330px;margin: 0 auto;}
.works_comment h1{font-size: 33px;margin-top: -60px;}
.works_center{width: 330px}
.png_center img{width: 100%;}  

/*works*/

.works_container2 img{width: 100%; margin: 0 auto;}
.works_container2{display: block;}
.works_container2>div{
    width: 100%;
}
.works_container2 h3{font-size: 25px;color:#8AC2D7;font-weight: lighter;margin-top: 30px;}
.p_2{margin-left: 50px}


/*== 無限に波紋が広がる */

.btnripple2{
	margin: 0 0 0 250px;
}
	  


}