@charset "utf-8";
/* CSS Document */

html{
	font-size:62.5%;
}


body:before{
	background:url(image/hayashi_back.jpg) no-repeat center;
	background-size:cover;
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
}

body{
	color:#fff;
	text-align:center;
	font-size:1.4rem;
}

.header{
	padding:50px 30px 20px;
}

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

.site-title-sub{
	margin:0 0 30px;
	letter-spacing:1px;
	font-size:4rem;
	font-weight:bold;
}

.site-title-sub::before,
.site-title-sub::after{
	content: '';
	display:inline-block;
	width:140px;
	height:2px;
	margin:0 30px;
	background-color:#fff;
	vertical-align:middle;
}

.site-title{
	margin:50px 0 0px;
	font-size:7.6rem;
}

.site-description{
	margin-top:10px;
	color:#fff;
	font-size:2rem;
}

.button{
	display:inline-block;
	width:200px;
	padding:20px;
	border-radius:4px;
	background-color:#db53f4;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:1px;
	font-size:2rem;
}
.button:hover {
	opacity:0.8;
}

.button-showy{
	background-color:#b846cc;
}

.buttons .button{
	margin:10px;
}

.about{
	padding:80px 30px;
	background-color:#fff;
	color:#333;
}

.heading{
position: relative;
  padding: 1.5rem 2rem;
  border-bottom: 3px solid #b38abb;
  border-left: 3px solid #b38abb;
  border-radius: 0 0 0 20px;
  font-size:3rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#641c71;
  }
.heading::before {
position: absolute;
  right: 50px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #b38abb transparent transparent transparent;
}


.heading::after{
position: absolute;
  right: 54px;
  bottom: -14px;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.about-text{
	margin:30px 0;
	line-height:2.5;
	font-size:1.6rem;
}

.suki-text{
	margin:10px 0;
	line-height:1.5;
	font-size:1.8rem;
	color:#A53299;
}

.button-ghost{
	border:1px solid #fff;
	background-color:rgba(255,255,255,0.15);
}
.work-box:nth-child(odd) .work-image{
	margin:60% 0 0;
}

.work-box:nth-child(odd) .work-description,
.work-box:nth-child(odd)::after{
	top:0;
}


.skills{
	padding:80px 0;
	background-color:#fff;
	color:#333;
}

.skills-wrapper{
	display:table;
	width:80%;
	margin:50px auto 0;
	table-layout:fixed;
}
.skill-box{
	display:table-cell;
}
.skill-icon{
	width:150px;
	height:150px;
	margin-bottom:30px;
	border:4px solid;
	border-radius:50%;
	color:#f1b400;
	font-size:8rem;
	line-height:142px;
}

.skill-title{
	margin:0 20px 20px;
	font-size:2rem;
	color:#999;
}
.skill-text{
	margin:0 20px;
	line-height:2.2;
	font-size:1.8rem;
	text-align:left;
}




.welf{
	padding:20px 30px;
	background-color:#fff;
	color:#333;
}


.welf-title{
	position:relative;
	display:inline-block;
	margin:30px 0 15px;
	padding-bottom:15px;
	letter-spacing:2px;
	font-size:3rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#641c71;
}
.welf-title::before,
.welf-title::after {
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	border-bottom:1px solid #999;
}
.welf-title::before{
	bottom:5px;
}




.welf-seisaku {
  position: relative;
  overflow: hidden;
  padding: 1rem 2rem 1.5rem 95px;
  word-break: break-all;
  border-top: 3px solid #ac79b5;
  border-radius: 12px 0 0 0;
  display:inline;
  font-size:3rem;
}

.welf-seisaku span {
  font-size: 40px;
  font-size: 2.8rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  border-radius: 10px 0 20px 10px;
  background: #ac79b5;
}




.gikai{
	padding:20px 30px;
	background-color:#fff;
	color:#333;
}

.gikai-text{
position: relative;
	font-size: 2rem; 
	color:#333;
	 }
	 
.gikai-text a{
position: relative;
	font-size: 2rem; 
	color:#333;
	 }
  
 .gikai-text:before{
	content: attr(data-number);
	display: inline-block;
	margin-right: 20px;
	color: #d069e2;
	font-size: 30px;
	} 





h3 {
  position: relative;
  padding: 8px 15px;
  margin-left: 40px;
  background: #deffde;
  border-radius: 20px;
}

h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  position: absolute;
  font-size: 15px;
  left: -40px;
  bottom: 0;
  color: #deffde;
}

h3:after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  position: absolute;
  font-size: 23px;
  left: -23px;
  bottom: 0;
  color: #deffde;
}

ul {
  border: solid 2px skyblue;/*線の設定*/
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul li {
  line-height: 1.2;
  padding: 0.5em 0;
  list-style-type: none!important;
  font-size:1.2em;
  color:#03F;
}

ul li:before {
  
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンの種類*/
  position: relative;
  left : -0.6em; /*左端からのアイコンまで*/
  color: skyblue; /*アイコン色*/
}

.line{
	padding:5px 30px;
	background-color:#FFF;
}

.contact{
	padding:80px 0 150px;
}

.contact-wrapper{
	display:table;
	width:80%;
	margin:50px auto 0;
	table-layout:fixed;
}
.contact-title{
	margin:0 20px 20px;
	font-size:1.8rem;
	color:#fff;
}
.contact-text{
	margin:0 20px;
	font-size:2rem;
	color:#fff;
}
.contact-icon{
	width:120px;
	height:120px;
	margin-bottom:50px;
	border:4px solid;
	color:#fff;
	font-size:6rem;
	line-height:105px;
}


.footer{
	background-color:#999;
	padding:12px 0;
	font-size:1.3rem;
}

/* --------------------------------
 * smart phone
 * -------------------------------- */

@media(max-width:768px){
  body {
    font-size: 1.3rem;
  }
  .heading {
    margin-top: 20px;
    font-size: 2.5rem;
  }
  .button:hover {
    opacity: 1;
  }

  /* --- header --- */
  .header {
    padding-top: 60px;
  }
  .site-title-sub {
    font-size: 1.7rem;
  }
  .site-title-sub::before,
  .site-title-sub::after {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
  .site-title {
    margin-top: 35px;
    font-size: 5rem;
  }

  /* --- about --- */
  .about-text {
    line-height: 1.8;
  }

  /* --- works --- */
  .works-wrapper,
  .work-box {
    display: block;
  }
.work-box::after{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:50%;
	background:no-repeat;
	background-size:100% 100%;
	opacity:0.9;
	transform:scaleY(-1)
}
  
  
  .work-image {
    display: none;
  }
  .work-description {
    position: relative;
  }
  .work-box::after {
    top: 0;
    height: 100%;
    background-size: cover;
    transform: none;
  }

  /* --- skills --- */
  .skills-wrapper,
  .skill-box {
    display: block;
  }
  .skill-box {
    margin: 40px auto;
  }
  .skill-icon {
    width: 100px;
    height: 100px;
    font-size: 5rem;
    line-height: 92px;
  }
  .skill-text {
    margin: 0;
  }

  /* --- contact --- */
  .contact {
    padding-bottom: 80px;
  }
  .contact-form {
    width: 80%;
  }
}